Vue后台管理系统项目——实现登录功能

文章目录

登录功能
- 1. 登录业务流程
- 2. 登录业务相关技术点
- 3. 登录—— token 原理分析
- 4. 登录功能的实现（都记牢点）
- - 登录页面的布局
  - 创建登录组件
  - 登录组件页面布局
  - 登录组件头部布局
  - 登录组件表单布局
  - 登录组件表单小图标布局
  - 登录组件表单的数据绑定
  - 登录组件表单的数据验证
  - 登录组件实现表单的重置
  - 登录前的预验证
  - 根据预验证判断是否发起请求
  - 表单方法的小总结
  - 登录组件配置弹窗提示
  - 登录成功后的操作行为
  - 路由导航守卫控制访问权限
  - 路由导航守卫控制访问权限

登录功能

1. 登录业务流程

在登录页输入用户名和密码
点击登录按钮，调用后台接口进行验证
通过验证后，根据后台的响应状态跳转到项目主页

2. 登录业务相关技术点

http 是无状态的

登录成功后需要记录用户的登录状态，有以下两种方案：

通过 cookie 在客户端记录状态
通过 session 在服务端记录状态
通过 token 方式维持状态

那么这两种方案该如何选择呢？

前端与后台接口不存在跨域问题时，推荐使用 cookie 和 session 来记录登录状态；

存在跨域问题时，推荐使用 token 方式来维持状态

跨域：协议、域名、端口号只要有一个不一样就是跨域

3. 登录—— token 原理分析

4. 登录功能的实现（都记牢点）

登录页面的布局

通过 Element-UI 组件来实现布局

el-form：整个登录框是一个form
el-form-item：用户名，密码，登录和重置按钮都属于表单item项，有3个
el-input
el-button
字体图标

打开项目之后，先打开终端输入 git status 查看一下当前工作区是否干净，然后创建新分支，注意哦，在实际开发中，当我们要开发一个新功能时，尽量把新功能放到新分支去进行开发

查看工作区是否干净

PS D:\前端学习路程\Vue\vue_shop> git status
On branch master
Your branch is up to date with 'origin/master'.nothing to commit, working tree clean

创建新分支login

PS D:\前端学习路程\Vue\vue_shop> git checkout -b login
Switched to a new branch 'login'

查看项目主分支和所有分支

PS D:\前端学习路程\Vue\vue_shop> git branch
* loginmaster

在绘制登录页面之前，我们需要先对项目的结构进行梳理，将不必要的代码以及组件清除掉，在梳理前，要查看一下项目的运行效果，可以直接在终端输入

npm run serve

或者是打开vue可视化面板，在菜单中选择任务，运行serve命令，等待编译完成然后点击启动app

清空 App 组件的内容，重新运行前，如果下载了ESlint的话，记得关闭语法检查，在vue.config.js文件夹中添加lintOnSave:false然后再重新运行，否则报错

创建登录组件

定义Login组件

<template><div>登录组件</div>
</template><script>
export default {name: "Login",
};
</script><style lang="less" scoped>
</style>

在route/index.js文件中通过路由的形式把它渲染到App根组件中，先导入Login组件，然后在路由规则数组中导入一个新的路由规则

在App根组件中放置一个路由占位符<router-view>

<template><div class="app"><router-view></router-view>        <!-- 3.添加占位符 --></div>
</template><script>
export default {name: "app",
};
</script><style>
</style>

添加重定向路由规则，使得访问根组件时会自动重定向到login组件中

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'   //1.先导入Login组件Vue.use(VueRouter)const router = new VueRouter({routes: [{path: '/',redirect: '/login'                       //4.添加重定向路由规则},{path: '/login',                          //2.然后导入一个新的路由规则component: Login}]
})export default router

登录组件页面布局

如果使用的是less语法，运行后会报错，需要提前下载好less和less-loader，注意版本

在终端输入命令

npm install less less-loader --save-dev

npm install less --save-dev

设置背景颜色

这里我有一个疑惑点：为什么需要设置一个全局样式表，将html，body，#app撑满整个浏览器？
将登录盒子login_box设置为居中，有很多方法，要熟练掌握哦！

