文章目录
登录功能1. 登录业务流程2. 登录业务相关技术点3. 登录—— token 原理分析4. 登录功能的实现（都记牢点）登录页面的布局创建登录组件登录组件页面布局登录组件头部布局登录组件表单布局登录组件表单小图标布局登录组件表单的数据绑定登录组件表单的数据验证登录组件实现表单的重置登录前的预验证根据预验证判断是否发起请求表单方法的小总结登录组件配置弹窗提示登录成功后的操作行为路由导航守卫控制访问权限路由导航守卫控制访问权限登录功能
1. 登录业务流程
在登录页输入用户名和密码点击登录按钮，调用后台接口进行验证通过验证后，根据后台的响应状态跳转到项目主页2. 登录业务相关技术点
http 是无状态的登录成功后需要记录用户的登录状态，有以下两种方案：
通过 cookie 在客户端记录状态通过 session 在服务端记录状态通过 token 方式维持状态
那么这两种方案该如何选择呢？
前端与后台接口不存在跨域问题时，推荐使用 cookie 和 session 来记录登录状态；
存在跨域问题时，推荐使用 token 方式来维持状态
跨域：协议、域名、端口号只要有一个不一样就是跨域
3. 登录—— token 原理分析
4. 登录功能的实现（都记牢点）
登录页面的布局
通过 Element-UI 组件来实现布局
el-form：整个登录框是一个formel-form-item：用户名，密码，登录和重置按钮都属于表单item项，有3个el-inputel-button字体图标
打开项目之后，先打开终端输入git status查看一下当前工作区是否干净，然后创建新分支，注意哦，在实际开发中，当我们要开发一个新功能时，尽量把新功能放到新分支去进行开发
查看工作区是否干净
PS D:\前端学习路程\Vue\vue_shop> git statusOn branch masterYour branch is up to date with 'origin/master'.nothing to commit, working tree clean
创建新分支login
PS D:\前端学习路程\Vue\vue_shop> git checkout -b loginSwitched 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设置为居中，有很多方法，要熟练掌握哦！
/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)
一些疑惑点
为什么表单添加了绝对定位之后，会缩小成那么一点大？
注意CSS3box-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
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);
路由导航守卫控制访问权限
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()})
记得及时的复习哦！
