04. 开发后台登录接口
先导入SQL
admin表
CREATE TABLE `admin` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
`username` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '账号',
`password` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '密码',
`name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '名称',
`avatar` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '头像',
`role` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '角色',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='管理员';
写login接口
Controller方法
@PostMapping("/login")
public Result login(@RequestBody Admin admin) {
admin = adminService.login(admin);
return Result.success(admin);
}
Service方法
public Admin login(Admin admin) {
String username = admin.getUsername();
// 根据账号查询数据
Admin dbAdmin = adminMapper.selectByUsername(username);
if (dbAdmin == null) {
throw new CustomException("账号不存在");
}
// 校验密码
if (!dbAdmin.getPassword().equals(admin.getPassword())) {
throw new CustomException("账号或者密码错误");
}
return dbAdmin;
}
前端调用

const login = () => {
formRef.value.validate((valid => {
if (valid) {
// 调用后台的接口
request.post('/login', data.form).then(res => {
if (res.code === '200') {
ElMessage.success("登录成功")
router.push('/')
} else {
ElMessage.error(res.msg)
}
})
}
})).catch(error => {
console.error(error)
})
}
浏览器缓存存储用户信息
