(1)vue-element-admin使用:baseURL设置,登录登出
第一步:去git上面下载vue-element-admin,或者看官方文档下载,具体步骤如下下载项目gitclonehttps://github.com/PanJiaChen/vue-element-admin.git到vue-element-admin目录下cdvue-element-admin安装依赖包(会比较慢)还有可能失败npminstall启动程序npmrundev第二步:设置baseU
第一步:去git上面下载vue-element-admin,或者看官方文档下载,具体步骤如下
下载项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
到vue-element-admin目录下
cd vue-element-admin
安装依赖包(会比较慢)还有可能失败
npm install
启动程序
npm run dev
第二步:设置baseURL,改成后端项目接口
设置baseRUL在dev环境下
在vue.config.js文件中,找到
before: require('./mock/mock-server.js')
并且注释掉,并且在位置上添加如下代码
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: process.env.VUE_APP_BASE_API,
changeOrigin: true, // 配置跨域
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
此时baseURL已经配置好,可以删除文件mock,该文件是模板自带的后台,注解掉vue.config.js那段代码后,该文件已经失效。
登录:
找到登录页面中的请求方法
标记1:点击登录的时候会去验证输入的数据是否符合我们的规定,可以看elementui的验证
标记2:如果符合valid就会为ture执行下面流程
标记3:回去store文件夹找到对应方法,下面会细说
标记4:如果请求没有报错就进入then方法
标记5:记录的是来到登录页面之前的请求路径,登录成功后会直接进入该路径页面
标记6:请求出错进入catch方法。
跟着标记3找到对应文件
标记1:拿到前面传入过来的数据
标记2:调用login方法,通过import导入的进来的,在src/api文件下
标记3:把token存入到vuex缓存中(个人理解,错误了请留言告诉我)
标记4:表token存入到cookie中 (个人理解,错误了请留言告诉我)
执行请求方法请求的路径会是baseURL+url,如下图所示
返回数据结构如下
主要是要有code和token两个,不然会报错,数据返回成功后会进入reques.js文件中做验证
20000是成功响应的标识,我加了‘’,因为我返回的是字符串不是整型。如果返回的code不是20000就会报错。
密码验证正确后,模板会自己发生一个getinfo请求把token传过去验证角色信息,需要返回的数据结构如下
如果返回数据结构不一致就会报错。到此就能正确登录进去,因为有些接口没完成,所有控制台会报错但是不影响我们进行登录登出测试。
登出
登出就很简单了,在后端实现登出接口,返回的code为20000,就行。
到此使用vue-element-admin实现登录登出已经完成,如果上述有什么说错的地方可以留言指出。
更多推荐
所有评论(0)