Vue后台管理项目总结

前期准备：创建vue脚手架，配置文件，下载第三方ui库、axios、each等

技术栈：Vue、elementui、axios、each

项目组合：项目主要由: 登录模块，用户管理模块、权限管理、角色列表、商品管理、订单列表、可视化图标 each 数据统计、等几个模块。

        在项目启动前，先配置封装一下baseurl基地址接口路径，设置一下timeout超时时间，在通过axios 中的拦截器进行在网络请求和响应之后的一些操作，我们通过新建一个until文件夹，在里面新建一个request.js文件，在里面导入第三方axios，在配置基地址后通过 axios.interceptors 来设置拦截器，在请求拦截器中通过config.headers的 Authorization 配置一下请求头才能进入首页的token值，然后再响应拦截器中设置一下token值过期的处理，让用户去login页面去重新登录、再对一下常规的过期状态码进行处理和提示。

登录模块

 通过创建一个login.vue组件，在里面引入element的form表单，通过这个点击登录事件，拿到这个表单中的用户名和密码，在通过引入封装的api接口进行发起网络请求，通过后台返回的状态码进行判断是否登录成功，成功的话就会返回一个token，将这个token存储到本地或者是vuex状态管理工具里面，在封装的网络请求中进行拿取这个token值放到请求头中，因为接下来的操作都需要依赖于这个token值，这样就可以不用在每次请求的时