从学生视角构建毕设管理系统：Vue3+SpringBoot全栈实战手记

去年此时，我还是个对着学校毕设系统手足无措的计算机系学生，如今却能用自己搭建的系统完成论文全流程管理。这个蜕变始于一个简单的想法：为什么不亲手复刻每天使用的系统？八个月的开发历程，从数据库设计到云部署，从权限控制到性能优化，我把这段充满"坑点"的实战经历浓缩成以下技术札记。

1. 技术选型：为什么是Vue3+SpringBoot

当决定复刻学校系统时，技术组合的抉择花费了我整整两周。最终方案背后是数十个对比实验的结论：

前端技术栈对比表

维度	Vue3	Vue2	React
响应式原理	Proxy	Object.defineProperty	Virtual DOM
TypeScript支持	原生友好	需要额外配置	需要额外配置
打包体积	22.5KB (gzipped)	23KB (gzipped)	43KB (gzipped)
组合式API	提供	需插件支持	需使用Hooks

选择Vue3的关键因素：

• Composition API 让功能模块化更符合毕设系统的组件划分
• Volar插件 在VS Code中提供媲美IDE的类型提示
• Pinia状态管理 简化了跨组件共享论文状态的需求

后端选择SpringBoot则源于：

// 典型SpringBoot启动类配置
@SpringBootApplication
@EnableTransactionManagement
@MapperScan("com.thesis.mapper")
public class ThesisSystemApplication {
    public static void main(String[] args) {
        SpringApplication.run(ThesisSystemApplication.class, args);
    }
}

提示：SpringBoot 2.7.x版本在JDK17环境下有最佳性能表现

2. 权限系统设计：从学生到管理者的多维视角

原系统最让我困惑的是不同角色看到的界面差异。自己实现时，采用RBAC模型结合JWT的方案：

权限控制流程图

1. 用户登录 → 生成包含角色的JWT
2. 前端路由守卫校验权限元数据
3. 后端接口添加 @PreAuthorize 注解
4. 数据库操作增加行级权限过滤

// 前端路由权限控制示例
const routes = [
  {
    path: '/paper',
    component: PaperManage,
    meta: { roles: ['STUDENT', 'TEACHER'] }
  },
  {
    path: '/admin',
    component: AdminPanel,
    meta: { roles: ['ADMIN'] }
  }
]

遇到的典型坑点：

• JWT续期问题 ：采用双Token方案（accessToken 30分钟 + refreshToken 7天）
• 权限粒度控制 ：使用自定义注解 @DataScope 实现数据可见性过滤
• 菜单动态加载 ：根据角色权限树递归生成导航菜单

3. 核心功能实现：论文生命周期管理

系统最复杂的业务逻辑集中在论文状态流转上。我采用状态机模式设计论文生命周期：

论文状态转换表

当前状态	允许操作	下一状态
选题中	提交选题申请	待导师确认
待导师确认	导师通过/拒绝	写作中/已驳回
写作中	提交初稿	待批改
待批改	导师添加批注	修改中
修改中	提交修订版	待批改
待答辩	录入答辩结果	已归档

状态机实现关键代码：

public enum PaperState {
    TOPIC_SELECTING {
        @Override
        public PaperState nextState(Action action) {
            return action == Action.SUBMIT_TOPIC ? 
                   TOPIC_PENDING_APPROVAL : this;
        }
    },
    // 其他状态枚举...
}

// 使用示例
paper.setState(paper.getState().nextState(action));

4. 性能优化实战：从本地到生产的蜕变

当系统数据量突破1000条记录时，明显感受到性能下降。通过以下措施将响应时间从1200ms降至200ms内：

优化措施对比

1. 数据库层面

   • 添加论文标题、学号的联合索引
   • 将文件存储从数据库BLOB改为OSS对象存储
   • 使用JOIN替代多次单表查询

2. 缓存策略

   @Cacheable(value = "paperCache", key = "#paperId")
   public PaperDetailVO getPaperDetail(Long paperId) {
       // 数据库查询逻辑
   }
   

   注意：缓存雪崩防护采用随机过期时间

3. 前端优化

   • 论文列表采用虚拟滚动
   • 使用Web Worker处理批量导出
   • 按需加载富文本编辑器

5. 部署踩坑全记录

从本地开发到公网访问，部署环节的教训最为深刻：

典型部署问题解决方案

• 跨域问题 ：Nginx配置增加 add_header 指令
• HTTPS证书 ：使用acme.sh自动续签Let's Encrypt
• 内存泄漏 ：通过Arthas定位到未关闭的PDFBox实例
• 并发提交 ：数据库添加乐观锁版本控制

部署 checklist：

1. [ ] 生产环境禁用Swagger
2. [ ] 日志切割配置（logrotate）
3. [ ] 健康检查接口 /actuator/health
4. [ ] 备份策略（每日增量+每周全量）

6. 那些教科书没告诉你的实战经验

八个月的开发让我积累了许多非常规技巧：

效率工具链

• 代码生成 ：基于MyBatis Generator定制模板
• 接口调试 ：使用Postman的Collection Runner
• SQL分析 ：Arthas的 watch 命令监控慢查询
• 压力测试 ：JMeter模拟百人并发提交

开发环境配置建议：

# .npmrc 配置
registry=https://registry.npmmirror.com
sass_binary_site=https://npmmirror.com/mirrors/node-sass

最值得安装的VS Code插件：

1. Vue Language Features (Volar)
2. Java Extension Pack
3. REST Client
4. GitLens

这段开发经历最宝贵的不是最终上线的系统，而是解决问题的思维方式。当看到自己构建的系统真正帮助同学完成论文管理时，那些调试到凌晨的夜晚都变得值得。技术成长的路上没有捷径，但每个踩过的坑都会成为脚下的台阶。