08. Springboot3+vue3实现登录注册功能

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

本节课效果图

素材

登录

页面 Login.vue

存储用户信息

登录接口

controller

@PostMapping("/login")
public Result login(@RequestBody Account account) {
    Account dbAccount = null;
    if ("ADMIN".equals(account.getRole())) {
        dbAccount = adminService.login(account);
    } else if ("USER".equals(account.getRole())) {
        dbAccount = userService.login(account);
    } else {
        throw new CustomerException("非法请求");
    }
    return Result.success(dbAccount);
}

service

public Admin login(Account account) {
    // 验证账号是否存在
    Admin dbAdmin = adminMapper.selectByUsername(account.getUsername());
    if (dbAdmin == null) {
        throw new CustomerException("账号不存在");
    }
    // 验证密码是否正确
    if (!dbAdmin.getPassword().equals(account.getPassword())) {
        throw new CustomerException("账号或密码错误");
    }
    return dbAdmin;
}

模仿管理员开发用户管理

数据库表 user

CREATE TABLE `user` (
  `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 '名称',
  `phone` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '手机',
  `email` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '邮箱',
  `role` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '角色',
  PRIMARY KEY (`id`),
  UNIQUE KEY `username_index` (`username`) COMMENT '账号'
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='管理员信息';

User 相关的接口 和 管理页面

开发的过程：复制 Admin 相关的 Entity、Controller、Service、Mapper、Mapper,xml ，然后改名

Admin - > User 即可

注意 UserService 的 add 方法 和 AdminService 的 add 方法 的区别

user

public void add(User user) {
    // 根据新的账号查询数据库  是否存在同样账号的数据
    User dbUser = userMapper.selectByUsername(user.getUsername());
    if (dbUser != null) {
        throw new CustomerException("账号重复");
    }
    // 默认密码
    if (StrUtil.isBlank(user.getPassword())) {
        user.setPassword("123");
    }
    if (StrUtil.isBlank(user.getName())) {
        user.setName(user.getUsername());
    }
    user.setRole("USER");
    userMapper.insert(user);
}

admin

public void add(Admin admin) {
    // 根据新的账号查询数据库  是否存在同样账号的数据
    Admin dbAdmin = adminMapper.selectByUsername(admin.getUsername());
    if (dbAdmin != null) {
        throw new CustomerException("账号重复");
    }
    // 默认密码
    if (StrUtil.isBlank(admin.getPassword())) {
        admin.setPassword("admin");
    }
    admin.setRole("ADMIN");
    adminMapper.insert(admin);
}

注意在 AdminMapper.xml 和 UserMapper.xml 里面补充 role

遇到 ”未找到接口“的问题

这是因为没有重启后台，重启即可

注册

页面 Register.vue

按钮颜色：#248243

注册接口

controller

@PostMapping("/register")
public Result register(@RequestBody User user) {
    userService.register(user);
    return Result.success();
}

service

public void register(User user) {
    this.add(user);
}

自定义的错误

不是系统的错误，不是代码的 bug，这是我们给前端抛出的错误信息

当你看到页面一片空白怎么办？

打开页面的控制台，看看具体的报错信息，然后解决问题

本节课代码 样例

Manager.vue