又到一年畢設(shè)季后臺私信問得最多的還是那幾樣SpringBootVue車牌管理系統(tǒng)、圖書館管理系統(tǒng)、學(xué)生選課系統(tǒng)。今天就把我用得最順手、改過好幾版的一個方案徹底聊透——基于SpringBootVue的前后端分離車輛管理系統(tǒng)配合MySQL存儲拿來交畢設(shè)、課設(shè)或者自己練手都合適。這套東西我前前后后帶過好幾個學(xué)弟學(xué)妹從零搭到答辯踩過的坑、改過的文檔、調(diào)過的接口都在腦子里一篇講完不廢話。車輛管理系統(tǒng)說白了就是把單位的車、司機、出車記錄、維修保養(yǎng)、油耗這些東西從Excel里搬到一個能登錄、能分配權(quán)限的網(wǎng)頁上來。它的功能邊界非常清晰很適合做成一個完整的前后端分離項目后端管業(yè)務(wù)邏輯和數(shù)據(jù)庫前端管頁面交互中間用JSON接口對接。這恰好就是企業(yè)里最主流的開發(fā)模式所以院校也喜歡拿它當(dāng)畢設(shè)題目。這篇內(nèi)容我會從技術(shù)選型思路、數(shù)據(jù)庫設(shè)計、核心模塊實現(xiàn)、前后端聯(lián)調(diào)、論文答辯話術(shù)、常見排錯這幾個維度全部過一遍。不管你是剛把SpringBoot跑通的入門選手還是已經(jīng)在寫Mapper層的老手都能從里面拿到能直接用的東西。1. 項目整體拆解為什么這套組合經(jīng)久不衰1.1 車輛管理系統(tǒng)的需求邊界到底劃在哪很多人一拿到的題目就懵不知道“車輛管理系統(tǒng)”該做多大。我見過最夸張的學(xué)弟想在一個畢設(shè)里做GPS實時定位、違章查詢、ETC扣費聯(lián)動最后把自己寫崩潰了。講實話畢設(shè)和課設(shè)階段的車輛管理系統(tǒng)核心需求永遠圍繞“人、車、單、賬”四個字打轉(zhuǎn)。所謂“人”就是兩類角色管理員和普通用戶。管理員管車輛檔案、司機檔案、審批派車普通用戶申請用車、查看自己的記錄、提交還車信息?！败嚒敝傅氖擒囕v基礎(chǔ)資料車牌號、品牌型號、購置日期、座位數(shù)、當(dāng)前狀態(tài)可用/已派出/維修中/報廢。“單”就是出車申請單、還車記錄、維修保養(yǎng)記錄、加油記錄?！百~”是月度的里程統(tǒng)計、油耗匯總、費用明細。這四個維度撐起來的系統(tǒng)既有增刪改查的常規(guī)操作又有角色權(quán)限的區(qū)分還有統(tǒng)計報表這類稍微帶點復(fù)雜度的功能用來應(yīng)付畢設(shè)的“工作量”標(biāo)準(zhǔn)剛剛好。別貪多把基礎(chǔ)閉環(huán)做扎實比堆一堆跑不通的花哨功能得分高得多。1.2 為什么選SpringBootVue而不是別的技術(shù)棧這個問題答辯必問我建議你得能講清楚。SpringBoot是基于Spring的快速開發(fā)框架好處是內(nèi)置了Tomcat不用再單獨配置服務(wù)器打出一個jar包就能跑。它把SpringMVC、依賴注入、自動配置這些底層繁瑣的東西都封好了你寫Controller就專注寫業(yè)務(wù)邏輯這對學(xué)生來說極其友好。Vue作為前端框架核心優(yōu)勢是數(shù)據(jù)驅(qū)動視圖。你維護一個data對象頁面上的表格、表單、下拉框會自動跟著變不需要像jQuery那樣手動操作DOM。配合Element UI組件庫表格、彈窗、表單、分頁這些界面元素直接拿來用寫出來的頁面干凈又規(guī)范。MySQL就更不用說了開源、輕量、文檔全和Java配合最成熟你隨便搜一個問題都有答案。這套組合在國內(nèi)中小型系統(tǒng)里占有率極高你畢業(yè)去公司大概率也會碰到類似的項目結(jié)構(gòu)用它做畢設(shè)不是應(yīng)付交差是真能積累實戰(zhàn)經(jīng)驗。1.3 源碼目錄結(jié)構(gòu)一份標(biāo)準(zhǔn)的腳手架長什么樣拿到源碼或者自己新建項目時先把目錄結(jié)構(gòu)搞清楚后面才不會迷路。我習(xí)慣這樣組織一個前后端分離的車輛管理系統(tǒng)vehicle-manage/ ├── backend/ # SpringBoot后端 │ ├── src/main/java │ │ └── com/example/vehicle │ │ ├── controller/ # 接口層接收前端請求 │ │ ├── service/ # 業(yè)務(wù)邏輯層 │ │ ├── mapper/ # 數(shù)據(jù)庫操作層MyBatis接口 │ │ ├── entity/ # 實體類對應(yīng)數(shù)據(jù)庫表 │ │ ├── config/ # 配置類比如CORS跨域配置 │ │ └── common/ # 通用返回結(jié)果、異常處理 │ ├── src/main/resources │ │ ├── mapper/ # XML文件寫復(fù)雜SQL │ │ └── application.yml # 端口、數(shù)據(jù)庫連接配置 │ └── pom.xml ├── frontend/ # Vue前端 │ ├── src │ │ ├── views/ # 頁面組件 │ │ ├── router/ # 路由配置 │ │ ├── api/ # axios請求封裝 │ │ ├── store/ # 登錄狀態(tài)管理 │ │ └── main.js │ └── package.json └── sql/ └── vehicle.sql # 初始化數(shù)據(jù)庫腳本這種結(jié)構(gòu)最標(biāo)準(zhǔn)也最容易講清楚。你論文里的系統(tǒng)架構(gòu)圖基本就是照著這個畫。注意一點controller盡量只做參數(shù)接收和結(jié)果返回業(yè)務(wù)邏輯寫在service里這樣答辯時導(dǎo)師問你“這個模塊怎么設(shè)計的”你能分層講得明明白白。2. 數(shù)據(jù)庫設(shè)計車輛系統(tǒng)能不能撐住就看表建得怎么樣2.1 核心表結(jié)構(gòu)和字段設(shè)計我對每一個帶過的學(xué)弟都會強調(diào)數(shù)據(jù)庫設(shè)計是畢設(shè)的命門之一答辯老師必看表設(shè)計合不合理。車輛管理系統(tǒng)最簡化的表方案需要六張表用戶表、車輛表、出車申請表、還車記錄表、維修保養(yǎng)表、加油記錄表。有時加一張字典表用來存車輛類型、使用狀態(tài)這種枚舉值。用戶表字段不用多id、username、password、real_name、phone、role、status、create_time。密碼千萬別存明文用BCrypt加密這個細節(jié)寫進論文里很加分。車輛表字段多一些id、plate_number、brand、model、vehicle_type、buy_date、seat_count、engine_number、status、remark。status建議用int或者tinyint0可用、1已派出、2維修中、3報廢用數(shù)字比字符串效率高也好擴展。出車申請表是業(yè)務(wù)核心字段有id、user_id、vehicle_id、driver_name、start_place、end_place、start_time、end_time、reason、mileage、fuel_cost、status、create_time。status字段用來表示申請狀態(tài)0待審核、1已通過、2已駁回、3已完成。很多系統(tǒng)把送審和歸還合在一張表里我建議拆開或者用status區(qū)分因為“申請”和“記錄”本質(zhì)上不是一個生命周期狀態(tài)。關(guān)聯(lián)關(guān)系要注意業(yè)務(wù)表都用關(guān)聯(lián)id不要直接存字符串。比如申請表里存user_id而不是user_name這樣后期做統(tǒng)計的時候用JOIN就能拿到名字改用戶姓名也不會影響歷史記錄。違反這個原則的表后期寫統(tǒng)計SQL時你只會想罵人。2.2 建庫腳本和初始化數(shù)據(jù)的坑啟動項目前一定要有一條能用的SQL腳本。我見過很多同學(xué)拿到的源碼里SQL文件是殘缺的或者字段對不上實體類一啟動就報Unknown column。拿到任何源碼第一件事是先看SQL文件里有哪些表再去對entity目錄下的類一個字段一個字段確認。建庫時注意字符集統(tǒng)一用utf8mb4不然存車牌號里的生僻字或者特殊符號會報錯。數(shù)據(jù)庫名我習(xí)慣用vehicle_db導(dǎo)入命令就拿Navicat或者命令行執(zhí)行SQL文件。初始化數(shù)據(jù)至少要有管理員賬號和一條可用車輛不然你前端登錄進去看到空頁面還以為代碼寫錯了。管理員密碼建議在SQL里就存成BCrypt加密后的值比如admin123加密后的字符串別直接用明文也算是一種規(guī)范。2.3 表之間的外鍵到底要不要加這是課設(shè)里很常見的問題。我建議邏輯上保留關(guān)聯(lián)關(guān)系但物理上少加真正的外鍵約束。什么意思就是你建表時不用FOREIGN KEY關(guān)鍵字去強制約束而是在業(yè)務(wù)代碼里保證數(shù)據(jù)一致。原因很簡單加了物理外鍵刪除車輛時如果有出車記錄引用它你會被數(shù)據(jù)庫擋住報錯信息對新手特別不友好?？赡苣阒皇窍霚y試一下刪除功能結(jié)果怎么都刪不掉。用邏輯外鍵刪除車輛時先檢查有沒有未完成的申請單有就在service層攔截沒就在車輛表里把status改成“報廢”而不是物理刪除。這種設(shè)計在生產(chǎn)環(huán)境也是主流寫論文的時候還能順帶提一句“為了性能和靈活性采用邏輯外鍵設(shè)計”顯得你有思考。3. 后端SpringBoot核心模塊實現(xiàn)3.1 統(tǒng)一返回結(jié)果與異常處理前端和后端聯(lián)調(diào)最煩的一件事就是接口返回格式不統(tǒng)一。有的接口返回對象有的返回List報錯時一會兒是String一會兒是Map前端根本沒法寫統(tǒng)一處理。這個問題從一開始就要避免。我習(xí)慣定義一個Result類長這樣Data public class ResultT { private Integer code; // 200成功 500失敗 private String msg; // 提示信息 private T data; // 數(shù)據(jù) public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMsg(操作成功); result.setData(data); return result; } public static T ResultT error(String msg) { ResultT result new Result(); result.setCode(500); result.setMsg(msg); return result; } }所有的Controller接口都返回Result類型前端axios封裝里統(tǒng)一判斷code。這樣登錄失效、參數(shù)校驗失敗、服務(wù)器內(nèi)部錯誤都能用同一套邏輯處理。配合RestControllerAdvice做全局異常捕獲controller里就不用每個方法都寫try-catch代碼清爽很多。3.2 登錄認證與JWT攔截器車輛管理系統(tǒng)肯定要分角色普通用戶不能去審批派車管理員要能看到所有記錄。最常見的方案是JWT 攔截器。登錄時驗證用戶名密碼通過后生成一個token返回前端前端每次請求都在header里帶上token后端攔截器驗證token并解析出用戶id和角色。核心代碼其實不多我貼一下攔截器的邏輯Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token request.getHeader(Authorization); if (StringUtils.isBlank(token)) { throw new BusinessException(未登錄); } // 解析token校驗簽名和過期時間 Claims claims JwtUtil.parseToken(token.replace(Bearer , )); if (claims null) { throw new BusinessException(登錄已過期請重新登錄); } // 把用戶id放到request里后續(xù)controller可以直接取 request.setAttribute(userId, claims.get(userId)); return true; } }然后寫一個WebMvcConfigurer把攔截器注冊進去排除登錄接口本身和靜態(tài)資源。這里最容易犯的錯是攔截器沒有排除登錄接口導(dǎo)致前端登錄都調(diào)不通。我調(diào)試的順序永遠是先直接訪問后端接口再從前端頁面調(diào)分段定位問題。3.3 分頁查詢與條件搜索的實現(xiàn)車輛列表、出車記錄、維修記錄這些頁面都要用到分頁和搜索。MyBatis結(jié)合PageHelper是最簡單的分頁方案頁面?zhèn)鱟urrent和size兩個參數(shù)后端直接開查。我寫一個典型的分頁查詢service看一下public PageResultVehicle pageVehicles(int current, int size, String plateNumber, Integer status) { PageHelper.startPage(current, size); ListVehicle list vehicleMapper.selectByCondition(plateNumber, status); PageInfoVehicle pageInfo new PageInfo(list); PageResultVehicle result new PageResult(); result.setTotal(pageInfo.getTotal()); result.setRecords(pageInfo.getList()); return result; }這里有個細節(jié)PageHelper.startPage后面必須緊跟一條Mapper查詢中間不能插入其他操作否則分頁會失效。這個坑我踩過好多次現(xiàn)在每次寫完都要確認startPage和select之間沒有多余的代碼。模糊查詢用LIKE CONCAT(%, #{plateNumber}, %)注意別用${}直接拼字符串既防SQL注入也避免特殊字符把SQL搞壞。3.4 業(yè)務(wù)狀態(tài)流轉(zhuǎn)控制出車申請不只是簡單的增刪改查它有狀態(tài)流轉(zhuǎn)提交申請 → 管理員審核通過 → 出車 → 歸還。每個狀態(tài)之間的轉(zhuǎn)換要有校驗。比如已經(jīng)通過審核的單子就不能再隨便刪除否則統(tǒng)計數(shù)據(jù)全亂了。我的做法是在service層寫狀態(tài)變更方法比如auditApply(id, status, auditOpinion)方法內(nèi)部先查當(dāng)前狀態(tài)只允許“待審核”狀態(tài)變?yōu)椤巴ㄟ^”或“駁回”。如果狀態(tài)已經(jīng)是“通過”再調(diào)這個接口就直接拋異常。這種“狀態(tài)機”思維雖然代碼量不大但會讓你的系統(tǒng)看起來專業(yè)很多答辯時也容易講。4. 前端Vue頁面實現(xiàn)與聯(lián)調(diào)細節(jié)4.1 登錄頁與路由守衛(wèi)前端項目的入口是登錄頁。表單提交到后端/login接口拿到token之后存到localStorage同時把用戶信息放進Vuex。這里注意token的存儲位置直接決定后面好不好調(diào)試我習(xí)慣只存token在localStorage用戶信息存Vuex里刷新頁面再調(diào)一次getInfo接口拉取。路由守衛(wèi)是必須寫的不然未登錄的人可以直接敲URL進后臺頁面router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.meta.requireAuth !token) { next(/login); } else { next(); } });還有個容易被忽視的點axios請求攔截器里把token掛到header上service.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer token; } return config; });這兩段代碼配上之后整個系統(tǒng)的登錄驗證就算閉環(huán)了。4.2 Element UI表格、表單與彈窗Vue頁面里占用開發(fā)時間最多的就是表格和表單的組合。車輛列表頁的結(jié)構(gòu)大概是頂部搜索欄車牌號輸入框、狀態(tài)下拉框、查詢按鈕中間表格展示車輛信息底部彈窗新增/編輯車輛。Element UI的el-table、el-pagination、el-dialog、el-form這四個組件足夠完成95%的頁面。表格列要注意格式化比如狀態(tài)字段在數(shù)據(jù)庫里是0、1、2頁面上不能直接顯示數(shù)字要用tag標(biāo)簽映射成中文。我常用的方式是在表格列里寫templateel-table-column label狀態(tài) template slot-scopescope el-tag :typestatusType(scope.row.status) {{ statusText(scope.row.status) }} /el-tag /template /el-table-columnstatusText和statusType寫成一個工具函數(shù)所有需要顯示狀態(tài)的地方共用避免每個頁面寫一份。提交表單時默認的el-form會把數(shù)據(jù)綁到一個form對象里如果你直接把整個對象傳給后端可能會帶上莫名其妙的多余字段。比較好的做法是在提交前手動構(gòu)造一個干凈的DTOconst submitData { plateNumber: this.form.plateNumber, brand: this.form.brand, model: this.form.model, status: this.form.status };這樣既不會傳臟數(shù)據(jù)接口參數(shù)也好維護。4.3 前端接口封裝規(guī)范我見過最亂的項目是每個頁面里直接寫axios.get(/api/vehicle/list)URL散落一地后端一改路徑前端要翻遍所有vue文件。正確做法是用api目錄統(tǒng)一管理接口按模塊拆分文件。// src/api/vehicle.js import request from /utils/request; export function getVehicleList(params) { return request({ url: /vehicle/page, method: get, params }); } export function addVehicle(data) { return request({ url: /vehicle/add, method: post, data }); } export function updateVehicle(data) { return request({ url: /vehicle/update, method: post, data }); }頁面里調(diào)用的時候import進來用就行。這樣做的好處是接口路徑統(tǒng)一管理改一處全項目生效。而且每個模塊一個文件后端的controller結(jié)構(gòu)是什么樣前端的api文件就是什么樣對應(yīng)關(guān)系一目了然。4.4 跨域問題的解決方案前后端分離開發(fā)最煩的就是CORS跨域。前端8080端口后端8081端口默認情況下瀏覽器會攔截跨域請求。解決方式有兩種一種是在后端寫配置類開啟CORS一種是用前端代理。我推薦開發(fā)階段用前端代理發(fā)布于生產(chǎn)時用后端CORS。Vue的vue.config.js里加這么一段module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, changeOrigin: true } } } };這樣前端請求/api/xxx會轉(zhuǎn)發(fā)到后端的8081端口。注意你項目里所有接口前綴要統(tǒng)一比如都帶/api。后端Controller的RequestMapping第一個層級就是/api/xxx這樣代理規(guī)則才有效。這個細節(jié)很多人不寫前端聯(lián)調(diào)時接口404找半天。5. 統(tǒng)計報表與Excel導(dǎo)出的加分功能5.1 月度油耗、里程、費用統(tǒng)計的SQL寫法車輛管理系統(tǒng)里統(tǒng)計功能是答辯時的加分項但也是很多人的薄弱點。其實核心就是幾個SQL聚合查詢。比如統(tǒng)計每輛車每月的總里程和油耗可以先建立加油記錄表每次加油記錄升數(shù)、金額、當(dāng)前里程。那某輛車一段時間內(nèi)的油耗率就可以算出來。我常用的統(tǒng)計接口是查出一張匯總表SELECT vehicle_id, DATE_FORMAT(record_date, %Y-%m) AS month, SUM(fuel_volume) AS total_fuel, SUM(fuel_cost) AS total_cost, SUM(mileage) AS total_mileage FROM fuel_record WHERE record_date BETWEEN #{startDate} AND #{endDate} GROUP BY vehicle_id, DATE_FORMAT(record_date, %Y-%m) ORDER BY month DESC然后在service里算平均油耗total_fuel除以total_mileage再乘100就是百公里油耗。這個數(shù)寫進論文正文非常有說服力說明你真的理解了業(yè)務(wù)。前端展示用ECharts畫一個柱狀圖或者折線圖視覺沖擊力很強答辯演示的時候頁面上刷出一張油耗趨勢圖基本就穩(wěn)了。5.2 導(dǎo)出Excel工具類的封裝“導(dǎo)出Excel”這個功能看起來簡單但很多同學(xué)不會寫只會嘴上說“可以實現(xiàn)”。這里提供一條最簡單的路用Apache POI或者EasyExcel。EasyExcel是阿里開源的API簡單得多我建議直接用。思路是查到數(shù)據(jù)List然后用EasyExcel的write方法寫到HttpServletResponse的輸出流GetMapping(/export) public void exportExcel(HttpServletResponse response) throws IOException { ListVehicle list vehicleService.listAll(); response.setContentType(application/vnd.openxmlformats-officedocument.spreadsheetml.sheet); response.setCharacterEncoding(utf-8); String fileName URLEncoder.encode(車輛信息表, UTF-8); response.setHeader(Content-disposition, attachment;filename fileName .xlsx); EasyExcel.write(response.getOutputStream(), Vehicle.class).sheet(車輛信息).doWrite(list); }注意導(dǎo)出的實體類需要加ExcelProperty注解把實體字段對應(yīng)成中文列名。這個功能做完記得在論文里寫一句“本系統(tǒng)實現(xiàn)了數(shù)據(jù)導(dǎo)出功能便于管理人員線下存檔和進一步分析”功能完整度立刻上一個臺階。5.3 ECharts圖表展示的實現(xiàn)思路前端引入ECharts做圖表其實不難。在Vue項目里安裝echarts然后在需要展示統(tǒng)計的頁面初始化一個DOM容器用setOption配置數(shù)據(jù)源和圖表類型。柱狀圖用來展示各部門用車頻次折線圖展示月度油費趨勢餅圖展示車輛狀態(tài)分布。這三張圖放在首頁Dashboard上能替代一大段文字描述答辯時導(dǎo)師一眼就能看出你系統(tǒng)的數(shù)據(jù)可視化能力。6. 畢設(shè)答辯如何講清楚這套系統(tǒng)6.1 系統(tǒng)架構(gòu)與技術(shù)選型怎么描述答辯PPT里必定有一頁是系統(tǒng)架構(gòu)圖。我建議畫三層的結(jié)構(gòu)展示層用Vue和Element UI業(yè)務(wù)層用SpringBoot提供的RESTful接口數(shù)據(jù)層用MySQL配合MyBatis。上面再標(biāo)注一個JWT用于身份認證。這張圖一放整個系統(tǒng)的全貌就出來了。技術(shù)選型部分不要只是羅列名詞要給出理由。比如問“為什么用SpringBoot”你不要只說“因為簡單”要講“SpringBoot內(nèi)置Tomcat簡化了配置過程同時繼承了Spring的依賴注入和事務(wù)管理能力適合快速開發(fā)中小型管理系統(tǒng)”。一問一答有來有回導(dǎo)師會覺得你是真懂。6.2 答辯必問的幾個高頻問題第一個必問系統(tǒng)的角色權(quán)限是怎么實現(xiàn)的標(biāo)準(zhǔn)回答思路用戶表里有role字段區(qū)分角色登錄后發(fā)放JWTJWT里包含角色信息后端攔截器解析請求后判斷角色是否有權(quán)限訪問當(dāng)前接口。第二個必問如果并發(fā)量上來了這個系統(tǒng)怎么優(yōu)化這個問題要小心不要一上來就說“加Redis加Nginx”。就畢設(shè)體量來講先答數(shù)據(jù)庫層面給常用查詢字段加索引、避免SELECT *、分頁優(yōu)化。再答代碼層面sql防注入、連接池配置。最后說如果真到生產(chǎn)環(huán)境可以考慮引入Redis緩存熱點數(shù)據(jù)和消息隊列削峰。層層遞進比空談高深技術(shù)得分高。第三個必問你遇到的最大難點是什么怎么解決的這問題考察的是解決問題的能力不是代碼本身。你可以挑一個真實的坑比如跨域問題排查了一整天最后發(fā)現(xiàn)是前端口令中帶了token沒生效或者分頁失效是因為PageHelper和startPage之間插了其他操作。關(guān)鍵是要講出“排查思路”和“最終解決手段”。6.3 論文結(jié)構(gòu)建議和字數(shù)分配我給你一個可以照著用的論文結(jié)構(gòu)建議。第一章緒論寫背景意義和國內(nèi)外現(xiàn)狀注意國內(nèi)外現(xiàn)狀寫的時候別空洞可以結(jié)合一些行業(yè)數(shù)據(jù)。第二章相關(guān)技術(shù)介紹寫SpringBoot、Vue、MySQL、MyBatis每節(jié)寫清楚“是什么為什么選它”。第三章系統(tǒng)分析寫可行性分析和需求分析畫用例圖和數(shù)據(jù)流圖。第四章系統(tǒng)設(shè)計寫總體架構(gòu)設(shè)計和數(shù)據(jù)庫表結(jié)構(gòu)設(shè)計。第五章系統(tǒng)實現(xiàn)按功能模塊逐個介紹配截圖和核心代碼。第六章系統(tǒng)測試寫功能性測試和性能測試附測試用例表格。關(guān)鍵點是論文截圖一定要真實所有頁面截圖和數(shù)據(jù)庫截圖都要與你系統(tǒng)的實際界面完全一致。很多同學(xué)論文里放的效果圖和實際系統(tǒng)對不上答辯老師一眼就看穿這種情況印象分直接就掉完了。7. 實際部署與常見排錯實錄7.1 從源碼到本地跑通的完整路徑拿到任何一份車輛管理系統(tǒng)的源碼我最推薦的運行順序是先看SQL腳本導(dǎo)入數(shù)據(jù)庫再啟動后端服務(wù)最后啟動前端。不要反著來。后端啟動之前確認application.yml里的數(shù)據(jù)庫地址、端口、用戶名密碼都改了。前端啟動之前執(zhí)行npm install如果嫌慢可以配置一下鏡像源這是常規(guī)操作。后端啟動成功后訪問Swagger或者直接訪問一個GET接口確認返回JSON。前端啟動后訪問首頁如果頁面能打開但接口報錯優(yōu)先看瀏覽器F12的Network面板確認請求是不是被代理轉(zhuǎn)發(fā)到了正確的后端地址。90%的聯(lián)調(diào)問題都能在這個面板里定位到。7.2 數(shù)據(jù)庫連接失敗的排查步驟數(shù)據(jù)庫連接失敗這個問題高發(fā)報錯大概長這樣Access denied for user rootlocalhost。先別急按順序排查三層第一MySQL服務(wù)有沒有啟動Windows下按CtrlShiftEsc到服務(wù)里看第二用戶名密碼是不是對的拿Navicat直接連一下試試第三賬號允許訪問的主機范圍是不是localhost。第三步是重災(zāi)區(qū)很多人的MySQL的root賬號不允許遠程訪問要用就得在mysql庫的user表里改host字段和權(quán)限或者創(chuàng)建一個專用賬號。7.3 前后端接口返回值對不上的處理方式聯(lián)調(diào)時會遇到這種情況前端表格全是空的但瀏覽器的Network里明明看到后端返回了數(shù)據(jù)。排查思路先看Response是不是被瀏覽器攔截了CORS錯誤會在Console里報再看數(shù)據(jù)格式是不是嵌套了一層比如后端返回的是{ code: 200, data: {...} }你前端卻直接拿res.data當(dāng)成列表用拿到的其實是整個Result對象自然渲染不出來。還有一種情況是后端的日期字段返回格式是時間戳前端直接顯示一串?dāng)?shù)字。解決辦法是在后端實體字段上加JsonFormat(pattern yyyy-MM-dd HH:mm:ss)注解或者在Jackson配置里統(tǒng)一指定時間格式。這種細節(jié)不處理答辯演示時表格里出現(xiàn)一串?dāng)?shù)字觀感非常差。7.4 前端Node環(huán)境相關(guān)的坑npm install能不能順利跑完取決于Node版本和依賴版本匹不匹配。有些老項目依賴的是webpack 4配Node 18以上會報錯。如果你拿到的源碼用的是Vue CLI 4建議裝Node 14或者16的LTS版本。這里也提醒一句Vue2和Vue3的項目結(jié)構(gòu)有一定差別拿到源碼先看package.json里的vue版本再決定自己的操作。依賴裝好后npm run serve就可以啟動了。如果報端口被占用改vue.config.js里的port即可。如果報了ESLint格式錯誤導(dǎo)致編譯失敗可以在vue.config.js里把lintOnSave設(shè)為false先把項目跑起來再說。8. 寫在最后的一點建議我做這套系統(tǒng)的最大感受是別把畢設(shè)當(dāng)成最后一個月要趕的作業(yè)當(dāng)成一個真正要上線的小產(chǎn)品來做。當(dāng)你把“能用”的代碼改成“好用”的代碼——表格加了搜索、數(shù)據(jù)加了校驗、異常給了提示、頁面加了圖表——那個過程學(xué)到的知識密度遠大于你把視頻課刷一遍。如果你現(xiàn)在手里正準(zhǔn)備啟動一個車輛管理系統(tǒng)我建議第一周什么都不寫先把表和接口設(shè)計想明白。我是吃過這個虧的第一次做的時候數(shù)據(jù)庫表建得隨意到了第三周要加統(tǒng)計功能發(fā)現(xiàn)表結(jié)構(gòu)根本查不出數(shù)據(jù)硬著頭皮重建了四張表那周基本沒睡好。最后分享一個小技巧寫完一個模塊就自己模擬用戶走一遍完整流程注冊、登錄、申請出車、審批、還車、查看報表。你親手走過一遍完整的業(yè)務(wù)閉環(huán)答辯時講出來的通暢程度和只背代碼完全不一樣。你會發(fā)現(xiàn)導(dǎo)師問的很多問題都在這個閉環(huán)里有了答案。