用 Spring Boot + Vue3 搭建个人项目的几点实践经验

用 Spring Boot + Vue3 搭建个人项目的几点实践经验

最近做了一个小项目，主要是想练手前后端分离的开发流程，同时把一些常见的技术栈组合落到实处。技术上用的是 Spring Boot 做后端，Vue3 做前端，数据库选了 MySQL，加了 Redis 做缓存。

不是大项目，也没有复杂的业务逻辑，正因如此，反倒让我更专注于开发流程、架构清晰度和一些基础设施的细节。这里记录一些踩过的坑和能复用的经验。

技术栈简述

• 后端：Spring Boot（REST 接口、MyBatis、Spring Security）
• 前端：Vue 3（Composition API、Pinia、Axios）
• 数据库：MySQL（基本的增删改查）
• 缓存：Redis（主要做列表缓存 + 登录状态）

这些组件组合起来是为了追求一个目标：部署成本低、学习曲线平滑、自己能完全掌控每一环。

项目结构设计

后端模块采用了分层结构，按照 controller → service → mapper 的标准写法。数据库表设计尽量简单，尽量避免多表 join，宁可做点冗余。

前端部分用了 Vite 搭建开发环境，整体项目结构保持简洁，每个页面一个 view，再细分出通用的组件。

这一点经验是：目录别搞太复杂，项目规模小时，结构扁平比花哨架构更高效。

一些问题和处理方式

跨域请求

前后端本地开发阶段跨域是常态，用 Spring Boot 配置 CORS 即可，别一开始就上复杂的网关或者代理配置。

registry.addMapping("/**")
    .allowedOrigins("http://localhost:5173")
    .allowedMethods("*");

接口权限控制

Spring Security 用起来不轻松，但如果只是做个基本的登录校验，可以把逻辑包在 UsernamePasswordAuthenticationFilter 之前处理，再用 JWT 做状态传递。避免 session 管理，部署简单。

缓存更新策略

列表类接口缓存最明显提升性能，但要注意缓存失效策略。一开始我用的固定 TTL，后来改成了写操作后主动清除缓存，这样列表总是最新的，命中率也更高。

redisTemplate.delete("user:tasklist:" + userId);

前端状态管理

Pinia 比 Vuex 用起来直观很多，状态逻辑更容易抽离出来。建议从一开始就用统一 store 管理登录状态、用户信息等，不然到中期会出现“组件传值混乱”的问题。

开发节奏与迭代方式

我采取的是 “功能优先，样式其次” 的顺序，先用最简单的方式把流程跑通，再逐步美化和增强交互体验。中途几次想重构，最后都压住了冲动——不是不能重写，而是没必要。

总结几点建议：

1. 架构不要为“规模化”设计，要为“当下清晰”设计。
2. 能跑起来的功能，比“架构优雅”的草稿更有价值。
3. 小项目里，流程打通优先于组件通用化。
4. 本地开发时别太依赖浏览器插件或高级中间件，尽量贴近生产环境。

这类项目虽小，但能练的内容不少。写下来也不是为了展示什么成果，更像是给自己下一次做类似项目留点可复用的参考。