目录
gitee仓库地址:
https://gitee.com/CMD-UROOT/my_project/commits/master
大家根据上传历史进行查找你需要的代码
一、登录业务
完成登录业务
-----静态组件完成
-----书写API(换成真实的接口)
-----axios二次封装
-----换成真实接口之后需要解决代理跨域问题(解决代理跨域问题)
我们的登录组件应该放在src/views文件下
在views/login/index.vue中:
我们可以看到登录的代码:
1.背景图替换
在assets里面放一张背景图
在views/login/index.vue中:样式中引入背景图
效果:
2.书写API(换成真实的接口)
后台管理系统API接口在线文档:
http://39.98.123.211:8170/swagger-ui.html
http://39.98.123.211:8416/swagger-ui.html
打开8170接口文档:
替换真实接口
我们直接复制文档中对应的接口到我们的user.js对应位置
在api/user.js中:
3.axios二次封装
在utils/request.js中:
修改红框这两个位置就可以了
测试:
这个时候我们点击登录会弹出404,原因是因为我们还没有解决跨域问题
4.换成真实接口后需要解决代理跨域问题
在vue.config.js中:
打开webpack官网 : 开发中 Server(devServer) | webpack 中文网
因为我们需要解决代理跨域问题,我们需要修改devServer里面的配置
并且我们在开发环境下可以看到他的前缀是带/dev-api的
服务器发请求的地址就是我们接口文档那个地址:http://39.98.123.211:8170
所以:
修改前:
修改后:
配置文件修改后,记得重启项目,配置才能生效
效果:点击登录,登录成功
二、退出登录
我们在登录的页面中,审查元素,替换退出登录的英文,成为中文
在layout/components/Navbar.vue中:
找到对应的结构:
替换为:
效果:功能没问题,可以实现退出