Vue2 + element ui 后台管理系统（项目总结）

1，准备需要框架，插件，组件库......

• Vue框架 （vue2.x版本）
• Element Ul 组件
• axios (网络请求,请求拦截器，响应拦截器)
• quill（富文本编辑器）
• echarts（数据可视化工具）

---

1-1，axios的封装

• axios的封装包含了（请求拦截器，响应拦截器，创建的时候设置请求超时时间）
• 请求拦截器（经常用来设置请求头，用户登录后像后台发送token，这个token可以判断我们是否登录成功）
• 响应拦截器（做一些token过期处理，还可以对后台返回给我们的状态码，比如成功的状态200，失败状态码400进行不同的处理，还有就是没有网络的时候，响应拦截器会返回给我们失败的状态码，根据这些不同的状态就可以给用户进行提示。）
• 

1-2 ，登录业务流程介绍

一，登录页面（/login.vue）

• 登录页面使用（element ui进行页面布局），请求后端接口文档的数据（使用axios封装），将所需数据发送给后端，前段进行表单验证，验证后的数据通过axios进行本地存储

  二，登录鉴权(Vue的路由守卫分为，全局路由守卫，组件路由守位，独享路由守卫)

• 这里我们主要用到我们Vue Router中的router.beforeEach, 这个函数的作用就是注册一个全局前置守卫，后置路由首位是已经进去了。

• to: 即将要进入的目标 路由对象

• from: 离开之前的路由，即将要离开的路由

• next:通过，进行下一个路由。

• 

 三，退出功能，左侧菜单栏,动态路由...（sum.vue）

• 点击退出，删除本地存储的token值并返回登录页面
• 
•    給請求头统一加token，不用每次进入后台就加，请求拦截器里，带上头协议
• 
•  左侧权限列表（先请求渲染静态然后在设置动态）
• 请求接口（api.js）
• 组件实现基本的布局，渲染数据
• 
• 因为功能模块的访问，本质上是由路由实现的，点击菜单只是途径之一，所以权限控制放在路由上是合理的。可以少写没用的代码，少挖坑，方便处理。
• 首先在请求到数据axios中像本地储存返回的左侧菜单栏数据
• 
• 注释二级静态路由
• 
• 配置动态路由（router.js）

•  判断是否登录，是否有左侧菜单的数据（已经存在了本地存储的数据）

•  如果拿到了menu的数据不是列表数据而是树状结构，就需要我们把树形结构转换为列表结构，因为我们完成动态路由就需要的是列表结构的导航菜单

• 使用router的方法addRoute添加路由，第一个参数是往路由里面添加,用路由的name,第二个参数是要添加的路由

• 
• 很多后台管理系统的前端项目里，权限是这样做的：根据用户的权限返回路由，和本地的路由比对，把筛选出的结果作为动态路由，加入指定路由对象中router.addRoutes(res)，然后菜单组件去v-for遍历它。

• 新建一个封装循环递归的文件夹（sion.js）

•   使用后递归循环的方式将树形结构转化为列表结构，后台返回的数据里就算children里面没有数据也会把children以空数组的方式返回给我们，所以我们通过children数组的长度来判断

1-3 ，用户管理模块

一，用户列表（/users.js）

• 请求接口文档返回数据（http.js）

•  渲染数据（页面布局根据element组件实现）
• 实现搜索功能（传入搜索值keywrod，请求用户列表接口，注意传入的参数-