個人財務管理系統(tǒng)如果是自己從零開發(fā)最容易出的問題不是功能不夠多而是技術(shù)棧之間銜接不上。最近我用 JAVA SpringBoot3 Vue.js3 MySQL 這套組合完整做了一遍發(fā)現(xiàn)這個項目非常適合用來打通前后端全流程后端有鑒權(quán)、CRUD、統(tǒng)計接口前端有登錄、路由、表單、圖表展示數(shù)據(jù)庫則要處理預算、分類、流水這些真實業(yè)務表。整篇文章按實際開發(fā)順序拆開包括環(huán)境準備、數(shù)據(jù)庫設計、后端接口、前端頁面、聯(lián)調(diào)排錯和部署思路盡量讓看完的人能把整套流程復制下來。先說結(jié)論這套組合能做好是因為 SpringBoot3 負責把后端接口和業(yè)務邏輯組織清楚Vue.js3 負責把頁面交互做靈活MySQL 負責存住賬目流水。困難點主要集中在版本匹配、跨域處理、金額精度和登錄狀態(tài)維護這幾個環(huán)節(jié)。如果你當前的需求是做畢業(yè)設計、個人記賬工具或者想驗證一套主流全棧開發(fā)流程這篇文章值得花點時間看完。1. 先把這套技術(shù)棧讀懂才知道要準備什么1.1 這個系統(tǒng)到底解決什么問題個人財務管理系統(tǒng)的核心價值并不是“把頁面做得好看”而是解決一個人每天記賬、歸類、統(tǒng)計、控制預算這個完整閉環(huán)問題。實際要能跑起來至少需要處理注冊和登錄確保每個人的賬目只屬于自己。日常收入的添加、支出記錄、修改和刪除。收支分類管理比如餐飲、交通、工資、理財。按月統(tǒng)計收入和支出。查看每個分類花了多少錢。給某個月份設置預算并反饋超支情況。這些需求合在一起就是對個人賬本的全流程管理。如果你只是練習某項技術(shù)數(shù)據(jù)庫表可以很簡單。如果你想做成一個能長期使用的系統(tǒng)這個流程圖很重要登錄鑒權(quán)、賬目流水、分類匯總、預算預警、統(tǒng)計報表每一步都要串聯(lián)起來。1.2 為什么推薦 JAVA SpringBoot3 Vue.js3 MySQL以前做類似系統(tǒng)常見方案是 JSP Servlet MySQL開發(fā)慢前后端放在一起維護起來很費力。換成 SpringBoot3 Vue.js3 之后前后端職責分得很清楚后端只返回 JSON前端負責渲染和交互。MySQL 在這里扮演持久化角色把賬本數(shù)據(jù)穩(wěn)定保存住。這套組合適合以下場景學習 Java 全棧開發(fā)想理解接口如何設計。做課程設計、畢業(yè)設計需要完成度高、能演示的 Web 系統(tǒng)。想在本地部署一個自用記賬工具方便自己擴展功能。它也有學習成本SpringBoot3 和 SpringBoot2 在很多默認配置上有差異Vue3 和 Vue2 在語法與響應式原理上也不同使用前需要先確認版本體系。1.3 先從文檔和項目結(jié)構(gòu)入手不要直接寫業(yè)務新手寫個人財務系統(tǒng)時最常犯的錯誤是還沒理清表結(jié)構(gòu)就開始在 Controller 里堆代碼。要做到后面順利前期先把分層結(jié)構(gòu)定下來。比較常見的后端結(jié)構(gòu)是controller接收請求校驗基礎參數(shù)調(diào)用服務。service寫核心業(yè)務邏輯。mapper負責數(shù)據(jù)庫操作。entity對應數(shù)據(jù)庫表的實體類。dto接收前端參數(shù)的對象。vo返回給前端的數(shù)據(jù)結(jié)構(gòu)。config配置 WebMvc、跨域、攔截器。utilsJWT、日期處理等工具。前端結(jié)構(gòu)可以是views展示頁面。router路由配置。store保存登錄態(tài)和用戶信息。api封裝 axios 請求。components通用組件。這樣分好之后問題定位會更快接口 500 就先查 Service頁面沒數(shù)據(jù)就先查 api 層和網(wǎng)絡請求字段對不上就先查 VO 的返回值。不要指望把幾十個接口寫在同一個 Controller 里也能做好維護短期看方便后期加一個統(tǒng)計功能都可能互相影響。2. 環(huán)境準備和工程骨架先把前后端都跑起來2.1 安裝 JDK 和 MySQL 時的版本意識環(huán)境準備排在第一位的不是“能把軟件裝出來”而是版本匹配。SpringBoot3 是基于 Jakarta EE 的一套新版本默認使用 jakarta.servlet不再使用 javax.servlet。這意味著后端選擇 SpringBoot3 時JDK 版本至少要 17。如果機器上還在用 JDK8 或 JDK11直接創(chuàng)建 SpringBoot3 工程要么啟動報錯要么需要換版本時間成本會明顯增加。推薦先確認以下三個版本JDK17 或更高。Maven3.6。SpringBoot3.x實際以你創(chuàng)建工程時選擇的版本為準。安裝 MySQL 時最常出現(xiàn)的問題是服務啟動了但連不上或密碼策略不明確。如果是在 Windows 上使用安裝版安裝過程中會讓設置 root 密碼如果使用壓縮包版需要先初始化再啟動服務。這個過程不要跳過日志檢查確認 3306 端口能正常監(jiān)聽再進入下一步。2.2 創(chuàng)建 SpringBoot3 后端工程工程創(chuàng)建方式比較靈活可以用 IDEA 直接新建也可以使用 Spring Initializr 生成后導入。創(chuàng)建一個新工程時基礎依賴建議選Spring Web提供 Controller、接口調(diào)用、內(nèi)嵌 Tomcat。Spring Validation做參數(shù)校驗。MySQL Driver連接 MySQL。創(chuàng)建完成后pom.xml 里至少會包含類似下面的內(nèi)容dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdcom.mysql/groupId artifactIdmysql-connector-j/artifactId scoperuntime/scope /dependency如果使用 MyBatis-Plus 這類增強框架再額外引入對應依賴。這里要注意一點MyBatis-Plus 對 SpringBoot3 的適配版本與 SpringBoot2 不同不要拿老教程里的依賴直接塞進新工程容易報版本沖突。2.3 創(chuàng)建 Vue.js3 前端工程前端工程推薦使用 Vite 創(chuàng)建速度快配置直觀。npm create vitelatest finance-web -- --template vue進入項目后安裝依賴cd finance-web npm install npm install vue-router4 npm install pinia npm install axios npm install element-plus npm install echarts上面命令里的依賴不是全都要裝完才動手。最穩(wěn)妥的順序是先把 vue-router 和 axios 裝好保證頁面能跳轉(zhuǎn)、請求能發(fā)出再逐步加入組件庫和圖表庫。很多項目是啟動時依賴沖突結(jié)果發(fā)現(xiàn)是組件庫版本和 Vite 版本不匹配。前端項目啟動后默認端口通常是 5173后端的默認端口通常是 8080。兩邊端口不同聯(lián)調(diào)時需要配置代理或開啟跨域這個問題后面單獨說。2.4 先讓前后端各跑一個默認頁面不要一上來就寫登錄注冊。后端可以先寫一個最簡單的接口RestController RequestMapping(/api/health) public class HealthController { GetMapping public String health() { return ok; } }啟動后端后在瀏覽器訪問 http://localhost:8080/api/health 能看到返回 ok說明 SpringBoot3 的服務基本正常。前端可以先清空 App.vue 默認代碼只保留一個簡單模板。運行 npm run dev看到頁面能訪問說明前端編譯正常。這一步看起來簡單價值很大它把“環(huán)境問題”和“代碼問題”盡早分開。很多人的項目做到一半才啟動報錯信息非常長一會兒懷疑 Maven一會兒懷疑 Node實際上最開始就沒有確認骨架能跑。3. 數(shù)據(jù)庫表和實體層先做預算、分類還是先做流水3.1 先設計合理的最小表結(jié)構(gòu)個人財務管理系統(tǒng)如果照著真實記賬軟件做表會非常多。個人實測時更建議從一組最小表開始先跑通業(yè)務流程后面再考慮要不要加標簽、成員、多賬戶。下面是一套很經(jīng)典的四表結(jié)構(gòu)用戶表保存登錄用戶名、密碼、昵稱。分類表保存收入分類或支出分類。流水表保存每一筆賬單。預算表保存月份預算按月份和分類做區(qū)分。創(chuàng)建數(shù)據(jù)庫時可以先執(zhí)行CREATE DATABASE finance_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;示例表結(jié)構(gòu)CREATE TABLE sys_user ( id BIGINT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(100) NOT NULL, nickname VARCHAR(50), create_time DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE biz_category ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL, name VARCHAR(50) NOT NULL, type TINYINT NOT NULL COMMENT 1收入2支出 ); CREATE TABLE biz_transaction ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL, category_id BIGINT, amount DECIMAL(14,2) NOT NULL, type TINYINT NOT NULL COMMENT 1收入2支出, transaction_date DATE NOT NULL, remark VARCHAR(255), create_time DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE biz_budget ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL, category_id BIGINT, budget_month VARCHAR(7) NOT NULL COMMENT 格式: 2025-06, amount DECIMAL(14,2) NOT NULL );需要注意幾個設計點金額字段用 DECIMAL不用 FLOAT 和 DOUBLE這是為了精確保存金額。每張業(yè)務表都帶 user_id這是為了控制數(shù)據(jù)屬于哪個用戶。category_id 在預算和流水之間建議用長整型關(guān)聯(lián)。流水表里記錄 type是為了和分類表保持一致性。3.2 實體和數(shù)據(jù)庫字段要做到一一對應數(shù)據(jù)庫創(chuàng)建完成后后端實體類要能覆蓋表中所有需要讀寫字段的列避免漏字段。public class Transaction { private Long id; private Long userId; private Long categoryId; private BigDecimal amount; private Integer type; private LocalDate transactionDate; private String remark; private LocalDateTime createTime; }不要為了省事把所有字段統(tǒng)一成 String比如金額在實體里用 BigDecimal日期如果只是按天統(tǒng)計可以用 LocalDate。Java 的時間類型在前端聯(lián)合使用時需要考慮格式化這一步可以先統(tǒng)一處理后面聯(lián)調(diào)章節(jié)會展開。3.3 索引和查詢頻率的關(guān)系個人財務系統(tǒng)雖然數(shù)據(jù)量不會太大但統(tǒng)計接口大概率要按月份過濾 transaction_date所以建議在 transaction_date 和 user_id 上建立索引ALTER TABLE biz_transaction ADD INDEX idx_user_date (user_id, transaction_date);這里解釋一下為什么查詢“某人某月的所有賬單”時先用 user_id 過濾再用 transaction_date 排序這個索引能減少掃描行數(shù)。查詢“按分類匯總”時需要讀大量流水記錄合理的索引能減輕 MySQL 壓力。預算表和分類表不需要過分加索引數(shù)據(jù)量小、查詢模式單一加了反而增加維護成本。4. SpringBoot3 后端接口認證、記賬、統(tǒng)計4.1 統(tǒng)一返回結(jié)果和業(yè)務異常個人財務系統(tǒng)后端接口不建議每個方法返回裸對象。裸對象在數(shù)據(jù)正常時沒感覺但出現(xiàn)業(yè)務異常時前端無法用統(tǒng)一結(jié)構(gòu)判斷是否成功排錯會變得很麻煩。推薦定義一個統(tǒng)一的返回結(jié)構(gòu)格式大致如下public class ApiResultT { private Integer code; private String message; private T data; }定義code 200 表示成功。code 401 表示未登錄。code 500 表示服務端異常。同時定義一個全局異常處理器。當刪除一條不存在的交易、修改不屬于當前用戶的記錄時拋出業(yè)務異常由異常處理器統(tǒng)一包裝返回。這樣做的好處是前端 axios 攔截器只需要根據(jù) code 做集中處理不需要每個月統(tǒng)計接口里手工判斷返回值。4.2 登錄鑒權(quán)使用 JWT 而不是每次查數(shù)據(jù)庫個人項目做登錄方案推薦用 JWT服務端不需要保存 session。登錄成功后后端生成一個 token前端請求時把 token 放在請求頭里后端每次從 token 中解析 userId。示例邏輯不需要真正貼出完整代碼庫核心是這樣一張流程圖用戶提交用戶名和密碼。后端校驗密碼是否正確。正確則生成 token返回給前端。前端存儲 token并在 axios 請求攔截器中統(tǒng)一添加到 Authorization 請求頭。SpringBoot3 提供一個攔截器校驗所有除了登錄、注冊外的接口必須帶 token。SpringBoot3 中寫攔截器時注意包路徑是 jakarta.servlet。對于密碼存儲不要用明文保存。個人項目中常用 BCrypt 做哈希加密生成結(jié)果是一段帶鹽值的密文。即使數(shù)據(jù)庫泄露也無法直接看到用戶明文密碼。4.3 核心記賬接口如何設計接口清單可以這樣規(guī)劃POST /api/auth/login登錄。POST /api/auth/register注冊。GET /api/transaction/list?typeyearMonth2025-06流水列表。POST /api/transaction新增流水。PUT /api/transaction/{id}修改流水。DELETE /api/transaction/{id}刪除流水。GET /api/stats/month-summary?yearMonth2025-06月度匯總。GET /api/stats/category-summary?type2yearMonth2025-06分類統(tǒng)計。POST /api/budget保存預算。GET /api/budget/list?yearMonth2025-06查看預算。接口數(shù)量不用貪多關(guān)鍵是把參數(shù)和返回邏輯做穩(wěn)。新增流水時Service 中要注意的一點當前登錄用戶 ID不能從前端傳來的 userInfo 字段獲取而是從 JWT 里解析出來。這樣做是為了防止用戶傳 userId1直接改別人的賬。正確方向是攔截器解析完 token 后把 userId 放到請求上下文里業(yè)務層統(tǒng)一讀取。舉例Long currentUserId JwtUtils.getUserId(request); transaction.setUserId(currentUserId);這樣能把安全問題規(guī)避大半。4.4 月度統(tǒng)計和分類統(tǒng)計的實現(xiàn)統(tǒng)計接口查詢場景很典型舉一個簡單例子支出分類統(tǒng)計。SELECT category_id, SUM(amount) AS total FROM biz_transaction WHERE user_id ? AND type 2 AND DATE_FORMAT(transaction_date, %Y-%m) ? GROUP BY category_id ORDER BY total DESC;如果你不喜歡在 SQL 里使用 DATE_FORMAT也可以傳入 startDate 和 endDate再用 BETWEEN 過濾AND transaction_date BETWEEN #{startDate} AND #{endDate}顯式的開始和結(jié)束日期范圍比字符串格式化更高效也更方便索引利用。返回統(tǒng)計結(jié)果時不要直接返回 List即使代碼簡單也會讓前端不好處理。更推薦定義一個 SummaryVO字段包括分類 ID、分類名稱、金額、占比再把分類名稱關(guān)聯(lián)出來。4.5 預算超支提醒到底怎么做預算功能看起來復雜做成接口邏輯后并不難。預算的數(shù)據(jù)結(jié)構(gòu)是按月和分類管理。如果用戶當月沒有針對某個分類設置預算那這條分類不做超支判斷。如果設置了規(guī)則可以是當月支出預算 3000分類餐飲預算 1200。統(tǒng)計時先計算當月總支出。如果總支出大于預算金額返回超支提示。分類預算如果超支前端可以標紅對應分類。在后端可以把預算表和統(tǒng)計數(shù)據(jù)關(guān)聯(lián)起來寫一個 BudgetStatusVO。字段包括 budgetAmount、usedAmount、ratio、overFlag。前端拿到 ratio 后用進度條展示預算使用百分比會非常直觀。5. Vue3 前端怎么把這些頁面串起來5.1 創(chuàng)建登錄頁和數(shù)據(jù)請求封裝登錄頁是第一個入口它解決的問題是拿到 token 并保存。登錄成功后建議這樣處理const loginRes await loginApi(form); localStorage.setItem(token, loginRes.data.token); router.push(/);為什么用 localStorage 而不是 sessionStorage頁面刷新后 sessionStorage 可能丟localStorage 能維持會話。如果你希望關(guān)閉瀏覽器后必須重新登錄可以用 sessionStorage這里根據(jù)自己的產(chǎn)品邏輯決定。axios 封裝也很關(guān)鍵。創(chuàng)建 request.js 時至少做三件事baseURL 統(tǒng)一配置。請求攔截器從 localStorage 取 token。響應攔截器判斷 code401 則跳回登錄頁。import axios from axios import router from ../router const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization token } return config }) request.interceptors.response.use( response { const res response.data if (res.code 401) { router.push(/login) return Promise.reject(new Error(未登錄)) } return res }, error { return Promise.reject(error) } ) export default request5.2 路由和頁面結(jié)構(gòu)前端路由建議配置為/login登錄和注冊頁面。/重定向到 /dashboard。/dashboard儀表盤顯示本月收支和預算進度。/transactions流水列表。/categories分類管理。/budget預算設置。/reports統(tǒng)計報表。在路由配置中需要設置 meta.requiresAuth 字段。全局前置守衛(wèi)里判斷 token 是否存在沒有 token 就強制跳到登錄頁。這種結(jié)構(gòu)很簡單但能形成基本權(quán)限邊界。5.3 記賬頁面怎么寫才順手記賬頁面建議設計成左右兩欄或卡片式不要全部堆在一個長頁面。核心字段收支類型切換收入或支出。分類選擇。金額輸入。日期選擇。備注。對應的表單項如下el-select v-modelform.categoryId placeholder請選擇分類 el-option v-foritem in categoryList :keyitem.id :labelitem.name :valueitem.id / /el-select el-input-number v-modelform.amount :precision2 :step1 /分類列表要根據(jù)“支出/收入”動態(tài)加載。用戶在切換收入、支出時分類列表要自動刷新。后端接口一開始可以設計為 GET /api/category/list?type2前端在類型變化時重新調(diào)用。5.4 用 ECharts 展示統(tǒng)計圖表統(tǒng)計頁面是整個系統(tǒng)中最有“完成度”的部分。月度趨勢可以用折線圖展示統(tǒng)計每月的收入支出曲線import * as echarts from echarts const chart echarts.init(document.getElementById(chart)) chart.setOption({ xAxis: { data: monthList }, yAxis: {}, series: [ { name: 支出, type: line, data: expenseList }, { name: 收入, type: line, data: incomeList } ] })分類占比使用餅圖更直觀series: [{ type: pie, data: categoryData }]要注意的是 ECharts 容器必須有固定高度否則頁面里會出現(xiàn)圖表不顯示、高度為 0 的問題?？梢栽趫D表父容器上設置 height: 400px 或 500px再初始化圖表。組件卸載時建議調(diào)用 chart.dispose() 釋放資源避免切換頁面時內(nèi)存占用上升。6. 前后端聯(lián)調(diào)最常踩的坑跨域、日期、金額精度、權(quán)限6.1 開發(fā)時用 Vite 代理解決跨域后端接口通過 localhost:8080 訪問前端頁面通過 localhost:5173 訪問瀏覽器就會認為這是跨域請求。如果沒有處理控制臺會頻繁出現(xiàn) CORS 錯誤。處理方式有兩種方式一是后端開啟跨域配置。方式二是開發(fā)階段更推薦的做法在前端配置 Vite 代理請求 /api 時轉(zhuǎn)發(fā)到 8080。在 vite.config.js 中加入server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }這樣前端仍然請求 /api/login實際由 Vite 轉(zhuǎn)發(fā)到后端。代碼里看不出地址變化但跨域問題被解決了。后端如果也需要開啟跨域可以用一個 WebMvcConfigurer 配置類Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE); } }開發(fā)階段兩個都配置也能工作但建議項目里確定一個是主要訪問鏈路不要兩邊都依賴否則排查請求走向時容易被繞暈。6.2 日期格式不一致帶來的返工后端 LocalDate/LocalDateTime 序列化到前端時大概率會變成數(shù)組或標準 ISO 字符串而不是你想要的 2025-06-18。在 SpringBoot 的 application.yml 中增加統(tǒng)一格式化spring: jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8如果要單獨處理 LocalDate可以額外添加配置類。也可以簡單一點在 VO 的日期字段上使用注解JsonFormat(pattern yyyy-MM-dd, timezone GMT8) private LocalDate transactionDate;建議前期直接統(tǒng)一配置否則遇到列表頁和表單編輯頁時日期顯示不一致又要一處一處排查。6.3 金額回顯出現(xiàn) 19.999999 或 0.30000000000004如果你在后端把金額定義成 double前端會看到莫名其妙的浮點誤差。個人財務系統(tǒng)涉及金額應全部使用 BigDecimal。MySQL 字段用 DECIMAL(14,2)Java 實體用 BigDecimal前端輸入金額時默認保留兩位小數(shù)。這樣設計能最大程度保證金額一致性。如果前端拿到字符串后想轉(zhuǎn)數(shù)字也可以用 Number 轉(zhuǎn)換但每次計算時要謹慎涉及加減乘除統(tǒng)一交給后端處理。6.4 登錄過期、攔截器放行和 401 循環(huán)如果 token 過期后端返回 code401前端響應攔截器里跳轉(zhuǎn) /login這是一個正常鏈路。但會出現(xiàn)頻繁 401 的情況常見原因如下。一是登錄頁、注冊頁也走了需要鑒權(quán)的攔截器。在 SpringBoot3 后端登錄和注冊接口要放到放行列表中否則用戶還沒登錄就訪問登錄頁接口直接返回未登錄導致頁面白屏。建議放行路徑寫清楚registry.addPathPatterns(/api/**) .excludePathPatterns(/api/auth/login, /api/auth/register);前端路由守衛(wèi)也要放行 /login否則頁面一旦刷新就會被打回登錄頁。二是 axios 里請求失敗后沒有把錯誤拋出去而是在攔截器里反復跳轉(zhuǎn)登錄形成死循環(huán)。最簡單的做法是每個請求只處理一次錯誤跳轉(zhuǎn)前記錄當前路徑跳轉(zhuǎn)一次即可后端接口再返回錯誤時檢查當前是否已在登錄頁。6.5 列表字段名和后端返回不一致Vue 頁面寫item.createTime后端返回的是create_time這會導致頁面顯示 undefined。解決辦法是統(tǒng)一后端返回結(jié)構(gòu)。建議后端 VO 字段使用駝峰命名 createTime由 Jackson 序列化輸出 JSON。MySQL 字段下劃線不影響 Java 實體只要在配置文件里開啟 map-underscore-to-camel-caseMyBatis 映射時自動轉(zhuǎn)換。如果使用 MyBatis-Plus一般默認開啟下劃線轉(zhuǎn)駝峰。如果使用原生 MyBatis需要確保 resultMap 字段正確或者開啟對應配置。7. 從“能跑”到“好用”批量導入、日志和部署思路7.1 批量導入流水數(shù)據(jù)記賬系統(tǒng)一個人手動錄數(shù)據(jù)很麻煩。若想真正用起來可以加批量導入功能。批量導入需要設計一個模板文件模板字段建議包含日期、類型、分類、金額、備注。導入時讀取 Excel 文件在 Service 中逐行處理。此時最容易踩的坑不是解析代碼而是臟數(shù)據(jù)處理日期格式是不是標準。金額是不是負數(shù)。分類名稱是否和當前用戶已有分類匹配。類型值是否只寫了“收入/支出”。更穩(wěn)的方式是先讓用戶選擇導入分類映射如果發(fā)現(xiàn)某幾行格式錯誤不要整體失敗可以返回錯誤明細{ successCount: 99, failCount: 1, failRows: [ { row: 15, message: 金額格式不正確 } ] }這樣用戶才知道哪一行需要修改而不是點擊導入后只看到“失敗”兩個字。7.2 觀察日志和慢 SQL本地開發(fā)時日志主要用來排查報錯。SpringBoot3 默認日志輸出足夠日常使用出現(xiàn)問題先看控制臺異常的第一行 Caused by 部分不要只看頂部的異常描述。如果是統(tǒng)計接口變慢優(yōu)先確認數(shù)據(jù)庫里是否執(zhí)行了全表掃描。測試方法很簡單在 MySQL 里用 EXPLAIN 查看執(zhí)行計劃觀察 rows 行數(shù)是否過大。EXPLAIN SELECT * FROM biz_transaction WHERE user_id 1 AND transaction_date BETWEEN 2025-06-01 AND 2025-06-30;如果 type 是 ALL說明沒用索引應該檢查是否建立了以 user_id 和 transaction_date 為前綴的索引。7.3 生產(chǎn)環(huán)境部署方案個人項目部署并不復雜核心目的是讓人能穩(wěn)定訪問后端和前端。后端打 jar 包方式mvn clean package -DskipTests java -jar target/finance-server.jar前端打包npm run build打包后默認生成 dist 目錄里面是靜態(tài)文件。Nginx 配置中把 dist 目錄作為網(wǎng)站根目錄并把 /api 請求代理到后端服務server { listen 80; server_name finance.example.com; location / { root /var/www/finance-web/dist; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }try_files 的作用是讓 Vue Router 的前端 history 模式路由刷新時不返回 404。比如直接訪問 /transactionsNginx 會重新指向 index.html由前端接管路由。后端如果部署在服務器上不要用 root 權(quán)限跑業(yè)務應用建議單獨建一個運行用戶。MySQL 數(shù)據(jù)庫需要及時備份個人系統(tǒng)至少可以每天備份一次mysqldump -u root -p finance_db finance_db_$(date %F).sql要加定時任務時注意運行環(huán)境的變量是否完整比如 mysqldump 的路徑可能不在普通用戶 PATH 中。8. 回顧一下整套流程我認為最值得先做穩(wěn)的是這三件事第一件先把最小的端到端鏈路跑通。也就是登錄后能新增一條支出記錄并能按月查出來。這個鏈路一旦通了后面加圖表、加預算、加分類都只是在這個穩(wěn)定結(jié)構(gòu)上追加。第二件把接口權(quán)限和數(shù)據(jù)權(quán)限想清楚。個人系統(tǒng)雖然使用者少但接口必須是“當前登錄用戶只能看到當前登錄用戶的數(shù)據(jù)”。這個設計如果放在后期再補會牽一發(fā)而動全身。比如統(tǒng)計接口一開始沒有按 user_id 過濾等數(shù)據(jù)量多了再補就會發(fā)現(xiàn)舊數(shù)據(jù)混亂還得清理。第三件把日志和錯誤信息留好。開發(fā)期間多打印必要參數(shù)比如新增流水時打印 userId、amount、type排查問題時你才能判斷是前端傳參不對還是后端邏輯有誤。日志不是浪費是在問題發(fā)生時能省最多時間的工具。就實際使用感受來說這套個人財務管理系統(tǒng)用 JAVA SpringBoot3 Vue.js3 MySQL 實現(xiàn)難度并不在于某個單獨的功能有多復雜而在于把你學的后端接口、前端交互、數(shù)據(jù)庫設計粘合成一個完整產(chǎn)品。建議先按最小表結(jié)構(gòu)和最少頁面做完第一版跑通之后再逐步加入統(tǒng)計圖表、批量導入、預算預警這些增強功能。只要數(shù)據(jù)庫設計不出現(xiàn)金額精度和歸屬字段缺失這種基礎問題后端接口保持統(tǒng)一返回結(jié)構(gòu)前端把 token 和跨域處理好這個系統(tǒng)就能穩(wěn)定運行后續(xù)繼續(xù)擴展也很自然。