1.前言

本文将致力于描述一个vue2.0后台系统的登陆业务流程，从后台项目常用的模板 vue-admin-template模板分析，到axios的二次封装，发起请求接口都会涉及到。不足之处，还请各位大佬指正。
后台管理系统API接口在线文档1
后台管理系统API接口在线文档2
登陆接口在线文档

2.vue-admin-template模板介绍

后台项目也称为B端项目，因为后台项目不需要多个用户去访问【比如淘宝京东购物网站】，只是公司内部人员去使用，所以账号通常由开发人员提前在数据库分配好，然后分配给公司的领导和一般的员工【所以后台项目也会涉及到权限管理】，所以一般后台项目只带有登陆功能，无需注册。

简洁版开源地址
加强版开源地址

而有一个大佬，具体叫啥名忘记了，暂且叫他大佬吧，开发了这么一套用于后台系统的模板【vue-admin-template】，在这套模板里，他将整个项目分成了三大区域,示例图如下
左侧侧边导航栏Sidebar，顶部导航栏 Navbar组件和中间展示区域组件AppMain，这三个组件都保存在名为layout骨架的文件夹里，layout代表着整个项目页面【可以理解类似于root根组件】

3. vue-admin-template模板结构分析

模板的文件与文件夹认知【简洁版】

build
----index.js webpack配置文件【很少修改这个文件】
mock
----mock数据的文件夹【模拟一些假的数据mockjs实现的】，因为咱们实际开发的时候，利用的是真是接口
node_modules
------项目依赖的模块
public
------ico图标,静态页面，publick文件夹里面经常放置一些静态资源，而且在项目打包的时候webpack不会编译这个文件夹，原封不动的打包到dist文件夹里面
src
-----程序员写代码的地方
------api文件夹:涉及请求相关的
------assets文件夹：里面放置一些静态资源（一般共享的），放在aseets文件夹里面静态资源，在webpack打包的时候，会进行编译
------components文件夹：一般放置非路由组件获取全局组件
------icons这个文件夹的里面放置了一些svg矢量图
------layout文件夹：他里面放置一些组件与混入
------router文件夹：与路由相关的
-----store文件夹：一定是与vuex先关的
-----style文件夹：与样式先关的
------utils文件夹：request.js是axios二次封装文件****
------views文件夹：里面放置的是路由组件
-App.vue:根组件
main.js：入口文件
permission.js:与导航守卫先关、
settings：项目配置项文件
.env.development 开发环境的配置文件
.env.producation 生产环境的配置文件

4.axios的二次封装

