电商管理系统-登录功能

电商管理系统-登录功能

一、登录逻辑

1.在登录页面输入账号和密码进行登录，将数据发送给服务器
2.服务器返回登录的结果，登录成功则返回数据中带有token
3.客户端得到token并进行保存，后续的请求都需要将此token发送给服务器，服务器会验证token以保证用户身份。

二、登录模块详细步骤

1.新建login.vue组件，在element.js按需导入需要的组件，在App.vue（根组件）中添加路由占位符；

2.在router.js中导入组件并设置规则，即routes里设置输入path是/login，跳转到login，还需要设置路由重定向，即’/'也跳转到login，也就是用户通过url地址直接访问，则强制跳转到登录页面；

3.新建全局样式，并在main.js中导入global.css，使得全局样式生效 import “./assets/css/global.css”

4.在login.vue布局el-form表单组件，添加表单验证
el-form组件： form表单里的可自定义校验规则的模板，添加属性:rules=“rules”，rules是一堆验证规则，定义在script中的data中；
el-form-item组件：通过的prop属性指定不同验证规则，比如写在rules里的name，phone；
el-button组件：登录，重置按钮；
el-input组件： 通过v-model绑定data里的数据；

5.在main.js文件导入axios以便发送ajax请求
import axios from 'axios’导入;
设置请求的根路径：axios.defaults.baseURL = ‘http://127.0.0.1:8888/api/private/v1/’;
挂载axios：Vue.prototype.$http = axios;

6.登录按钮绑定的方法定义
首先通过ref.validate表单验证
validate：对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调 用，并传入两个参数：是否校验成功布尔值和未通过校验的字段。若不传入回调函数，则会返回一个 promise。
验证成功后，发登录post请求(post返回值是promise,用async,await优化），反之返回，
post里填地址login，以及双向绑定的数据username，password,
再通过解构赋值{data:res}，res.meta.status接收返回的状态码，判断是否是200，200状态码就是成功，反之失败，
登录成功之后，需要弹窗，弹窗需要在element.js中按需导入 message，在login.vue组件中编写弹窗代码：this.$message.error{(}^{\prime }登录失{败}^{\prime })，this.$message.success(“登录成功”);此处通过返回的状态码是不是200判断
最后将后台返回的token保存到sessionStorage中
通过编程式导航this.$router.push跳转到/home主页

7.重置按钮绑定的方法定义
通过使用form表单的resetfields方法ref.resetfields重置表单

8.新建home组件，配置路由，添加路由规则，即路由跳转，添加按钮绑定点击事件触发退出功能。也就是window.sessionStorage.clear()， this.$router.push(’/login’)跳转到login页面

9.提交代码到码云
主要用到 git status,git add . ,git commit -m " ", git branch, git checkout 分支名,git merge 分支名 ,git push，git push -u origin 远端分支名