SpringBoot+Vue3+MyBatis学生管理系统开发实践-代码聚汇网

SpringBoot+Vue3+MyBatis学生管理系统开发实践

老爸评测

1. 项目概述

这个学生信息管理系统采用了当前企业级开发中最流行的技术组合：SpringBoot+Vue3+MyBatis。作为前后端分离架构的典型实现，它完美展现了现代Web应用的标准开发模式。我在实际企业项目中多次采用类似架构，这种组合既能保证后端服务的稳定性，又能提供流畅的前端用户体验。

系统主要功能模块包括学生档案管理、成绩录入、课程安排等基础教务功能。采用MySQL作为数据存储方案，既保证了事务完整性，又兼顾了查询性能。特别值得一提的是，Vue3的Composition API让前端代码组织更加清晰，而SpringBoot的自动配置特性则大幅减少了后端样板代码的编写量。

2. 技术栈选型解析

2.1 SpringBoot后端框架

选择SpringBoot 2.7.x版本作为基础框架，主要考虑其成熟的生态和丰富的starter依赖。实际开发中，我通常会配置以下核心依赖：

xml复制<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.2.2</version>
</dependency>
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid-spring-boot-starter</artifactId>
    <version>1.2.8</version>
</dependency>

经验之谈：使用Druid连接池而非默认HikariCP，因为Druid提供更完善的监控功能，特别适合学生管理系统这类需要关注SQL性能的场景。

2.2 Vue3前端框架

Vue3相比Vue2在性能上有显著提升，特别是其响应式系统重写后，内存占用减少约50%。项目中使用组合式API的典型代码结构：

javascript复制// 学生列表组件
import { ref, onMounted } from 'vue'
import { getStudentList } from '@/api/student'

export default {
  setup() {
    const studentList = ref([])
    const loading = ref(false)
    
    const fetchData = async () => {
      loading.value = true
      try {
        const res = await getStudentList()
        studentList.value = res.data
      } finally {
        loading.value = false
      }
    }
    
    onMounted(fetchData)
    
    return { studentList, loading }
  }
}

2.3 MyBatis持久层

采用MyBatis-Plus 3.5.x版本可以极大简化CRUD操作。对于学生表的基础Mapper接口只需继承BaseMapper：

java复制@Mapper
public interface StudentMapper extends BaseMapper<Student> {
    // 自定义复杂查询
    @Select("SELECT * FROM student WHERE class_id = #{classId}")
    List<Student> selectByClassId(Long classId);
}

避坑指南：一定要在application.yml中配置mapper-locations，否则XML映射文件不会被加载：
yaml复制mybatis:
  mapper-locations: classpath*:mapper/**/*.xml

3. 数据库设计与优化

3.1 核心表结构

学生管理系统的数据库主要包含以下表：

sql复制CREATE TABLE `student` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `student_no` varchar(20) NOT NULL COMMENT '学号',
  `name` varchar(50) NOT NULL,
  `gender` tinyint DEFAULT '0' COMMENT '0-未知 1-男 2-女',
  `birthday` date DEFAULT NULL,
  `class_id` bigint DEFAULT NULL,
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_student_no` (`student_no`),
  KEY `idx_class_id` (`class_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 索引优化策略

根据查询场景，我为系统设计了以下索引方案：

学号字段建立唯一索引 - 保证学号唯一性
班级ID建立普通索引 - 加速按班级查询
联合索引(name, student_no) - 支持按姓名和学号组合查询

性能提示：MySQL 8.0+版本建议使用utf8mb4_0900_ai_ci字符集，相比utf8mb4_general_ci有更好的排序性能。

4. 前后端分离实践

4.1 接口规范设计

采用RESTful风格设计API接口，响应格式统一为：

json复制{
  "code": 200,
  "message": "success",
  "data": {...},
  "timestamp": 1672531200000
}

通过自定义Result类实现：

java复制public class Result<T> implements Serializable {
    private int code;
    private String message;
    private T data;
    private long timestamp;
    
    public static <T> Result<T> success(T data) {
        Result<T> result = new Result<>();
        result.setCode(200);
        result.setMessage("success");
        result.setData(data);
        result.setTimestamp(System.currentTimeMillis());
        return result;
    }
}

4.2 跨域解决方案

开发环境下建议配置CorsFilter：

java复制@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

生产环境应该通过Nginx配置更精细的跨域策略。

5. 系统安全实现

5.1 JWT认证方案

采用JJWT库实现Token签发和验证：

