最近做了一個小項目，主要是想練手前後端分離的開發流程，同時把一些常見的技術棧組合落到實處。技術上用的是 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 管理登錄狀態、用户信息等，不然到中期會出現“組件傳值混亂”的問題。
開發節奏與迭代方式
我採取的是 “功能優先，樣式其次” 的順序，先用最簡單的方式把流程跑通，再逐步美化和增強交互體驗。中途幾次想重構，最後都壓住了衝動——不是不能重寫，而是沒必要。
總結幾點建議：
- 架構不要為“規模化”設計，要為“當下清晰”設計。
- 能跑起來的功能，比“架構優雅”的草稿更有價值。
- 小項目裏，流程打通優先於組件通用化。
- 本地開發時別太依賴瀏覽器插件或高級中間件，儘量貼近生產環境。
這類項目雖小，但能練的內容不少。寫下來也不是為了展示什麼成果，更像是給自己下一次做類似項目留點可複用的參考。
