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,请求用户列表接口,注意传入的参数-