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