vue-element-template修改接口对接后台
1.情况说明:
本教程是在vue-element-template基础上,参考vue-element-admin进行编写说明。
官网:https://panjiachen.github.io/vue-element-admin-site/zh/
2.登录流程:
当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到cookie中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息)。
3.返回的数据:
login接口
{"code":20000,"data":{"token":"后端生成的token"}}
getInfo接口
{"code":20000,"data":{"roles":["admin"],"introduction":"I am a superadministrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"Super Admin"}}
4.操作步骤:
(一)修改.env.development配置文件
(二)修改main.js如图注释掉
(三)修改vue.config.js文件
proxy: {
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080/`, //修改后台接口地址
changeOrigin: true,
pathRewrite: {
['^'+process.env.VUE_APP_BASE_API]: ''
}
}
}
(四)修改api接口
(五)request.js可根据业务逻辑来改动,这里我没有改
(六)views/login/index
(七)src/store/modules/user.js
(八)路由守卫src/permission.js 路由 src/router/index.js 解决动态路由刷新页面404
(九)后台
(十)测试