11. Vue3开发登录注册页面

413 字约 1 分钟读完7104 次阅读更新于 2026/5/3

在 employee 表加 3 个字段

登录页面的设计思路

登录逻辑

@PostMapping("/login")
public Result login(@RequestBody Employee employee) {
    employeeService.login(employee);
    return Result.success();
}

public Employee login(Employee employee) {
    String username = employee.getUsername();  // 账号
    Employee dbEmployee = employeeMapper.selectByUsername(username);
    if (dbEmployee == null) {  // 没查询到任何用户   说明没有这个账号
        throw new CustomException("500", "账号不存在");
    }
    // 数据库存在这个账号
    String password = employee.getPassword();
    if (!dbEmployee.getPassword().equals(password)) {  // 用户输入的密码跟数据库账号的密码不匹配
        throw new CustomException("500", "账号或密码错误");
    }
    return dbEmployee;
}

注册逻辑

@PostMapping("/register")
public Result register(@RequestBody Employee employee) {
    employeeService.register(employee);
    return Result.success();
}

public void add(Employee employee) {
    String username = employee.getUsername();  // 账号
    Employee dbEmployee = employeeMapper.selectByUsername(username);
    if (dbEmployee != null) {  // 注册的账号已存在  无法注册
        throw new CustomException("500", "账号已存在，请更换别的账号");
    }
    if (StrUtil.isBlank(employee.getPassword())) {  // 密码没填
        employee.setPassword("123");  // 默认密码 123
    }
    if (StrUtil.isBlank(employee.getName())) {  // 名字没填
        employee.setName(employee.getUsername());  // 默认名称
    }
    // 一定要设置角色
    employee.setRole("EMP");  // 员工的角色
    employeeMapper.insert(employee);
}

hutool 工具包

https://doc.hutool.cn/pages/index/

<!--  hutool 插件包 -->
<dependency>
  <groupId>cn.hutool</groupId>
  <artifactId>hutool-all</artifactId>
  <version>5.8.25</version>
</dependency>

本节课登录页面

本节课注册页面