04. 开发后台登录接口

794 字约 2 分钟读完1729 次阅读更新于 2026/5/3

先导入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;
}

前端调用

image.png

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)
    })
  }

浏览器缓存存储用户信息
image.png