1. 項(xiàng)目概述與整體設(shè)計(jì)思路1.1 這個(gè)系統(tǒng)到底解決了什么問(wèn)題先聊聊我做這個(gè)項(xiàng)目時(shí)的真實(shí)感受。校園失物招領(lǐng)這件事聽(tīng)起來(lái)簡(jiǎn)單實(shí)際上一旦人多起來(lái)就特別混亂。我在學(xué)校時(shí)見(jiàn)過(guò)線下失物招領(lǐng)處的桌子堆滿(mǎn)水杯、雨傘、校園卡失主找一圈翻不到撿到東西的同學(xué)登記完也不知道東西最后有沒(méi)有物歸原主。管理老師的臺(tái)賬更是一本厚厚的Excel查詢(xún)、統(tǒng)計(jì)全靠手工效率低到讓人崩潰。所以當(dāng)時(shí)決定把校園失物管理系統(tǒng)作為畢業(yè)設(shè)計(jì)時(shí)我給自己定的目標(biāo)不是交一份作業(yè)而是真正能把失物登記、招領(lǐng)管理、認(rèn)領(lǐng)審核、消息通知、數(shù)據(jù)統(tǒng)計(jì)這些環(huán)節(jié)全部線上化形成一套完整的業(yè)務(wù)閉環(huán)。這個(gè)系統(tǒng)最終做出來(lái)后覆蓋了三個(gè)核心用戶(hù)角色普通學(xué)生、管理員比如失物招領(lǐng)處的老師以及系統(tǒng)層面的維護(hù)人員。從功能上看它做的事情可以概括為三件第一讓撿到東西的人能在幾分鐘內(nèi)完成失物登記并拍照上傳第二讓丟了東西的人能通過(guò)關(guān)鍵詞搜索、分類(lèi)篩選快速鎖定可能找到自己物品的招領(lǐng)信息第三讓管理員能統(tǒng)一審核每一條認(rèn)領(lǐng)申請(qǐng)防止錯(cuò)領(lǐng)、冒領(lǐng)。這些聽(tīng)起來(lái)簡(jiǎn)單但真正落地時(shí)涉及的表結(jié)構(gòu)設(shè)計(jì)、權(quán)限控制、狀態(tài)流轉(zhuǎn)、文件上傳、前后端聯(lián)調(diào)每一個(gè)環(huán)節(jié)都值得拆開(kāi)細(xì)講。1.2 技術(shù)選型為什么是Spring Boot Vue現(xiàn)在很多同學(xué)做畢設(shè)一上來(lái)就問(wèn)哪個(gè)技術(shù)棧最火我個(gè)人的看法是對(duì)于校園失物管理系統(tǒng)這種典型的CRUD業(yè)務(wù)系統(tǒng)Spring Boot Vue是目前最穩(wěn)妥、資料最全、面試也能講出東西的組合。下面我從三個(gè)角度分析一下為什么是這個(gè)組合。第一是隔離性。前端Vue負(fù)責(zé)頁(yè)面渲染和交互后端Spring Boot只提供RESTful接口兩邊通過(guò)JSON通信。這意味著開(kāi)發(fā)時(shí)可以并行推進(jìn)我在做后端的時(shí)候前端同學(xué)可以拿Mock數(shù)據(jù)先寫(xiě)頁(yè)面效率翻倍。而且以后就算要換個(gè)前端框架后端接口不受任何影響。第二是生態(tài)成熟度。Spring Boot在Java后端領(lǐng)域基本是事實(shí)標(biāo)準(zhǔn)內(nèi)置Tomcat、自動(dòng)配置、開(kāi)箱即用省掉了一大堆XML配置。Vue在前端框架中以學(xué)習(xí)曲線平緩著稱(chēng)配合Element UI組件庫(kù)兩天就能把后臺(tái)管理頁(yè)面的框架搭建起來(lái)。對(duì)于畢業(yè)設(shè)計(jì)這種周期緊湊的項(xiàng)目來(lái)說(shuō)再也不需要去啃那些陳舊過(guò)時(shí)的SSH集成文檔了。第三是面試有話說(shuō)。Spring Boot的自動(dòng)配置原理、起步依賴(lài)機(jī)制、Vue的響應(yīng)式數(shù)據(jù)綁定、組件通信、路由守衛(wèi)……這些知識(shí)點(diǎn)掰開(kāi)揉碎都能講很久。我后面在面試時(shí)被問(wèn)到談?wù)勀惝厴I(yè)設(shè)計(jì)的技術(shù)難點(diǎn)直接就能把認(rèn)領(lǐng)審核的狀態(tài)流轉(zhuǎn)、圖片上傳的處理流程拿出來(lái)講比背八股文不知道強(qiáng)了多少倍。1.3 功能模塊劃分與權(quán)限設(shè)計(jì)整個(gè)系統(tǒng)在功能上劃分為兩大端用戶(hù)端和管理端。用戶(hù)端面向所有在校學(xué)生功能包括用戶(hù)注冊(cè)登錄、掛失信息發(fā)布、招領(lǐng)信息發(fā)布、搜索與分類(lèi)篩選、在線認(rèn)領(lǐng)申請(qǐng)、個(gè)人中心管理我發(fā)布的、我認(rèn)領(lǐng)的。管理端面向管理員功能包括成員管理用戶(hù)禁用/啟用、掛失管理、招領(lǐng)管理、認(rèn)領(lǐng)審核、公告發(fā)布、數(shù)據(jù)統(tǒng)計(jì)面板。這里我重點(diǎn)講講權(quán)限設(shè)計(jì)。用戶(hù)端和管理員雖然登錄入口是一樣的但進(jìn)入系統(tǒng)后看到的菜單和可操作接口完全不同。我在后端通過(guò)攔截器加Token校驗(yàn)的方式做了兩層控制第一層是登錄校驗(yàn)所有的 /api/** 接口除了注冊(cè)登錄外都要求請(qǐng)求頭攜帶Token否則直接返回401第二層是角色校驗(yàn)只有管理員Token才能訪問(wèn) /admin/** 的接口普通用戶(hù)訪問(wèn)時(shí)返回403。前端的配合是在路由配置里加了meta標(biāo)記{ path: /admin, component: Layout, meta: { requiresAdmin: true }, children: [...] }然后在全局前置守衛(wèi)里校驗(yàn)用戶(hù)信息里的role字段。前后端雙重校驗(yàn)保證就算有人繞過(guò)前端直接調(diào)用接口后端也會(huì)攔截住這一點(diǎn)對(duì)答辯時(shí)的安全性質(zhì)詢(xún)尤其關(guān)鍵。2. 數(shù)據(jù)庫(kù)表結(jié)構(gòu)設(shè)計(jì)與后端核心實(shí)現(xiàn)2.1 遵循高內(nèi)聚低耦合的數(shù)據(jù)庫(kù)設(shè)計(jì)數(shù)據(jù)庫(kù)是整個(gè)系統(tǒng)的地基。我在設(shè)計(jì)時(shí)把核心表拆成了六張用戶(hù)表user、掛失表lost_item、招領(lǐng)表found_item、認(rèn)領(lǐng)申請(qǐng)記錄表claim_record外加留言表message和公告表notice。用戶(hù)表是基礎(chǔ)字段包含id、用戶(hù)名、密碼BCrypt加密存儲(chǔ)、昵稱(chēng)、學(xué)號(hào)/工號(hào)、聯(lián)系電話、角色0學(xué)生 1管理員、狀態(tài)0正常 1禁用、創(chuàng)建時(shí)間。注意密碼一定不能明文存Spring Security自帶的BCryptPasswordEncoder可以拿來(lái)直接用。掛失表和招領(lǐng)表結(jié)構(gòu)類(lèi)似都包含物品名稱(chēng)、物品分類(lèi)、物品描述、丟失/拾取地點(diǎn)、丟失/拾取時(shí)間、圖片URL、聯(lián)系QQ或微信、狀態(tài)、發(fā)布人ID、發(fā)布時(shí)間。區(qū)別在于業(yè)務(wù)性質(zhì)和狀態(tài)流轉(zhuǎn)不同掛失信息的物品是等待被認(rèn)領(lǐng)的而招領(lǐng)信息里的物品是等待失主來(lái)認(rèn)領(lǐng)的。這里我反而建議把失物和招領(lǐng)拆成兩張表不要圖省事合并因?yàn)楹罄m(xù)擴(kuò)展場(chǎng)景、統(tǒng)計(jì)口徑完全不一樣。認(rèn)領(lǐng)申請(qǐng)記錄表是關(guān)鍵表。兩個(gè)外鍵分別指向失主或者拾主用戶(hù)ID、招領(lǐng)/掛失物品ID外加申請(qǐng)說(shuō)明、申請(qǐng)時(shí)間、處理狀態(tài)0待審核 1已通過(guò) 2已駁回、審核備注、審核時(shí)間。這張表承載了系統(tǒng)最重要的業(yè)務(wù)邏輯建議所有新建表都加上create_time和update_time字段別問(wèn)為什么做過(guò)的都懂。2.2 Spring Boot工程結(jié)構(gòu)要怎么搭才不亂工程結(jié)構(gòu)這塊因?yàn)槭且粋€(gè)單體項(xiàng)目我建議用經(jīng)典的分層架構(gòu)Controller - Service - Mapper三層。不過(guò)在實(shí)際寫(xiě)的時(shí)候三層之間最好加一層DTO/VO的轉(zhuǎn)換不要在Controller層直接暴露出數(shù)據(jù)庫(kù)實(shí)體字段。舉一個(gè)很重要的例子我們查詢(xún)招領(lǐng)列表時(shí)最多返回物品信息加發(fā)布人昵稱(chēng)但絕對(duì)不應(yīng)該把發(fā)布人的密碼字段序列化出去。所以我專(zhuān)門(mén)寫(xiě)了ItemVO類(lèi)只包含前端需要的字段并在Service層完成從Entity到VO的轉(zhuǎn)換。核心的pom.xml依賴(lài)只需要這幾個(gè)起步依賴(lài)就足夠了spring-boot-starter-web、mybatis-plus-boot-starter、mysql-connector-java、lombok、spring-boot-starter-validation。配一個(gè)application.yml的示例server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/campus_lost_found?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 servlet: multipart: max-file-size: 10MB max-request-size: 50MB mybatis-plus: mapper-locations: classpath:mapper/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImplMyBatis Plus用起來(lái)確實(shí)省心BaseMapper已經(jīng)把單表的增刪改查全都封裝好了我們只需要在Service里寫(xiě)業(yè)務(wù)邏輯。但有一點(diǎn)必須說(shuō)明MyBatis Plus的駝峰映射默認(rèn)是開(kāi)啟的如果你的數(shù)據(jù)庫(kù)字段是下劃線風(fēng)格比如create_time實(shí)體類(lèi)是駝峰風(fēng)格createTime它幫我們自動(dòng)轉(zhuǎn)換完全不用額外配置。2.3 核心業(yè)務(wù)邏輯認(rèn)領(lǐng)審核的狀態(tài)流轉(zhuǎn)認(rèn)領(lǐng)審核是整個(gè)系統(tǒng)業(yè)務(wù)邏輯最復(fù)雜的部分我用一個(gè)狀態(tài)機(jī)來(lái)管理。所謂狀態(tài)機(jī)本質(zhì)上就是把業(yè)務(wù)狀態(tài)的變化提煉成一個(gè)單向流轉(zhuǎn)圖讓代碼的每一次狀態(tài)變更都有據(jù)可依而不是隨手亂改。拿招領(lǐng)物品被認(rèn)領(lǐng)這個(gè)流程舉例。拾主發(fā)布一條招領(lǐng)信息后物品狀態(tài)是待認(rèn)領(lǐng)。學(xué)生在詳情頁(yè)看到物品點(diǎn)擊認(rèn)領(lǐng)申請(qǐng)按鈕填寫(xiě)自己的憑證說(shuō)明比如校園卡號(hào)、物品特征這時(shí)系統(tǒng)會(huì)生成一條claim_record記錄狀態(tài)是待審核同時(shí)物品本身狀態(tài)不變。管理員在后臺(tái)看到待審核的申請(qǐng)后點(diǎn)通過(guò)claim_record狀態(tài)變成已通過(guò)物品狀態(tài)變成待領(lǐng)取隨后失主線下拿到物品拾主或者管理員在系統(tǒng)里點(diǎn)擊確認(rèn)物品狀態(tài)才最終變成已完成。如果管理員審核不通過(guò)claim_record狀態(tài)變?yōu)橐疡g回物品狀態(tài)恢復(fù)為待認(rèn)領(lǐng)。業(yè)務(wù)上還有一個(gè)比較關(guān)鍵的約束同一件物品只能有一條審核通過(guò)的認(rèn)領(lǐng)記錄。這個(gè)約束我在claim_record表上做了一個(gè)聯(lián)合唯一索引防止并發(fā)情況下出現(xiàn)同一件物品被多個(gè)人同時(shí)認(rèn)領(lǐng)成功的問(wèn)題。我給出一個(gè)簡(jiǎn)化版的Service代碼Transactional public boolean claimItem(Long userId, Long foundItemId, String claimReason) { // 1. 校驗(yàn)物品是否存在且狀態(tài)為待認(rèn)領(lǐng) FoundItem item foundItemMapper.selectById(foundItemId); if (item null || item.getStatus() ! 0) { throw new RuntimeException(物品不存在或已被認(rèn)領(lǐng)); } // 2. 檢查用戶(hù)是否已經(jīng)認(rèn)領(lǐng)過(guò)該物品 Integer count claimRecordMapper.selectCount( new LambdaQueryWrapperClaimRecord() .eq(ClaimRecord::getUserId, userId) .eq(ClaimRecord::getFoundItemId, foundItemId) .eq(ClaimRecord::getStatus, 0)); if (count 0) { throw new RuntimeException(請(qǐng)勿重復(fù)申請(qǐng)); } // 3. 插入認(rèn)領(lǐng)申請(qǐng)記錄 ClaimRecord record new ClaimRecord(); record.setUserId(userId); record.setFoundItemId(foundItemId); record.setClaimReason(claimReason); record.setStatus(0); claimRecordMapper.insert(record); return true; }這里有幾個(gè)細(xì)節(jié)需要特別提醒。第一非查詢(xún)接口建議都加上Transactional事務(wù)注解這樣一旦中間拋異常數(shù)據(jù)庫(kù)不會(huì)留下臟數(shù)據(jù)。第二業(yè)務(wù)狀態(tài)在代碼中不要寫(xiě)死數(shù)字建議用一個(gè)枚舉類(lèi)比如ItemStatusEnum、ClaimStatusEnum管理閱讀起來(lái)清晰也不容易出錯(cuò)。第三LambdaQueryWrapper的寫(xiě)法比普通的字符串QueryWrapper安全因?yàn)樗蔷幾g期檢查字段名不會(huì)出現(xiàn)拼錯(cuò)字段導(dǎo)致運(yùn)行時(shí)報(bào)錯(cuò)的問(wèn)題。2.4 圖片上傳與訪問(wèn)路徑處理失物照片和招領(lǐng)照片是系統(tǒng)的核心信息載體但在Spring Boot中實(shí)現(xiàn)圖片上傳有幾個(gè)坑必須要說(shuō)。我當(dāng)時(shí)的實(shí)現(xiàn)方式是這樣的controller接收MultipartFile文件校驗(yàn)非空、校驗(yàn)大小限制10MB以?xún)?nèi)、校驗(yàn)擴(kuò)展名只允許jpg/png/gif/webp然后用UUID生成新文件名避免重名。保存路徑采用本地磁盤(pán)存儲(chǔ)springBoot啟動(dòng)時(shí)在用戶(hù)目錄下創(chuàng)建一個(gè)upload文件夾文件按日期分子目錄存放比如2025/01/15/xxxxx.jpg。文件上傳成功后把相對(duì)訪問(wèn)路徑比如 /upload/2025/01/15/xxx.jpg存入數(shù)據(jù)庫(kù)的img字段。接下來(lái)要讓前端能訪問(wèn)到這個(gè)圖片必須配置靜態(tài)資源映射。在Spring Boot中只需要實(shí)現(xiàn)WebMvcConfigurer接口重寫(xiě)addResourceHandlers方法Override public void addResourceHandlers(ResourceHandlerRegistry registry) { String uploadPath System.getProperty(user.dir) File.separator upload File.separator; registry.addResourceHandler(/upload/**) .addResourceLocations(file: uploadPath); }一個(gè)最容易踩的坑是開(kāi)發(fā)時(shí)直接用了前端Vue的8080端口或者后端的8080端口當(dāng)你把圖片url寫(xiě)死為localhost時(shí)部署到服務(wù)器后全是裂圖。這里最穩(wěn)妥的做法是后端接口返回圖片時(shí)只返回相對(duì)路徑 /upload/xxx.jpg由前端根據(jù)當(dāng)前環(huán)境拼接完整的訪問(wèn)前綴。比如我在Vue中封裝一個(gè)全局變量開(kāi)發(fā)環(huán)境寫(xiě) http://localhost:8080生產(chǎn)環(huán)境就改成服務(wù)器地址。3. Vue前端架構(gòu)與頁(yè)面交互實(shí)現(xiàn)3.1 前端工程化搭建與Axios封裝前端我用的Vue 2如果現(xiàn)在重新做我會(huì)直接用Vue 3 Vite但對(duì)于畢設(shè)來(lái)說(shuō)Vue 2的生態(tài)最穩(wěn)、資料最多React的同學(xué)請(qǐng)繞道。在創(chuàng)建工程時(shí)直接用Vue CLI腳手架vue create campus-lost-found然后安裝Vue Router、Vuex/A PiniaVue 2用Vuex 3UI組件庫(kù)選擇Element UI。Element UI對(duì)Vue 2的支持非常成熟Table、Form、DatePicker這些組件拿來(lái)即用管理后臺(tái)的開(kāi)發(fā)效率直接起飛。網(wǎng)絡(luò)請(qǐng)求這塊強(qiáng)烈建議在axios實(shí)例上做統(tǒng)一封裝而不是每個(gè)組件里直接調(diào)用axios。我在src/utils/request.js里創(chuàng)建了一個(gè)axios實(shí)例設(shè)置了baseURL為 /api然后加請(qǐng)求攔截器和響應(yīng)攔截器。請(qǐng)求攔截器里從localStorage拿Token放到請(qǐng)求頭Authorization。響應(yīng)攔截器里統(tǒng)一處理錯(cuò)誤碼401跳登錄頁(yè)403提示無(wú)權(quán)限500提示服務(wù)器異常。后端約定的響應(yīng)格式是{ code: 200, message: success, data: { } }攔截器里直接return response.data.data讓業(yè)務(wù)代碼拿到的直接就是真正的數(shù)據(jù)對(duì)象代碼干凈很多。另外很多新手容易忽略的是axios默認(rèn)不會(huì)攜帶Cookie如果你用JWT方案其實(shí)關(guān)系不大但如果你用Session方案一定要在axios配置里加上 withCredentials: true。3.2 頁(yè)面模塊劃分與前端路由設(shè)計(jì)前端頁(yè)面我劃分成兩大類(lèi)面向普通用戶(hù)的C端頁(yè)面和面向管理員的后臺(tái)頁(yè)面。C端頁(yè)面包括登錄注冊(cè)頁(yè)、首頁(yè)招領(lǐng)信息流、掛失大廳失物信息流、物品詳情頁(yè)、發(fā)布頁(yè)、個(gè)人中心我發(fā)布的、我認(rèn)領(lǐng)的、我的留言。管理端頁(yè)面包括工作臺(tái)數(shù)據(jù)統(tǒng)計(jì)、招領(lǐng)審核列表、掛失列表、用戶(hù)管理、公告管理。前端路由要配合后端權(quán)限做控制。C端的頁(yè)面游客也可以訪問(wèn)但發(fā)布信息和認(rèn)領(lǐng)申請(qǐng)必須登錄管理端的頁(yè)面必須有管理員身份才能進(jìn)入。我用Vue Router的全局前置守衛(wèi)實(shí)現(xiàn)router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next({ path: /login, query: { redirect: to.fullPath } }) return } if (to.meta.requiresAdmin) { const role localStorage.getItem(role) if (role ! 1) { next({ path: /403 }) return } } next() })一個(gè)比較關(guān)鍵的體驗(yàn)優(yōu)化是登錄之后不要簡(jiǎn)單地跳回首頁(yè)而是用redirect參數(shù)記錄用戶(hù)原本想訪問(wèn)的頁(yè)面登錄成功后直接跳回去。這個(gè)小細(xì)節(jié)對(duì)用戶(hù)體驗(yàn)的提升非常明顯也是我入職之后帶新人時(shí)經(jīng)常強(qiáng)調(diào)的點(diǎn)。3.3 發(fā)布表單與圖片多圖上傳的實(shí)現(xiàn)細(xì)節(jié)發(fā)布招領(lǐng)信息頁(yè)面是整個(gè)系統(tǒng)使用頻率最高的功能之一它的核心是表單校驗(yàn)和圖片上傳。Element UI的Form組件自帶校驗(yàn)規(guī)則我在數(shù)據(jù)里定義了rulesrules: { title: [{ required: true, message: 請(qǐng)?zhí)顚?xiě)物品名稱(chēng), trigger: blur }], category: [{ required: true, message: 請(qǐng)選擇物品類(lèi)型, trigger: change }], location: [{ required: true, message: 請(qǐng)?zhí)顚?xiě)拾取地點(diǎn), trigger: blur }], description: [{ required: true, message: 請(qǐng)?zhí)顚?xiě)物品描述, trigger: blur }] }上傳組件用的是el-upload這里特別要說(shuō)的是不要用el-upload默認(rèn)的action上傳方式而是設(shè)置 :auto-uploadfalse手動(dòng)把文件讀到FormData里和表單數(shù)據(jù)一起提交給后端。這樣做的好處是接口只需要一個(gè)避免圖片先傳、表單后傳導(dǎo)致的數(shù)據(jù)不一致問(wèn)題。如果需要支持同時(shí)上傳多張圖片可以遍歷文件列表把多個(gè)文件append到同一個(gè)FormData中。核心代碼示意const formData new FormData() formData.append(title, form.title) formData.append(category, form.category) formData.append(location, form.location) formData.append(description, form.description) for (const file of fileList) { formData.append(files, file.raw) } // 注意這里不能直接設(shè)置 Content-Type: application/json axios.post(/api/found/add, formData, { headers: { Content-Type: multipart/form-data } })踩過(guò)好幾次坑后的心得是用FormData傳文件時(shí)千萬(wàn)不能讓axios自動(dòng)序列化否則后端會(huì)解析不到文件字段。同時(shí)后端多文件的接收參數(shù)名要和前端append的key保持一致。4. 前后端聯(lián)調(diào)核心場(chǎng)景實(shí)操?gòu)?fù)盤(pán)4.1 從發(fā)布招領(lǐng)信息到列表展示的完整鏈路我把系統(tǒng)里最核心的一條鏈路完整走一遍方便你照著測(cè)試。假設(shè)我現(xiàn)在拾到了一張校園卡登錄系統(tǒng)后進(jìn)入發(fā)布招領(lǐng)信息頁(yè)面填寫(xiě)物品類(lèi)型為證件類(lèi)標(biāo)題為一食堂門(mén)口拾到校園卡地點(diǎn)填第一食堂描述補(bǔ)充卡套是藍(lán)色的應(yīng)該是某某學(xué)院的同學(xué)上傳兩張照片后點(diǎn)擊提交。前端做的事情是把表單數(shù)據(jù)整理成FormData發(fā)給 POST /api/found/add。后端的流程是攔截器校驗(yàn)登錄狀態(tài)Controller接收參數(shù)并做參數(shù)校驗(yàn)Service層把圖片文件保存到服務(wù)器磁盤(pán)、生成訪問(wèn)URL然后把物品信息插入數(shù)據(jù)庫(kù)found_item表。返回結(jié)果中帶上新創(chuàng)建的物品ID。然后我回到首頁(yè)首頁(yè)加載時(shí)調(diào)用 GET /api/found/list?page1size10keyword校園卡。后端Service層先根據(jù)條件分頁(yè)查詢(xún)?cè)侔衙織l記錄的發(fā)布人昵稱(chēng)關(guān)聯(lián)查出來(lái)組裝成ItemVO最后返回分頁(yè)對(duì)象。前端拿到數(shù)據(jù)后渲染成卡片列表。整個(gè)鏈路測(cè)試通過(guò)就說(shuō)明最核心的寫(xiě)入-查詢(xún)鏈路是通的正。4.2 認(rèn)領(lǐng)申請(qǐng)到管理員審核的流程演示接下來(lái)模擬失主來(lái)認(rèn)領(lǐng)。另一個(gè)學(xué)生登錄系統(tǒng)后在首頁(yè)搜索校園卡找到剛才那條招領(lǐng)信息點(diǎn)進(jìn)詳情頁(yè)調(diào)出認(rèn)領(lǐng)申請(qǐng)彈窗。彈窗里要填寫(xiě)聯(lián)系方式、認(rèn)領(lǐng)說(shuō)明比如我的卡號(hào)尾號(hào)是8821應(yīng)該有校園卡卡套。提交后調(diào)用 POST /api/claim/add后端創(chuàng)建一條狀態(tài)為待審核的認(rèn)領(lǐng)記錄同時(shí)給這條招領(lǐng)信息增加一條處理中的標(biāo)記。管理員登錄后臺(tái)在認(rèn)領(lǐng)審核列表中看到這條申請(qǐng)記錄。審核列表頁(yè)面的核心是數(shù)據(jù)回顯和操作按鈕。管理員點(diǎn)擊查看詳情能夠看到物品的照片與描述、申請(qǐng)人的學(xué)號(hào)與聯(lián)系方式、認(rèn)領(lǐng)理由。這些數(shù)據(jù)來(lái)自三個(gè)表的信息拼裝后端用一個(gè)ClaimDetailVO搞定。確認(rèn)沒(méi)問(wèn)題后審核通過(guò)此時(shí)物品狀態(tài)從待認(rèn)領(lǐng)變成待領(lǐng)取。失主線下領(lǐng)走物品之后管理員再點(diǎn)一次確認(rèn)完成整個(gè)流程結(jié)束。這個(gè)流程在聯(lián)調(diào)時(shí)最容易出現(xiàn)的問(wèn)題就是狀態(tài)更新不及時(shí)。比如用戶(hù)申請(qǐng)成功后前端頁(yè)面還顯示著待認(rèn)領(lǐng)這是因?yàn)樵斍轫?yè)是在申請(qǐng)成功之前請(qǐng)求的數(shù)據(jù)沒(méi)有刷新。解決方案就是申請(qǐng)成功后跳轉(zhuǎn)回列表頁(yè)或重新拉取詳情數(shù)據(jù)不要停留在舊的狀態(tài)里。4.3 管理后臺(tái)的統(tǒng)計(jì)報(bào)表與導(dǎo)出功能管理后臺(tái)除了審核之外還有一塊很重要的能力是數(shù)據(jù)統(tǒng)計(jì)。我在工作臺(tái)頁(yè)面用ECharts做了兩個(gè)可視化圖表一個(gè)是近六個(gè)月的招領(lǐng)信息發(fā)布趨勢(shì)折線圖一個(gè)是物品分類(lèi)占比餅圖。后端提供兩個(gè)統(tǒng)計(jì)接口分別是 GET /admin/stats/trend 和 GET /admin/stats/category。趨勢(shì)圖的實(shí)現(xiàn)是統(tǒng)計(jì)最近六個(gè)月每個(gè)月新增的招領(lǐng)和掛失數(shù)量前端用ECharts的Line圖展示雙折線。分類(lèi)占比則是從物品表里按category分組聚合前端用Pie圖展示。說(shuō)句實(shí)話畢業(yè)設(shè)計(jì)里圖表功能是加分項(xiàng)但也是最容易翻車(chē)的因?yàn)榻涌跀?shù)據(jù)結(jié)構(gòu)和圖表組件的數(shù)據(jù)要求經(jīng)常對(duì)不上。我的經(jīng)驗(yàn)是不急著寫(xiě)圖表組件先定好接口的返回結(jié)構(gòu)用Postman把接口調(diào)試好然后再寫(xiě)前端。餅圖的數(shù)據(jù)格式是 [{name: 證件類(lèi), value: 35}]折線圖的數(shù)據(jù)格式是 {months: [2024-08, ...], lost: [..], found: [..]}后端設(shè)計(jì)返回結(jié)構(gòu)時(shí)就要和前端對(duì)齊。5. 常見(jiàn)問(wèn)題排查與避坑指南5.1 跨域問(wèn)題導(dǎo)致的接口請(qǐng)求失敗前后端分離項(xiàng)目最常見(jiàn)的問(wèn)題就是跨域。如果在瀏覽器控制臺(tái)看到 blocked by CORS policy 或者 Access to XMLHttpRequest has been blocked基本就是跨域問(wèn)題。解決辦法有很多種最推薦的是在后端寫(xiě)一個(gè)CorsConfig配置類(lèi)統(tǒng)一放行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); } }這里幾個(gè)要點(diǎn)allowedOriginPatterns() 配合 allowCredentials(true) 一定要這樣寫(xiě)直接 allowedOrigins() 再配合 credentials 會(huì)有兼容性問(wèn)題。還有如果項(xiàng)目里引入了Spring Security跨域配置還要在SecurityConfiguration里也放行OPTIONS請(qǐng)求否則預(yù)檢請(qǐng)求過(guò)不去。另一種辦法是開(kāi)發(fā)時(shí)用Vue CLI的代理功能在vue.config.js里配置proxy轉(zhuǎn)發(fā)把 /api 前綴的請(qǐng)求轉(zhuǎn)發(fā)到后端的8080端口。但要注意這只在開(kāi)發(fā)環(huán)境生效生產(chǎn)環(huán)境還是要靠后端處理跨域。5.2 圖片上傳成功但訪問(wèn)404這個(gè)問(wèn)題的典型場(chǎng)景是上傳接口返回了文件相對(duì)路徑但瀏覽器訪問(wèn) http://localhost:8080/upload/xxx.jpg 時(shí)404。排查步驟按照我的經(jīng)驗(yàn)分三步走。第一步確認(rèn)文件是否真的保存到了磁盤(pán)指定目錄?？梢栽谙到y(tǒng)的用戶(hù)目錄或項(xiàng)目根目錄下檢查是否有upload文件夾以及文件是否存在。第二步確認(rèn)靜態(tài)資源映射是否生效。在配置類(lèi)里加了addResourceHandlers之后還要確認(rèn)這個(gè)配置類(lèi)組件有沒(méi)有被Spring掃描到。如果配置類(lèi)放在了子包外面Spring Boot默認(rèn)是掃描不到這是一個(gè)很低級(jí)但很容易犯的錯(cuò)。第三步檢查路徑匹配。比如攔截器里是否對(duì) /upload/** 路徑做了攔截把圖片請(qǐng)求給攔截下來(lái)返回了401或404。我遇到過(guò)最隱蔽的一種情況是文件路徑里的Linux和Windows差異。開(kāi)發(fā)時(shí)在Windows下寫(xiě)的是 File.separator 拼路徑部署到Linux服務(wù)器后路徑分隔符雖然自動(dòng)變成/但應(yīng)用權(quán)限不夠?qū)е挛募](méi)能寫(xiě)入服務(wù)器目錄。這種情況通常看應(yīng)用報(bào)錯(cuò)日志Permission denied字樣非常明顯。5.3 Long類(lèi)型主鍵返回前端精度丟失這個(gè)坑非常經(jīng)典我當(dāng)時(shí)排查了大半天。情況是這樣的我用MyBatis Plus默認(rèn)的ASSIGN_ID策略生成雪花ID作為數(shù)據(jù)表主鍵這個(gè)ID長(zhǎng)度超過(guò)JavaScript的Number最大安全整數(shù)2^53-1。前端從接口收到ID后最后一位的精度丟失變成了幾個(gè)0。在列表頁(yè)點(diǎn)擊某個(gè)物品想查看詳情時(shí)傳回給后端的ID已經(jīng)不是真實(shí)ID了結(jié)果查不到數(shù)據(jù)。解決辦法很簡(jiǎn)單在Jackson序列化時(shí)把Long類(lèi)型轉(zhuǎn)成String類(lèi)型給前端一個(gè)字符串形式的ID。兩種實(shí)現(xiàn)方式一種是在配置里配置全局的ToStringSerializer另一種是在實(shí)體類(lèi)的ID字段上加注解 JsonSerialize(using ToStringSerializer.class)。我推薦第二種只在需要的主鍵字段上加避免影響其它Long字段的語(yǔ)義。5.4 新手最容易犯的10個(gè)低級(jí)錯(cuò)誤這里把我這幾年看到的、自己做過(guò)的錯(cuò)誤整理成一張速查表建議收藏錯(cuò)誤描述具體表現(xiàn)正確做法數(shù)據(jù)庫(kù)表名和實(shí)體類(lèi)名不一致啟動(dòng)時(shí)報(bào)Table找不到用TableName注解顯式指定表名前端請(qǐng)求參數(shù)名和后端不一致接口返回參數(shù)為null統(tǒng)一使用DTO層規(guī)范字段命名未處理空指針列表頁(yè)獲取某個(gè)對(duì)象的名稱(chēng)時(shí)報(bào)500關(guān)鍵查詢(xún)用Optional或判空MyBatis Plus分頁(yè)插件未配置分頁(yè)查詢(xún)不生效返回所有數(shù)據(jù)配置MybatisPlusInterceptor加PaginationInnerInterceptor密碼明文存儲(chǔ)數(shù)據(jù)庫(kù)里密碼直接可見(jiàn)使用BCrypt加密存儲(chǔ)刪除數(shù)據(jù)用物理刪除誤刪后無(wú)法恢復(fù)邏輯刪除字段deletedMyBatis Plus支持前端上傳文件未限制類(lèi)型用戶(hù)上傳一個(gè).exe文件后端和前端都校驗(yàn)文件擴(kuò)展名查詢(xún)接口不處理時(shí)間參數(shù)時(shí)區(qū)時(shí)間相差8小時(shí)JDBC連接串加serverTimezoneAsia/Shanghai缺少全局異常處理器一個(gè)異常導(dǎo)致整個(gè)系統(tǒng)報(bào)錯(cuò)用RestControllerAdvice統(tǒng)一處理后端接口不返回統(tǒng)一格式前端每個(gè)接口都要判斷狀態(tài)碼定義統(tǒng)一Result類(lèi)code/message/data5.5 答辯時(shí)容易被追問(wèn)的5個(gè)系統(tǒng)設(shè)計(jì)問(wèn)題最后分享一個(gè)實(shí)際經(jīng)歷。答辯時(shí)老師一般不會(huì)讓你現(xiàn)場(chǎng)敲代碼更多的是針對(duì)系統(tǒng)的設(shè)計(jì)合理性提問(wèn)。我總結(jié)幾個(gè)高頻問(wèn)題和你應(yīng)該準(zhǔn)備的回答思路第一個(gè)問(wèn)題是數(shù)據(jù)庫(kù)表為什么這樣設(shè)計(jì)回答時(shí)抓住三點(diǎn)主鍵用雪花ID保證全局唯一所有表都有創(chuàng)建時(shí)間和更新時(shí)間字段方便后期維護(hù)核心關(guān)聯(lián)字段建立外鍵索引保證查詢(xún)效率。第二個(gè)問(wèn)題是如果并發(fā)量變大系統(tǒng)哪里會(huì)成為瓶頸這個(gè)問(wèn)題是送分題你可以說(shuō)目前本地部署的學(xué)生訪問(wèn)量不大數(shù)據(jù)庫(kù)是主要瓶頸可以采用分庫(kù)分表方案同時(shí)把圖片上傳到對(duì)象存儲(chǔ)服務(wù)引入Redis做熱點(diǎn)數(shù)據(jù)的緩存。第三個(gè)問(wèn)題是密碼傳輸安全如何保證回答思路是前端用HTTPS對(duì)外部署時(shí)密碼傳輸時(shí)可以加鹽加密后端使用BCrypt算法存儲(chǔ)摘要數(shù)據(jù)庫(kù)泄露也無(wú)法反推出明文密碼。第四個(gè)問(wèn)題是你和別人做的一樣你的亮點(diǎn)是什么不要謙虛明確說(shuō)出來(lái)清晰的認(rèn)領(lǐng)狀態(tài)機(jī)設(shè)計(jì)、前后端權(quán)限雙重校驗(yàn)、ECharts統(tǒng)計(jì)報(bào)表、統(tǒng)一的異常處理體系這些就是你的亮點(diǎn)。第五個(gè)問(wèn)題是系統(tǒng)上線部署需要哪些環(huán)境答Java運(yùn)行環(huán)境、MySQL數(shù)據(jù)庫(kù)、Node.js構(gòu)建前端、Nginx做靜態(tài)資源服務(wù)器和反向代理有Docker的話可以直接容器化部署。我做完這個(gè)項(xiàng)目之后最大的感受是校園失物管理系統(tǒng)表面上是常見(jiàn)的增刪改查但真正把一個(gè)業(yè)務(wù)閉環(huán)做完、做順需要的是前后端聯(lián)調(diào)的全局觀。很多同學(xué)在做畢設(shè)時(shí)容易陷入一個(gè)誤區(qū)就是文檔寫(xiě)得天花亂墜代碼卻沒(méi)有跑通。這套系統(tǒng)如果能真正做到可以演示、可以答辯、可以部署它就不只是一個(gè)畢業(yè)設(shè)計(jì)的源碼而是一份完整的全棧實(shí)戰(zhàn)經(jīng)驗(yàn)。我遇到過(guò)好幾次驗(yàn)收的時(shí)候管理員從發(fā)布到審核完整體驗(yàn)一遍流程通暢時(shí)那種成就感比拿到優(yōu)秀畢設(shè)證書(shū)還爽。