畢業(yè)設(shè)計(jì)選題這件事每年都有一大批人被卡在“做什么”和“怎么做”之間。做太簡(jiǎn)單的系統(tǒng)答辯時(shí)拿不出手做太復(fù)雜的架構(gòu)開(kāi)發(fā)周期又撐不住。如果你正在找 Java Web 方向的畢設(shè)項(xiàng)目又希望它既有完整業(yè)務(wù)閉環(huán)、又有拿得出手的技術(shù)棧那 SpringBootVue 的就業(yè)管理系統(tǒng)是一個(gè)比較穩(wěn)妥的選擇。這篇文章我把這個(gè)項(xiàng)目的源碼結(jié)構(gòu)、SQL 腳本設(shè)計(jì)、接口文檔編寫(xiě)、前后端聯(lián)調(diào)和部署上線全流程拆開(kāi)講一遍順便把我自己開(kāi)發(fā)時(shí)踩過(guò)的坑一并說(shuō)清楚希望能讓你的畢設(shè)少走點(diǎn)彎路。1. 為什么 SpringBootVue 是 Java Web 畢設(shè)的穩(wěn)妥選擇先聊點(diǎn)實(shí)在的。每年春季學(xué)期開(kāi)始也就是 3 月到 4 月這個(gè)時(shí)間窗口是畢設(shè)選題的高峰期。如果你在這個(gè)節(jié)點(diǎn)打開(kāi)招聘網(wǎng)站或者逛技術(shù)社區(qū)會(huì)發(fā)現(xiàn)大量 Java 方向的崗位要求里同時(shí)出現(xiàn) SpringBoot 和 Vue 這兩個(gè)關(guān)鍵詞這背后是有強(qiáng)烈行業(yè)原因的——企業(yè)里真實(shí)的 web 項(xiàng)目絕大多數(shù)就是這種前后端分離的形態(tài)。1.1 技術(shù)棧的選型邏輯后端選 SpringBoot 而不是更老的 SSM 或者 Struts核心原因是開(kāi)發(fā)效率。SpringBoot 的自動(dòng)配置機(jī)制幫我們省掉了大量 XML 配置內(nèi)嵌 Tomcat 也讓部署變得極其簡(jiǎn)單。我見(jiàn)過(guò)不少同學(xué)還在手動(dòng)配置 web.xml 和數(shù)據(jù)源光這些環(huán)境問(wèn)題就能耗掉一個(gè)禮拜。而 SpringBoot 項(xiàng)目的起步只需要一個(gè)啟動(dòng)類(lèi)加幾個(gè)注解連版本兼容性問(wèn)題大部分都被 Spring Initializr 處理掉了。前端選 Vue 而不是 jQuery 或者純模板渲染核心邏輯在于組件化開(kāi)發(fā)。Vue 的單文件組件模式把 HTML、CSS、JS 寫(xiě)在一個(gè)文件里業(yè)務(wù)邏輯清晰團(tuán)隊(duì)協(xié)作時(shí)不會(huì)互相覆蓋文件。更重要的是Vue 生態(tài)里的 Element UI 組件庫(kù)提供了現(xiàn)成的表格、表單、彈窗、分頁(yè)這些管理端高頻組件畢設(shè)里增刪改查列表搜索這四大金剛基本可以直接拼裝。如果你是第一次做完整的前后端分離項(xiàng)目這個(gè)組合的學(xué)習(xí)曲線也相對(duì)友好。SpringBoot 側(cè)你只需要掌握 Controller 層怎么接收請(qǐng)求、Service 層怎么寫(xiě)業(yè)務(wù)邏輯、Mapper 層怎么操作數(shù)據(jù)庫(kù)Vue 側(cè)只需要理解組件通信、生命周期、路由跳轉(zhuǎn)三個(gè)概念就能把頁(yè)面搭起來(lái)。對(duì)于需要在一學(xué)期內(nèi)完成設(shè)計(jì)編碼測(cè)試論文的畢設(shè)場(chǎng)景來(lái)說(shuō)這套技術(shù)棧足夠把時(shí)間用在業(yè)務(wù)上而不是浪費(fèi)在環(huán)境配置上。1.2 就業(yè)管理系統(tǒng)為什么適合作為畢設(shè)題目就業(yè)管理系統(tǒng)這個(gè)題目之所以在每年的畢設(shè)選題庫(kù)里都能看到甚至很多學(xué)校會(huì)把它單獨(dú)列為一個(gè)方向是因?yàn)樗臉I(yè)務(wù)邊界足夠清晰同時(shí)又覆蓋了完整的用戶角色體系。這個(gè)系統(tǒng)天然需要三類(lèi)角色學(xué)生、企業(yè)、管理員。學(xué)生可以錄入個(gè)人信息、瀏覽招聘崗位、投遞簡(jiǎn)歷、查看投遞進(jìn)度企業(yè)可以注冊(cè)入駐、發(fā)布職位、篩選簡(jiǎn)歷、發(fā)出面試邀請(qǐng)管理員負(fù)責(zé)審核企業(yè)資質(zhì)、管理公告、統(tǒng)計(jì)就業(yè)數(shù)據(jù)。這樣的角色劃分直接決定了系統(tǒng)的權(quán)限控制模型而權(quán)限控制恰恰是答辯時(shí)最容易展開(kāi)講深度的點(diǎn)。業(yè)務(wù)上還有一個(gè)隱藏價(jià)值——它屬于典型的信息管理流程流轉(zhuǎn)型系統(tǒng)。前半部分本質(zhì)上還是各類(lèi)信息表的 CRUD這是保底線無(wú)論開(kāi)發(fā)到什么程度系統(tǒng)都能跑起來(lái)后半部分的投遞流程、審核流程、統(tǒng)計(jì)分析是可以在論文里單獨(dú)開(kāi)一章講業(yè)務(wù)流程設(shè)計(jì)與優(yōu)化的進(jìn)階點(diǎn)。這種基礎(chǔ)功能保底模塊化擴(kuò)展的特征讓這個(gè)題目幾乎不可能出現(xiàn)做不出來(lái)的極端情況。2. 項(xiàng)目整體架構(gòu)設(shè)計(jì)與數(shù)據(jù)庫(kù)表拆分思路架構(gòu)設(shè)計(jì)這件事很多畢設(shè)選手容易走進(jìn)兩個(gè)極端要么完全不做設(shè)計(jì)直接打開(kāi) IDE 開(kāi)始寫(xiě)代碼結(jié)果寫(xiě)到一半發(fā)現(xiàn)實(shí)體類(lèi)之間關(guān)系混亂、代碼互相依賴要么過(guò)度設(shè)計(jì)把微服務(wù)、消息隊(duì)列、分布式緩存這些不該出現(xiàn)在畢設(shè)里的東西全塞進(jìn)來(lái)給自己挖了個(gè)大坑。2.1 單體應(yīng)用 前后端分離的架構(gòu)模式就業(yè)管理系統(tǒng)這類(lèi)校園業(yè)務(wù)系統(tǒng)最合理的架構(gòu)就是單體應(yīng)用 前后端分離。后端用 SpringBoot 打包成獨(dú)立服務(wù)前端用 Vue 開(kāi)發(fā)后用 npm 構(gòu)建成靜態(tài)資源部署時(shí)可以直接放在 Nginx 下托管并反向代理到后端接口。為什么不建議上微服務(wù)原因很直接微服務(wù)的核心價(jià)值在于獨(dú)立部署和彈性伸縮一個(gè)就業(yè)管理系統(tǒng)即便在校園環(huán)境里跑用戶量也遠(yuǎn)遠(yuǎn)達(dá)不到需要拆分的程度。引入微服務(wù)反而會(huì)引入服務(wù)注冊(cè)、配置中心、分布式事務(wù)等問(wèn)題每一個(gè)都能讓畢設(shè)進(jìn)度停滯兩周以上。記住一句話畢業(yè)設(shè)計(jì)的架構(gòu)復(fù)雜度應(yīng)該剛好覆蓋題目需求多一分是負(fù)擔(dān)少一分是缺憾。這個(gè)項(xiàng)目的后端模塊劃分我建議這樣組織controller接收前端請(qǐng)求參數(shù)校驗(yàn)返回統(tǒng)一響應(yīng)體service業(yè)務(wù)邏輯事務(wù)控制mapper數(shù)據(jù)庫(kù)持久層操作entity與數(shù)據(jù)表對(duì)應(yīng)的實(shí)體類(lèi)dto前端傳輸對(duì)象避免直接暴露實(shí)體類(lèi)內(nèi)部結(jié)構(gòu)config配置類(lèi)包括跨域配置、攔截器注冊(cè)u(píng)til通用工具類(lèi)如 Token 生成與校驗(yàn)、日期處理前端方面Vue 項(xiàng)目的標(biāo)準(zhǔn)目錄結(jié)構(gòu)是src/api接口請(qǐng)求封裝、src/views頁(yè)面組件、src/router路由配置、src/store狀態(tài)管理、src/components通用組件。管理端頁(yè)面基本就是布局組件嵌套路由頁(yè)面頂部是系統(tǒng)標(biāo)題左側(cè)是菜單欄右側(cè)是內(nèi)容區(qū)。2.2 數(shù)據(jù)庫(kù)表設(shè)計(jì)與字段規(guī)劃數(shù)據(jù)庫(kù)是整系統(tǒng)的地基。我見(jiàn)過(guò)太多畢設(shè)的庫(kù)表設(shè)計(jì)要么是字段命名混亂有駝峰有下劃線要么是缺少外鍵邏輯關(guān)聯(lián)要么是沒(méi)加時(shí)間戳字段導(dǎo)致做統(tǒng)計(jì)分析時(shí)無(wú)從下手。就業(yè)系統(tǒng)的表結(jié)構(gòu)設(shè)計(jì)要從真實(shí)業(yè)務(wù)流程倒推來(lái)理解為什么這樣設(shè)計(jì)。核心數(shù)據(jù)表至少有這些表名用途關(guān)鍵字段說(shuō)明sys_user系統(tǒng)用戶表賬號(hào)、密碼MD5 加密存儲(chǔ)、角色標(biāo)識(shí)sys_role角色表角色編碼、角色名稱student_profile學(xué)生信息表姓名、學(xué)號(hào)、專業(yè)、畢業(yè)年份、簡(jiǎn)歷附件路徑company_info企業(yè)信息表企業(yè)名稱、統(tǒng)一社會(huì)信用代碼、行業(yè)類(lèi)別、規(guī)模job_position職位表職位名稱、薪資范圍、工作城市、崗位要求job_resume簡(jiǎn)歷表基本資料、教育經(jīng)歷、項(xiàng)目經(jīng)歷、技能標(biāo)簽delivery_record投遞記錄表學(xué)生ID、職位ID、投遞時(shí)間、狀態(tài)interview_record面試記錄表關(guān)聯(lián)投遞ID、面試時(shí)間、面試結(jié)果sys_notice公告表標(biāo)題、內(nèi)容、發(fā)布時(shí)間、發(fā)布人collect_record收藏記錄表用戶ID、職位ID、收藏時(shí)間舉例說(shuō)明為什么要這樣設(shè)計(jì)。student_profile和sys_user分開(kāi)是有講究的賬號(hào)登錄信息和業(yè)務(wù)個(gè)人信息本身就是兩個(gè)維度的數(shù)據(jù)合并到一張表雖然能省一次聯(lián)表查詢但會(huì)導(dǎo)致表字段膨脹、職責(zé)混亂后續(xù)如果要做管理員給用戶重置密碼功能時(shí)業(yè)務(wù)表的信息就不該被無(wú)辜翻出來(lái)。再來(lái)看delivery_record這個(gè)表的設(shè)計(jì)。它除了簡(jiǎn)單的外鍵關(guān)聯(lián)外狀態(tài)字段待查看、已查看、已邀請(qǐng)、不合適、已通過(guò)是整個(gè)投遞流程的核心狀態(tài)機(jī)。你在寫(xiě)后端 Service 時(shí)要有意識(shí)地用常量或者枚舉來(lái)管理這些狀態(tài)而不是在業(yè)務(wù)代碼里直接寫(xiě)魔法字符串。畢竟?fàn)顟B(tài)一旦寫(xiě)錯(cuò)后續(xù)統(tǒng)計(jì)就業(yè)率、分析投遞轉(zhuǎn)化率都會(huì)出錯(cuò)。建表腳本的規(guī)范問(wèn)題也值得注意所有表的主鍵建議使用bigint自增避免使用 UUID 字符串主鍵因?yàn)樽栽鲋麈I在插入時(shí)性能更好索引空間占用也更小所有業(yè)務(wù)表都建議加create_time和update_time兩個(gè)字段這個(gè)習(xí)慣會(huì)為后續(xù)調(diào)試、排查數(shù)據(jù)問(wèn)題帶來(lái)極大的便利外鍵約束在畢設(shè)中可以直接使用邏輯關(guān)聯(lián)而不是物理外鍵即僅保留 ID 字段作為關(guān)聯(lián)字段不在數(shù)據(jù)庫(kù)層面強(qiáng)制 FOREIGN KEY這樣既保持?jǐn)?shù)據(jù)關(guān)系的可讀性又避免在刪除數(shù)據(jù)時(shí)被外鍵約束卡住。初始化數(shù)據(jù)也很有講究。學(xué)生用戶、測(cè)試企業(yè)、示例職位、公告信息建議全都在 SQL 腳本里預(yù)置好。這樣數(shù)據(jù)庫(kù)一旦導(dǎo)入導(dǎo)入完成頁(yè)面登錄進(jìn)去就會(huì)有現(xiàn)成的數(shù)據(jù)展示不用為了跑通流程去一條條手動(dòng)錄入。3. 后端 SpringBoot 核心功能實(shí)現(xiàn)與接口設(shè)計(jì)后端開(kāi)發(fā)的核心目標(biāo)是讓前端頁(yè)面能夠通過(guò) HTTP 請(qǐng)求拿到數(shù)據(jù)并完成業(yè)務(wù)操作。這里涉及三個(gè)核心問(wèn)題接口怎么定義、數(shù)據(jù)怎么傳輸、登錄怎么鑒權(quán)。3.1 統(tǒng)一響應(yīng)體的設(shè)計(jì)接口返回的數(shù)據(jù)結(jié)構(gòu)如果不統(tǒng)一前后端聯(lián)調(diào)時(shí)會(huì)產(chǎn)生非常多的低級(jí)溝通成本。這里建議從第一個(gè)接口開(kāi)始就使用一個(gè)統(tǒng)一的響應(yīng)體類(lèi)public class Result { private Integer code; // 200 成功400 業(yè)務(wù)異常401 未認(rèn)證500 系統(tǒng)錯(cuò)誤 private String message; private Object data; public static Result success(Object data) { Result result new Result(); result.setCode(200); result.setMessage(操作成功); result.setData(data); return result; } public static Result error(Integer code, String message) { Result result new Result(); result.setCode(code); result.setMessage(message); return result; } }前端 axios 攔截器拿到響應(yīng)后統(tǒng)一判斷code字段如果等于 200 就進(jìn)入正常業(yè)務(wù)處理否則彈出錯(cuò)誤提示并終止流程。這套模式寫(xiě)起來(lái)很簡(jiǎn)單但它讓前后端之間的契約非常清晰尤其是答辯演示的時(shí)候柵欄一眼就能看到系統(tǒng)的邏輯脈絡(luò)。3.2 登錄鑒權(quán)鏈路登錄鑒權(quán)是就業(yè)管理系統(tǒng)重中之重因?yàn)橄到y(tǒng)有三個(gè)角色不同角色能訪問(wèn)的功能菜單和操作按鈕是不同的。這里介紹一種在畢設(shè)中同時(shí)兼顧安全性和實(shí)現(xiàn)難度的方案——JWTJSON Web Token 攔截器。登錄流程拆解如下前端將用戶名和密碼發(fā)送到/api/auth/login。后端從sys_user表查詢用戶用MD5(密碼 鹽)來(lái)驗(yàn)證密碼。校驗(yàn)通過(guò)后生成 JWT Token把用戶ID和角色編碼放入 token 的 claims 中。前端把 token 存儲(chǔ)在 localStorage并在 axios 請(qǐng)求攔截器里統(tǒng)一加上Authorization: Bearer token。后端定義一個(gè)攔截器在請(qǐng)求進(jìn)入 Controller 之前校驗(yàn) token 的合法性和有效期并在請(qǐng)求上下文中解析出用戶ID和角色。攔截器核心邏輯大致如下public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String authHeader request.getHeader(Authorization); if (authHeader null || !authHeader.startsWith(Bearer )) { response.setStatus(401); return false; } String token authHeader.substring(7); try { Claims claims JwtUtil.parseToken(token); request.setAttribute(userId, claims.get(userId)); request.setAttribute(role, claims.get(role)); return true; } catch (Exception e) { response.setStatus(401); return false; } } }這個(gè)方案比傳統(tǒng)的 Session 方案好在哪Session 依賴服務(wù)端保存狀態(tài)在部署時(shí)如果開(kāi)了多實(shí)例還需要額外的 Session 共享方案而 JWT 本身就是無(wú)狀態(tài)的服務(wù)端不需要保存任何會(huì)話信息校驗(yàn)的是簽名的正確性天然適合前后端分離的場(chǎng)景。畢設(shè)里能把這個(gè)邏輯講明白答辯時(shí)你怎么處理登錄態(tài)這個(gè)問(wèn)題基本就穩(wěn)了。3.3 核心業(yè)務(wù)接口的設(shè)計(jì)思路就業(yè)系統(tǒng)的核心業(yè)務(wù)接口圍繞職位和投遞鏈路展開(kāi)列舉幾個(gè)典型接口及其設(shè)計(jì)理由POST /api/job發(fā)布職位。請(qǐng)求參數(shù)是職位表單數(shù)據(jù)后端需要校驗(yàn)當(dāng)前用戶角色是否為企業(yè)端并且企業(yè)信息已通過(guò)管理員審核。這里最關(guān)鍵的是校驗(yàn)的是角色和資格而不是誰(shuí)都能發(fā)表職位。GET /api/job/list職位分頁(yè)列表。前端傳當(dāng)前頁(yè)碼、每頁(yè)條數(shù)、篩選條件城市、行業(yè)、薪資范圍、關(guān)鍵詞后端使用 MyBatis-Plus 的Page對(duì)象做分頁(yè)查詢。不要把排序和篩選邏輯寫(xiě)死在 SQL 里通過(guò)前端傳參控制會(huì)更靈活。POST /api/delivery投遞簡(jiǎn)歷。需要校驗(yàn)當(dāng)前登錄學(xué)生是否已填完整簡(jiǎn)歷資料若沒(méi)填完整就返回業(yè)務(wù)異常并提示先去完善簡(jiǎn)歷。同時(shí)需要做一個(gè)冪等校驗(yàn)——同一個(gè)職位同一個(gè)學(xué)生不能重復(fù)投遞。GET /api/delivery/student學(xué)生查看自己的投遞記錄。這是一個(gè)多表聯(lián)查需要把投遞記錄和職位信息、企業(yè)信息關(guān)聯(lián)起來(lái)返回給前端展示完整的投遞卡片。注意設(shè)計(jì)好 VO 而不是直接把三層表字段全塞到一個(gè) Map 里不然前端拿到的數(shù)據(jù)雜亂無(wú)章。GET /api/admin/stats管理員統(tǒng)計(jì)分析。統(tǒng)計(jì)學(xué)校整體就業(yè)率、各專業(yè)就業(yè)人數(shù)分布、熱門(mén)崗位 TOP10。這類(lèi)接口不需要返回分頁(yè)結(jié)構(gòu)直接返回一個(gè)統(tǒng)計(jì)對(duì)象即可。SQL 上要善用GROUP BY和COUNT必要時(shí)可以把復(fù)雜統(tǒng)計(jì)查詢拆成多個(gè) SQL 在 Service 層匯總。3.4 數(shù)據(jù)庫(kù)訪問(wèn)層的選型理由數(shù)據(jù)庫(kù)訪問(wèn)層有的人用原生 MyBatis有的人用 MyBatis-Plus有的人用 Spring Data JPA。我的建議是選 MyBatis-Plus理由有三點(diǎn)它沒(méi)改變 MyBatis 的核心使用方式SQL 能力沒(méi)有縮水BaseMapper提供了常用 CRUD 方法幾乎不用寫(xiě) SQLLambdaQueryWrapper讓復(fù)雜條件查詢?cè)?Java 代碼里直接表達(dá)比拼接 XML SQL 更安全也更體面。比如投遞去重的判斷用 LambdaQueryWrapper 只需這樣寫(xiě)LambdaQueryWrapperDeliveryRecord wrapper new LambdaQueryWrapper(); wrapper.eq(DeliveryRecord::getStudentId, studentId) .eq(DeliveryRecord::getJobId, jobId); if (deliveryMapper.selectCount(wrapper) 0) { throw new BusinessException(您已投遞過(guò)該職位請(qǐng)勿重復(fù)投遞); }沒(méi)有繁瑣的 XML 配置、沒(méi)有格式不齊的 SQL 映射對(duì)趕進(jìn)度的畢設(shè)來(lái)說(shuō)是實(shí)實(shí)在在的省心方案。4. 前端 Vue 工程搭建與聯(lián)調(diào)實(shí)踐后端接口定義好了前端才是真正讓系統(tǒng)可見(jiàn)、可用、可演示的部分。Vue 工程從初始化到跑通整套業(yè)務(wù)核心環(huán)節(jié)包括環(huán)境搭建、路由組織、請(qǐng)求封裝和跨域處理。4.1 環(huán)境搭建與項(xiàng)目初始化前端環(huán)境主要涉及 Node.js 和 npm版本選擇上建議使用 Node 16 或 18 的 LTS 版本。Vue CLI 可以按需選擇 Vue 2 加 Element UI或者 Vue 3 加 Element Plus。畢設(shè)項(xiàng)目我傾向 Vue 2 Element UI 組合因?yàn)榫W(wǎng)上資料最多踩坑時(shí)更容易查到解決方案。項(xiàng)目初始化命令就是一個(gè)npm install -g vue/cli vue create job-web cd job-web npm install element-ui axios vue-router vuex創(chuàng)建完成后對(duì)src目錄做一次重組router下寫(xiě)路由配置、api下按模塊封裝接口請(qǐng)求、views下按角色建立頁(yè)面文件夾。這個(gè)結(jié)構(gòu)從一開(kāi)始就清晰后面寫(xiě)頁(yè)面時(shí)不會(huì)到處亂放文件。4.2 路由組織與權(quán)限控制前端的路由分為公開(kāi)路由和認(rèn)證路由兩類(lèi)。公開(kāi)路由例如登錄頁(yè)、注冊(cè)頁(yè)。認(rèn)證路由又按角色細(xì)分學(xué)生端路由/student企業(yè)端路由/company管理端路由/admin。核心是路由守衛(wèi)。在router/index.js里通過(guò)beforeEach攔截跳轉(zhuǎn)router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.path /login) { next(); return; } if (!token) { next({ path: /login }); return; } const role localStorage.getItem(role); if (to.meta.roles !to.meta.roles.includes(role)) { next({ path: /403 }); return; } next(); });這個(gè)邏輯非常簡(jiǎn)單清晰沒(méi)有 token 就別想進(jìn)任何業(yè)務(wù)頁(yè)面角色不符的跳轉(zhuǎn)到 403 頁(yè)。安全要放在兩條腿走路——后端鑒權(quán)是最后一道關(guān)卡前端守衛(wèi)只是給正常用戶提供友好體驗(yàn)不能指望前端攔攔截就能防住惡意請(qǐng)求。4.3 axios 封裝與跨域問(wèn)題axios 封裝的核心是兩件事統(tǒng)一注入 token、統(tǒng)一處理錯(cuò)誤。import axios from axios; const request axios.create({ baseURL: /api, // 由代理轉(zhuǎn)發(fā)到后端真實(shí)地址 timeout: 10000 }); request.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer token; } return config; }); request.interceptors.response.use( response { const res response.data; if (res.code 200) { return res.data; } if (res.code 401) { localStorage.clear(); window.location.href /login; } return Promise.reject(new Error(res.message)); }, error Promise.reject(error) ); export default request;跨域問(wèn)題在開(kāi)發(fā)聯(lián)調(diào)階段一定會(huì)遇到前端跑在 8080 端口后端跑在 8082 端口直接從瀏覽器發(fā)請(qǐng)求會(huì)被瀏覽器的同源策略攔下。標(biāo)準(zhǔn)解決方案是前端開(kāi)發(fā)服務(wù)器配置代理在vue.config.js里寫(xiě)module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8082, changeOrigin: true, pathRewrite: { ^/api: } } } } };這樣前端代碼里請(qǐng)求路徑都寫(xiě)/api/...開(kāi)發(fā)時(shí)由 webpack-dev-server 代理轉(zhuǎn)發(fā)到后端完全繞開(kāi)跨域限制。前端部署時(shí)再由 Nginx 做同樣的反向代理生產(chǎn)環(huán)境的路徑邏輯和開(kāi)發(fā)環(huán)境保持一致避免環(huán)境切換帶來(lái)的額外坑。5. 從零跑通項(xiàng)目的完整流程與部署踩坑記錄很多同學(xué)拿到別人的項(xiàng)目源碼第一步就卡在建環(huán)境上。這里我把從零到瀏覽器跑起來(lái)的標(biāo)準(zhǔn)流程列一遍以及每個(gè)環(huán)節(jié)會(huì)踩到什么坑。5.1 環(huán)境準(zhǔn)備清單后端側(cè)需要安裝 JDK 1.8 或 11、Maven 3.6、MySQL 5.7 或 8.0 。前端側(cè)需要 Node 16、npm。開(kāi)發(fā)工具推薦 IDEA社區(qū)版就行 VSCodeIDEA 專門(mén)寫(xiě)后端VSCode 專門(mén)寫(xiě)前端兩邊互不干擾。有個(gè)容易忽略的坑是 JDK 和 SpringBoot 版本兼容問(wèn)題。如果你用 JDK 17 或者更高版本而后端項(xiàng)目是基于 SpringBoot 2.x 搭建的啟動(dòng)時(shí)大概率會(huì)遇到模塊訪問(wèn)權(quán)限報(bào)錯(cuò)需要額外添加 JVM 參數(shù)不了解的人直接卡死。穩(wěn)妥方案是安裝 JDK 1.8 或 11與 SpringBoot 2.x 完美匹配。5.2 數(shù)據(jù)庫(kù)導(dǎo)入 SQL 腳本拿到項(xiàng)目的 SQL 腳本后導(dǎo)入操作不要直接在命令行粘貼整個(gè)文件尤其當(dāng)腳本有幾十 KB 時(shí)容易中間斷開(kāi)。推薦用可視化工具執(zhí)行整個(gè)腳本比如 Navicat 的運(yùn)行 SQL 文件功能。腳本文件導(dǎo)入后檢查sys_user表里是否有初始化好的管理員賬號(hào)確保密碼字段是加密后的值而不是明文。如果 SQL 腳本執(zhí)行報(bào)錯(cuò)優(yōu)先排查是不是版本問(wèn)題——比如用了 MySQL 8.0 新增的語(yǔ)法卻在 5.7 上跑或者排序規(guī)則和默認(rèn)字符集不匹配。順手把數(shù)據(jù)庫(kù)字符集統(tǒng)一設(shè)為utf8mb4避免插入中文出現(xiàn)亂碼。5.3 啟動(dòng)后端服務(wù)的實(shí)操用 IDEA 導(dǎo)入 Maven 項(xiàng)目后等待依賴下載完成然后修改application.yml里的數(shù)據(jù)庫(kù)連接配置server: port: 8082 spring: datasource: url: jdbc:mysql://localhost:3306/job_db?useUnicodetruecharacterEncodingutf8mb4useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 mybatis-plus: mapper-locations: classpath*:mapper/**/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl第一次啟動(dòng)時(shí)建議開(kāi)啟log-impl這樣控制臺(tái)會(huì)打印每條 SQL方便觀察后端實(shí)際執(zhí)行了什么 SQL排查問(wèn)題時(shí)作用極大。等系統(tǒng)穩(wěn)定后再關(guān)掉日志避免輸出刷屏。啟動(dòng)類(lèi)直接運(yùn)行main方法看到控制臺(tái)輸出 Started Application in x seconds 就代表后端起來(lái)了。5.4 啟動(dòng)前端與打包部署前端依賴安裝運(yùn)行npm install這一步在國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境下可能很慢可以把 npm 鏡像源換成淘寶源速度會(huì)顯著提升。啟動(dòng)開(kāi)發(fā)服務(wù)運(yùn)行npm run serve瀏覽器訪問(wèn)http://localhost:8080登錄即可看到系統(tǒng)界面。開(kāi)發(fā)完成后的部署環(huán)節(jié)我提供一個(gè)固定的流程模板后端執(zhí)行 Maven 打包mvn clean package -DskipTests在 target 目錄生成job-system.jar。前端執(zhí)行npm run build生成dist目錄。把dist里的靜態(tài)文件上傳到服務(wù)器把 jar 包也傳上去。用 Nginx 托管前端靜態(tài)文件并配置/api反向代理到后端端口。用java -jar job-system.jar啟動(dòng)后端服務(wù)。Nginx 的配置核心如下server { listen 80; server_name your-domain.com; location / { root /opt/job-web/dist; index index.html; try_files $uri $uri/ /index.html; # 解決 Vue 路由刷新 404 的問(wèn)題 } location /api/ { proxy_pass http://127.0.0.1:8082/; # 注意斜杠會(huì)去掉 /api 前綴 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }這個(gè)try_files指令是 Vue 路由的關(guān)鍵如果不寫(xiě)瀏覽器直接刷新子頁(yè)面比如/student/job-list就會(huì)報(bào) 404。很多人部署完發(fā)現(xiàn)頁(yè)面打不開(kāi)十有八九是這里漏配了。5.5 部署時(shí)遇到的典型錯(cuò)誤部署環(huán)節(jié)我整理了一個(gè)高頻問(wèn)題排查表報(bào)錯(cuò)現(xiàn)象根本原因解決方案前端請(qǐng)求接口 502Nginx 沒(méi)有啟動(dòng)后端或后端端口不對(duì)確認(rèn) jar 包進(jìn)程存在curl http://127.0.0.1:8082/api/auth/login測(cè)試前端請(qǐng)求接口 404代理路徑 rewrite 配置錯(cuò)誤檢查proxy_pass是否處理了/api前綴刷新子頁(yè)面 404Nginx 缺少 try_files 配置補(bǔ)上try_files $uri $uri/ /index.html;頁(yè)面能開(kāi)但登錄失敗后端數(shù)據(jù)庫(kù)連接失敗查看后端日志確認(rèn) MySQL 賬戶密碼和遠(yuǎn)程訪問(wèn)權(quán)限插入數(shù)據(jù)中文亂碼數(shù)據(jù)庫(kù)字符集不是 utf8mb4執(zhí)行ALTER DATABASE job_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;MySQL 連接報(bào) SSL 錯(cuò)誤連接串未加 useSSLfalse在 url 后追加useSSLfalseserverTimezoneAsia/Shanghai每個(gè)錯(cuò)誤排查時(shí)先看日志后端日志是 Locate 的第一利器不要憑感覺(jué)亂改配置。6. 接口文檔編寫(xiě)規(guī)范與給答辯準(zhǔn)備的經(jīng)驗(yàn)接口文檔在畢設(shè)里的定位經(jīng)常被忽視但它在兩個(gè)場(chǎng)景下非常重要一是你自己寫(xiě)前端時(shí)需要回頭查接口的定義二是答辯時(shí)老師翻開(kāi)你的項(xiàng)目文檔接口設(shè)計(jì)規(guī)范程度直接反映你的工程素養(yǎng)。6.1 接口文檔該記錄哪些內(nèi)容每個(gè)接口建議包含五部分信息接口地址、請(qǐng)求方式、請(qǐng)求參數(shù)名稱、類(lèi)型、是否必填、說(shuō)明、返回示例、錯(cuò)誤碼說(shuō)明。這套格式寫(xiě)清楚后后端每個(gè)接口相當(dāng)于一個(gè)契約前端照著調(diào)用即可。截取一個(gè)登錄接口的文檔示例接口路徑POST /api/auth/login 接口描述用戶登錄校驗(yàn)賬號(hào)密碼后返回 JWT Token 請(qǐng)求參數(shù) - username string 必填 用戶名 - password string 必填 密碼明文后端負(fù)責(zé)加密校驗(yàn) 返回示例 { code: 200, message: 登錄成功, data: { token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..., userId: 1, role: admin } } 錯(cuò)誤碼 400 用戶名或密碼錯(cuò)誤 401 賬號(hào)已被禁用文檔可以采用 Swagger 自動(dòng)生成也可以手寫(xiě) Markdown。我個(gè)人建議手寫(xiě)因?yàn)閺?qiáng)迫自己重新審視一遍每個(gè)字段發(fā)現(xiàn)潛在問(wèn)題時(shí)能及時(shí)修正審閱起來(lái)也更有成就感。6.2 答辯前值得深入準(zhǔn)備的題目畢設(shè)答辯的核心邏輯是你做的系統(tǒng)經(jīng)得起問(wèn)推薦提前準(zhǔn)備以下問(wèn)題為什么做前后端分離答前后端獨(dú)立開(kāi)發(fā)部署、接口解耦、職責(zé)清晰。前端專注交互后端專注業(yè)務(wù)處理和數(shù)據(jù)安全團(tuán)隊(duì)協(xié)作效率更高也符合當(dāng)前企業(yè)主流開(kāi)發(fā)模式。登錄態(tài)的 token 過(guò)期時(shí)間是怎么設(shè)的過(guò)期了怎么辦答畢業(yè)設(shè)計(jì)里設(shè)置短期過(guò)期容易讓用戶頻繁被迫重新登錄可以設(shè)置 24 小時(shí)。過(guò)期后前端通過(guò) axios 響應(yīng)攔截器統(tǒng)一跳轉(zhuǎn)登錄頁(yè)。如果需要更完善的方案可以引入 Refresh Token 雙令牌機(jī)制重登錄體驗(yàn)幾乎不受影響。數(shù)據(jù)庫(kù)表為什么不加物理外鍵答邏輯外鍵在刪除和更新時(shí)更靈活也更容易在大數(shù)據(jù)量下保持性能。對(duì)畢設(shè)系統(tǒng)來(lái)說(shuō)邏輯關(guān)聯(lián)完全足夠表達(dá)數(shù)據(jù)關(guān)系代碼層通過(guò)事務(wù)來(lái)保證一致性。系統(tǒng)可以支撐多少并發(fā)答單體應(yīng)用加 MySQL 支撐幾百并發(fā)沒(méi)有問(wèn)題畢設(shè)場(chǎng)景在學(xué)校局域網(wǎng)內(nèi)演示足夠。如果真要談擴(kuò)展可以在數(shù)據(jù)庫(kù)連接池調(diào)優(yōu)和中間件緩存層面展開(kāi)但承認(rèn)不引入復(fù)雜架構(gòu)是合理的設(shè)計(jì)選擇。你用什么校驗(yàn)用戶提交的數(shù)據(jù)答前端做輸入格式的基本校驗(yàn)是否為空、長(zhǎng)度、正則規(guī)則后端用 Spring Validation 注解或手動(dòng)校驗(yàn)做二次校驗(yàn)。后端校驗(yàn)永遠(yuǎn)是不可動(dòng)搖的防線前端校驗(yàn)只是為了更友好的用戶體驗(yàn)。統(tǒng)計(jì)功能怎么保證準(zhǔn)確答通過(guò) SQL 聚合函數(shù)實(shí)現(xiàn)關(guān)鍵統(tǒng)計(jì)數(shù)據(jù)都基于固定的條件比如已就業(yè)狀態(tài)必須嚴(yán)格等于某個(gè)狀態(tài)碼避免語(yǔ)義不清。同時(shí)在代碼里做了多條件防重復(fù)統(tǒng)計(jì)。6.3 如何把這個(gè)項(xiàng)目變成你自己的源碼可能來(lái)自下載或參考但答辯時(shí)老師其實(shí)很在意你是否真正理解項(xiàng)目。這里分享幾個(gè)讓別人一眼看不出是純搬運(yùn)的做法把項(xiàng)目里的包名、類(lèi)名改成你自己命名的規(guī)范比如把com.example改成com.yourname.jobs。改動(dòng)包名后不僅 IDE 項(xiàng)目結(jié)構(gòu)更符合你的書(shū)寫(xiě)習(xí)慣也讓代碼確實(shí)過(guò)了一遍你的手。換一套系統(tǒng)名和 UI 配色。前端有個(gè)配置文件統(tǒng)管主題色把原生藍(lán)色改成深綠、深紅或者其他任意你喜歡的色系再改掉導(dǎo)航欄的系統(tǒng)標(biāo)題比如XX大學(xué)就業(yè)信息服務(wù)平臺(tái)。這個(gè)成本很低但效果極佳。增加一個(gè)原項(xiàng)目沒(méi)有的小功能。比如學(xué)生端增加導(dǎo)出個(gè)人簡(jiǎn)歷 PDF企業(yè)端增加查看本校各專業(yè)畢業(yè)生人數(shù)圖表這類(lèi)小型功能。實(shí)現(xiàn)方案在網(wǎng)上都有現(xiàn)成參考工作量?jī)扇熳銐虻疝q說(shuō)起來(lái)是你獨(dú)立設(shè)計(jì)實(shí)現(xiàn)的亮點(diǎn)。把論文的核心論點(diǎn)與系統(tǒng)功能對(duì)應(yīng)起來(lái)。比如論文里的系統(tǒng)安全性設(shè)計(jì)這一章就講 JWT 鑒權(quán)鏈路和角色權(quán)限控制數(shù)據(jù)可視化設(shè)計(jì)這一章就講管理員統(tǒng)計(jì)圖表。讓論文和系統(tǒng)互相印證評(píng)審老師一眼看到你的工作量和思考深度。最后再提醒一件容易被忽略的事把系統(tǒng)的測(cè)試數(shù)據(jù)跑得活一點(diǎn)每個(gè)列表頁(yè)面都有數(shù)據(jù)顯示、每個(gè)按鈕都能點(diǎn)出效果投遞流程能完整走通比答辯時(shí)口若懸河講解設(shè)計(jì)理念重要得多。我見(jiàn)過(guò)很多系統(tǒng)功能本身做得不錯(cuò)但演示時(shí)裸奔的同學(xué)就是栽在演示前沒(méi)有完整跑一遍正常流程、忘了處理邊界情況上。