模板
模版为vue-admin-template,是基于vue-element-admin的一套后台管理系统基础模板(最少精简版),可作为模板进行二次开发。
在https://github.com/PanJiaChen/vue-admin-template里下载好。
搭建环境
cd 进文件夹 运行npm install,我这边必须在vscode里才能运行成功,在bash里不可以,可能是公司电脑的问题。
然后运行 npm run dev,即可出现模版
修改登录功能
首先在前端界面点击登录之后,可以看到其向前端发送两个请求,一个是login,一个是info,所以后端要注意返回相同格式的response。
login
其请求的URL为:http://localhost:9528/dev-api/vue-admin-template/user/login
发送的json为:{
“username”: “admin”,
“password”: “111111”
}
返回的数据为:{“code”:20000,“data”:{“token”:“admin-token”}}
info
其发送请求的url为:http://localhost:9528/dev-api/vue-admin-template/user/info?token=admin-token
发送的数据为:admin-token
返回的数据为:{“code”:20000,“data”:{“roles”:[“admin”],“introduction”:“I am a super administrator”,“avatar”:“https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif”,“name”:“Super Admin”}}
创建登录接口
@CrossOrigin可以处理跨域请求,让其能访问不是一个域的文件。
在controller文件夹下新建用户登录的controller,代码如下
@RestController
@RequestMapping("/admin/vod/user")
@CrossOrigin
public class UserLogging {
//登录功能
@PostMapping("login")
public Result login(){
//注意下面返回的是data code在Result的ok里面返回了
Map<String,Object> map = new HashMap<>();
map.put("token","admin");
return Result.ok(map);
}
//获取用户信息 使用get还是post按照前端发送的要求来
@GetMapping("info")
public Result info(){
Map<String,Object> map = new HashMap<>();
//附带的没有前端默认的这么多 估计到时候要进前端文件处理
map.put("roles","[admin]");
map.put("name","admin");
map.put("introduction","I am a superrrrrr administrator");
map.put("avatar","https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg");
return Result.ok(map);
}
//退出
@PostMapping("logout")
public Result logout(){
return Result.ok(null);
}
}
修改登录前端
修改接口路径
在.env.development里面,将路径修改成自己这边的路径。
修改js文件
在src/api/user.js里面修改对应的访问地址。
import request from '@/utils/request'
export function login(data) {
return request({
url: '/admin/vod/user/login',
method: 'post',
data
})
}
export function getInfo(token) {
return request({
url: '/admin/vod/user/info',
method: 'get',
params: { token }
})
}
export function logout() {
return request({
url: '/admin/vod/user/logout',
method: 'post'
})
}
状态码
注意一下,里面utils/request下写的必须状态码为20000才算成功,需要把其改成200才能够登入系统。