From 31b93b74baec91d7122a9fbb6bee9450b070bdfc Mon Sep 17 00:00:00 2001
From: Lzx667 <1018488753@qq.com>
Date: Wed, 12 Oct 2022 23:08:59 +0800
Subject: [PATCH] =?UTF-8?q?'=E7=99=BB=E5=BD=95=E5=8A=9F=E8=83=BD=E5=9F=BA?=
=?UTF-8?q?=E6=9C=AC=E5=AE=8C=E6=88=90'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.browserslistrc | 15 +++
.postcssrc.js | 44 +++++++++
package.json | 3 +
src/App.vue | 17 ++--
src/api/index.js | 11 +++
src/api/user.js | 21 ++++
src/css/index.css | 9 ++
src/main.js | 6 ++
src/router/index.js | 5 +
src/store/index.js | 3 +-
src/store/modules/user.js | 21 ++++
src/styles/index.less | 12 ++-
src/utils/request.js | 11 +++
src/utils/storage.js | 26 +++++
src/views/login/index.vue | 201 ++++++++++++++++++++++++++++++++++++++
vue.config.js | 9 +-
yarn.lock | 31 ++++++
17 files changed, 425 insertions(+), 20 deletions(-)
create mode 100644 .postcssrc.js
create mode 100644 src/api/index.js
create mode 100644 src/api/user.js
create mode 100644 src/store/modules/user.js
create mode 100644 src/utils/request.js
create mode 100644 src/utils/storage.js
create mode 100644 src/views/login/index.vue
diff --git a/.browserslistrc b/.browserslistrc
index 214388f..0ff5d65 100644
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -1,3 +1,18 @@
+# 配置文档参考：https://github.com/browserslist/browserslist
+
+# 兼容到超过百分之1的用户使用的浏览器
+# > 1%
+
+# 兼容到最近的两个版本
+# last 2 versions
+
+# ['Android >= 4.0', 'iOS >= 8']
> 1%
last 2 versions
not dead
+
+[Android]
+>=4.0
+
+[iOS]
+>= 8
\ No newline at end of file
diff --git a/.postcssrc.js b/.postcssrc.js
new file mode 100644
index 0000000..2acb20c
--- /dev/null
+++ b/.postcssrc.js
@@ -0,0 +1,44 @@
+/**
+ * PostCSS 配置文件
+ */
+
+module.exports = {
+ // 配置要使用的 PostCSS 插件
+ plugins: {
+ // 配置使用 autoprefixer 插件
+ // 作用：生成浏览器 CSS 样式规则前缀
+ // VueCLI 内部已经配置了 autoprefixer 插件
+ // 所以又配置了一次，所以产生冲突了
+ // 'autoprefixer': { // autoprefixer 插件的配置
+ // // 配置要兼容到的环境信息
+ // browsers: ['Android >= 4.0', 'iOS >= 8']
+ // },
+
+ // 配置使用 postcss-pxtorem 插件
+ // 作用：把 px 转为 rem
+ 'postcss-pxtorem': {
+ // lib-flexible 的 REM 适配方案：把一行分为 10 份，每份就是十分之一
+ // 所以 rootValue 应该设置为你的设计稿宽度的十分之一
+ // 我们的设计稿是 750，所以应该设置为 750 / 10 = 75
+ // 但是 Vant 建议设置为 37.5，为什么？因为 Vant 是基于 375 写的
+ // 所以必须设置为 37.5，唯一的缺点就是使用我们设计稿的尺寸都必须 / 2
+ // 有没有更好的办法？
+ // 如果是 Vant 的样式，就按照 37.5 来转换
+ // 如果是 我们自己 的样式，就按照 75 来转换
+ // 通过查阅文档，我们发现 rootValue 支持两种类型：
+ // 数字：固定的数值
+ // 函数：可以动态处理返回
+ // postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
+ // 它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
+ rootValue ({ file }) {
+ return file.indexOf('vant') !== -1 ? 37.5 : 75
+ },
+
+ // rootValue: 75,
+
+ // 配置要转换的 CSS 属性
+ // * 表示所有
+ propList: ['*']
+ }
+ }
+}
diff --git a/package.json b/package.json
index 973fbc9..4530574 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
+ "amfe-flexible": "^2.2.1",
+ "axios": "0.19.2",
"core-js": "^3.8.3",
"vant": "^2.12.50",
"vue": "^2.6.14",
@@ -31,6 +33,7 @@
"less": "^4.0.0",
"less-loader": "^8.0.0",
"lint-staged": "^11.1.2",
+ "postcss-pxtorem": "^6.0.0",
"vue-template-compiler": "^2.6.14"
},
"gitHooks": {
diff --git a/src/App.vue b/src/App.vue
index 05b7188..985a8df 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,14 @@
-
黑马头条
- 主要按钮
- 信息按钮
- 默认按钮
- 警告按钮
- 危险按钮
-
-
+
+
-
+
diff --git a/src/api/index.js b/src/api/index.js
new file mode 100644
index 0000000..044d7a7
--- /dev/null
+++ b/src/api/index.js
@@ -0,0 +1,11 @@
+
+/*
+ *用户登录api
+ */
+import { login, getSmsCode } from './user'
+export const loginAPI = login // 导出用户接口api
+
+/*
+ * 获取验证码
+ */
+export const getSmsCodeAPI = getSmsCode
diff --git a/src/api/user.js b/src/api/user.js
new file mode 100644
index 0000000..46b857f
--- /dev/null
+++ b/src/api/user.js
@@ -0,0 +1,21 @@
+/*
+ *用户相关的请求模块
+ */
+import request from '@/utils/request'
+/*
+ *登录模块
+ */
+export const login = (data) => request({
+ url: '/app/v1_0/authorizations',
+ method: 'post',
+ data
+})
+
+/*
+ *获取验证码--一分钟只能发一次
+ !该接口不可用
+ */
+export const getSmsCode = mobile => request({
+ method: 'get',
+ url: `/app/v1_0/sms/codes/${mobile}`
+})
diff --git a/src/css/index.css b/src/css/index.css
index 2deafa8..7e52b0f 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -75,3 +75,12 @@
.toutiao-fenxiang:before {
content: "\e607";
}
+body {
+ background-color: #f5f7f9;
+}
+body .page-nav-bar {
+ background-color: #3296fa;
+}
+body .page-nav-bar .van-nav-bar__title {
+ color: #fff;
+}
diff --git a/src/main.js b/src/main.js
index ea2ec73..363c589 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,9 +2,15 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
+// 加载全局样式
import '@/styles/index.less'
+// 加载vant 核心组件库
import Vant from 'vant'
+// 加载vant 全局样式
import 'vant/lib/index.css'
+
+// 加载动态设置rem基准值
+import 'amfe-flexible'
Vue.use(Vant)
Vue.config.productionTip = false
diff --git a/src/router/index.js b/src/router/index.js
index de40895..265e91e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,11 @@ import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
+ {
+ path: '/login',
+ name: 'login',
+ component: () => import('@/views/login')
+ }
]
diff --git a/src/store/index.js b/src/store/index.js
index ceffa8e..3499d7b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,6 @@
import Vue from 'vue'
import Vuex from 'vuex'
-
+import user from '@/store/modules/user'
Vue.use(Vuex)
export default new Vuex.Store({
@@ -13,5 +13,6 @@ export default new Vuex.Store({
actions: {
},
modules: {
+ user
}
})
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
new file mode 100644
index 0000000..8b4b972
--- /dev/null
+++ b/src/store/modules/user.js
@@ -0,0 +1,21 @@
+import { getItem, setItem } from '@/utils/storage'
+export default {
+ namespaced: true,
+ state: {
+ // 获取本地token
+ userToken: getItem('user')
+ },
+ mutations: {
+ changeUserToken (state, userToken) {
+ state.userToken = userToken
+ // 将token存入本地
+ setItem('user', userToken)
+ }
+ },
+ actions: {
+
+ },
+ getters: {
+
+ }
+}
diff --git a/src/styles/index.less b/src/styles/index.less
index 284508d..5055d6d 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -1,2 +1,12 @@
// 引入icon.less
-@import './icon.less';
\ No newline at end of file
+@import './icon.less';
+
+body {
+ background-color: #f5f7f9;
+ .page-nav-bar {
+ background-color: #3296fa;
+ .van-nav-bar__title {
+ color: #fff;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
new file mode 100644
index 0000000..97acc27
--- /dev/null
+++ b/src/utils/request.js
@@ -0,0 +1,11 @@
+/*
+ * 封装 axios 请求模块
+ */
+import axios from 'axios'
+axios.defaults.baseURL = 'http://api-toutiao-web.itheima.net'
+const request = axios
+
+// const request = axios.create({
+// baseURL: "http://ttapi.research.itcast.cn"
+// })
+export default request
diff --git a/src/utils/storage.js b/src/utils/storage.js
new file mode 100644
index 0000000..a39519d
--- /dev/null
+++ b/src/utils/storage.js
@@ -0,0 +1,26 @@
+/*
+ *本地存储方法封装
+*/
+
+// 获取本地存储数据
+export const getItem = (key) => {
+ const data = localStorage.getItem(key)
+ try {
+ return JSON.parse(data)
+ } catch (err) {
+ return data
+ }
+}
+
+// 向本地存储存入数据
+export const setItem = (key, value) => {
+ if (typeof value === 'object') {
+ value = JSON.stringify(value)
+ }
+ localStorage.setItem(key, value)
+}
+
+// 移除本地存储数据
+export const removeItem = (key) => {
+ localStorage.removeItem(key)
+}
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 0000000..b55f1b2
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,201 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 发送验证码
+
+
+
+
+ 登录
+
+
+
+