SpringBootVue這個組合在Java Web畢業(yè)設計里算是爛大街了但爛大街不等于沒含金量。去年我?guī)У囊粋€學生做的高?？蒲行畔⒐芾硐到y(tǒng)最后被學院評了優(yōu)秀畢設還拿去參加了校內(nèi)的軟件設計比賽。說實話這個題目看上去就是個標準的增刪改查但真正動手做起來從數(shù)據(jù)庫表設計到接口文檔規(guī)范從權(quán)限控制到文件上傳下載幾乎把Java Web開發(fā)的核心點全串起來了。今天我就以這個項目為例把我當時帶他做項目的完整思路、踩過的坑、以及答辯時可能會被問到的問題一次性全寫出來。這個系統(tǒng)適合誰兩類人一類是正在發(fā)愁畢設題目的計算機相關專業(yè)本科生另一類是剛?cè)胄邢肽靡粋€完整項目練手的初級Java開發(fā)。前者可以拿它做參考骨架后者可以從中學習企業(yè)級開發(fā)的標準分層思路。不管你是哪類這篇文章我都會盡量講得通俗且具體。1. 項目整體架構(gòu)與技術(shù)選型思路1.1 為什么選SpringBootVue這套組合先說結(jié)論這套組合是當前Java Web領域里性價比最高的方案沒有之一。后端用SpringBoot不解釋它內(nèi)嵌Tomcat、自動配置、起步依賴這些特性能省掉大量XML配置。前端用Vue Element UI組件化開發(fā)表格、表單、彈窗這些后臺管理系統(tǒng)常用組件直接拿來用開發(fā)效率是傳統(tǒng)JSPJQuery方案的十倍不止。更重要的是這套技術(shù)棧完全貼合目前企業(yè)的實際招聘需求。你去翻任何一家公司的Java開發(fā)崗位要求SpringBoot和Vue基本都是標配。做畢業(yè)設計不只是完成一個系統(tǒng)更是給自己積累談資。面試官問你會什么你說“我畢設用了SpringBootVue做了個管理系統(tǒng)”他大概率會繼續(xù)追問細節(jié)而你只要確實親手做過回答起來完全不虛。當然也有學生問過我為什么不用Spring Cloud微服務為什么不用前后端不分離原因很簡單——畢設的核心是完整性和邏輯自洽不是技術(shù)堆砌。高?？蒲行畔⒐芾硐到y(tǒng)這種業(yè)務場景單機部署、前后端分離、單個后端服務完全夠用。非要用Spring Cloud反而容易因為服務拆分、分布式事務這些問題把自己絆倒最后連跑都跑不起來。1.2 系統(tǒng)核心功能模塊拆解這個系統(tǒng)的業(yè)務場景是高校內(nèi)部的科研管理核心用戶有三類普通教師科研人員、院系科研秘書審核人、科研處管理員超級管理員。圍繞這三類角色我把功能拆成六大模塊。第一個是登錄認證模塊。用的是JWTJSON Web Token做無狀態(tài)認證用戶登錄后后端簽發(fā)Token前端存在本地存儲里每次請求帶上Token后端通過攔截器校驗。這里有個很重要的設計決策——為什么不用傳統(tǒng)的Session因為前后端分離后后端接口在獨立端口前端頁面在另一個端口的Nginx上跨域會產(chǎn)生Session共享問題。JWT天然無狀態(tài)不依賴Session跨域也不怕。第二個是科研項目管理模塊。這是系統(tǒng)的核心業(yè)務覆蓋項目申報、立項、中期檢查、結(jié)題驗收四個階段。每個階段對應一張狀態(tài)流轉(zhuǎn)記錄項目實體只存當前狀態(tài)歷史流轉(zhuǎn)記錄單獨存一張表。這樣設計的好處是你想查一個項目從申報到現(xiàn)在經(jīng)歷過哪些審核節(jié)點直接查流轉(zhuǎn)記錄表就行不用翻日志。第三個是科研成果管理模塊。教師錄入自己發(fā)表的論文、申請的專利、獲得的獎項管理員可以按學院、按年度統(tǒng)計成果數(shù)量。這個模塊看上去簡單但表格設計上有講究——成果類型不同對應的元數(shù)據(jù)字段也不同。論文有期刊名、影響因子專利有專利號、授權(quán)日期。我當時的做法是建一張成果主表存公共字段再建論文、專利、軟著三張擴展表用外鍵關聯(lián)。第四個是科研經(jīng)費管理模塊。經(jīng)費分預算和實際支出兩部分教師錄入支出明細系統(tǒng)按項目維度匯總超支時給出警示。這個模塊對數(shù)據(jù)精度要求高金額字段在MySQL里用的是DECIMAL(10,2)Java側(cè)用BigDecimal映射絕不用Double或Float——這里涉及浮點數(shù)精度問題后面我會細說。第五個是通知公告模塊。管理員發(fā)布通知教師登錄后能看到未讀消息數(shù)量。技術(shù)實現(xiàn)上就是一張公告表加一張已讀記錄表用聯(lián)合唯一索引約束同一用戶對同一公告只能有一條已讀記錄。第六個是數(shù)據(jù)統(tǒng)計模塊。用ECharts做柱狀圖、餅圖展示各學院項目數(shù)量、經(jīng)費占比、成果分布。后端提供聚合查詢接口前端拿到數(shù)據(jù)后做圖表渲染。2. 數(shù)據(jù)庫設計與SQL腳本落地要點2.1 數(shù)據(jù)庫表結(jié)構(gòu)設計與ER關系數(shù)據(jù)庫設計是整個系統(tǒng)的地基地基不穩(wěn)后面寫代碼全是坑。我當時畫了ER圖一共設計了十張核心表這里我按業(yè)務域分組說明。用戶域三張表用戶表sys_user、角色表sys_role、用戶角色關聯(lián)表sys_user_role。用戶和角色是多對多關系所以中間需要一張關聯(lián)表。角色表里預置了四種角色ROLE_ADMIN科研處管理員、ROLE_SECRETARY院系科研秘書、ROLE_TEACHER教師、ROLE_STUDENT學生部分高校允許學生參與科研項目。項目域三張表科研項目表research_project、項目成員表project_member、審核記錄表project_audit_record。項目表存項目的基本信息、起止時間、預算金額、當前狀態(tài)成員表存項目參與人審核記錄表存每次狀態(tài)變更的操作人、操作時間、審核意見。為什么要單獨拆審核記錄表因為科研項目要保留完整的審批鏈路這是業(yè)務硬性要求不能只存一個最終狀態(tài)。成果域兩張表成果主表research_achievement、成果擴展表achievement_detail。主表存成果名稱、類型、負責人、所屬項目、獲得時間擴展表用JSON字段存儲不同類型成果的個性化屬性。MySQL從5.7開始支持JSON類型對這種“一張主表掛多類型擴展信息”的場景非常合適比硬拆多張外表更靈活。經(jīng)費域一張表project_fund存項目預算、已用金額、每筆支出的明細記錄。通知域一張表notice存公告內(nèi)容、發(fā)布時間、發(fā)布人配合已讀記錄表使用。這里有一個我反復跟學生強調(diào)的原則所有表必須有主鍵、創(chuàng)建時間、更新時間這三個字段。主鍵默認用雪花算法生成的Long型ID不用自增ID。原因是自增ID在主從復制、分庫分表場景下會有沖突風險而且容易被爬蟲遍歷抓取數(shù)據(jù)。雖然畢設項目用自增ID也能跑但養(yǎng)成用雪花ID的習慣對后續(xù)職場發(fā)展有幫助。2.2 核心表SQL腳本設計與字段規(guī)范我挑兩張最有代表性的表來寫具體SQL你們拿回去可以直接抄。第一張是用戶表。核心邏輯是用戶名唯一、密碼必須加密存儲、狀態(tài)字段做軟刪除。密碼加密用的是BCrypt算法Spring Security內(nèi)置支持同一個密碼每次加密后的密文都不同但校驗結(jié)果一致。這里你們可以對比一下MD5MD5加鹽雖然也能防彩虹表但BCrypt的慢哈希特性讓暴力破解的成本更高是當前業(yè)界主流方案。CREATE TABLE sys_user ( id BIGINT NOT NULL COMMENT 主鍵ID雪花算法生成, username VARCHAR(50) NOT NULL COMMENT 登錄用戶名唯一, password VARCHAR(100) NOT NULL COMMENT BCrypt加密后的密碼, real_name VARCHAR(50) DEFAULT NULL COMMENT 真實姓名, email VARCHAR(100) DEFAULT NULL COMMENT 郵箱, phone VARCHAR(20) DEFAULT NULL COMMENT 手機號, department_id BIGINT DEFAULT NULL COMMENT 所屬院系ID, status TINYINT NOT NULL DEFAULT 1 COMMENT 狀態(tài)1啟用0禁用軟刪除, create_time DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 創(chuàng)建時間, update_time DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新時間, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用戶表;注意幾個細節(jié)字符集必須用utf8mb4而不是utf8因為utf8在MySQL里最多支持3字節(jié)存不了emoji和一些生僻字更新時間用ON UPDATE CURRENT_TIMESTAMP可以自動刷新不用在代碼里手動賦值軟刪除字段用status而不是is_delete因為業(yè)務里狀態(tài)可能不止兩種后續(xù)擴展更靈活。第二張是科研項目表。這張表最核心的是狀態(tài)字段和預算字段。狀態(tài)我用varchar存值域枚舉有PENDING待審核、REJECTED已駁回、APPROVED已立項、IN_PROGRESS進行中、COMPLETED已結(jié)題。有人喜歡用數(shù)字0、1、2但我覺得可讀性太差查數(shù)據(jù)時還得對著文檔看數(shù)字是啥意思直接存英文狀態(tài)碼更直觀代碼里用枚舉類做映射就行。CREATE TABLE research_project ( id BIGINT NOT NULL COMMENT 主鍵ID, project_code VARCHAR(50) NOT NULL COMMENT 項目編號, project_name VARCHAR(200) NOT NULL COMMENT 項目名稱, project_type VARCHAR(20) DEFAULT NULL COMMENT 項目類型國家級/省部級/校級, leader_id BIGINT NOT NULL COMMENT 項目負責人用戶ID, department_id BIGINT DEFAULT NULL COMMENT 所在院系ID, budget_amount DECIMAL(10,2) DEFAULT 0.00 COMMENT 預算總金額, used_amount DECIMAL(10,2) DEFAULT 0.00 COMMENT 已使用金額, status VARCHAR(20) NOT NULL DEFAULT PENDING COMMENT 項目狀態(tài), start_date DATE DEFAULT NULL COMMENT 開始日期, end_date DATE DEFAULT NULL COMMENT 結(jié)束日期, description TEXT COMMENT 項目簡介, create_time DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP, update_time DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_project_code (project_code), KEY idx_leader_id (leader_id), KEY idx_status (status) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT科研項目表;項目編號是唯一索引因為業(yè)務上這個編號是學?？蒲刑幗y(tǒng)一制定的不會重復。leader_id和status都建了普通索引因為列表頁最常用的查詢條件就是按負責人或按狀態(tài)篩選。這里強調(diào)一下索引別亂建只給查詢頻繁的字段建因為索引會降低寫入性能、多占存儲空間。畢設項目數(shù)據(jù)量小建索引的好處大于壞處但你要能說出這個取舍邏輯答辯時是加分項。3. 后端核心實現(xiàn)與接口文檔撰寫3.1 后端分層架構(gòu)與核心代碼組織后端代碼包結(jié)構(gòu)我是按這個組織的controller、service、mapper、entity、dto、vo、config、common。很多學生喜歡把實體類、請求參數(shù)、響應結(jié)果全混在一個包里項目一大了就亂。我要求他必須區(qū)分清楚entity是數(shù)據(jù)庫表映射的對象字段和表完全一致dto是接收前端請求參數(shù)的傳輸對象vo是返回給前端的數(shù)據(jù)對象可以按需裁剪字段。舉個例子。分頁查詢項目列表時前端傳過來的是pageNum、pageSize、projectName、status這幾個參數(shù)所以controller接收的RequestDTO里就定義這四個字段。返回的數(shù)據(jù)里除了項目基本信息還需要返回負責人姓名、所在院系名稱——這些字段數(shù)據(jù)庫里沒有是關聯(lián)查出來或者單獨處理的所以vo里就額外加這么幾個字段。entity里則干干凈凈不摻任何業(yè)務邏輯相關的字段。這個分層的核心價值在于解耦。entity不暴露給前端前端就不會知道表結(jié)構(gòu)vo不直接關聯(lián)數(shù)據(jù)庫改表結(jié)構(gòu)時不至于把接口響應也帶崩。我在項目里用MyBatis-Plus做ORM它的LambdaQueryWrapper寫起來非常香復雜查詢條件用鏈式調(diào)用就能拼出來不用手寫一大串XML。但說實話MyBatis-Plus的代碼生成器我建議學生自己手動建一次表結(jié)構(gòu)再生成別直接用自動生成的就完事要能看懂生成的代碼在干什么。再說說統(tǒng)一返回結(jié)果和全局異常處理。這兩個是任何正經(jīng)后端項目必須具備的但很多畢設項目居然沒做。統(tǒng)一返回結(jié)果就是這個結(jié)構(gòu){code: 200, message: success, data: {...}}所有接口都返回這個格式前端拿到后先判斷code再取data。全局異常處理用RestControllerAdvice注解把業(yè)務異常、參數(shù)校驗異常、系統(tǒng)異常分別處理保證接口不會把堆棧信息直接甩給前端。我見過一個項目沒做全局異常處理數(shù)據(jù)庫查詢報錯時接口直接返回500加一串英文異常信息前端頁面白屏這種問題在答辯時會被老師一眼看穿。3.2 接口文檔要怎么寫才能讓人看得懂接口文檔是很多人容易忽略的部分項目標題里專門提到了接口文檔說明這是這個項目的亮點。我當時讓學生用Apifox管理接口文檔原因很簡單——免費、支持導入Postman數(shù)據(jù)、可以直接生成在線文檔鏈接老師點開就能看。一份合格的接口文檔每個接口必須包含以下信息接口地址、請求方式、請求參數(shù)說明參數(shù)名、類型、是否必填、說明、響應示例、錯誤碼說明。我隨便舉一個登錄接口的示例POST /api/auth/login 請求參數(shù)JSON: { username: admin, password: 123456 } 參數(shù)說明: username - 用戶名必填字符串 password - 密碼必填字符串 響應示例成功: { code: 200, message: success, data: { token: eyJhbGciOiJIUzI1NiJ9.xxx.xxx, role: ROLE_ADMIN, realName: 張三 } } 響應示例失敗: { code: 401, message: 用戶名或密碼錯誤, data: null }寫文檔有個常見誤區(qū)只貼參數(shù)名不寫說明。比如參數(shù)叫status你不說明它有哪幾個枚舉值前端同學拿到文檔根本不知道怎么傳。我要求學生的文檔里每個枚舉字段必須列出全部取值范圍及含義。另外響應示例一定要寫而且成功和失敗的都要寫。前端調(diào)試后端接口時最怕的就是不知道后端返回長啥樣只能先去控制臺打日志。我見過傻白甜的學生代碼跑通了就完了接口文檔一個字不寫到答辯時老師問“你這個系統(tǒng)有多少個接口”他答不上來。后來我讓他打開Apifox逐個接口統(tǒng)計一共寫了46個接口他心里才有底。還有一個實操技巧給接口按模塊打標簽。比如“用戶管理”、“項目管理”、“成果管理”每個標簽下掛對應的接口列表。這樣整個文檔結(jié)構(gòu)清晰答辯演示時老師要看到底有哪些功能你按標簽一個個點開觀感非常專業(yè)。4. 前端Vue實現(xiàn)與前后端聯(lián)調(diào)實戰(zhàn)4.1 Vue項目搭建與核心頁面實現(xiàn)前端我用Vue 2 Element UI Vuex Vue Router這套組合。為什么不直接用Vue 3因為Element UI對Vue 2支持最成熟穩(wěn)定Element Plus雖然在推Vue 3版本但當時版本迭代太快部分組件還有兼容性坑。畢設項目穩(wěn)字當頭。安裝環(huán)境的部分我提一嘴Node.js版本建議用16.x LTSnpm源如果是國內(nèi)網(wǎng)絡建議配一下淘寶鏡像否則npm install可能等到天荒地老。創(chuàng)建項目用vue create命令選Manually select features勾上Router和Vuex一路回車就完事。整個前端頁面我分了兩塊登錄頁、主布局。登錄頁沒什么好說的一個表單加一個登錄按鈕。主布局是重點用Element UI的Container布局容器左側(cè)是菜單欄右側(cè)是內(nèi)容區(qū)。菜單欄根據(jù)當前用戶的角色動態(tài)生成——管理員看到的是所有菜單教師只能看到項目管理、成果管理、經(jīng)費管理這些本人相關的菜單。這個動態(tài)菜單的實現(xiàn)方式是登錄成功后后端返回當前用戶的權(quán)限碼集合前端用v-if逐項判斷菜單項是否顯示。在項目申報頁面的實現(xiàn)上用了一個表單加一個動態(tài)表格。動態(tài)表格用于填項目成員可以點“添加成員”按鈕往表格里插入一行填寫成員姓名和分工。這個交互邏輯用Vue的響應式數(shù)組很容易實現(xiàn)每次添加就是往數(shù)組里push一個對象刪除就是splice。這里有一個初學者經(jīng)常犯的錯誤直接通過數(shù)組下標修改對象屬性Vue 2的響應式系統(tǒng)監(jiān)聽不到界面不刷新。解決辦法是用this.$set(this.memberList, index, newItem)強制觸發(fā)更新。雖然Vue 3用Proxy解決了這個問題但這個坑在Vue 2時代的項目里非常經(jīng)典寫出來希望能幫到還在用Vue 2的人。4.2 前后端聯(lián)調(diào)踩坑記錄前后端分離的最大痛點就是聯(lián)調(diào)。前端跑在8080端口后端跑在8081端口前端的axios請求要跨域打到后端不配置就會報CORS錯誤。常見的解決方案是用Nginx做反向代理把/api前綴的請求轉(zhuǎn)發(fā)到后端8081端口。如果本地開發(fā)不想用Nginx也可以在后端加一個CORS配置類允許跨域請求。Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOrigin(*); config.addAllowedMethod(*); config.addAllowedHeader(*); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }這個配置我提醒一下生產(chǎn)環(huán)境千萬不能這么寫addAllowedOrigin(*)意味著任何網(wǎng)站都可以跨域調(diào)用你的接口典型的安全漏洞。但在畢設階段本地聯(lián)調(diào)用這個配置最省事不用開Nginx。如果答辯時老師問你生產(chǎn)環(huán)境怎么處理你要回答“用Nginx做反向代理讓前后端同域部署”這樣就完美了。還有一個經(jīng)常踩的坑是axios請求帶Token。前端在登錄成功后把Token存到localStorage然后在axios請求攔截器里從localStorage取Token塞到請求頭里。后端攔截器統(tǒng)一從請求頭里的Authorization字段取出Token并校驗。// axios請求攔截器 service.interceptors.request.use( config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] token; } return config; }, error { return Promise.reject(error); } );Token過期也是聯(lián)調(diào)時經(jīng)常碰見的問題。JWT默認有效期如果設置太短比如2小時你早上配好的環(huán)境下午就過期了接口全部401排查半天還以為是什么大問題。我讓學生把Token有效期設置成24小時答辯當天完全夠用。如果想讓體驗更好一點可以在后端增加一個刷新Token的接口但這個是加分項不求多。5. 常見問題排查與畢業(yè)設計答辯準備5.1 部署運行中的高頻問題速查我把學生做這個項目過程中遇到的高頻問題整理成了一個表格你們可以直接對照排查。問題現(xiàn)象可能原因解決方案前端頁面訪問不了Vue項目沒啟動或Nginx配置錯誤檢查npm run dev是否啟動訪問localhost:8080看是否有頁面后端接口返回404controller的RequestMapping路徑寫錯或前端請求路徑不對打開Apifox直接測后端接口排除前端問題對比接口文檔路徑數(shù)據(jù)庫連接失敗MySQL未啟動、密碼錯誤、驅(qū)動版本不匹配確認MySQL服務已啟動檢查application.yml的url、username、password檢查MySQL驅(qū)動依賴版本導入SQL報語法錯誤本機MySQL版本過低用了高版本語法確認MySQL版本≥5.7因為JSON類型和utf8mb4字符集需要高版本支持文件上傳后訪問不到上傳路徑配置不安全在application.yml里配置自定義上傳路徑并用WebMvcConfigurer映射靜態(tài)資源訪問登錄成功后刷新頁面白屏前端路由守衛(wèi)未判斷Token或Vuex狀態(tài)未持久化在路由守衛(wèi)beforeEach中檢查localStorage里的TokenVuex狀態(tài)用vuex-persistedstate插件持久化表格數(shù)據(jù)量大了卡頓前端分頁沒做或后端查詢沒優(yōu)化前端必須用分頁組件后端用MyBatis-Plus的Page對象做物理分頁這里面最值得展開說的是上傳文件路徑的問題。科研管理系統(tǒng)里教師上傳項目申報書、結(jié)題報告是剛需。如果你把文件直接保存到項目的src/main/resources/static目錄下打包成jar部署時因為resources目錄會被打進jar包里上傳的文件下次重啟就沒了。正確的做法是在application.yml里配置絕對路徑比如file.upload-path: D:/upload/然后用配置類把這個路徑映射成靜態(tài)資源URL。Configuration public class WebMvcConfig implements WebMvcConfigurer { Value(${file.upload-path}) private String uploadPath; Override public void addResourceHandlers(ResourceHandlerRegistry registry) { // 訪問的URL前綴是 /files/映射到本地的 D:/upload/ registry.addResourceHandler(/files/**) .addResourceLocations(file: uploadPath); } }這個配置的意義在于文件上傳后存在固定路徑不會因為應用重新部署而丟失前端通過http://localhost:8081/files/xxx.pdf就能直接預覽。5.2 畢業(yè)設計答辯常見提問與應對思路答辯環(huán)節(jié)老師最愛問的問題我總結(jié)下來就這幾類提前準備就行。第一個必問題為什么選用SpringBoot和Vue前面講過原因重點強調(diào)快速開發(fā)、生態(tài)成熟、企業(yè)主流需求這三個點再加一句“本課題是管理信息系統(tǒng)數(shù)據(jù)量大但業(yè)務邏輯不復雜單體架構(gòu)夠用”就完美了。第二個經(jīng)典題JWT的Token過期了用戶正在操作怎么辦這個問題考察的是對無狀態(tài)認證機制的理解?？梢赃@樣回答前端在axios響應攔截器里判斷401狀態(tài)碼彈窗提示用戶重新登錄然后跳轉(zhuǎn)到登錄頁。更高級一點的方案是使用雙Token機制——短期Token用于正常請求有效期2小時長期RefreshToken用于無感刷新用短期Token快過期時前端拿RefreshToken去換取新的短期Token。如果答辯時間充裕你可以在項目里實現(xiàn)這個雙Token方案絕對是個亮點。第三個高頻題你的系統(tǒng)是怎么保證密碼安全的答案是BCrypt加密存儲配合Spring Security的認證機制。要能說出BCrypt和MD5的區(qū)別——MD5是快速摘要容易被暴力破解BCrypt是慢哈希自動加鹽加密強度可調(diào)。這里的專業(yè)術(shù)語“慢哈?！闭f出來老師就知道你是真的懂。第四個題有點深數(shù)據(jù)庫表為什么用邏輯刪除不用物理刪除答案是業(yè)務數(shù)據(jù)具有法律效力和審計需求比如經(jīng)費記錄不能刪只能標記作廢。還有邏輯刪除配合唯一索引時要注意——如果一張表里允許重名但邏輯刪除了你再插入同名的記錄時唯一索引會報沖突。所以設計時會用username is_delete做聯(lián)合唯一索引或者刪除時給username加一個時間戳后綴。第五個題是代碼級的問題SpringBoot的啟動流程是什么核心我就記住了兩點SpringBootApplication是Configuration EnableAutoConfiguration ComponentScan的合體啟動時Spring Boot會加載自動配置類根據(jù)classpath下的依賴和配置文件里的條件注解決定哪些配置生效。能說清楚這兩點這個問題的分數(shù)就到手了。5.3 項目打包部署與演示環(huán)境搭建最后說說打包部署這塊。很多學生的畢設演示是在IDEA里點運行的這其實不夠完整。我建議你們一定要做一次完整的打包部署用生產(chǎn)模式跑一遍。后端的步驟很固定在IDEA的Maven面板里執(zhí)行mvn clean package -DskipTests然后在target目錄下會生成一個jar包。你也可以用命令行mvn clean install。打包完成后在服務器或者本機用java -jar xxx.jar啟動默認端口8081訪問接口文檔看是否正常。這里有個規(guī)范打包時用Profile區(qū)分環(huán)境。application.yml里配置公共配置application-dev.yml是開發(fā)環(huán)境application-prod.yml是生產(chǎn)環(huán)境。生產(chǎn)環(huán)境的數(shù)據(jù)庫密碼、服務器IP這些都是寫死的用java -jar xxx.jar --spring.profiles.activeprod指定啟動時讀取哪個配置文件。這個知識點也是答辯時的高頻考點老師問“你在本地跑和生產(chǎn)環(huán)境跑有什么區(qū)別”答案就是這套Profile機制。前端的部署更簡單先執(zhí)行npm run build等幾分鐘生成dist目錄然后把dist目錄里的所有文件復制到Nginx的html目錄下最后配置Nginx把/api開頭的請求轉(zhuǎn)發(fā)到后端服務。server { listen 80; server_name localhost; # 前端頁面 location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } # 后端接口反向代理 location /api/ { proxy_pass http://localhost:8081/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }有幾句話我特別想強調(diào)。這個try_files $uri $uri/ /index.html;是Vue路由history模式的關鍵配置沒有它的話你刷新頁面就404了。原理是Vue Router的history模式通過HTML5 History API修改瀏覽器地址欄URL但服務端并不知道這個URL你得把所有不存在的請求都重定向到index.html讓前端路由接管。我個人的建議是如果條件允許把項目部署到云服務器上用服務器IP訪問演示整個演示過程會顯得非常專業(yè)。即使是部署在本機也盡量用打包后的Nginx服務演示別直接IDEA瀏覽器兩個窗口就完了。因為這個細節(jié)直接反映你的工程化能力而工程化能力恰恰是評定一個畢業(yè)生是不是真的具備企業(yè)開發(fā)素質(zhì)的重要分界線。這個系統(tǒng)做完我的感受是它像一塊敲門磚。它會逼著你把前后端協(xié)作、數(shù)據(jù)庫設計、安全認證、接口規(guī)范這些核心知識點都過一遍。做成之后對這個方向的開發(fā)工作心里就有底了。