先說點(diǎn)實(shí)在的這個(gè)標(biāo)題里頭的東西我基本都親手折騰過一遍。拿java vue SpringBoot組合做美食烹飪互動(dòng)平臺(tái)算是一個(gè)非常標(biāo)準(zhǔn)的全棧實(shí)戰(zhàn)項(xiàng)目既能覆蓋SSM到SpringBoot的過渡知識(shí)又能把前端工程化、數(shù)據(jù)庫設(shè)計(jì)、接口聯(lián)調(diào)、部署上線這些職場(chǎng)里天天要用的事全部串起來。市面上類似的課程設(shè)計(jì)和畢業(yè)設(shè)計(jì)數(shù)量不少但很多都停留在“能跑起來”的水平代碼結(jié)構(gòu)亂、數(shù)據(jù)庫設(shè)計(jì)粗糙、答辯一問就卡殼。這篇博文就按一個(gè)完整的、可以拿去交作業(yè)也可以拿來面試講的項(xiàng)目來拆從表結(jié)構(gòu)到接口、從路由到部署、從答辯問到避坑一步不落。1. 美食互動(dòng)平臺(tái)的核心需求與整體設(shè)計(jì)1.1 這個(gè)項(xiàng)目到底在解決什么問題美食烹飪互動(dòng)平臺(tái)聽名字就知道不是普通的菜譜展示站。它要解決的核心問題是一個(gè)想學(xué)做菜的人如何快速找到適合自己的菜譜并且能跟發(fā)布菜譜的人以及其他學(xué)習(xí)者產(chǎn)生互動(dòng)。所以業(yè)務(wù)上至少要拆出三塊內(nèi)容側(cè)菜譜的發(fā)布、瀏覽、檢索、分類、詳情展示。這是平臺(tái)的底座沒有內(nèi)容一切互動(dòng)都是空談。用戶側(cè)注冊(cè)、登錄、個(gè)人信息維護(hù)、我發(fā)布的菜譜、我的收藏。這部分解決“誰在玩”的問題?；?dòng)側(cè)收藏、點(diǎn)贊、評(píng)論、瀏覽計(jì)數(shù)。這是“互動(dòng)”二字的直接體現(xiàn)也是答辯時(shí)最能講出亮點(diǎn)的模塊。這三塊對(duì)應(yīng)的就是后端的用戶模塊、菜譜模塊、互動(dòng)模塊前端對(duì)應(yīng)的是首頁、菜譜列表頁、詳情頁、發(fā)布頁、個(gè)人中心。整個(gè)項(xiàng)目把前后端分離的常規(guī)打法練了一遍又沒有刻意堆砌復(fù)雜業(yè)務(wù)難度剛好卡在一個(gè)大四學(xué)生跳一跳能夠到的位置。1.2 技術(shù)選型為什么是java vue SpringBoot這套組合在近幾年的課程設(shè)計(jì)和畢業(yè)設(shè)計(jì)里幾乎成了標(biāo)配不是沒有原因的。后端用SpringBoot最大好處是約定優(yōu)于配置。以前用Spring MVC那一套光XML配置文件就能寫好幾頁現(xiàn)在一個(gè)啟動(dòng)類加幾個(gè)注解就能把Web環(huán)境拉起來。項(xiàng)目里再用Spring Boot MyBatis-Plus操作數(shù)據(jù)庫CRUD可以省掉大量樣板代碼甚至分頁查詢都是現(xiàn)成的。對(duì)于時(shí)間有限的畢設(shè)黨來說這套組合能把精力從配置里解放出來放到業(yè)務(wù)實(shí)現(xiàn)上。前端用Vue核心優(yōu)勢(shì)是組件化開發(fā)和生態(tài)成熟。頁面里每一個(gè)功能塊都可以拆成組件比如菜譜卡片、評(píng)論區(qū)、分頁條寫一次到處復(fù)用。配上Vue Router做路由跳轉(zhuǎn)Axios做HTTP請(qǐng)求Element UI提供現(xiàn)成的UI組件一套后臺(tái)管理風(fēng)格的前端界面幾天就能搭出來。數(shù)據(jù)庫選用MySQL配合Navicat這類可視化工具建表、改結(jié)構(gòu)、導(dǎo)數(shù)據(jù)都直觀。項(xiàng)目交付時(shí)數(shù)據(jù)庫腳本是必備的評(píng)審老師打開就能導(dǎo)入印象分會(huì)好很多。1.3 功能拆分與頁面映射把需求翻譯成功能清單大概是下面這樣模塊后端接口前端頁面核心交互用戶注冊(cè)、登錄、個(gè)人信息、修改資料登錄頁、注冊(cè)頁、個(gè)人中心JWT鑒權(quán)、頭像上傳菜譜分頁查詢、條件搜索、分類篩選、詳情、發(fā)布、編輯、刪除首頁、菜譜列表、菜譜詳情、發(fā)布頁多條件組合查詢、圖片上傳互動(dòng)收藏、取消收藏、點(diǎn)贊、評(píng)論、瀏覽計(jì)數(shù)菜譜詳情頁內(nèi)嵌狀態(tài)實(shí)時(shí)更新統(tǒng)計(jì)排行、最新、熱門首頁排行榜、列表頁排序?yàn)g覽量計(jì)算與排序頁面不需要炫技但核心鏈路必須通用戶進(jìn)入首頁看菜譜列表點(diǎn)進(jìn)詳情能看圖文步驟覺得不錯(cuò)就收藏、點(diǎn)贊、評(píng)論想分享自己的做法就注冊(cè)登錄后發(fā)布菜譜在個(gè)人中心管理自己發(fā)過和收藏過的內(nèi)容。這一套走下來項(xiàng)目講解時(shí)能講出一條非常清晰的故事線。2. 數(shù)據(jù)庫設(shè)計(jì)菜譜與互動(dòng)的表結(jié)構(gòu)詳解2.1 設(shè)計(jì)思路先畫業(yè)務(wù)ER圖再落表數(shù)據(jù)庫設(shè)計(jì)是答辯環(huán)節(jié)最容易暴露基本功的地方。很多同學(xué)上來就建表建到一半發(fā)現(xiàn)字段不夠或者關(guān)系沖突再回頭改結(jié)構(gòu)效率奇低。我的做法是先畫ER圖再落表。這個(gè)項(xiàng)目里的實(shí)體其實(shí)很清晰用戶、菜譜分類、菜譜、評(píng)論、收藏記錄。點(diǎn)贊記錄可以考慮單獨(dú)建表也可以跟收藏合并到一張互動(dòng)表里用type區(qū)分但為了講解方便和代碼清晰我建議拆開。關(guān)系是用戶和菜譜一對(duì)多一個(gè)用戶能發(fā)布多個(gè)菜譜。分類和菜譜一對(duì)多一個(gè)分類下掛多個(gè)菜譜。用戶和評(píng)論一對(duì)多一個(gè)用戶能評(píng)論多個(gè)菜譜。菜譜和評(píng)論一對(duì)多一個(gè)菜譜有多條評(píng)論。用戶和菜譜的互動(dòng)多對(duì)多通過收藏表、點(diǎn)贊表來體現(xiàn)。2.2 核心表結(jié)構(gòu)拆解用戶表不需要復(fù)雜常規(guī)字段就夠了。注意密碼必須加密存儲(chǔ)這一步在答辯時(shí)經(jīng)常被問到答不上“為什么不能明文存”會(huì)非常掉分。字段類型說明idbigint主鍵自增usernamevarchar(50)用戶名唯一passwordvarchar(100)BCrypt加密后的密碼nicknamevarchar(50)昵稱avatarvarchar(255)頭像地址emailvarchar(100)郵箱rolevarchar(20)角色區(qū)分普通用戶和管理員create_timedatetime注冊(cè)時(shí)間statustinyint狀態(tài)1正常0禁用菜譜表是內(nèi)容核心字段要多一些。食材和步驟這類結(jié)構(gòu)化文本建議用JSON或者用分隔符存儲(chǔ)避免再拆兩張子表增加復(fù)雜度。我當(dāng)時(shí)的做法是用JSON字符串存食材列表和步驟列表后端解析后返回給前端渲染實(shí)測(cè)方便很多。字段類型說明idbigint主鍵user_idbigint發(fā)布者關(guān)聯(lián)用戶表category_idbigint分類關(guān)聯(lián)分類表titlevarchar(100)菜譜標(biāo)題covervarchar(255)封面圖descriptiontext簡(jiǎn)介ingredientstext食材清單JSON格式stepstext操作步驟JSON格式difficultytinyint難度1簡(jiǎn)單2中等3困難cook_timeint耗時(shí)單位分鐘viewsint瀏覽數(shù)likesint點(diǎn)贊數(shù)statustinyint狀態(tài)1已發(fā)布0草稿create_timedatetime發(fā)布時(shí)間互動(dòng)相關(guān)的三張表評(píng)論表存內(nèi)容收藏表和點(diǎn)贊表記錄用戶與菜譜的關(guān)聯(lián)關(guān)系。后兩張表結(jié)構(gòu)相似但語義不同分開寫更容易講清楚也方便做判斷“當(dāng)前用戶是否已收藏”這類查詢。2.3 索引設(shè)計(jì)列表查詢快不快要看索引數(shù)據(jù)量小的時(shí)候索引感覺不明顯但答辯時(shí)如果被問到“你怎么保證查詢性能”索引就是必答項(xiàng)。我在菜譜表的category_id、user_id、create_time上建了索引在評(píng)論表的recipe_id上建了索引在收藏表和點(diǎn)贊表的user_id recipe_id上建了聯(lián)合唯一索引。聯(lián)合唯一索引同時(shí)解決了兩個(gè)問題防止用戶對(duì)同一條菜譜重復(fù)收藏/點(diǎn)贊以及快速判斷用戶是否收藏過某菜譜。CREATE UNIQUE INDEX uk_user_recipe ON favorite(user_id, recipe_id);這條語句在講解時(shí)可以單獨(dú)拿出來說因?yàn)樗瑫r(shí)體現(xiàn)了你對(duì)約束和數(shù)據(jù)完整性的理解。3. 后端SpringBoot核心實(shí)現(xiàn)從項(xiàng)目骨架到接口落地3.1 項(xiàng)目結(jié)構(gòu)初始化與依賴引入創(chuàng)建SpringBoot項(xiàng)目我用的是IDEA的Spring InitializrJava版本選擇8或者11都可以SpringBoot版本選擇2.7.x。這里有個(gè)過來人的建議不要去追最新的SpringBoot 3.x因?yàn)?.x強(qiáng)制要求JDK 17而且很多教程還停留在2.x遇到問題排查起來會(huì)非常痛苦。關(guān)鍵依賴如下dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt/artifactId version0.9.1/version /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId /dependencyMyBatis-Plus的引入能省掉大量Mapper XML簡(jiǎn)單的CRUD直接繼承BaseMapper就有現(xiàn)成方法。項(xiàng)目結(jié)構(gòu)上按標(biāo)準(zhǔn)分包c(diǎn)ontroller、service、mapper、entity、commoncommon里面放統(tǒng)一返回結(jié)果、異常處理、工具類。3.2 統(tǒng)一返回結(jié)果與全局異常處理這一步看起來不起眼但直接決定前后端聯(lián)調(diào)時(shí)的效率。如果沒有統(tǒng)一返回格式前端每個(gè)接口都要單獨(dú)判斷數(shù)據(jù)結(jié)構(gòu)調(diào)試成本會(huì)翻倍。我在common包里定義了一個(gè)Result類Data public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(操作成功); result.setData(data); return result; } public static T ResultT error(String message) { ResultT result new Result(); result.setCode(500); result.setMessage(message); return result; } }后端所有Controller都返回Result對(duì)象前端Axios統(tǒng)一攔截后取data字段如果code不是200彈出message提示。這樣寫還有另一個(gè)好處全局異常處理器里捕獲的異常也能包裝成Result返回前端不會(huì)看到一堆看不懂的英文堆棧。3.3 JWT登錄認(rèn)證的設(shè)計(jì)與實(shí)現(xiàn)認(rèn)證這塊我用的是JWT而不是傳統(tǒng)的Session。原因很簡(jiǎn)單前后端分離的項(xiàng)目里后端不維護(hù)Session更利于水平擴(kuò)展而且Vue端拿到token后存到localStorage每次請(qǐng)求在攔截器里帶上Authorization頭一套流程很干凈。登錄流程是這樣的用戶提交用戶名密碼后端驗(yàn)證密碼。驗(yàn)證通過后用JWT工具類生成token把用戶ID和用戶名放入claims。token返回給前端前端保存并在后續(xù)請(qǐng)求中攜帶。后端攔截器校驗(yàn)token解析出用戶信息放入ThreadLocal供Controller使用。密碼加密用BCryptPasswordEncoder這里多說一句凡是數(shù)據(jù)庫里有用戶表且存了密碼的項(xiàng)目答辯幾乎必問密碼安全性。你如果能說出“BCrypt是單向哈希、自帶鹽值、同一密碼每次加密結(jié)果不同”這一問就過了。JWT攔截器的核心代碼大致是這樣Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (!(handler instanceof HandlerMethod)) { return true; } String token request.getHeader(Authorization); if (StringUtils.hasText(token) JwtUtil.validateToken(token)) { Integer userId JwtUtil.getUserId(token); UserContext.setUserId(userId); return true; } response.setStatus(401); return false; } Override public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) { UserContext.clear(); } }注意一個(gè)細(xì)節(jié)afterCompletion里必須清掉ThreadLocal否則Tomcat線程池復(fù)用時(shí)會(huì)出現(xiàn)用戶數(shù)據(jù)串號(hào)。這個(gè)點(diǎn)知道的人不多但講出來會(huì)顯得你對(duì)并發(fā)編程有真實(shí)理解。3.4 菜譜模塊的接口設(shè)計(jì)與分頁查詢菜譜列表接口是項(xiàng)目里最重要的一個(gè)接口因?yàn)樗瑫r(shí)支持分頁、分類篩選、按標(biāo)題搜索、按瀏覽量排序、按最新時(shí)間排序。如果不用MyBatis-Plus這一塊要拼不少SQL但現(xiàn)在用LambdaQueryWrapper就能優(yōu)雅搞定。Override public PageResultRecipeVO pageQuery(RecipeQuery query) { PageRecipe page new Page(query.getPageNum(), query.getPageSize()); LambdaQueryWrapperRecipe wrapper new LambdaQueryWrapper(); wrapper.eq(Recipe::getStatus, 1) .eq(query.getCategoryId() ! null, Recipe::getCategoryId, query.getCategoryId()) .like(StringUtils.hasText(query.getKeyword()), Recipe::getTitle, query.getKeyword()) .orderByDesc(query.getOrderBy().equals(hot) ? Recipe::getViews : Recipe::getCreateTime); PageRecipe result recipeMapper.selectPage(page, wrapper); // 轉(zhuǎn)換為VO補(bǔ)充封面圖路徑、發(fā)布者昵稱等信息 return convertToPageResult(result); }這里的亮點(diǎn)在于條件構(gòu)造器可以很優(yōu)雅地把“可選參數(shù)”拼進(jìn)SQL里。eq里的第三個(gè)參數(shù)是布爾值只有條件滿足時(shí)才拼接該條件這樣就不用寫一堆if判斷了。發(fā)布菜譜的接口要注意事務(wù)問題。雖然目前只插入一條菜譜記錄但考慮到以后可能要同時(shí)刷新分類統(tǒng)計(jì)、生成搜索索引應(yīng)該在Service層加上Transactional注解。這個(gè)小細(xì)節(jié)同樣能在答辯時(shí)加分。4. 前端Vue實(shí)現(xiàn)從安裝環(huán)境到頁面組件落地4.1 Vue環(huán)境配置與項(xiàng)目創(chuàng)建Vue環(huán)境配置是很多新手卡住的第一道關(guān)。Node.js的安裝要注意版本Vue CLI 4.x版本建議Node 12以上Vite創(chuàng)建Vue 3項(xiàng)目建議Node 16以上。如果版本不匹配啟動(dòng)時(shí)會(huì)報(bào)一堆看不懂的錯(cuò)。建議直接使用Vite創(chuàng)建Vue 3項(xiàng)目創(chuàng)建命令npm create vitelatest food-platform -- --template vue然后安裝路由和狀態(tài)管理npm install vue-router4 npm install pinia npm install axios npm install element-plusElement Plus是Element UI的Vue 3版本組件風(fēng)格適合內(nèi)容管理類系統(tǒng)表格、表單、卡片、分頁這些都有現(xiàn)成的能省下大量寫CSS的時(shí)間。完整引入和按需引入的問題項(xiàng)目時(shí)間緊就直接完整引入反正畢設(shè)不追求首屏加載極致的包體積。4.2 前端路由設(shè)計(jì)與頁面結(jié)構(gòu)前端路由先想清楚再動(dòng)手不然后面越寫越亂。我的路由設(shè)計(jì)如下路徑組件說明/Home.vue首頁含輪播圖、分類導(dǎo)航、熱門菜譜/recipesRecipeList.vue菜譜列表支持分類和關(guān)鍵詞查詢/recipe/:idRecipeDetail.vue菜譜詳情核心頁面/publishPublishRecipe.vue發(fā)布菜譜需登錄/loginLogin.vue登錄/registerRegister.vue注冊(cè)/userUserCenter.vue個(gè)人中心/user/collectionsUserCollections.vue我的收藏路由守衛(wèi)很重要。發(fā)布菜譜、個(gè)人中心這類頁面必須登錄后才能訪問Vue Router的全局前置守衛(wèi)可以統(tǒng)一處理router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.meta.requiresAuth !token) { next(/login); } else { next(); } });4.3 Axios請(qǐng)求封裝與攔截器Axios不封裝直接用也能跑但每個(gè)頁面都要重復(fù)處理token拼接和錯(cuò)誤提示代碼會(huì)非常冗余。我習(xí)慣在src/utils/request.js里做統(tǒng)一封裝import axios from axios; import { ElMessage } from element-plus; 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 200) { return res.data; } ElMessage.error(res.message || 請(qǐng)求失敗); return Promise.reject(new Error(res.message)); }, error { if (error.response error.response.status 401) { ElMessage.error(請(qǐng)先登錄); localStorage.removeItem(token); router.push(/login); } else { ElMessage.error(網(wǎng)絡(luò)異常請(qǐng)稍后重試); } return Promise.reject(error); } ); export default request;這里有個(gè)關(guān)鍵配置baseURL設(shè)為/api然后在Vite配置文件里加代理轉(zhuǎn)發(fā)到后端8080端口。這樣開發(fā)時(shí)前端請(qǐng)求不會(huì)跨域部署后Nginx也能通過/api前綴做反向代理一套邏輯兩頭通用。4.4 菜譜詳情頁的組件拆分菜譜詳情頁是功能最集成的頁面包含基本信息、食材清單、步驟圖片、瀏覽量、收藏按鈕、點(diǎn)贊按鈕、評(píng)論區(qū)。組件拆分思路RecipeInfo展示標(biāo)題、封面、作者、難度、耗時(shí)、瀏覽量。IngredientList接收J(rèn)SON字符串解析后渲染食材表格。StepList步驟列表用el-steps組件展示。InteractionBar收藏、點(diǎn)贊按鈕動(dòng)態(tài)切換選中狀態(tài)。CommentSection評(píng)論區(qū)支持加載更多。這種拆法最直觀的好處是每個(gè)組件的props和emits是清晰的代碼可讀性強(qiáng)。更關(guān)鍵的是答辯講項(xiàng)目的時(shí)候你能說出“我把可獨(dú)立的功能抽成了組件”這種話比說“我寫了一個(gè)大頁面”有說服力得多。5. 前后端聯(lián)調(diào)與部署上線全流程5.1 本地聯(lián)調(diào)時(shí)的跨域與代理配置前后端分離開發(fā)時(shí)跨域問題無法回避。解決跨域有兩個(gè)層面后端加CORS配置或者前端代理轉(zhuǎn)發(fā)。我在開發(fā)階段用的是Vite代理。在vite.config.js里配置export default defineConfig({ server: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } });這樣前端頁面里發(fā)的/api/user/login請(qǐng)求會(huì)被Vite開發(fā)服務(wù)器轉(zhuǎn)發(fā)到http://localhost:8080/user/login瀏覽器全程只跟同源地址打交道不會(huì)觸發(fā)CORS。后端的CORS配置也不能少因?yàn)椴渴鸷罂赡芮岸遂o態(tài)文件跟后端接口不在同一臺(tái)服務(wù)器上。寫一個(gè)全局CORS配置類Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }5.2 SpringBoot項(xiàng)目打包與配置文件分離SpringBoot項(xiàng)目的部署最簡(jiǎn)單的方式是把項(xiàng)目打成jar包然后mvn clean package -DskipTests java -jar food-platform.jar但實(shí)盤部署時(shí)建議把配置外置這樣改數(shù)據(jù)庫密碼或者端口時(shí)不用重新打包。方法是在jar包同目錄下放一個(gè)application-prod.yml啟動(dòng)時(shí)指定java -jar food-platform.jar --spring.profiles.activeprod生產(chǎn)環(huán)境的配置里數(shù)據(jù)庫密碼不要寫在明文中可以用Jasypt加密。雖然畢設(shè)階段用不到這么重的手段但你在報(bào)告里提到“配置外置”和“profile區(qū)分環(huán)境”比只說“把項(xiàng)目打成jar包就能跑”要好得多。默認(rèn)端口如果不是8080用server.port配置即可。還有一個(gè)小細(xì)節(jié)SpringBoot 2.7的啟動(dòng)Banner可以自己生成用網(wǎng)絡(luò)上的banner生成工具把字符畫丟進(jìn)去啟動(dòng)時(shí)就能看到效果這種小趣味雖然不影響功能但顯得項(xiàng)目有點(diǎn)人情味發(fā)給老師看的時(shí)候他會(huì)覺得你做事細(xì)致。5.3 Vue項(xiàng)目打包并放進(jìn)SpringBootVue項(xiàng)目打包默認(rèn)輸出到dist目錄npm run build打包完的dist里全是靜態(tài)文件部署方式有兩種常見路線路線一用Nginx托管前端靜態(tài)文件反向代理后端接口。這是生產(chǎn)的標(biāo)準(zhǔn)做法配置大概是server { listen 80; server_name your-domain.com; location / { root /opt/food-platform/dist; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080/; } }注意try_files那句Vue Router使用history模式時(shí)不寫這行的話刷新頁面會(huì)404。路線二直接把dist目錄復(fù)制到SpringBoot的src/main/resources/static目錄下然后一起打包。這種做法簡(jiǎn)單粗暴適合沒有獨(dú)立服務(wù)器部署前端靜態(tài)資源的場(chǎng)景。需要注意的坑是如果后端接口前綴是/api而前端路由里也用了/api可能會(huì)跟靜態(tài)資源路徑?jīng)_突。我建議還是走Nginx方案因?yàn)椴渴餜evue打包文件到SpringBoot里會(huì)讓你的項(xiàng)目結(jié)構(gòu)變得不干凈而且給老師演示的時(shí)候Nginx方案更能展示你對(duì)生產(chǎn)環(huán)境的理解。但如果你只是為了在本地一個(gè)jar包把前后端都跑起來第二種方案確實(shí)省事把dist下內(nèi)容拷到static目錄重新打包訪問8080端口就能看到完整頁面。5.4 數(shù)據(jù)庫初始化腳本的編寫規(guī)范交付項(xiàng)目時(shí)數(shù)據(jù)庫腳本是標(biāo)配。腳本里要注意幾點(diǎn)開頭加CREATE DATABASE IF NOT EXISTS和USE語句。所有表加DROP TABLE IF EXISTS但是要注釋掉防止拿著腳本直接跑的時(shí)候把已有數(shù)據(jù)清了。主鍵用AUTO_INCREMENT不手動(dòng)插入主鍵值。插入必要的初始數(shù)據(jù)比如管理員賬號(hào)、分類數(shù)據(jù)、幾條示例菜譜。腳本寫完一定要自己從空庫跑一遍確認(rèn)沒問題再交這是基本功。我見過有人交的SQL腳本是從Navicat直接導(dǎo)出的里面有完整的建表冗余語句導(dǎo)入時(shí)各種報(bào)錯(cuò)這種細(xì)節(jié)問題在答辯現(xiàn)場(chǎng)特別尷尬。6. 常見問題排查與答辯準(zhǔn)備6.1 新手最容易踩的幾個(gè)坑我把這個(gè)項(xiàng)目從零到一做完遇到過的問題基本集中在下面幾類。端口沖突SpringBoot默認(rèn)8080如果本機(jī)已經(jīng)有別的服務(wù)占用了啟動(dòng)會(huì)直接報(bào)錯(cuò)“Port already in use”。排查方式是用netstat -ano | findstr 8080Windows或者lsof -i:8080Mac/Linux查占用進(jìn)程殺掉或者改server.port都行。MyBatis-Plus配置掃不到Mapperapplication.yml里沒配置mapper-locations或者啟動(dòng)類沒加MapperScan注解運(yùn)行時(shí)會(huì)報(bào)“Invalid bound statement”。解決方法是啟動(dòng)類加MapperScan(com.food.mapper)前端404除了前面提到的history模式刷新問題還有一個(gè)常見場(chǎng)景是Nginx只配置了location /反向代理沒寫對(duì)。請(qǐng)求打過去就返回前端index.html但接口路徑實(shí)際沒轉(zhuǎn)發(fā)到后端看到的結(jié)果就是頁面能開數(shù)據(jù)全是空的。圖片上傳后訪問不到項(xiàng)目本地上傳的圖片存在了磁盤上的某個(gè)目錄但前端使用img標(biāo)簽訪問的時(shí)候路徑不對(duì)。把上傳目錄映射成靜態(tài)資源是個(gè)好辦法Configuration public class WebConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/upload/**) .addResourceLocations(file: uploadPath /); } }6.2 答辯高頻問題與回答思路答辯指導(dǎo)這部分我把評(píng)委老師大概率問的問題和對(duì)應(yīng)的回答思路都梳理一下項(xiàng)目用的什么架構(gòu)——前后端分離架構(gòu)。前端Vue Element Plus負(fù)責(zé)頁面渲染和用戶交互后端SpringBoot提供RESTful API通過JSON數(shù)據(jù)交互部署時(shí)前端交給Nginx托管、后端打成jar包運(yùn)行。為什么選SpringBoot不用SSM——SpringBoot簡(jiǎn)化了SSM的配置內(nèi)置Tomcat能夠獨(dú)立運(yùn)行自動(dòng)裝配機(jī)制減少了大量樣板配置。但底層仍然是Spring MVC MyBatis這套東西。數(shù)據(jù)庫表是怎么設(shè)計(jì)的——從業(yè)務(wù)實(shí)體出發(fā)梳理關(guān)系用戶和菜譜是一對(duì)多菜譜和分類是多對(duì)一用戶和菜譜的互動(dòng)通過收藏/點(diǎn)贊表體現(xiàn)。重點(diǎn)字段加了索引聯(lián)合唯一索引防止重復(fù)互動(dòng)。瀏覽量怎么實(shí)現(xiàn)的——就是在詳情接口里對(duì)views字段做1更新。如果要做得更精細(xì)可以通過Redis incr來計(jì)數(shù)再異步落庫但畢設(shè)講清楚基本實(shí)現(xiàn)即可。圖片上傳到哪去了——上傳到服務(wù)器的磁盤目錄通過靜態(tài)資源映射暴露訪問地址。注意不能直接存數(shù)據(jù)庫的BLOB字段會(huì)拖慢數(shù)據(jù)庫性能。評(píng)論和收藏接口怎么設(shè)計(jì)的——評(píng)論表關(guān)聯(lián)菜譜ID和用戶ID新增時(shí)同時(shí)更新菜譜的評(píng)論數(shù)可選。收藏接口先判斷是否已收藏再進(jìn)行插入或刪除操作返回最新狀態(tài)給前端。6.3 報(bào)告的寫法與重點(diǎn)章節(jié)建議項(xiàng)目的交付物不只是代碼還有一份文檔報(bào)告。報(bào)告的關(guān)鍵章節(jié)緒論寫清楚項(xiàng)目背景、國內(nèi)外現(xiàn)狀、研究意義。這部分不用寫太多三頁左右即可。需求分析核心功能的需求描述配合用例圖。用例圖可以用PlantUML或者ProcessOn畫不需要多精但要規(guī)范。系統(tǒng)設(shè)計(jì)架構(gòu)圖、技術(shù)選型、數(shù)據(jù)庫ER圖、表結(jié)構(gòu)說明。這是評(píng)委看得最細(xì)的部分。系統(tǒng)實(shí)現(xiàn)每個(gè)模塊的截圖核心代碼段說明。代碼不要求全量貼挑核心邏輯講清楚。系統(tǒng)測(cè)試寫功能測(cè)試用例表覆蓋登錄、發(fā)布菜譜、收藏、評(píng)論等核心流程。如果有余力加一點(diǎn)JMeter性能測(cè)試截圖會(huì)非常加分。浩瀚的技術(shù)棧里這種全棧項(xiàng)目最容易被問“這個(gè)是你自己寫的嗎”所以你一定要對(duì)每行代碼都了如指掌。我的習(xí)慣是在答辯之前把所有Service層的方法從頭到尾過一遍能說出每個(gè)方法的作用和調(diào)用鏈。6.4 個(gè)人實(shí)操體會(huì)與最后的小建議項(xiàng)目做完之后我最大的感觸是這套技術(shù)棧組合不是為了炫技而是它恰好覆蓋了一個(gè)真實(shí)Web項(xiàng)目從寫到跑的所有環(huán)節(jié)。你寫數(shù)據(jù)庫的時(shí)候在做表結(jié)構(gòu)和索引設(shè)計(jì)寫Vue的時(shí)候在考慮組件復(fù)用和路由權(quán)限寫部署的時(shí)候要處理跨域、靜態(tài)資源、進(jìn)程管理和日志查看這一整套經(jīng)驗(yàn)在以后的工作里會(huì)反復(fù)用到。最后分享一個(gè)很實(shí)用的小建議項(xiàng)目答辯前把項(xiàng)目在另一臺(tái)電腦上從零部署一遍。MySQL導(dǎo)入腳本、JDK安裝、Node環(huán)境、jar包啟動(dòng)全程記錄下來。一方面你會(huì)發(fā)現(xiàn)自己遺漏了哪些依賴沒說明另一方面這份部署文檔直接放進(jìn)報(bào)告正文當(dāng)“部署說明”章節(jié)質(zhì)量比網(wǎng)上抄來的教程靠譜得多。至于答辯現(xiàn)場(chǎng)評(píng)委讓你現(xiàn)場(chǎng)啟動(dòng)項(xiàng)目你也不會(huì)因?yàn)榄h(huán)境問題卡住而手忙腳亂。這個(gè)項(xiàng)目本身還可以繼續(xù)擴(kuò)展的方向有不少我后來在里面加了菜譜收藏統(tǒng)計(jì)排行、用戶上傳菜譜審核、按食材名稱搜索再往后甚至可以引入Redis緩存熱門菜譜列表。但對(duì)現(xiàn)階段的你來說先把基礎(chǔ)鏈路走通、把每個(gè)細(xì)節(jié)問透就已經(jīng)贏過大多數(shù)交爛大街項(xiàng)目的人了。