09. 开发学生登录功能

1606 字约 4 分钟读完1019 次阅读更新于 2026/5/3

SQL

student

CREATE TABLE `student` (
  `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 '邮箱',
  `sex` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '性别',
  `birth` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '生日',
  `avatar` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '头像',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

开发后台

设计一个父类 Account

package com.example.entity;

public class Account {
    private String username;
    private String password;
    private String name;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

让 Admin 和 Student 都继承这个父类

注意在 admin 表和 student 表加一个新的字段：role
student 表加新的字段
image.png
admin 表加一个新的字段
image.png

完整的登录接口

/**
 * 登录接口
 */
@PostMapping("/login")
public Result login(@RequestBody Account account) {
    Account dbAccount;
    if (RoleEnum.ADMIN.name().equals(account.getRole())) {  // 管理员登录
        dbAccount = adminService.login(account);
    } else if (RoleEnum.STUDENT.name().equals(account.getRole())) {  // 学生登录
        dbAccount = studentService.login(account);
    } else {
        return Result.error("角色错误");
    }
    return Result.success(dbAccount);
}

StudentService 登录逻辑

/**
 * 登录
 */
public Account login(Account account) {
    Account dbStudent = studentMapper.selectByUsername(account.getUsername());
    if (dbStudent == null) {
        // 没有用户
        throw new CustomException("账号或密码错误");
    }
    // 比较密码
    if (!account.getPassword().equals(dbStudent.getPassword())) {
        throw new CustomException("账号或密码错误");
    }
    // 登录成功
    return dbStudent;
}

测试
image.png

Vue

<el-form :model="data.form" ref="formRef" :rules="rules">
  <el-form-item prop="username">
    <el-input prefix-icon="User" v-model="data.form.username" placeholder="请输入账号" />
  </el-form-item>
  <el-form-item prop="password">
    <el-input show-password prefix-icon="Lock" v-model="data.form.password"  placeholder="请输入密码" />
  </el-form-item>
  <el-form-item prop="role">
    <el-select style="width: 100%" v-model="data.form.role">
      <el-option value="ADMIN" label="管理员"></el-option>
      <el-option value="STUDENT" label="学生"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" style="width: 100%" @click="login">登 录</el-button>
  </el-form-item>
</el-form>

image.png