使用VUE+Element实现一个完整商城项目(全208讲) - 黑马程序员の刘龙宾【持续更新中】

倚天丶惊鸿 2020-08-08 Vue全家桶ElementUI

视频地址：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' }
        ]
      }
    }
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这里具体的规则详见官方文档

# 第二步：绑定Form的rules属性

<el-form :rules="loginFormRules">
    ...
</el-form>

1
2
3

# 第三步：为子项Form-Item绑定prop属性

<!-- 账号 -->
<el-form-item prop="username">
   ...
</el-form-item>

1
2
3
4

# 1.2 提交表单前validate 数据校验

在提交数据前，往往会再校验一下数据合法性，如果校验规则通过，执行提交操作，校验不通过则拦截不提交

这里需要用到1.1 中的表单校验规则属性，一般跟1.1 是配套使用的

具体做法是

# 第一步：绑定并定义提交方法

<el-button type="primary" @click="submitLoginForm">登录</el-button>

methods: {
    // 提交表单数据
    submitLoginForm () {
      ...
    }
}

1
2
3
4
5
6
7
8

# 第二步：绑定Form的ref属性

<el-form :rules="loginFormRules" ref='loginFormRef'>
    ...
</el-form>

1
2
3

# 第三步：取到表单对象并进行校验

submitLoginForm () {
    this.$refs.loginFormRef.validate(async vaild => {
        if (!vaild) return
        // 校验成功后做的操作
        ...
      })
}

1
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

1
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

1
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

1
2
3
4
5
6
7
8
9
10
11

# 第三步：创建新的功能分支

在进行新的功能板块的开发时，不应该直接将代码提交只master主分支

应该创建对应的功能分支，以登录功能为例

# 创建一个新分支并且切换到该分支
git checkout -b login

# 查看分支状态
git branch

1
2
3
4
5

# 第四步：将新分支同步至远程仓库

# 切换到新分支
git checkout login

# 查看工作区是否干净
git status

# 将代码提交到暂存区
git add .

# 将代码提交到本地仓库
git commit -m "分支提交"

# 将代码同步到远端仓库（login分支）
git push -u origin login

1
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

1
2
3
4
5
6
7
8

倚天丶惊鸿的博客

Choose mode