SpringBoot+Vue实现大创项目管理系统开发实践

1. 项目背景与核心价值

大学生创新创业训练项目（简称"大创"）是高校培养学生创新能力的重要平台，但传统管理模式普遍存在流程繁琐、信息孤岛、协作低效等问题。我们团队在参与校级大创项目管理时，深刻体会到纸质审批、Excel统计和群聊沟通带来的效率瓶颈。去年作为项目负责人，我曾因材料版本混乱差点错过中期检查，这促使我们决定开发这套前后端分离的管理系统。

系统采用SpringBoot+Vue技术栈实现，主要解决三大痛点：

• 申报流程线上化：从立项申请到结题验收全流程电子审批，自动生成统计报表
• 多角色协同管理：区分学生、导师、院系管理员、校级管理员四级权限
• 文档版本控制：支持项目文档的版本管理和差异对比，避免"final-final版"乱象

2. 技术架构设计解析

2.1 整体架构设计

采用经典的前后端分离架构，通过RESTful API进行数据交互。技术选型经过多轮对比：

• 后端：SpringBoot 2.7 + MyBatis-Plus 3.5 + MySQL 8.0
• 前端：Vue 3 + Element Plus + Axios
• 部署：Nginx反向代理 + Docker容器化

技术选型心得：放弃JPA选择MyBatis-Plus是因为需要复杂SQL处理报表统计，其Wrapper条件构造器能大幅减少XML编写。Vue3的Composition API更适合我们团队有React经验的成员快速上手。

2.2 数据库设计要点

核心表关系设计遵循三范式原则，关键表包括：

1. 项目表(project)：含状态字段（0-草稿 1-待初审...5-已结题）
2. 流程表(process)：用activiti_id关联工作流引擎
3. 文档表(document)：包含version字段和prev_id实现版本链

sql复制CREATE TABLE `project` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `project_name` varchar(100) NOT NULL COMMENT '项目名称',
  `status` tinyint NOT NULL DEFAULT '0' COMMENT '状态',
  `current_process_id` bigint DEFAULT NULL COMMENT '当前流程节点',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3. 核心功能实现细节

3.1 动态表单引擎

申报材料模板需要支持各学院自定义字段，我们开发了基于JSON Schema的表单设计器：

1. 后端维护表单模板表(form_template)
2. 前端通过vue-json-schema-form动态渲染
3. 提交数据存储为JSONB格式

java复制// 表单模板示例
{
  "title": "创新训练项目申请表",
  "properties": {
    "projectType": {
      "type": "string",
      "enum": ["创新训练", "创业训练", "创业实践"]
    },
    "budget": {
      "type": "number",
      "minimum": 0,
      "maximum": 10000
    }
  }
}

3.2 工作流引擎集成

使用Activiti 7实现审批流程可视化配置，关键实现：

• 定义流程KEY：如"PROJECT_APPROVAL_FLOW"
• 使用TaskListener自动发送站内信通知
• 历史版本追溯通过ACT_HI_*表实现

踩坑记录：最初直接使用Activiti原生API导致事务问题，后改用Spring的@Transactional注解管理，并在TaskService上添加AOP日志。

4. 权限控制系统

4.1 RBAC模型增强

在标准RBAC基础上增加数据权限控制：

• 角色表(sys_role)：admin/college/teacher/student
• 数据范围注解：@DataScope(collegeAlias="d")

java复制@GetMapping("/list")
@DataScope(collegeAlias = "p") 
public R list(Project project) {
  // 自动注入学院条件
  startPage();
  List<Project> list = projectService.selectProjectList(project);
  return R.success(getDataTable(list));
}

4.2 前端权限方案

1. 路由级权限：通过meta.roles控制
2. 按钮级权限：v-hasPermi指令
3. 数据权限：接口返回字段动态过滤

javascript复制// 路由配置示例
{
  path: '/project',
  component: Layout,
  meta: { 
    title: '项目管理',
    roles: ['admin', 'college'] 
  }
}

5. 部署与运维实践

5.1 容器化部署方案

使用Docker Compose编排服务：

yaml复制version: '3'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: 123456
    volumes:
      - ./mysql/data:/var/lib/mysql

  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql

5.2 性能优化措施

1. 接口缓存：Spring Cache + Redis
2. 文件存储：MinIO分布式存储
3. 监控：Spring Boot Admin + Prometheus

6. 典型问题排查指南

6.1 跨域问题解决方案

开发环境常见跨域问题，需配置：

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

6.2 文件上传大小限制

SpringBoot默认1MB限制，需调整：

properties复制# application.properties
spring.servlet.multipart.max-file-size=50MB
spring.servlet.multipart.max-request-size=50MB

7. 项目扩展方向

1. 移动端适配：Uniapp跨端方案
2. 智能推荐：基于TF-IDF的导师匹配算法
3. 数据分析：ECharts可视化看板

这套系统在我校试运行期间，将项目平均审批周期从15天缩短至3天，文档版本错误率降为零。特别提醒：数据库设计时要预留足够varchar长度，我们初期因"项目名称"字段长度不足导致截断问题。