视频地址：Vue实战项目：电商管理系统（Element-UI）
本视频是一个非常全面的一个系列课程，使用Vue+ElementUI非常完成的实现了一个电商管理系统，其中内容点讲的非常清楚，每个小知识点分开将恰到好处，非常适合做为一个练手项目
Demo托管地址：码云
# 一、登录功能
登录功能使我们前端开发中非常频繁的一种需求功能，在开发登录功能的过程中总结有以下几个知识点
# 1.1 Rules 校验参数
这是使用Element-UI的表单组件中非常常见的一种数据检验方式，可以以友好的方式提醒用户按正确的格式填写表单数据
想要实现这个功能首先得使用Element-UI将登陆界面绘制出来，需要用到Form组件
# 第一步：定义校验规则
在Vue的data数据中定义一个对象，里面填写校验规则
data () {
return {
// 表单验证规则
loginFormRules: {
username: [
{ required: true, message: '用户名不能为空', trigger: 'blur' },
{ min: 5, max: 10, message: '用户名长度为5-10个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
{ min: 6, max: 15, message: '密码长度为6-15个字符', trigger: 'blur' }
]
}
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
这里具体的规则详见官方文档
# 第二步：绑定Form的rules属性
<el-form :rules="loginFormRules">
...
</el-form>
2
3
# 第三步：为子项Form-Item绑定prop属性
<!-- 账号 -->
<el-form-item prop="username">
...
</el-form-item>
2
3
4
# 1.2 提交表单前validate 数据校验
在提交数据前，往往会再校验一下数据合法性，如果校验规则通过，执行提交操作，校验不通过则拦截不提交
这里需要用到1.1 中的表单校验规则属性，一般跟1.1 是配套使用的
具体做法是
# 第一步：绑定并定义提交方法
<el-button type="primary" @click="submitLoginForm">登录</el-button>
methods: {
// 提交表单数据
submitLoginForm () {
...
}
}
2
3
4
5
6
7
8
# 第二步：绑定Form的ref属性
<el-form :rules="loginFormRules" ref='loginFormRef'>
...
</el-form>
2
3
# 第三步：取到表单对象并进行校验
submitLoginForm () {
this.$refs.loginFormRef.validate(async vaild => {
if (!vaild) return
// 校验成功后做的操作
...
})
}
2
3
4
5
6
7
这里的this.$refs.loginFormRef就是所要的表单对象
validate方法需要传入一个异步回调函数，函数的形参vaild表示的是通过检验后的结果：true/false
这里的检验规则也是通过1.1中的rules配置的
# 1.3 路由导航守卫
这里非常适用于前端初步身份校验，不用每次都麻烦后端校验，前端能高效拦截很多无用请求，原理非常简单
- 判断其访问的路由需不需要身份令牌，如果不需要的，比如登录页面，一律直接放行
- 如果需要身份令牌的，看
sessionStroage中是否保存了token，如果未保存，统一强制导航至登录页面 - 如果保存了token，再通过后端接口校验token的真实性
具体代码如下：
# router.js
const router = new VueRouter({
...
})
// 挂载一个路由导航守卫
router.beforeEach((to, from, next) => {
// 路由login无需身份验证，直接放行，除了路由login外，其他路由都需要身份验证
if (to.path === '/login') return next()
const token = window.sessionStorage.getItem('token')
// 如果token不存在，直接强制导航到登录页
if (!token) return next('/login')
// token存在，则放行，执行正常的路由
next()
})
export default router
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
在定义路由规则和导出路由之间使用beforeEach方法挂载一个路由导航守卫
beforeEach方法传入一个回调函数，改回调函数有三个参数
to：将要访问的路径
from：从哪个路径跳转而来，这个指的是非登录页
next：放行函数
- next() 直接放行
- next('/login') 强制跳转回登录页
# 1.4 配置挂载axios
首先得npm或者工作面板中安装axios的资源包，这个不再赘述
关键代码如下：
# main.js
// 配置axios
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios
2
3
4
5
6
axios.defaults.baseURL用来设置请求的根路径
Vue.prototype.$http将axios挂载到实例的原型方法中，这样一来所有的Vue实例对象都能通过this.$http方法来进行数据请求
const { data: res } = await this.$http.post('/login', this.loginForm)
# 1.5 Git 管理开发项目的标准流程
# 第一步：绑定远程仓库
首先注册码云或github，与本机的ssh绑定认证，绑定全局开发者信息（昵称和邮箱）
以码云为例，先初始化git，创建远程仓库，将默认绑定为远程仓库地址的master分支
# 第二步：初始化提交
利用脚手架生成项目后，先将项目梳理一下，该删的删该改的改
# 查看工作区是否干净
git status
# 将代码提交到暂存区
git add .
# 将代码提交到本地仓库
git commit -m "初始化提交"
# 将代码同步到远端仓库（第一步中绑定的分支）
git push
2
3
4
5
6
7
8
9
10
11
# 第三步：创建新的功能分支
在进行新的功能板块的开发时，不应该直接将代码提交只master主分支
应该创建对应的功能分支，以登录功能为例
# 创建一个新分支并且切换到该分支
git checkout -b login
# 查看分支状态
git branch
2
3
4
5
# 第四步：将新分支同步至远程仓库
# 切换到新分支
git checkout login
# 查看工作区是否干净
git status
# 将代码提交到暂存区
git add .
# 将代码提交到本地仓库
git commit -m "分支提交"
# 将代码同步到远端仓库（login分支）
git push -u origin login
2
3
4
5
6
7
8
9
10
11
12
13
14
# 第五步：合并到主分支
# 切换到主分支
git checkout master
# 合并分支
git merge login
# 将代码同步到远端仓库（master分支）
git push -u origin master
2
3
4
5
6
7
8