SpringBoot2+Vue3+MySQL8.0构建课程作业管理系统-代码聚汇网

SpringBoot2+Vue3+MySQL8.0构建课程作业管理系统

RIDERPRINCE·2026-08-22·阅读 22 GEO检测（免费）

SpringBoot2Vue3MyBatis-Plus

|难度：普通|阅读约 15 分钟

1. 项目概述

这个Java Web课程作业管理系统是一个典型的全栈式教学管理应用，采用当前主流的技术栈组合：SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0。作为高校计算机专业常见的课程实践项目，它完整实现了从后端到前端的现代化Web开发流程。

我在实际教学中发现，这类系统最能体现Java Web开发的完整技术链条。后端采用SpringBoot2快速搭建RESTful API，前端用Vue3构建响应式界面，ORM层使用MyBatis-Plus简化数据库操作，配合MySQL8.0提供稳定数据存储。这种技术组合既符合企业级开发规范，又能让学生掌握前后端分离架构的核心要点。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 技术栈深度解析

2.1 SpringBoot2后端框架

SpringBoot2作为基础框架，我特别推荐使用2.7.x这个长期支持版本。在实际开发中，这几个配置项需要特别注意：

java复制# application.yml关键配置
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/course_work?useSSL=false&serverTimezone=UTC
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
  jackson:
    default-property-inclusion: non_null # 避免返回null字段

经验之谈：SpringBoot2的自动配置机制虽然方便，但建议显式配置数据源和JSON序列化规则，避免后期出现难以排查的兼容性问题。

2.2 Vue3前端架构

Vue3的组合式API是这个项目的前端亮点。在作业管理模块中，我是这样组织代码的：

javascript复制// 作业列表组件
import { ref, onMounted } from 'vue'
import { getHomeworkList } from '@/api/homework'

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

这种写法比Vue2的Options API更灵活，特别是对于需要复用逻辑的复杂组件。

2.3 MyBatis-Plus高效ORM

MyBatis-Plus的BaseMapper提供了强大的单表CRUD能力。但在处理作业提交记录这种多表关联查询时，我建议使用自定义SQL：

java复制public interface HomeworkSubmitMapper extends BaseMapper<HomeworkSubmit> {
    @Select("SELECT s.*, u.name as student_name FROM homework_submit s " +
            "LEFT JOIN user u ON s.student_id = u.id " +
            "WHERE s.homework_id = #{homeworkId}")
    List<HomeworkSubmitVO> selectSubmitWithStudent(@Param("homeworkId") Long homeworkId);
}

避坑指南：MyBatis-Plus的updateById方法默认不会更新null字段，如果需要将字段更新为null，必须在实体类字段上加@TableField(strategy = FieldStrategy.IGNORED)注解。

2.4 MySQL8.0优化实践

MySQL8.0的窗口函数在统计作业成绩时特别有用：

sql复制-- 统计每个作业的平均分和排名
SELECT 
    homework_id,
    student_id,
    score,
    AVG(score) OVER(PARTITION BY homework_id) as avg_score,
    RANK() OVER(PARTITION BY homework_id ORDER BY score DESC) as rank
FROM homework_submit

数据库表设计上，我采用这些优化策略：

使用utf8mb4字符集支持完整Unicode
为常用查询字段添加合适索引
大文本内容（如作业附件）使用BLOB类型存储

3. 核心功能实现

3.1 作业发布模块

教师端采用富文本编辑器（推荐TinyMCE或WangEditor）来实现作业内容编辑。后端接口需要注意文件上传的处理：

java复制@PostMapping("/homework")
public Result publishHomework(@RequestBody HomeworkDTO dto) {
    // 参数校验
    if (StringUtils.isBlank(dto.getTitle())) {
        return Result.fail("作业标题不能为空");
    }
    
    // DTO转Entity
    Homework homework = new Homework();
    BeanUtils.copyProperties(dto, homework);
    
    // 设置发布教师
    User teacher = getCurrentUser();
    homework.setTeacherId(teacher.getId());
    
    homeworkService.save(homework);
    return Result.ok(homework.getId());
}

3.2 作业提交与批改

学生提交作业时需要处理文件上传和表单数据：

vue复制<template>
  <el-upload
    action="/api/homework/submit"
    :data="{ homeworkId: form.homeworkId }"
    :before-upload="validateFile"
    :on-success="handleSuccess">
    <el-button type="primary">点击上传作业文件</el-button>
  </el-upload>
</template>

<script setup>
const validateFile = (file) => {
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    ElMessage.error('作业文件大小不能超过10MB');
    return false;
  }
  return true;
}
</script>

教师批改接口需要处理并发问题：

java复制@Transactional
public boolean reviewHomework(Long submitId, Integer score, String comment) {
    // 乐观锁控制
    HomeworkSubmit submit = submitMapper.selectById(submitId);
    if (submit == null || submit.getStatus() != SubmitStatus.SUBMITTED) {
        return false;
    }
    
    submit.setScore(score);
    submit.setComment(comment);
    submit.setStatus(SubmitStatus.REVIEWED);
    submit.setReviewTime(LocalDateTime.now());
    
    return submitMapper.updateById(submit) > 0;
}

4. 系统部署与优化

4.1 多环境配置

SpringBoot支持通过profile区分环境配置：

yaml复制# application-dev.yml
server:
  port: 8080
  servlet:
    context-path: /course-work

# application-prod.yml
server:
  port: 80
  servlet:
    context-path: /
  compression:
    enabled: true

前端Vue3项目可以通过.env文件管理环境变量：

ini复制# .env.production
VUE_APP_API_BASE_URL=https://api.yourschool.com
VUE_APP_BASE_PATH=/course-work/

4.2 性能优化措施

接口缓存：对作业列表等高频查询接口添加Redis缓存

java复制@Cacheable(value = "homework", key = "#id")
public Homework getById(Long id) {
    return homeworkMapper.selectById(id);
}

前端懒加载：Vue3路由配置按需加载

javascript复制const HomeworkList = () => import('./views/homework/List.vue')

数据库连接池调优：

yaml复制spring:
  datasource:
    hikari:
      maximum-pool-size: 20
      minimum-idle: 5
      idle-timeout: 30000

5. 常见问题解决方案

5.1 跨域问题处理

前后端分离项目必须配置跨域。SpringBoot的解决方案：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .maxAge(3600);
    }
}

5.2 文件上传大小限制

SpringBoot默认文件上传限制为1MB，需要在配置中调整：

yaml复制spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 20MB

5.3 Vue3生产环境部署

部署时常见的静态资源路径问题可以通过vue.config.js解决：

javascript复制module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/course-work/'
    : '/',
  outputDir: 'dist',
  assetsDir: 'static'
}

6. 项目扩展方向

在实际教学应用中，我通常会建议学生尝试这些扩展：

添加作业查重功能（利用SimHash算法）
实现实时通知（WebSocket）
集成第三方登录（学校统一认证）
开发移动端适配（Vant组件库）
增加自动化测试（JUnit5 + Mockito）

这个项目源码最值得参考的是它清晰的架构分层：

controller：RESTful API接口
service：业务逻辑实现
mapper：数据库操作
entity：数据模型
dto：数据传输对象
vo：视图对象

每个学生提交的作业记录都包含完整的历史版本，这在后期排查问题时特别有用。我在实际部署时还会建议添加操作日志审计功能，记录所有关键操作。