如果你點進來那大概率和我當(dāng)年一樣——手頭剛拿到一套 SpringBootVueMySQL 的汽車服務(wù)管理系統(tǒng)畢設(shè)源碼有數(shù)據(jù)庫腳本、有論文、還有部署文檔但打開工程的一瞬間整個人是懵的代碼從哪看起MySQL 怎么還原前端怎么跑起來論文里那些功能模塊圖和數(shù)據(jù)表到底怎么畫的答辯時老師問“你的系統(tǒng)有哪些表”該怎么答我當(dāng)年做畢設(shè)的時候就是這么一路踩坑過來的。這套汽車服務(wù)管理系統(tǒng)算是畢設(shè)題目里非常典型的“前后端分離 CRUD 權(quán)限管理 業(yè)務(wù)流程”組合覆蓋了用戶管理、車輛信息、預(yù)約服務(wù)、保養(yǎng)維修工單、配件庫存、會員儲值等一堆常見場景。倒不是說它有多高級而是它夠完整——一套代碼里能同時體現(xiàn) SpringBoot 的后端分層、Vue 的前端組件化、MySQL 的關(guān)系建模剛好踩在絕大多數(shù)本科畢設(shè)的要求上。這篇博文我就按“拿到源碼之后該干什么”的順序把這套系統(tǒng)的架構(gòu)拆解、數(shù)據(jù)庫設(shè)計、前后端實現(xiàn)、本地部署、生產(chǎn)發(fā)布、論文寫作和答辯準備全部捋一遍。不管你是零基礎(chǔ)直接改源碼還是打算自己從頭敲一遍你都能照著操作把它跑起來。這篇內(nèi)容的核心關(guān)鍵詞其實就三個SpringBoot、Vue、MySQL。圍繞它們把工程講透了剩下的全是細節(jié)。1. 系統(tǒng)整體設(shè)計與架構(gòu)思路拆解1.1 汽車服務(wù)管理系統(tǒng)到底要管什么汽車服務(wù)管理說白了就是一家汽車維修保養(yǎng)門店的后臺系統(tǒng)。你可以把它想象成一個簡化版的“4S 店管理后臺”但不需要管那么復(fù)雜的供應(yīng)鏈和財務(wù)核心就管幾件事會員信息誰在我們這兒辦過卡車牌號多少聯(lián)系電話多少車輛是什么型號。車輛信息每輛車綁定到某個會員名下記錄品牌、車型、車牌、里程數(shù)等。預(yù)約/接待客戶打電話或到店預(yù)約洗車、保養(yǎng)、維修項目前臺在系統(tǒng)里登記。服務(wù)工單接待員開單技師接單干活記錄用了什么配件、工時費多少。配件庫存機油、機濾、火花塞、剎車片這些常用配件要有入庫、出庫、庫存量查詢。結(jié)算/儲值會員套餐、余額扣費、常規(guī)收款記錄。明白了業(yè)務(wù)范圍你再看源碼里的模塊劃分就特別容易對號入座。很多同學(xué)拿到代碼之后一頭扎進 controller 包結(jié)果看了半天不知道每個接口是干嘛的就是因為沒先在腦子里建立業(yè)務(wù)地圖。正確的順序是先打開數(shù)據(jù)庫腳本文件一般叫 schema.sql、init.sql 或 xxx.sql把數(shù)據(jù)表看一遍表和表的關(guān)系捋清楚了整個系統(tǒng)大概什么樣你就心里有數(shù)了。1.2 為什么采用 SpringBoot Vue MySQL 這套組合先回答一個你可能困惑的問題畢設(shè)為什么爛大街地用這套組合答案是兩個原因——好找工作、好寫論文。從就業(yè)角度講SpringBoot 是 Java 后端崗位事實上的標配框架Vue 是前端框架里市場占有率最高的那一檔MySQL 是使用量最大的開源關(guān)系型數(shù)據(jù)庫。你把這個項目寫進簡歷面試官不會覺得陌生問的問題基本都不會跳出網(wǎng)上已有的海量面經(jīng)。可以說這是一套既保底又能簡單出效果的組合。從畢設(shè)本身角度講SpringBoot 自動配置特性讓項目搭建成本變得極低你不需要像使用 SSM 那樣寫一大堆 XML 配置。Maven 管理依賴也方便一個 pom.xml 就能把所有第三方庫拉齊。Vue 則天然適合前后端分離的開發(fā)方式頁面組件化、路由管理、Axios 請求庫前端代碼結(jié)構(gòu)一目了然寫論文畫功能模塊圖的時候特別容易切分層次表達。還有一點可能很多同學(xué)沒意識到這套組合本身就是答辯的“護身符”。因為前后端分離架構(gòu)本身就能引出很多問題——跨域怎么處理、登錄鑒權(quán)怎么做、接口怎么約定、部署怎么搞——這些都是老師愛問的。與其選一個冷門技術(shù)棧被問倒不如選這套你能在網(wǎng)上找到大量參考資料的組合。1.3 前后端分離架構(gòu)的核心邏輯所謂前后端分離就是把原本寫在 JSP 或 Thymeleaf 頁面里的 Java 代碼抽離出去前端只負責(zé)頁面展示和用戶交互后端只負責(zé)提供 JSON 數(shù)據(jù)接口。簡單來說Vue 這邊的項目是一個純靜態(tài)資源工程它運行在你電腦的 8080 端口開發(fā)環(huán)境通過 HTTP 請求去訪問 SpringBoot 啟動的 8081 或 8082 端口后端接口服務(wù)。MySQL 數(shù)據(jù)庫跑在 3306 端口只被 SpringBoot 后端通過 JDBC 連接前端永遠不直接碰數(shù)據(jù)庫。這就是經(jīng)典的三層調(diào)用鏈瀏覽器訪問 Vue 頁面Vue 調(diào) SpringBoot 接口SpringBoot 讀寫 MySQL。這里有個概念特別重要Vue 只是一個靜態(tài)網(wǎng)頁工程它本身沒有“后臺”。你 npm run serve 啟動的是 webpack-dev-server 提供的一個開發(fā)服務(wù)器它把 src 目錄下的 .vue 文件編譯成瀏覽器能跑的 JS 文件。等真正要上線了執(zhí)行 npm run build生成的 dist 目錄就是一堆靜態(tài)文件你可以把這堆文件交給 SpringBoot 托管也可以扔到 Nginx 里。明白了這條調(diào)用鏈你調(diào)試的時候就有一個基本判斷頁面崩了不代表后端崩了接口報錯也不代表數(shù)據(jù)庫有問題。你先看請求地址通不通再看返回狀態(tài)碼一層層定位效率會高得多。2. 數(shù)據(jù)庫設(shè)計與核心表結(jié)構(gòu)剖析2.1 數(shù)據(jù)表清單與關(guān)系梳理我見過不少套件的源碼這套表的數(shù)量和命名大同小異。我把最常見的表整理成下面這個清單你對著自己手里的數(shù)據(jù)庫腳本核對一下基本八九不離十表名中文含義核心字段誰關(guān)聯(lián)誰sys_user系統(tǒng)用戶表id, username, password, role, status管理員、員工、會員都在這一張表里用 role 區(qū)分customer / member會員表id, user_id, name, phone, card_no, balanceuser_id 關(guān)聯(lián) sys_uservehicle_info車輛信息表id, customer_id, plate_no, brand, model, mileagecustomer_id 關(guān)聯(lián)會員service_item服務(wù)項目表id, item_name, price, duration, type預(yù)約和訂單里引用的服務(wù)項目appointment預(yù)約表id, customer_id, vehicle_id, item_id, appoint_time, status關(guān)聯(lián)會員、車輛、服務(wù)項目service_order服務(wù)訂單表id, order_no, customer_id, vehicle_id, total_amount, status核心業(yè)務(wù)表service_record服務(wù)工單/記錄表id, order_id, item_id, worker_id, parts_detail, remark一個訂單可能對應(yīng)多個服務(wù)記錄parts_info配件表id, parts_no, parts_name, stock, price被工單引用parts_stock_log配件出入庫記錄表id, parts_id, change_type, quantity, create_time記錄庫存流水payment_record支付/結(jié)算表id, order_id, amount, pay_type, pay_time關(guān)聯(lián)訂單如果你手里的庫表比這個多比如加了公告表、輪播圖表、員工排班表那說明這個源碼功能做得更全在畢業(yè)論文里就能多寫幾個模塊是加分項。如果比這個少比如沒有配件庫存表那你寫論文的時候可以自己補一個畢設(shè)老師很吃“完善庫存流轉(zhuǎn)邏輯”這一套。2.2 幾處容易踩坑的表設(shè)計細節(jié)第一個坑用戶和會員是不是一張表。有的源碼里 sys_user 和 customer 分成兩張表系統(tǒng)登錄者員工/管理員和門店會員是兩個身份。有的則直接共用一個 user 表里面有個字段叫 role靠 0/1/2 區(qū)分管理員、員工、會員。你拿到源碼先看這一處因為它直接關(guān)系到你的登錄邏輯怎么寫、注冊邏輯怎么寫答辯時老師說“會員如何在你的系統(tǒng)里注冊”你就得能答清楚。第二個坑金額字段為什么用 decimal 不用 float/double。這是數(shù)據(jù)庫設(shè)計的經(jīng)典考點也是實務(wù)里最容易出 bug 的地方。float 和 double 是浮點數(shù)在計算機里用二進制近似表示算錢的時候經(jīng)常出現(xiàn) 0.1 0.2 0.30000000000000004 這種問題。所以金額字段必須用 DECIMAL(10,2)整數(shù)部分 8 位、小數(shù) 2 位能夠精確存儲到分?！熬_存儲到分”這句話寫在論文里很加分你實際操作時也會避免很多麻煩。第三個坑外鍵到底要不要建。很多畢設(shè)源碼為了省事表里壓根沒有外鍵約束只有邏輯關(guān)聯(lián)字段比如 service_order 里有個 customer_id但它不建 FOREIGN KEY。這樣做的好處是插入數(shù)據(jù)、刪數(shù)據(jù)時不會因為外鍵約束報錯壞處是可能產(chǎn)生“孤兒數(shù)據(jù)”——比如會員被刪了他的訂單還在。我建議你保留邏輯外鍵但不建物理外鍵把這些關(guān)聯(lián)關(guān)系在 ER 圖里畫出來在 Service 層里做校驗。這樣既符合實際開發(fā)習(xí)慣又能避開很多插入失敗的問題。2.3 索引與常用查詢優(yōu)化表建完之后需要在常用查詢字段上加索引。最典型的場景登錄時用 username 查用戶表列表頁經(jīng)常按 plate_no 查車輛訂單頁面按 order_no 查訂單。這些字段默認是 VARCHAR如果不加索引數(shù)據(jù)量一上來就是全表掃描慢得驚人。建索引的 SQL 很簡單ALTER TABLE sys_user ADD INDEX idx_username (username); ALTER TABLE vehicle_info ADD INDEX idx_plate_no (plate_no); ALTER TABLE service_order ADD INDEX idx_order_no (order_no);另外一個面試官經(jīng)常會問的問題是LIKE %xxx%會不會走索引答案是模糊查詢前置百分號會讓索引失效。比如查訂單號用戶輸入關(guān)鍵字是“2024”但你 SQL 寫的是WHERE order_no LIKE %2024%那即使有索引也用不上。如果業(yè)務(wù)允許盡量用LIKE 2024%這種前綴匹配能走索引。論文里如果寫了“系統(tǒng)優(yōu)化”這一章把這條經(jīng)驗寫進去顯得很有含金量。我在實際操作中還有一個體會每次從 GitHub 上拉下這類畢設(shè)源碼不要直接復(fù)制粘貼 .sql 文件到 Navicat 里執(zhí)行。因為源碼作者用的 MySQL 版本可能和你不一樣字符集配置也不同直接跑很容易報 utf8mb4 或者排序規(guī)則錯誤。正確做法是用 Navicat 新建一個 utf8mb4 字符集的數(shù)據(jù)庫再手動運行 SQL 文件。這里順帶說一句Navicat for MySQL 在企業(yè)里很常用但如果你電腦裝不上或者覺得破解麻煩用免費的 DBeaver、MySQL Workbench 也一樣命令行導(dǎo)入 SQL 也行最終效果沒區(qū)別。3. 后端 SpringBoot 核心實現(xiàn)解析3.1 項目分層與目錄結(jié)構(gòu)后端項目拿到手第一步不是運行而是先看懂包的劃分。一個標準的 SpringBoot 前后端分離項目包結(jié)構(gòu)一般是這樣的com.xxx.car ├── common // 通用結(jié)果返回類、常量、異常處理 │ ├── Result.java │ ├── ResultCode.java │ └── GlobalExceptionHandler.java ├── config // 配置類比如跨域配置、攔截器配置、MyBatis配置 │ ├── CorsConfig.java │ └── WebMvcConfig.java ├── controller // 控制層對外暴露接口 │ ├── UserController.java │ ├── VehicleController.java │ └── OrderController.java ├── service // 業(yè)務(wù)層處理具體業(yè)務(wù)邏輯 │ ├── UserService.java │ └── impl/UserServiceImpl.java ├── mapper // 數(shù)據(jù)訪問層MyBatis 的 Mapper 接口 │ └── UserMapper.java ├── entity // 實體類對應(yīng)數(shù)據(jù)庫表 │ └── User.java └── utils // 工具類比如 JWT 工具、日期工具很多同學(xué)看源碼時喜歡從 controller 開始看看到 RestController 和 RequestMapping 就覺得懂了。這個做法在系統(tǒng)簡單時可行但放到答辯里會很虛因為老師問“你的 service 層寫了什么業(yè)務(wù)邏輯”你就答不上來了。我的習(xí)慣是按照 controller → service → mapper → entity 這個順序逐層往下讀每個接口方法在 Service 里做了什么在 mapper XML 里 SQL 怎么寫讀兩三個模塊之后整個工程的路數(shù)就通了。3.2 登錄認證JWT 方案怎么落地汽車服務(wù)管理系統(tǒng)里有管理員、員工、會員三種角色所以登錄鑒權(quán)是逃不掉的。大部分畢設(shè)源碼現(xiàn)在用的都是 JWTJSON Web Token方案它的核心思想是用戶輸入用戶名密碼 → 后端校驗通過后生成一個 token 字符串返回給前端。前端把 token 存在 localStorage 或 sessionStorage 里。后續(xù)每個請求都在請求頭里帶上Authorization: Bearer token。后端用攔截器攔截受保護的接口解析 token 判斷用戶身份。JWT 工具類在源碼里通常叫 JwtUtil 或 TokenUtils里面的關(guān)鍵方法只有兩個generateToken(userId, role)用來簽發(fā)parseToken(token)用來解析。我在實際項目里還有一個經(jīng)驗token 里只放用戶 ID 和角色不要把密碼等敏感信息放進去因為 JWT 本身只是 Base64 編碼不是加密別人拿到 token 一解碼就能看到里面的內(nèi)容。攔截器的寫法是實現(xiàn)HandlerInterceptor接口在preHandle方法里取出請求頭嘗試解析 token。解析失敗就返回 401前端拿到 401 就跳回登錄頁。我在畢設(shè)里還加了一個細節(jié)放行登錄、注冊、首頁部分接口其他接口統(tǒng)一攔截。放行列表寫到 WebMvcConfig 的addInterceptors方法里這個位置答辯時可以被問到值得你提前看明白。3.3 接口設(shè)計與異常處理的關(guān)鍵細節(jié)接口設(shè)計這塊畢設(shè)里最典型的規(guī)范就是統(tǒng)一返回結(jié)果。也就是說所有接口的返回值都是同一個格式public class ResultT { private Integer code; // 200 成功500 失敗401 未登錄 private String message; private T data; }這樣寫的最大好處是前端處理邏輯統(tǒng)一了。前端 Axios 攔截器里只需要判斷res.data.code是不是 200是就返回 data不是就彈錯誤信息不用每個接口單獨寫一套錯誤處理。全局異常處理用的是 Spring 的RestControllerAdviceExceptionHandler作用是捕獲 Service 層拋出的異常轉(zhuǎn)成標準 Result 返回不讓 Java 的堆棧信息直接暴露給前端。我改代碼時習(xí)慣在 Service 里拋各種業(yè)務(wù)異常比如“庫存不足”“該用戶不存在”“預(yù)約時間沖突”然后由全局異常處理器統(tǒng)一包裝。這套寫法在畢業(yè)設(shè)計答辯里是個亮點因為它體現(xiàn)了你對異常流的思考而不只是寫死返回。后端研發(fā)里還有一個很重要的點不要信任前端傳過來的任何數(shù)據(jù)。比如新增訂單時總金額是從前端算好傳進來的還是后端根據(jù)服務(wù)項目和配件單價自己算的正確做法一定是后端從數(shù)據(jù)庫查出單價自己計算總價。不然有心人把金額改成 0.01 提交過來你就白干了。這個細節(jié)在你的論文里也能寫系統(tǒng)安全性設(shè)計數(shù)據(jù)傳輸完整性與服務(wù)端校驗。4. 前端 Vue 端實現(xiàn)要點4.1 工程結(jié)構(gòu)與路由設(shè)計Vue 工程解壓之后核心目錄長這樣src ├── api // 接口請求模塊按業(yè)務(wù)拆分 │ ├── user.js │ ├── order.js │ └── vehicle.js ├── assets // 靜態(tài)資源圖片、樣式 ├── components // 公共組件比如分頁組件、彈窗組件 ├── layout // 后臺主頁布局包含左側(cè)菜單和頂部導(dǎo)航 ├── router // 路由配置 │ └── index.js ├── store // Vuex管理用戶登錄狀態(tài) ├── views // 頁面組件每個路由對應(yīng)一個頁面 │ ├── Login.vue │ ├── dashboard/Index.vue │ ├── user/UserList.vue │ └── order/OrderList.vue └── utils // 工具類比如 axios 封裝 └── request.js路由配置在 router/index.js 里是所有頁面的“地圖”。每個頁面是一個路由每個路由都有 path 和 component 兩個關(guān)鍵屬性。比如{ path: /order/list, name: OrderList, component: () import(/views/order/OrderList.vue), meta: { requiresAuth: true } }注意這里用的是動態(tài)導(dǎo)入() import(...)意思是這個組件在訪問到這個路由時才加載不用把所有頁面一次性下載到瀏覽器里。這就是所謂的“路由懶加載”寫論文時可以提一句“前端采用路由懶加載策略優(yōu)化首屏加載性能”。另外一個和路由強相關(guān)的問題是刷新 404。如果你把前端工程打包后放到 SpringBoot 里運行、直接訪問某個深層路徑比如 /order/list刷新頁面后會出現(xiàn) 404因為它其實是一個 SPA單頁應(yīng)用服務(wù)器上根本沒有 /order/list 這個物理文件。解決辦法是讓后端把所有非 API 請求都重新轉(zhuǎn)發(fā)到 index.html。在 SpringBoot 里可以寫個最簡單的 ControllerController public class SpaForwardController { RequestMapping(value {/, /order/**, /user/**, /dashboard/**}) public String forward() { return forward:/index.html; } }除了 forward 方案還有一種更推薦的方式用 Nginx 部署時寫上try_files $uri $uri/ /index.html;。這兩種辦法的目的都是一樣的你至少記住一種答辯時被問到前端部署問題就不會卡殼。4.2 Axios 封裝與權(quán)限控制前端調(diào)用后端接口靠的是 Axios幾乎所有畢設(shè)源碼都會在 utils/request.js 里對它封裝一次。核心邏輯包括兩段第一段是請求攔截器每次發(fā)請求前從 localStorage 里取 token然后塞進請求頭service.interceptors.request.use( config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config }, error Promise.reject(error) )第二段是響應(yīng)攔截器統(tǒng)一判斷后端返回的狀態(tài)碼。如果返回 401就清空用戶信息強制跳回登錄頁如果業(yè)務(wù) code 不是 200統(tǒng)一提示后端返回的 message。service.interceptors.response.use( response { const res response.data if (res.code 401) { localStorage.clear() window.location.href /login } else if (res.code ! 200) { Message.error(res.message) return Promise.reject(new Error(res.message)) } return res.data }, error { Message.error(網(wǎng)絡(luò)異常請稍后重試) return Promise.reject(error) } )這兩個片段非常經(jīng)典你直接抄到自己的封裝里功能和安全性都有了。需要注意的一點是token 不要存到 cookie 里存到 localStorage 就夠了。Cookie 容易受到 CSRF跨站請求偽造攻擊而 localStorage 里的值不會自動附加到每個請求上相對更安全配合 Bearer Token 的方式也更現(xiàn)代。4.3 幾個核心頁面組件的實現(xiàn)思路前端頁面里登錄頁是最容易改的。它無非是一個表單校驗 調(diào) login 接口 成功后存 token 跳轉(zhuǎn)首頁的流程。你拿到源碼后重點檢查一個點密碼到底有沒有加密傳輸。如果你看到前端直接把明文密碼放進請求體建議稍微改一下加上 MD5 或 SHA-256 再提交雖然網(wǎng)上說 MD5 不夠安全但至少能在論文里寫上一句“用戶口令經(jīng)單向散列處理后傳輸杜絕明文密碼的鏈路暴露”。列表頁是所有后臺系統(tǒng)的標配比如會員列表、車輛列表、訂單列表。它們的共同套路是頁面創(chuàng)建時調(diào)用分頁查詢接口把數(shù)據(jù)渲染到表格里搜索框輸入關(guān)鍵字和下拉條件點搜索重新查詢點擊操作列按鈕打開新增或編輯彈窗。核心代碼就是loadData() { const params { current: this.current, size: this.size, ...this.searchForm } api.getList(params).then(res { this.list res.records this.total res.total }) }我建議你看這些列表頁時不要只看頁面組件本身要結(jié)合 api 目錄下的接口定義一起看。比如 user.js 里可能定義了export function getUserList(data) { return request({ url: /user/list, method: post, data }) }這里面的 URL 要和后端的RequestMapping對應(yīng)上。如果前端請求的是 /user/list 而后端接口寫在 /sysUser/list這倆對不上就肯定報錯。排查這種問題時按 F12 打開瀏覽器開發(fā)者工具看 Network 面板里請求的 URL 和后端接口路徑是否一致是最快的方法。5. 本地部署與生產(chǎn)發(fā)布實操5.1 本地環(huán)境準備JDK Maven Node MySQL要把這套源碼跑起來你本地至少得裝齊下面四樣?xùn)|西軟件版本建議用途JDK1.8 或 11運行 SpringBootMaven3.6 以上后端依賴管理Node.js14 以上前端工程構(gòu)建MySQL5.7 或 8.0數(shù)據(jù)庫先說 JDK?，F(xiàn)在很多新 SpringBoot 版本要求 JDK17但大部分畢設(shè)源碼用的是 SpringBoot 2.x對應(yīng) JDK 1.8 就夠。如果你電腦上裝的是高版本 JDK運行老的 SpringBoot 版本很容易報錯所以打開 IDEA 后先看 pom.xml 里的spring-boot-starter-parent版本。2.7.x 以下老實用 JDK83.x 版本用 JDK17。再說坑最多的 MySQL。Windows 下裝 MySQL 8.0 時網(wǎng)上教程一大堆但有幾個細節(jié)你大概率會踩到一是字符集。安裝時盡量選 utf8mb4不要用默認的 latin1否則中文數(shù)據(jù)存進去查出來全是亂碼。二是認證插件。MySQL 8 默認的認證插件是 caching_sha2_password而某些老版本的驅(qū)動或者圖形化工具連不上。你在 navicat 里連不上本地數(shù)據(jù)庫時第一反應(yīng)先查用戶表里 plugin 字段是不是 caching_sha2_password如果是執(zhí)行這一句把它改成 mysql_native_passwordALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 你的密碼; FLUSH PRIVILEGES;還有一個不得不提的是 application.yml 里的數(shù)據(jù)庫連接串。改三個點url 里的 IP 端口和數(shù)據(jù)庫名、username、password。另外如果你用的是 MySQL 8驅(qū)動連接串要加時區(qū)參數(shù)不然會報The server time zone value ?D1ú±ê×?ê±?? is unrecognizedspring: datasource: url: jdbc:mysql://localhost:3306/car_service?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.DriverMaven 和 Node 的安裝現(xiàn)在都比較傻瓜化下載安裝包一路下一步就行。裝完 Node在項目前端目錄下執(zhí)行npm install安裝依賴。如果網(wǎng)絡(luò)慢就把 npm 鏡像源換成國內(nèi)倉庫npm config set registry https://registry.npmmirror.com。這一步能幫你省掉大量等待時間。5.2 把 Vue 打包放進 SpringBoot 的兩種方式前端開發(fā)調(diào)試時是單獨起一個服務(wù)訪問真實部署時不可能讓用戶開著兩個端口。所以最終要把前端打包產(chǎn)物和后端工程合并到一起。這里有兩種常見方案方案一直接拷貝 dist 進 SpringBoot 靜態(tài)目錄執(zhí)行npm run build之后前端工程 dist 目錄里會生成 index.html 和一堆靜態(tài) JS/CSS 文件。把這些文件全部拷到后端工程的 src/main/resources/static 目錄下然后重新啟動 SpringBoot它就能直接托管這些靜態(tài)資源訪問路徑就是http://localhost:8080。這個方案適合畢設(shè)展示因為就一個 Jar 包直接java -jar就能跑起整個系統(tǒng)。但要注意文章前面提到的刷新 404 問題——拷貝完成后一定要多刷新幾個深層路徑測試一下不能只測首頁。方案二前后端分離部署用 Nginx 做反向代理如果你答辯演示的環(huán)境有公網(wǎng)服務(wù)器我推薦用 Nginx。規(guī)劃如下SpringBoot 后端跑在 8080 端口關(guān)掉前端靜態(tài)托管。Vue 靜態(tài)文件放到 Nginx 的 html 目錄里監(jiān)聽 80 端口。Nginx 配置里把/api開頭的請求反向代理到 127.0.0.1:8080。關(guān)鍵配置塊長這樣server { listen 80; server_name your-domain.com; root /usr/share/nginx/html; index index.html; location / { 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; } }這里你可能會問前端請求的是 /user/list沒有 /api 前綴怎么辦兩個辦法后端統(tǒng)一加 context-path或者在前端 request.js 里定義 baseURL。我的建議是在 axios 封裝里把 baseURL 設(shè)為/api然后在 Nginx 里把/api前綴轉(zhuǎn)發(fā)到后端時去掉這樣后端代碼不用動location /api/ { proxy_pass http://127.0.0.1:8080/; }記住 proxy_pass 后面帶/表示把/api前綴剝掉再轉(zhuǎn)發(fā)。5.3 生產(chǎn)環(huán)境初始化與常見啟動問題部署到 Linux 服務(wù)器前數(shù)據(jù)庫導(dǎo)入和本地是一樣的新建庫、導(dǎo)入 .sql 文件。唯一要額外留神的是端口。云服務(wù)器默認安全組不開 3306 端口所以生產(chǎn)環(huán)境建議后端不要直接連 3306而是通過應(yīng)用內(nèi)的連接串訪問。這時你把 MySQL 綁定到 127.0.0.1只允許本機應(yīng)用訪問安全性會好很多。后端啟動時如果報端口被占用先查一下# 查看 8080 被誰占用 lsof -i:8080 # 或者 netstat -tunlp | grep 8080如果占了就換端口或者把占用進程停掉。前端訪問后端時如果出現(xiàn)跨域攔截后端在 CorsConfig 里配置允許所有來源和所有請求頭這是畢業(yè)設(shè)計最省事的做法registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true);生產(chǎn)環(huán)境如果怕太開放可以把allowedOriginPatterns改成你自己的前端域名但畢設(shè)階段全放開通關(guān)即可。另外很多同學(xué)忽略的一點前端打包后如果仍然請求 localhost 或后端地址要改 request.js 里的 baseURL。打包文件里的地址是寫死的不是自動變的。6. 常見問題與排查技巧實錄這部分我把這些年帶學(xué)生做畢設(shè)時最常被問的故障整理成一個速查表并按經(jīng)驗給出定位思路。你如果跑不起來先對著這個表一項項排查?，F(xiàn)象可能原因排查與解決npm install 失敗依賴源在國外網(wǎng)絡(luò)超時先執(zhí)行npm config set registry https://registry.npmmirror.com再重試SpringBoot 啟動即退出8080 端口被占用看控制臺提示改 application.yml 的 server.port或殺占用進程數(shù)據(jù)庫連接失敗密碼錯、數(shù)據(jù)庫名錯、時區(qū)參數(shù)缺失對照 5.1 節(jié)檢查 url 和賬號密碼MySQL8 記得加 serverTimezone頁面能開但數(shù)據(jù)空白后端沒啟動或路徑不對F12 打開 Network看請求狀態(tài)碼404 查路徑映射500 看后端日志登錄接口返回 401token 無效或沒帶檢查前端 axios 攔截器是否在請求頭加了 token后端攔截器放行登錄接口刷新任意子頁面 404SPA 路由模式問題用 Nginx 部署時加 try_files或?qū)?forward 到 index.html 的那個 Controller中文數(shù)據(jù)亂碼數(shù)據(jù)庫或連接串字符集不對庫和表建表時保證 utf8mb4url 加 characterEncodingutf8前端改完代碼不生效沒重新 builddevelopment 模式下改完保存自動編譯production 必須重新npm run build再重啟IDEA 里跑源碼一堆紅線JDK 版本不對或依賴沒下載完檢查 project structure 里的 SDK 是否 1.8/11依賴右鍵重新 import這里單獨把 500 錯誤拿出來多說一句。后端控制臺報異常時新手最常見的反應(yīng)是慌。正確的做法是先讀異常信息的前三行它告訴你在哪個類的哪個方法第幾行出了錯。比如NullPointerException at com.xxx.service.impl.OrderServiceImpl.java:58你直接跳轉(zhuǎn)到那行代碼十有八九是調(diào)了某個沒值的方法或字段補個判空就行。還有一個我自己特別想強調(diào)的習(xí)慣任何一次前后端交互出問題先打開瀏覽器開發(fā)者工具看 Network 面板。它可以告訴你請求是否發(fā)出、URL 是什么、狀態(tài)碼是多少、響應(yīng)體返回了啥、過了多少毫秒。這些信息比后端日志更直觀能幫你快速判斷問題在前端、后端還是網(wǎng)絡(luò)。關(guān)于數(shù)據(jù)庫導(dǎo)入報錯的另一個常見來源是 SQL 文件里有建庫語句CREATE DATABASE xxx而你用 Navicat 新建了庫再導(dǎo)入時它又執(zhí)行一遍 CREATE DATABASE。如果庫名沖突或者權(quán)限不對就會報錯。解決辦法是打開 SQL 文件把開頭幾行 CREATE DATABASE 和 USE 語句刪掉再執(zhí)行。這是我當(dāng)年栽過跟頭的真實經(jīng)歷從那以后我導(dǎo)入任何 SQL 之前都會先讀前 50 行。7. 論文寫作與部署文檔配合技巧7.1 論文的章節(jié)結(jié)構(gòu)怎么搭畢設(shè)論文的結(jié)構(gòu)是有套路的雖然每個學(xué)校模板不同但核心章節(jié)基本一致。一個標準的汽車服務(wù)管理系統(tǒng)論文目錄大概長這樣緒論背景、意義、國內(nèi)外現(xiàn)狀、論文結(jié)構(gòu)安排相關(guān)技術(shù)介紹SpringBoot、Vue、MySQL、前后端分離系統(tǒng)分析可行性分析、需求分析、用例分析、功能需求和非功能需求系統(tǒng)設(shè)計總體架構(gòu)、功能模塊設(shè)計、數(shù)據(jù)庫設(shè)計ER 圖 數(shù)據(jù)表結(jié)構(gòu)系統(tǒng)實現(xiàn)登錄模塊、用戶管理、車輛管理、預(yù)約管理、訂單管理、配件管理等核心模塊的截圖和核心代碼說明系統(tǒng)測試功能測試用例表、測試結(jié)果、兼容性分析總結(jié)與展望這里面最容易被老師盯上的是“數(shù)據(jù)庫設(shè)計”這一章。你畫的 ER 圖里實體之間的關(guān)系一定要和代碼里的邏輯關(guān)聯(lián)一致比如會員1——N車輛、訂單N——1會員、訂單1——N服務(wù)記錄。如果畫錯一個關(guān)系老師一眼就能看出來。我在指導(dǎo)畢設(shè)時發(fā)現(xiàn)學(xué)生最敷衍的部分是“系統(tǒng)測試”很多人就貼兩張截圖說“經(jīng)測試系統(tǒng)運行正?！?。這種話在老師眼里等于沒寫。正確寫法是列一個功能測試用例表格測試模塊、前置條件、操作步驟、預(yù)期結(jié)果、實際結(jié)果、是否通過。寫滿十到十五個用例測試章就很扎實了。7.2 部署文檔寫作要點“部署文檔”這四個字看起來簡單但很多同學(xué)拿到的是一個只寫了三行字的 readme裝好 mysql、修改配置文件、npm run build。這種部署文檔在評閱老師眼里是不過關(guān)的因為缺少可驗證性。一份合格的部署文檔至少要包含環(huán)境版本要求表格JDK、Maven、Node、MySQL 各自的最低版本和推薦版本。后端部署步驟導(dǎo)入數(shù)據(jù)庫、修改配置文件、啟動項目的命令和驗證方式。前端部署步驟安裝依賴、修改接口地址、打包、產(chǎn)物位置。常見問題端口占用怎么處理、數(shù)據(jù)庫連不上怎么辦、接口跨域怎么排查。你要是有余力可以把它做成 Shell 自動部署腳本。比如寫一個deploy.sh里面把后端打包、前端打包、文件拷貝這三步串起來。這套腳本放到部署文檔里不僅自己部署省事論文的“系統(tǒng)部署”章節(jié)里還能貼出來當(dāng)亮點。一個我珍藏許久的小技巧部署文檔里的每一步命令都先在干凈的機器上親自跑過一遍然后把復(fù)制粘貼下來的真實輸出寫進文檔不要憑記憶編命令。因為文檔是給別人看的每一步都必須有據(jù)可查。7.3 答辯前值得準備的幾個問題最后說一個很多同學(xué)緊張的問題答辯老師會問什么。我總結(jié)了幾個高頻必問你現(xiàn)在就可以對著源碼練習(xí)你這個系統(tǒng)有哪些角色各自的權(quán)限范圍是什么——你要能說出管理員可以做員工配置和會員查詢普通員工只能做預(yù)約登記和工單錄入會員只有小程序端或客戶端的查詢和預(yù)約功能。表之間是怎么關(guān)聯(lián)的——你選一張核心表比如 service_order講清楚它引用了哪幾張表的哪些字段。JWT 的 token 過期了怎么辦——你要能說出登錄攔截器里解析 token 失敗會返回 401前端收到 401 會重新跳轉(zhuǎn)登錄頁。如果客戶在預(yù)約時間同時被兩個訂單占用了怎么處理——你要能說出在預(yù)約 Service 里根據(jù)顧客 ID 和車輛 ID 去查已有預(yù)約如果沖突就拋異常或者用數(shù)據(jù)庫唯一索引兜底。系統(tǒng)的安全設(shè)計體現(xiàn)在哪些方面——密碼加密存儲、JWT 鑒權(quán)、后端數(shù)據(jù)校驗、統(tǒng)一異常處理、敏感字段不返回到前端。你如果每一問都能結(jié)合自己的代碼說上兩三句答辯想掛都難。我個人在實際操作中的體會是拿到這套汽車服務(wù)管理系統(tǒng)源碼之后先花兩個小時把數(shù)據(jù)庫腳本讀一遍比先折騰運行環(huán)境更重要。因為你只有先看懂?dāng)?shù)據(jù)表和字段你才能真正理解這個系統(tǒng)。拿著它去對照前端頁面、對照后端接口你很快就能把整個項目的脈絡(luò)梳理清楚。代碼不在多在于你能不能在關(guān)鍵處講明白這套思路放到任何畢設(shè)項目上都通用。