SpringBoot实现vue-admin-template登录接口
vue-admin-template
vue-admin-template是一个简化版的vue-element-admin的模板,
适合vue用来做项目的搭建,虽然官方文档以及花裤衩前端大佬
在博客中已经将大部分的疑难杂症解决了,但当完全自己搭建的
时候才发现多折腾
vue-admin-template登录接口请求详解
要想搞懂一个接口,最好的方式就是
1.去看接口的定义声明的参数
2.发送请求查看返回的数据格式
开始
1.先配置跨域等基础信息
在目录中找到.env.development
文件修改BASE_URL
# just a flag
ENV = 'development'
# base api 此处修改为空
VUE_APP_BASE_API = ''
2.配置跨域
找到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:10000`,
secure: false, // 如果是https接口,需要配置这个参数为true
changeOrigin: true, //必须为true,true表示跨域
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
//此处注释掉
//before: require('./mock/mock-server.js')
}
3.查看api中的user.js,查看登录、获取信息等信息
此处可以不用更改
import request from '@/utils/request'
export function login(data) {
return request({
url: '/user/login',
method: 'post',
params: {
...data }
})
}
export function getInfo(token) {
return request({
url: '/user/info',
method: 'get',
params: {
token }
})
}
export function logout() {
return request({
url: '/user/logout',
method: 'post'
}