一般工具类的接口会放在src下的utils目录中，此处request.js代码对axios进行了二次封装，vue-admin-template这个模板原本就对axios进行了二次封装，但是由于这个模板是2015年开发的，时间比较久远，那时还没有async 和await，所以该模板是用的new Promise处理请求，此处我们对这个文档做一些处理【将promise改为async await】
设置了请求拦截器和响应拦截器，在每次请求发送之前，为所有的请求添加上了唯一的token标识符【大有用处】；在每次请求响应之后，对不同响应状态码做一些处理

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
// 导入仓库是为了获取到保存在里面的token
import store from '@/store'
import { getToken } from '@/utils/auth'// axios的二次封装文件
// create an axios instance
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url// withCredentials: true, // send cookies when cross-domain requeststimeout: 5000 // request timeout
})// 设置请求拦截器,在每次请求发送之前做些事情，并对请求失败做些处理
service.interceptors.request.use(config => {// do something before request is sent// 响应失败在干什么if (store.getters.token) {// let each request carry token// ['X-Token'] is a custom headers key// please modify it according to the actual situationconfig.headers['token'] = getToken()}return config},error => {// do something with request errorconsole.log(error) // for debugreturn Promise.reject(error)}
)
// 设置响应拦截器，在每次响应之后做些事情，
service.interceptors.response.use(/*** If you want to get http information such as headers or status* Please return  response => response*//*** Determine the request status by custom code* Here is just an example* You can also judge the status by HTTP Status Code*/response => {const res = response.data// 响应失败在干什么if (res.code !== 20000  && res.code!==200) {Message({message: res.message || 'Error',type: 'error',duration: 5 * 1000})// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;if (res.code === 50008 || res.code === 50012 || res.code === 50014) {// to re-loginMessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {confirmButtonText: 'Re-Login',cancelButtonText: 'Cancel',type: 'warning'}).then(() => {// 组件中修改vuex的数据，this.$store.dispatch('action中的方法名',数据) ;开启命名空间后，组件中调用dispatch, this.$store.dispatch(模块化名字/action中的方法名)store.dispatch('user/resetToken').then(() => {// BOM浏览器对象提供的API location ,表示重新加载来自当前 URL 的资源。location.reload()})})}return Promise.reject(new Error(res.message || 'Error'))} else {return res}},error => {console.log('err' + error) // for debugMessage({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)export default service

5.请求后端接口

根据接口文档的要求来发起请求，data表示请求体，params表示地址栏中的查询字符串
例如下图
用户登录接口：
请求方式:post
请求地址/admin/acl/index/login
请求头参数token （已经在axios请求拦截器中封装好了）
请求体data（包括用户名和密码）
请求成功返回状态码200

获取用户信息接口：
请求方式:get
请求地址/admin/acl/index/info
请求头参数token （已经在axios请求拦截器中封装好了）
请求体无
请求成功返回状态码200

用户登录接口文档

获取用户信息接口文档

// 引入axios二次封装文件
import request from '@/utils/request'
// 对外暴露登陆接口
export function login(data) {return request({url: '/admin/acl/index/login',method: 'post',data})
}
// 对外暴露获取用户信息接口
export function getInfo(token) {return request({url: '/admin/acl/index/info',method: 'get',})
}
// 对外暴露退出接口
export function logout() {return request({url: '/admin/acl/index/logout',method: 'post'})
}

6.表单验证

7.派发action，在action中发起请求

如果表单符合验证规则，就会派发action，在user模块的action中调用前端写好的请求逻辑【见第五小点请求后端接口】，如果不符合验证规则，提示错误提交，如果既符合验证规则又成功登录，就保存token到store仓库中并进行路由跳转

//user.js store模块中写以下代码
const actions = {// user login 处理登陆业务员，发起用户登陆请求async login({ commit }, userInfo) {// 结构赋值出用户名和密码const { username, password } = userInfolet result=await login({ username: username.trim(), password: password })// 登陆成功if(result.code===200 || result.code===20000){// 触发 SET_TOKEN mutation，并传递参数，更新store仓库保存的tokencommit('SET_TOKEN', result.data.token)// 使用cookie技术保存tokensetToken(result.data.token)return 'ok'}else{// 登陆失败return Promise.reject(new Error('fail'))}},

//点击登录按钮后执行以下代码handleLogin() {//表单验证，验证用户名和密码是否符合验证规则，符合返回true 不符合返回falsethis.$refs.loginForm.validate(valid => {if (valid) {// 开启登陆按钮加载图标this.loading = true// 触发 store的actions方法 user模块的login方法，并携带 表单参数this.$store.dispatch('user/login', this.loginForm).then((res) => {// 登陆成功跳转到主页或重定向 this.$router.push({ path: this.redirect || '/' })// 关闭登陆按钮加载图标this.loading = false}).catch(() => {this.loading = false})} else {console.log('error submit!!')return false}})}

8.token的用处

【vue2.0后台项目之登陆】01登陆开发流程分析相关推荐

Django后台项目之用户管理功能开发流程
项目功能开发流程 1 先写列表页(加载出来数据就行) ob = User_vip.objects.filter(is_del='004001').order_by('-cts') 2 写添加功能 2. ...
mysql 8.0 一条insert语句的具体执行流程分析(三)
代码版本:mysql 8.0.22 编程语言:c++ && c++11 && c++14 && c++17 上一篇文章:mysql 8.0 一条inse ...
mysql 8.0 一条insert语句的具体执行流程分析(二)
继续上一篇文章:mysql 8.0 一条insert语句的具体执行流程分析(一)_一缕阳光的博客-CSDN博客由于最近换工作一直在试用期内,在拼命的学习.总结中,因此没有时间写文章,今天转正了腾出来 ...
Alian解读SpringBoot 2.6.0 源码（八）：启动流程分析之刷新应用上下文（中）
目录一.背景 1.1.刷新的整体调用流程 1.2.本文解读范围二.调用后处理器 2.1.调用在上下文中注册为beanFactory的后置处理器 2.2.invokeBeanFactoryPostP ...
Alian解读SpringBoot 2.6.0 源码（七）：启动流程分析之准备应用上下文
目录一.背景 1.1.run方法整体流程 1.2.本文解读范围二.准备应用上下文 2.1.整体流程 2.2.设置环境 2.3.应用上下文进行后置处理 2.4.应用所有初始化器 2.5.发布应用上下 ...
Alian解读SpringBoot 2.6.0 源码（六）：启动流程分析之创建应用上下文
目录一.背景 1.1.run方法整体流程 1.2.本文解读范围二.创建应用上下文 2.1.初始化入口 2.2.初始化AbstractApplicationContext 2.3.初始化Generi ...
Alian解读SpringBoot 2.6.0 源码（八）：启动流程分析之刷新应用上下文（下）
目录一.背景 1.1.刷新的整体调用流程 1.2.本文解读范围二.初始化特定上下文子类中的其他特殊bean 2.1.初始化主体资源 2.2.创建web服务三.检查监听器bean并注册它们四.实 ...
Alian解读SpringBoot 2.6.0 源码（九）：启动流程分析之应用上下文刷新后处理（启动完成事件，Runner运行器，就绪事件）
目录一.背景 1.1.run方法整体流程 1.2.本文解读范围二.应用上下文刷新后置处理三.时间信息.输出日志记录执行主类名四.发布应用上下文启动完成事件 4.1.ApplicationSta ...
基于vue2.0+ 抽奖项目
前言临近年关抽奖活动,基于vue2.0+开发的抽奖项目. 便于查看效果,贴上相关地址: 在线示例地址:快速访问 github地址:查看源码简介基于vue.js抽奖项目,截屏保存每次抽奖图片至本地 ...

【vue2.0后台项目之登陆】01登陆开发流程分析

登陆开发流程