企业官网建设流程全解析

基于SpringBoot + Vue的毕设项目架构解析：从单体到前后端分离的最佳实践

摘要：许多学生在完成基于SpringBoot + Vue的毕设项目时，常陷入前后端耦合、接口设计混乱、部署流程复杂等陷阱。本文从技术科普角度出发，系统讲解如何合理分层、规范RESTful API设计、集成JWT鉴权，并通过模块化代码结构提升可维护性。读者将掌握一套可复用、易部署、符合工业级规范的毕设项目模板，显著降低开发调试成本。

一、毕设常见误区：为什么“能跑就行”其实跑不远

很多同学习惯把“能跑就行”当最高标准，结果答辩现场一演示就翻车。下面这几条坑，几乎年年见：

• 全局变量滥用：把用户信息、数据库连接都写成public static，并发一高就互相覆盖。
• 无状态管理：登录状态靠session.setAttribute("user", user)，一刷新页面就 404。
• SQL 拼接："select * from user where id=" + id，注入风险肉眼可见。
• 前后端一锅炖：JSP 里写 SQL，Vue 里写axios.post('/servlet')，毕业即失业。
• 部署全靠 U脑：手动拷 jar、拷静态文件，路径写死，换个电脑就崩。

这些“小毛病”叠加起来，就是维护地狱。想优雅毕业，得先让架构“毕业”。

二、技术选型：为什么不是 JSP + PHP 老搭档？

1. 生态：SpringBoot 一站式提供 Starter、自动配置、监控，Vue 官方脚手架（Vite）5 分钟搭完 HMR 环境。
2. 分工：Java 强类型+编译期检查，适合写复杂业务；Vue 响应式+组件化，适合高频交互 UI。
3. 就业：校招 JD 里“SpringCloud / Vue3”出现频率远高于“Struts2 / JSP”。
4. 部署：SpringBoot 内嵌 Tomcat，一行java -jar即可；Vue build 后只是静态文件，丢 Nginx 即可，无需装 PHP 运行期。

一句话：老师不会天天陪你调环境，但 SpringBoot + Vue 会。

三、核心实现：让代码像积木一样可拼

3.1 后端分层（Controller / Service / DAO）

• Controller：只干“参数校验 + 转 JSON”，业务一句都不写。
• Service：写事务、拼业务、调用 DAO。
• DAO（MyBatis-Plus）：只对接数据库，不写 SQL 更爽。

示例：分页查询商品

@RestController @RequestMapping("/api/item") public class ItemController { @GetMapping("/page") public Result<Page<Item>> page(@RequestParam(defaultValue = "1") int current, @RequestParam(defaultValue = "10") int size) { return Result.success(itemService.page(current, size)); } }

@Service public class ItemService { @Resource private ItemMapper itemMapper; public Page<Item> page(int current, int size) { Page<Item> page = new Page<>(current, size); // MP 自动分页 return itemMapper.selectPage(page, new QueryWrapper<Item>().orderByDesc("create_time")); } }

3.2 前端 Axios 封装

统一 baseURL、超时、错误提示，避免每个组件都写满catch。

// utils/request.js import axios from 'axios' import { ElMessage } from 'element-plus' const service = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, // 读取 .env timeout: 5000 }) service.interceptors.response.use( res => res.data, err => { ElMessage.error(err.response?.data?.message || '网络异常') return Promise.reject(err) } ) export default service

3.3 跨域配置（开发阶段）

SpringBoot 一行配置即可：

@Configuration public class CorsConfig { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOriginPatterns("*") .allowedMethods("*") .allowCredentials(true); } }; } }

生产环境把 Vue 打包后扔同域，无需 CORS。

四、代码片段：JWT + 路由守卫，登录态不再掉线

4.1 后端 JWT 拦截器

@Component public class JwtInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token = request.getHeader("Authorization"); if (token == null || !JwtUtil.verify(token)) { response.setStatus(HttpServletResponse.SC_UNAUTHORIZED); return false; } // 把 userId 放到 request 属性，后续直接 get request.setAttribute("userId", JwtUtil.getUserId(token)); return true; } }

注册拦截器：

@Configuration public class WebConfig implements WebMvcConfigurer { @Resource private JwtInterceptor jwtInterceptor; public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(jwtInterceptor) .addPathPatterns("/api/**") .excludePathPatterns("/api/auth/**"); // 登录/注册放行 } }

4.2 Vue 路由守卫

// router/index.js router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') if (to.meta?.requiresAuth && !token) { next('/login') } else { next() } })

五、性能 & 安全：别让“小项目”成为“小炸弹”

1. N+1 查询：MyBatis-Plus 默认开启selectCount+selectList，一对多时用join或@ResultMap一次拿完。
2. 密码加密：Spring Security 的BCryptPasswordEncoder，强度 10 足够。
3. CORS 策略：生产环境把allowedOriginPatterns改成精确域名，防止被钓鱼站调用。
4. SQL 注入：用 MyBatis-Plus 条件构造器，不写${}占位符。
5. 日志脱敏：Logback 搭配MaskingPatternLayout，把手机号、身份证中间四位换成星号。

六、生产环境避坑指南

1. 静态资源缓存：Nginx 对*.js|*.css加Cache-Control: max-age=31536000，文件名带 hash 避免旧版本。
2. 数据库连接池：HikariCP 默认配置足够，但maximum-pool-size别超过 CPU 核心×2，压测后再调。
3. 日志归档：Logback 按天切割，保留 30 天，防止把服务器磁盘打爆。
4. 敏感配置：JWT 密钥、数据库密码 放到application-prod.yml，通过启动参数--spring.profiles.active=prod加载，禁止提交 Git。
5. 健康检查：SpringBoot Actuator 开启/actuator/health，配合 Docker 的HEALTHCHECK，重启不迷路。

七、动手重构：把“能跑”升级成“能扛”

1. 先把你现有的servlet + JSP拆成两层：所有/api/*接口返回 JSON，任何页面跳转交给 Vue Router。
2. 把 SQL 语句统一收进 Mapper/XML，消灭 “+” 拼接。
3. 登录逻辑换成 JWT，浏览器关掉再开依旧在线。
4. 用 Git 子模块把vue和springboot分仓库，CI 分别打包，Docker Compose 一键up -d。
5. 最后压测：ApacheBench 并发 100 持续 30 秒，观察 HikariCP 活跃连接、CPU 曲线，调优后再写论文“性能测试”章节，数据好看，答辩自然稳。

八、再往前一步：微服务有多远？

当你把单体拆成：

• user-service（登录、注册）
• item-service（商品、库存）
• order-service（下单、支付）

并用 Nacos 做注册中心、Gateway 做统一入口、Sentinel 做流控，就已经摸到微服务门口。毕设虽不要求，但简历上写“熟悉 SpringCloud Alibaba 全家桶”会亮很多。先让当前架构跑稳，再逐步拆分，循序渐进，比一口气上 Kubernetes 更现实。

写在最后

动手永远比看文高效。把本文的 JWT 拦截器、Axios 封装、CORS 配置直接粘进你的毕设，跑通后再回头读一遍，你会发现“架构”不是高不可攀的名词，而是一步步可验证的积木。祝你毕业顺利，也欢迎把踩到的新坑在评论区分享，一起把这套模板升级成“微服务毕设”下一代版本。