java复制public class JwtUtil {
    private static final String SECRET = "your-secret-key";
    private static final long EXPIRATION = 86400L; // 24小时
    
    public static String generateToken(String username) {
        return Jwts.builder()
                .setSubject(username)
                .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION * 1000))
                .signWith(SignatureAlgorithm.HS512, SECRET)
                .compact();
    }
    
    public static String getUsernameFromToken(String token) {
        return Jwts.parser()
                .setSigningKey(SECRET)
                .parseClaimsJws(token)
                .getBody()
                .getSubject();
    }
}

5.2 权限控制

结合Spring Security实现方法级权限控制：

java复制@PreAuthorize("hasRole('TEACHER')")
@PostMapping("/students")
public Result addStudent(@RequestBody Student student) {
    // 添加学生逻辑
}

6. 典型业务实现

6.1 学生分页查询

后端Controller实现：

java复制@GetMapping("/students")
public Result<IPage<StudentVO>> listStudents(
        @RequestParam(defaultValue = "1") int pageNum,
        @RequestParam(defaultValue = "10") int pageSize,
        @RequestParam(required = false) String name) {
    
    Page<Student> page = new Page<>(pageNum, pageSize);
    LambdaQueryWrapper<Student> wrapper = Wrappers.lambdaQuery();
    if (StringUtils.isNotBlank(name)) {
        wrapper.like(Student::getName, name);
    }
    IPage<StudentVO> result = studentService.pageStudent(page, wrapper);
    return Result.success(result);
}

前端使用Element Plus表格组件：

vue复制<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="studentNo" label="学号" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="gender" label="性别">
      <template #default="{row}">
        {{ row.gender | genderFormat }}
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    @current-change="handlePageChange"
    :current-page="pagination.pageNum"
    :page-size="pagination.pageSize"
    layout="total, prev, pager, next"
    :total="total">
  </el-pagination>
</template>

7. 部署方案

7.1 后端打包

使用SpringBoot Maven插件打包可执行JAR：

xml复制<build>
  <plugins>
    <plugin>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-maven-plugin</artifactId>
      <configuration>
        <executable>true</executable>
      </configuration>
    </plugin>
  </plugins>
</build>

7.2 前端部署

Vue项目构建后生成的dist目录可以直接通过Nginx部署：

nginx复制server {
    listen       80;
    server_name  student.example.com;
    
    location / {
        root   /usr/share/nginx/html/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

8. 开发环境搭建

8.1 必备工具清单

JDK 17（SpringBoot 2.7.x官方推荐版本）
Node.js 16+（Vue3开发环境）
MySQL 8.0（开发环境可使用Docker快速部署）
IntelliJ IDEA（SpringBoot开发首选IDE）
VS Code（Vue开发推荐编辑器）

8.2 初始化步骤

克隆项目仓库
导入后端项目到IDEA，等待Maven依赖下载完成
执行src/main/resources/schema.sql初始化数据库
启动后端应用
在前端目录执行npm install安装依赖
运行npm run dev启动前端开发服务器

常见问题：如果遇到lombok不生效的情况，需要确保IDEA安装了Lombok插件并在设置中启用注解处理。

9. 性能优化实践

9.1 缓存策略

使用Spring Cache抽象层整合Redis：

java复制@Cacheable(value = "student", key = "#id")
@GetMapping("/students/{id}")
public Result<StudentVO> getStudent(@PathVariable Long id) {
    return Result.success(studentService.getById(id));
}

@CacheEvict(value = "student", key = "#student.id")
@PutMapping("/students")
public Result updateStudent(@RequestBody Student student) {
    return Result.success(studentService.updateById(student));
}

9.2 SQL优化技巧

避免SELECT *，只查询需要的字段
复杂查询使用@SelectProvider动态SQL
批量操作使用MyBatis的foreach标签

xml复制<insert id="batchInsert" parameterType="java.util.List">
    INSERT INTO student(student_no, name) VALUES
    <foreach collection="list" item="item" separator=",">
        (#{item.studentNo}, #{item.name})
    </foreach>
</insert>

10. 扩展功能建议

基于基础系统可以进一步扩展：

接入Elasticsearch实现全文检索
使用WebSocket实现实时通知
集成POI-TL实现Excel报表导出
添加Spring Batch支持批量数据处理
使用Quartz实现定时任务调度

我在实际项目中发现，添加基于RBAC的细粒度权限控制能显著提升系统的实用性。可以通过扩展Spring Security的权限表达式，实现如@PreAuthorize("hasPermission('student', 'delete')")这样的方法级控制。