认识vue-element-admin
# 认识vue-element-admin
# 步骤
- 对接登陆和退出
- 项目布局的改变
- 能对接业务API，写出页面
- 页面的优化和整理
- 用户、功能、角色的页面设计
- 动态路由与权限管理
- 令牌刷新
# 动态路由与权限设置
1.保存后台返回的角色和权限功能到vuex
2.配置路由表
3.根据用户角色与权限做路由过滤
4. 设置权限指令 (v-permission=['',''])
# 令牌刷新
- 保存令牌过期时间
- 对接令牌刷新接口
- 做请求拦截，首先是请求响应时间，判断是否到了过期时间，如果没有到，直接请求，否则，先进行令牌刷新，然后再请求
# vue-element-templat
利用vue.js开发后台系统的基础模板，包括的用户登录以及基础的权限等功能，
- 了解目录结构
- 分析main.js 程序开始的执行代码 Vue项目的初始化
# 登录的流程
1.执行状态管理器中的login动作
2.调用api目录下的ueser.js中的login API， 返回数据，有令牌
3.把返回的数据存入状态管理器，则执行跳转到首页的路由
4.因为执行的路由跳转，所以router.beforeEach方法就执行相关操作。
5.因为是登录了系统，有了令牌，但如果是第一次登录的时候，我们没有用户信息，就没有办法取初始化用户对应的路由和侧边栏，所以第一次登录获取令牌之后，还必须使用令牌去获取用户的信息。
6.获取用户信息后，就有用户的角色信息，有了角色信息，我们可以根据角色动态的过滤异步的路由表，如果是用户角色中含有admin角色，则所有的路由表都可以使用，如果是用户角色中不含有admin角色，则需要根据现有的角色，重新过滤内容。
7.过滤得到了新的可以用路由表，系统就会自动把该路由表的内容动态添加，生成真正的路由。
8.生成了新的路由表之后，我们就可以跳转到指定的页面，之后的路由跳转，因为已经有了用户信息，所以我们不需要再次去生成新的路由，就可以直接跳转了。
# 增加业务页面
1.在views目录下增加页面，就是vue文件
2.在router目录下的index.js内增加路由
3.添加对应的API，在src下面的api目录。订单列表的API是order/list,使用本地的mock服务器，配置mock下的index.js和对应的order.js。
# 更改es6里面的promise方法为async方式
async 标注异步函数 await getList() 调用函数
# 业务开发的一般流程
1.在views里面写页面
2.增加路由
3.写页面首先写表格信息 （el-table） axios作为ajax请求，发送数据给后端，会返回一个Promise对象，所以我们可以在函数之后增加then和catch
# 代码优化
1.容易复用（代码去拷贝了之后，不需要太多修改就可以直接使用）
2.容易维护（为了后期功能容易添加和处理）
# 系统代码拆分的原则
1.容易改变的拆分出来，单独存放，不易改变的，直接固定写死。
2.利用混入功能，把业务分拆成不同的部分，然后直接组合使用。