SpringBoot+Vue课程评价管理系统开发指南

1. 项目概述

这个基于SpringBoot的课程评价管理系统是一个典型的Java全栈开发项目，采用前后端分离架构设计。作为一名经历过多次毕业设计指导的老手，我深知这类系统对于计算机专业学生的重要性——它不仅能展示你的全栈开发能力，还涵盖了数据库设计、API接口开发、权限管理等企业级应用的核心要素。

系统主要功能包括：课程信息管理、学生评价提交、教师反馈查看、管理员数据统计等模块。技术栈选择了目前企业开发中最主流的组合：后端用SpringBoot+MyBatis构建RESTful API，前端采用Vue.js实现响应式界面，数据库使用MySQL，通过Navicat进行可视化管理。

提示：毕业设计选择这类管理系统项目时，建议重点关注业务逻辑的完整性和技术栈的规范性，这比追求复杂功能更重要。

2. 技术架构解析

2.1 后端技术栈

SpringBoot 2.7.x作为基础框架，其自动配置特性大幅简化了SSM（Spring+SpringMVC+MyBatis）整合的复杂度。我在项目中特别加入了以下关键配置：

1. 多环境配置：通过application-dev.yml、application-prod.yml实现开发/生产环境切换
2. 统一异常处理：使用@ControllerAdvice实现全局异常捕获
3. JWT认证：采用jjwt库实现无状态登录验证
4. Swagger集成：自动生成API文档，方便前后端联调

数据库设计遵循第三范式，核心表包括：

• 用户表（sys_user）
• 课程表（course）
• 评价表（evaluation）
• 评分项表（evaluation_item）

2.2 前端技术栈

Vue 3.x组合式API开发，配合以下关键插件：

• Element Plus：UI组件库
• Axios：HTTP请求库
• Vue Router：路由管理
• Pinia：状态管理

前端工程通过vue-cli搭建，采用标准的src目录结构：

code复制src/
├── api/        # 接口定义
├── assets/     # 静态资源  
├── components/ # 公共组件
├── router/     # 路由配置
├── stores/     # 状态管理
└── views/      # 页面组件

3. 核心功能实现

3.1 评价提交模块

学生用户的核心操作流程：

1. 登录系统后选择目标课程
2. 填写评价表单（包括评分和文字评价）
3. 提交时前端进行数据校验
4. 调用/evaluation/submit接口提交数据

后端关键代码示例：

java复制@PostMapping("/submit")
public Result submitEvaluation(@RequestBody EvaluationDTO dto) {
    // 1. 验证用户身份
    Long userId = SecurityUtil.getCurrentUserId();
    
    // 2. 数据有效性校验
    if (dto.getCourseId() == null || StringUtils.isBlank(dto.getContent())) {
        return Result.fail("参数不完整");
    }
    
    // 3. 保存评价
    Evaluation evaluation = new Evaluation();
    BeanUtils.copyProperties(dto, evaluation);
    evaluation.setUserId(userId);
    evaluation.setCreateTime(LocalDateTime.now());
    evaluationMapper.insert(evaluation);
    
    return Result.success();
}

3.2 数据统计模块

教师和管理员可以查看课程评价的统计分析，包括：

• 平均分计算
• 评价关键词提取
• 评分分布直方图

使用MyBatis的动态SQL实现复杂查询：

xml复制<select id="selectCourseStats" resultType="map">
    SELECT 
        c.course_name,
        AVG(e.score) as avg_score,
        COUNT(e.id) as evaluation_count
    FROM course c
    LEFT JOIN evaluation e ON c.id = e.course_id
    <where>
        <if test="teacherId != null">
            AND c.teacher_id = #{teacherId}
        </if>
        <if test="startDate != null">
            AND e.create_time >= #{startDate}
        </if>
    </where>
    GROUP BY c.id
</select>

4. 开发环境搭建

4.1 后端环境

1. JDK 1.8+：建议使用Amazon Corretto 11
2. Maven 3.6+：配置阿里云镜像加速依赖下载
3. MySQL 5.7+：注意配置字符集为utf8mb4
4. Redis：用于缓存热点数据和会话管理

关键Maven依赖：

xml复制<dependencies>
    <!-- SpringBoot Starter -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    <!-- MyBatis Plus -->
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.5.3</version>
    </dependency>
    
    <!-- JWT -->
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt</artifactId>
        <version>0.9.1</version>
    </dependency>
</dependencies>

4.2 前端环境

1. Node.js 16+：建议使用LTS版本
2. Vue CLI 5.x：项目脚手架工具
3. VS Code：配合Volar插件获得更好的开发体验

package.json关键配置：

json复制{
  "dependencies": {
    "vue": "^3.2.47",
    "element-plus": "^2.3.3",
    "axios": "^1.3.4",
    "pinia": "^2.0.33"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "vite": "^4.2.0"
  }
}

5. 项目部署方案

5.1 开发环境部署

1. 数据库初始化：

sql复制CREATE DATABASE course_eval CHARACTER SET utf8mb4;
USE course_eval;
SOURCE init.sql;

2. 后端启动：

bash复制mvn spring-boot:run -Dspring.profiles.active=dev

3. 前端启动：

bash复制npm install
npm run dev

5.2 生产环境部署

推荐使用Docker Compose编排服务：

yaml复制version: '3'
services:
  mysql:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: yourpassword
    volumes:
      - ./mysql/data:/var/lib/mysql
      
  redis:
    image: redis:alpine
    
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
      - redis
      
  frontend:
    build: ./frontend
    ports:
      - "80:80"

6. 常见问题排查

6.1 跨域问题

现象：前端请求接口时出现CORS错误
解决方案：

1. 后端添加CORS配置类：

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

2. 或者通过Nginx反向代理解决：

nginx复制location /api {
    proxy_pass http://backend:8080;
    add_header 'Access-Control-Allow-Origin' '*';
}

6.2 数据库连接失败

检查要点：

1. application.yml中的JDBC URL是否正确
2. MySQL是否允许远程连接（开发环境可能需要修改bind-address）
3. 数据库用户权限是否足够

6.3 前端路由刷新404

这是Vue Router的history模式常见问题，解决方案：

1. 开发环境：在vite.config.js中配置：

js复制export default defineConfig({
  server: {
    historyApiFallback: true
  }
})

2. 生产环境：Nginx配置：

nginx复制location / {
    try_files $uri $uri/ /index.html;
}

7. 二次开发建议

如果想扩展系统功能，可以考虑以下方向：

1. 增加评价模板功能：让教师可以自定义评价维度
2. 接入短信通知：当教师回复评价时通知学生
3. 数据导出：支持Excel格式的评价数据导出
4. 可视化大屏：使用ECharts展示课程评价趋势

对于新增功能的开发，建议遵循以下流程：

1. 设计数据库表结构变更
2. 编写MyBatis实体类和Mapper
3. 开发Service层业务逻辑
4. 实现Controller层接口
5. 前端页面开发和接口联调

我在实际开发中发现，保持接口文档的及时更新能大幅提高团队协作效率。可以使用Swagger UI或YApi等工具维护API文档。