基于SpringBoot和Vue的毕设系统架构解析：从技术选型到代码实现-程序员充电站

背景痛点：毕设开发的三座“隐形大山”

做毕设时，很多同学把“能跑起来”当成唯一目标，结果在答辩前一周集体踩坑：

前后端混写：JSP 里嵌 Vue，Vue 里写 SQL，代码一耦合，改需求就“牵一发动全身”。
接口随意：URL 叫/login2、/getData，状态码清一色 200，前端拿到 500 只能alert("报错")，老师一问“幂等性怎么保证”就集体沉默。
部署黑洞：Windows 上跑得好好的，上云就 404，静态资源 404、跨域 502，最后把 jar 包和 node_modules 一起塞进 FTP，服务器 1G 内存直接 OOM。

这些痛点的本质是“缺一套教学友好、又能平滑过渡到生产的脚手架”。下面这套 SpringBoot + Vue 的“最小可用骨架”，就是为此而生。

技术选型：为什么不是 SSM 与 React

维度	SpringBoot vs SSM	Vue vs React
冷启动	内嵌 Tomcat，一键启动	CLI 开箱即用，模板语法近似 HTML
配置量	零 XML，yml 即可	单文件组件，样式作用域天然隔离
学习曲线	注解驱动，无需整合 Struts	双向绑定 + 选项式 API，学生可“猜”语法
生态对齐	MyBatis-Plus、Knife4j 一键集成	Element-Plus 与 Boot 配套脚手架最多

结论：SpringBoot 让“跑起来”成本最低，Vue 让“写出来”心智负担最小，两者组合是“教学—生产”梯度最平滑的栈。

核心实现细节

1. 项目骨架

back └─ src ├─ main │ ├─ java │ │ └─ com.example.demo │ │ ├─ config │ │ ├─ controller │ │ ├─ entity │ │ ├─ mapper │ │ ├─ service │ │ └─ DemoApplication.java │ └─ resources │ ├─ application.yml │ └─ mapper/*.xml front └─ src ├─ api ├─ router ├─ store └─ views

前后端彻底解耦，端口级联通过.env文件注入，方便 CI 时替换。

2. 统一响应封装

@Data public class R<T> { private int code; private String msg; private T data; public static <T> R<T> ok(T data){ return new R<>(200,"ok",data); } public static R<Void> fail(int code,String msg){ return new R<>(code,msg,null); } }

所有 Controller 返回R，前端拦截器只需判断code !== 200即可集中弹窗，降低心智负担。

3. JWT 鉴权 & 幂等性保证

登录接口：

@PostMapping("/login") public R<String> login(@RequestBody LoginDTO dto){ User user = service.lambdaQuery() .eq(User::getUsername,dto.getUsername()) .one(); if(user==null || !BCrypt.checkpw(dto.getPassword(),user.getPassword())){ return R.fail(401,"账号或密码错误"); } String token = Jwts.builder() .setSubject(user.getId().toString()) .setExpiration(new Date(System.currentTimeMillis()+EXPIRE)) .signWith(SignatureAlgorithm.HS512,SECRET) .compact(); return R.ok(token); }

Token 存入 Vuex，Axios 拦截器统一挂载：

service.interceptors.request.use(config=>{ config.headers['Authorization'] = 'Bearer ' + store.getters.token return config })

为防止重复提交，在 JWT payload 加入jti字段，后端用 RedisSETNX做幂等性校验，30 s 过期，既防重复，又避免长期占用内存。

4. MyBatis-Plus 通用 CRUD

@RestController @RequestMapping("/api/student") @PreAuthorize("hasRole('ADMIN')") public class StudentController { @Resource private StudentService service; @GetMapping("/page") public R<IPage<Student>> page(PageDTO dto){ LambdaQueryWrapper<Student> qw = Wrappers.lambdaQuery(); qw.like(StringUtils.isNotBlank(dto.getName()),Student::getName,dto.getName()); return R.ok(service.page(dto.toPage(),qw)); } }

前端直接传current & size，后端返回records & total，列表分页零 SQL。

5. 跨域与 OPTIONS 缓存

spring: mvc: cors: allowed-origins: "*" allowed-methods: "*" allowed-headers: "*" allow-credentials: true max-age: 3600

CORS 预检缓存 1 h，减少 50% 以上无效 OPTIONS 请求。

精简代码片段

后端：登录 + 密码加密

// UserService.java public void addUser(UserDTO dto){ User user = new User(); user.setUsername(dto.getUsername()); user.setPassword(BCrypt.hashpw(dto.getPassword(),BCrypt.gensalt())); save(user); }

前端：Vue3 组合式登录调用

// api/user.js export function login(data){ return request.post('/login',data) } // views/Login.vue const form = reactive({username:'',password:''}) async function handleLogin(){ const {data} = await login(form) store.commit('SET_TOKEN',data) router.push('/dashboard') }

Nginx 静态资源映射

location / { root /usr/share/nginx/html/dist; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080/; }

安全性 & 性能

XSS：Vue 默认转义，后端富文本用 Jsoup 白名单过滤onerror、javascript:等危险属性。
SQL 注入：MyBatis-Plus 内置#{}预编译，拒绝${}拼接。
密码加密：BCrypt 10 轮盐值，彩虹表成本指数级上升。
接口缓存：对热点字典加Cacheable(key="#root.methodName")，配合 Spring Cache + Caffeine，QPS 提升 3 倍。
懒加载：Vue Router 动态import(()=>)，首屏 chunk 减少 40%，3G 网络 2 s 内可交互。

生产环境避坑指南

数据库连接池：默认 HikariCP，max=10在 1C2G 学生机足够；云服务器 4C8G 可提到 30，并打开leakDetectionThreshold=60000揪出慢 SQL。
静态资源 404：SpringBoot 打包后jar里无webapp，前端必须走 Nginx，禁止spring.resources.static-locations指到file:绝对路径，否则重启即失效。
文件上传：Linux 默认/tmp7 天清理，上传目录改到/data/upload，并在application.yml显式声明spring.servlet.multipart.location。
时区：容器镜像用openjdk:8-jre-alpine记得加-Duser.timezone=GMT+08，否则定时任务差 8 小时。
日志：使用logback-spring.xml按天归档，保留 30 天；学生机磁盘小，关闭console输出，只留file。