作业批改系统开发日志 - 2026-05-09

概述

今天完成了作业批改系统的核心功能开发，包括作业任务管理、学生提交功能优化、个人成长曲线，以及前后端联调中的一系列踩坑记录。

数据库表结构变更

homework_task 表（新建）

用于管理老师发布的作业任务，支持截止时间、逾期扣分等特性。

CREATE TABLE homework_task (
    id SERIAL PRIMARY KEY,
    class_id BIGINT NOT NULL,
    task_name VARCHAR(200) NOT NULL,
    description TEXT,
    deadline TIMESTAMP,
    allow_late BOOLEAN DEFAULT TRUE,
    late_penalty INTEGER DEFAULT 0,
    status VARCHAR(20) DEFAULT 'active',
    created_by BIGINT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

ALTER TABLE homework_task
    ADD CONSTRAINT fk_task_class
    FOREIGN KEY (class_id) REFERENCES class_info(id);

submission 表新增字段

ALTER TABLE submission
  ADD COLUMN task_id BIGINT,
  ADD COLUMN submit_count INTEGER DEFAULT 1,
  ADD COLUMN remaining_attempts INTEGER DEFAULT 2,
  ADD COLUMN is_late BOOLEAN DEFAULT FALSE,
  ADD COLUMN penalty_applied BOOLEAN DEFAULT FALSE,
  ADD COLUMN final_score INTEGER;

后端开发

新增文件

文件	说明
`HomeworkTask.java`	homework_task 表实体类
`HomeworkTaskMapper.java`	MyBatis-Plus Mapper
`TaskController.java`	作业任务 CRUD + 详情统计
`StudentProgressController.java`	学生个人成长曲线查询

修改文件

Submission.java: 补充 taskId、submitCount、remainingAttempts、isLate、penaltyApplied、finalScore、assignmentNo 字段
SubmissionMapper.xml: 新增 countByStudentAndClass 方法

TaskController 核心接口

@PostMapping              // 创建作业
@PutMapping("/{id}")       // 编辑作业
@DeleteMapping("/{id}")    // 删除作业
@GetMapping                // 按班级查询作业列表(?classId=xxx)
@GetMapping("/{id}")       // 作业详情+统计
@PutMapping("/{id}/close") // 关闭作业

前端开发

新页面

页面	路由	功能
`PageFive.vue`	`/teacher/tasks`	老师端作业管理（创建、列表、编辑、删除）
`TaskDetail.vue`	`/teacher/tasks/:id`	作业统计详情（ECharts 图表、学生提交列表）

改造页面

PageOne.vue: 学生提交页面大改，从文件名解析改为下拉选择班级和作业，增加截止倒计时、提交次数显示
PageFour.vue: 仪表盘集成个人成长曲线弹窗，ECharts 折线图展示
App.vue: 侧边栏增加「📋 作业管理」导航

个人成长曲线

后端 StudentProgressController 根据学生姓名+班级查询所有历史提交
趋势计算：最新分数 - 平均分（≥2次提交即可计算）
前端 ECharts 折线图 + 趋势箭头标识

踩坑记录

问题一：this.$http 未定义

现象：PageFive.vue 中的班级列表、作业列表请求全部失败

原因：代码中直接使用了 this.$http.get(...)，但 main.ts 中从未注册过 $http 全局属性，也没有导入 request 实例。翻遍整个项目，没有任何地方定义过 $http。

解决过程：

尝试 import request from '../api/request' — request 实例带拦截器自动注入 token，baseURL 为 /api
但 apiBaseUrl 使用 import.meta.env.VITE_API_URL || ''，环境变量为空导致路径拼接错误
最终方案：统一使用 fetch + 硬编码 apiBaseUrl: 'http://localhost:8080/api'，手动带 Authorization header

教训：