Vue后台管理系统项目(3)登录及退出登录业务完成

目录

一、登录业务

1.背景图替换

2.书写API(换成真实的接口)

 替换真实接口

 3.axios二次封装

 4.换成真实接口后需要解决代理跨域问题

 二、退出登录

---

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中:

找到对应的结构:

 替换为:

效果:功能没问题,可以实现退出