vue-element-admin 新手学习笔记 - (1)
小白的一点点小小经验,大神手下留情,如有不好的地方,或者不对的地方请大家多多指教
因为本人是用 vue-element-admin 来做的,所以就用vue-element-admin 来说,但是推荐使用 vue-admin-template
1:项目初始化
vue-element-admin
vue-element-template
vue-element-admin 文档
先从给git上下载下来vue-element-admin,然后 npm install , npm run dev 这样项目就运行起来了。
2:项目配置
- 如果该项目上的页面都是不需要用到的,则可在src/views下面删除该页面,只剩余dashboard、error-page、login、redirect。
- 在src/router/index.js中删除路由配置,保留上述1中所说的剩余页面的路由配置
- 在src/settings.js中设置
title : 设置项目的标题,showSettings: 设置控制面板是否显示
fixedHeader: 头部是否固定,
sidebarLogo: 左侧菜单栏顶部的图标是否显示 - 由于该项目中的所有请求用的是mock.js,所以如果要连接后台调试,在vue.config.js中先把mock注释掉,然后配置接口域名,在找到devServer中配置,
端口号配置 - 完成上述配置之后开始运行项目,这是点击登录会调不到接口是由于vue.config.js中把
mock去掉了,这时先看一下登录接口代码,src/views/login/index.vue,从handleLogin中可以看出来在点击登录后通过校验会进入stroe中modules下面的user中的actions中login方法里,
在login中可以看到通过调用login接口(登录接口在src/api/login),把获取到的token存储起来,setToken函数是把token存储到cookie中的一个方法,在src/utils/auth.js中可以看到
在登录获取到token后跳转路由前会去做一些验证,
参考-https://blog.****.net/weixin_43564110/article/details/105117991
3:axios讲解
- 该项目中在utils下面的request.js中自定义了一个axios, axios.create创建一个新的axios,timeout:这是请求超时的时间,withCredentials 是跨域请求时可以携带cookie,
请求拦截器,可通过config.headers设置请求头, 当然这个是看各自项目的需求,由于本人的项目中需要修改请求头中的content-Type
在修改完content-Type后传参给后台是字符串,但是需要的是key=value形式的,所以这时可以就用到了qs, 在改项目中安装qs, 然后在请求拦截器中设置,
响应拦截器,按照各自项目的要求修改状态码