https://vue3js.cn/interview/css/center.html#%E4%B8%80%E3%80%81%E8%83%8C%E6%99%AF

登录组件头部布局

绘制顶部默认头像区域

登录组件表单布局

绘制登录表单区域，需要用到Element-UI组件，找到plugins/element.js文件导入所需的element ui组件

import Vue from 'vue'
import { Button } from 'element-ui'
import { Form, FormItem } from "element-ui";
import { Input } from "element-ui";Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

一些疑惑点

为什么表单添加了绝对定位之后，会缩小成那么一点大？
注意CSS3 box-sizing：border-box 的使用

登录组件表单小图标布局

在element ui组件库中找到input输入框，找到带icon的输入框，可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
注意：如果图标不存在的话，就需要从外部引入，fonts文件夹放入assets文件夹中

<!-- 用户名 -->
<el-form-item><!-- 添加小图标 --><el-input prefix-icon="el-icon-user-solid"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item><!-- 添加小图标 --><el-input prefix-icon="el-icon-lock"></el-input>
</el-form-item>

登录组件表单的数据绑定

a.通过属性绑定给el-form绑定一个model属性，值是一个数据对象

b.在data里面定义，为每个具体的表单项通过v-model属性双向绑定到这个数据对象的某个属性上

<!-- 登录表单区域 -->
<el-form :model="loginForm" label-width="0" class="login_form"><!-- 用户名 --><el-form-item><!-- 添加小图标 --><el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input></el-form-item><!-- 密码 --><el-form-item><!-- 添加小图标 --><el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input></el-form-item><!-- 按钮区域 --><el-form-item class="btn"><el-button type="primary">登录</el-button><el-button type="info">重置</el-button></el-form-item>
</el-form><script>
export default {name: "Login",data() {return {//这是登录表单的数据绑定对象loginForm: {username: "admin",password: "123456",},};},
};
</script>

登录组件表单的数据验证

a.为el-form通过属性绑定指定一个rules校验对象

b.在data数据中，定义这个校验对象，其中每一个属性都是一个验证规则

c.可以为不同的表单item项通过prop指定不同的验证规则，来进行表单的验证

<!-- 登录表单区域 -->
<el-form :model="loginForm" :rules="loginFormRules" label-width="0" class="login_form"><el-form-item prop="username"></el-form-item>
</el-form>

// 登录表单的验证规则loginFormRules: {//   验证用户名是否合法username: [{ required: true, message: "请输入用户名", trigger: "blur" },{min: 3,max: 10,message: "用户名为 3 到 10 个字符",trigger: "blur",},],//   验证密码是否合法password: [{ required: true, message: "请输入登录密码", trigger: "blur" },{min: 6,max: 12,message: "密码为 6 到 12 个字符",trigger: "blur",},],},

登录组件实现表单的重置

Form Methods：

resetFields：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

要重置一个表单的话，就给表单添加一个ref引用，它的值就是组件的实例对象
给重置按钮绑定一个点击事件
接着可以通过this访问到$refs，访问表单的引用对象并调用resetFields函数方法

<!-- 登录表单区域 -->
<el-formref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0" class="login_form"><!-- 按钮区域 --><el-form-item class="btn"><el-button type="primary">登录</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item>
</el-form>

methods: {// 点击重置按钮，重置登录表单resetLoginForm() {this.$refs.loginFormRef.resetFields();},},

登录前的预验证

获取到表单的引用对象，然后通过这个引用对象可以调用validate函数进行表单的预校验，在validate中接收一个回调函数，第一个形参是验证结果的布尔值，可以通过判断这个布尔值来判断表单是否通过了验证，部分代码如下

methods: {// 点击重置按钮，重置登录表单resetLoginForm() {this.$refs.loginFormRef.resetFields();},// 点击登录按钮，进行登录前的预验证login() {this.$refs.loginFormRef.validate((valid) => {console.log(valid);});},},

根据预验证判断是否发起请求

在具体请求之前，应该在入口文件main.js中，对axios进行全局配置

先导入axios包，把axios包挂载到vue的原型对象上，这样的话，每一个vue的组件都可以通过this直接访问到http，从而去发起AJAX请求，http，从而去发起AJAX请求，http，从而去发起AJAX请求，http是自定义的属性名，可以随便起，当挂载完这个原型的属性之后，回过头来，尽量为axios设置一下请求的根路径

import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios

启动MySQL数据库，运行node .\app.js启动API接口，打印一下上述的返回结果，得到Promise {<pending>}

methods: // 点击登录按钮，进行预验证login() {this.$refs.loginFormRef.validate((valid) => {// console.log(valid);if (!valid) return;const result = this.$http.post("login", this.loginForm);console.log(result);});},},

如果某个方法的返回结果是Promise，我们可以用async await来简化这次Promise操作，await只能用在被async修饰的方法中，

methods: {// 点击登录按钮，进行预验证login() {this.$refs.loginFormRef.validate(async (valid) => {// console.log(valid);if (!valid) return;const result = await this.$http.post("login", this.loginForm);console.log(result);});},},

服务器返回的对象中包含了6个属性，其中data才是服务器返回的真实数据，因此从这个数据对象身上解构赋值出了data属性，同时重命名为res对象

methods: {// 点击登录按钮，进行预验证login() {this.$refs.loginFormRef.validate(async (valid) => {// console.log(valid);if (!valid) return;const { data: res } = await this.$http.post("login", this.loginForm);console.log(res);});},},

进行判断请求成功与否，根据res的meta属性来判断是否登录成功

methods: {// 点击登录按钮，进行预验证login() {this.$refs.loginFormRef.validate(async (valid) => {// console.log(valid);if (!valid) return;const { data: res } = await this.$http.post("login", this.loginForm);if (res.meta.status !== 200) return alert("登录失败了");alert("登录成功了");});},},

表单方法的小总结

Form Methods

方法名	说明	参数
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(props: array \| string, callback: Function(errorMessage: string))
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	—
clearValidate	移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果	Function(props: array \| string)

rules是实时验证，输完信息就会显示，validate是提交的时候验证，放置直接f12改数据提交

登录组件配置弹窗提示

使用的是Element UI组件库中提供的 Message 消息提示

配置过程：在element.js文件中，import导入弹框提示组件Message，它需要进行全局挂载 Vue.prototype.$message = Message

$message是自定义属性，名称只要合法就行

//element.js
// 导入弹框提示组件
import { Message } from "element-ui";Vue.prototype.$message = Message

methods: {// 点击登录按钮，进行预验证login() {this.$refs.loginFormRef.validate(async (valid) => {// console.log(valid);if (!valid) return;const { data: res } = await this.$http.post("login", this.loginForm);if (res.meta.status !== 200) return this.$message.error("登录失败了");this.$message.success("登录成功了");});},},

登录成功后的操作行为

将登录成功之后的 token 保存到客户端的 sessionStorage 中
- 项目中除了登录之外的其他API接口，必须在登录之后才能访问成功
- token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
```
window.sessionStorage.setItem("token", res.data.token);
```
通过编程式导航跳转到后台主页，路由地址是 /home，所以需要新建一个路由规则

$router编程式导航对象调用push方法
```
this.$router.push("/home", res.data.token);
```

路由导航守卫控制访问权限

home是一个有权限的页面，只有登录成功之后才可以被访问，如果用户没有登录，但是直接通过URL访问到了特定页面，需要重新导航到登录页面（我们希望用户从home路径直接跳转到login登录页）

// 为路由对象，添加 beforeEach 导航守卫
router.beforeEach((to,from,next) => {// 如果用户访问的登录页，直接放行if(to.path === '/login') return next()// 从 sessionStorage 中获取到保存的 token 值const tokenStr = window.sessionStorage.getItem('token')// 没有 token，强制跳转到登录页if(!tokenStr) return next('/login')next()
})

$router编程式导航对象调用push方法

this.$router.push("/home", res.data.token);

路由导航守卫控制访问权限

// 为路由对象，添加 beforeEach 导航守卫
router.beforeEach((to,from,next) => {// 如果用户访问的登录页，直接放行if(to.path === '/login') return next()// 从 sessionStorage 中获取到保存的 token 值const tokenStr = window.sessionStorage.getItem('token')// 没有 token，强制跳转到登录页if(!tokenStr) return next('/login')next()
})

记得及时的复习哦！