每年到這個(gè)時(shí)間點(diǎn)就會(huì)有一批計(jì)算機(jī)專業(yè)的大四學(xué)生開始為畢業(yè)設(shè)計(jì)頭疼。2026屆的學(xué)弟學(xué)妹們?nèi)绻阏诩m結(jié)選題或者已經(jīng)選了“基于SSM的教工公寓管理系統(tǒng)”這類題目卻不知道從何下手這篇內(nèi)容就是寫給你看的。這套題目可以說(shuō)是經(jīng)典中的經(jīng)典后端用SSMSpring SpringMVC MyBatis前端用Vue再加一套完整的畢設(shè)論文。技術(shù)棧不新但也絕不落伍難度適中項(xiàng)目規(guī)模恰到好處評(píng)委老師看著也眼熟——選它作為畢業(yè)設(shè)計(jì)穩(wěn)妥。但這并不意味著你能糊弄過(guò)去正因?yàn)榻?jīng)典老師對(duì)它的“標(biāo)準(zhǔn)完成度”心里有數(shù)你做到什么水平他一眼就能看出來(lái)。這篇文章我就把這個(gè)項(xiàng)目的完整設(shè)計(jì)思路、技術(shù)細(xì)節(jié)、實(shí)操步驟、論文結(jié)構(gòu)和踩坑記錄一次性聊透保證你能拿來(lái)直接用。1. 項(xiàng)目整體設(shè)計(jì)與技術(shù)選型思路1.1 為什么是SSMVue而不是其他組合很多同學(xué)一上來(lái)就會(huì)問(wèn)“老師用SpringBoot不好嗎為什么還要用SSM”這個(gè)問(wèn)題我在不知道多少個(gè)論文開題答辯現(xiàn)場(chǎng)聽過(guò)。答案其實(shí)很實(shí)際SSMSpring SpringMVC MyBatis是傳統(tǒng)Java Web開發(fā)中分層最清晰、教學(xué)體系最成熟的一套組合。Spring管對(duì)象、SpringMVC管請(qǐng)求流轉(zhuǎn)、MyBatis管數(shù)據(jù)庫(kù)操作三層架構(gòu)天然分隔每一層都能在論文里單獨(dú)拎出來(lái)寫一段對(duì)畢設(shè)而言這不是缺點(diǎn)反而讓論文更容易寫出深度和條理。另一個(gè)現(xiàn)實(shí)因素是不少學(xué)校的Java課程還在用SSM體系教學(xué)機(jī)房里的實(shí)驗(yàn)環(huán)境、老師的參考代碼、往屆學(xué)長(zhǎng)留下的模板全都基于SSM。你適當(dāng)?shù)亍氨Ｊ亍庇么蠹沂煜さ募夹g(shù)棧意味著當(dāng)你卡殼時(shí)能撈你的人更多。前端選Vue的原因就更加直白Vue 2/3的生態(tài)成熟上手曲線在三大框架里最平緩中文資料和社區(qū)活躍度也是最高的。一個(gè)管理系統(tǒng)需要表單、表格、彈窗、路由跳轉(zhuǎn)、狀態(tài)展示Vue的響應(yīng)式數(shù)據(jù)綁定和組件化開發(fā)能把這些事情簡(jiǎn)化太多用原生JS寫代碼量翻三倍以上還不一定保證不出bug。1.2 教工公寓管理系統(tǒng)的核心需求拆解畢設(shè)題目叫“教工公寓管理”和常見的“學(xué)生宿舍管理系統(tǒng)”不一樣重點(diǎn)服務(wù)對(duì)象是教職工業(yè)務(wù)流程有明顯的特殊性。普通學(xué)生宿舍是統(tǒng)一分配、按學(xué)期繳費(fèi)、強(qiáng)制管理教工公寓則更像是“人才周轉(zhuǎn)房”涉及申請(qǐng)、審核、分配、續(xù)住、退房、租金核算和維修上報(bào)。我在指導(dǎo)學(xué)生的過(guò)程中建議至少把系統(tǒng)拆成以下幾個(gè)核心模塊教職工信息管理教職工的工號(hào)、姓名、部門、職稱、聯(lián)系方式、家屬信息因?yàn)榻坦す⑼ǔＴ试S帶家屬入住。公寓房源管理公寓樓信息、樓層與房間號(hào)、戶型一室一廳/兩室一廳、面積、朝向、當(dāng)前狀態(tài)空閑/已入住/維修中。入住申請(qǐng)與審核教職工線上提交入住申請(qǐng)管理員審核資格分配房源生成入住記錄。退宿與搬遷管理退宿申請(qǐng)、水電表結(jié)清、房間驗(yàn)收、押金退還流程。租金與費(fèi)用管理按月記錄房租、水電費(fèi)、物業(yè)費(fèi)支持繳費(fèi)狀態(tài)追蹤和賬單導(dǎo)出。報(bào)修管理住戶提交報(bào)修工單維修員接單、填寫維修結(jié)果。公告通知管理發(fā)布停水停電、社區(qū)活動(dòng)、政策調(diào)整等公告。角色權(quán)限管理系統(tǒng)至少要有管理員、教職工住戶、維修人員三類角色不同角色看到的菜單和可執(zhí)行操作必須隔離。把這八個(gè)模塊放在論文里就構(gòu)成了一個(gè)標(biāo)準(zhǔn)的“功能性需求分析”章節(jié)主次分明該有的業(yè)務(wù)閉環(huán)一個(gè)不少。1.3 前后端分離架構(gòu)的核心思路傳統(tǒng)SSM項(xiàng)目是后端渲染JSP頁(yè)面但既然用了Vue就建議走前后端分離路線。后端SSM項(xiàng)目只負(fù)責(zé)提供JSON格式的RESTful接口如/api/house/list、/api/staff/login前端由Vue工程負(fù)責(zé)頁(yè)面渲染和用戶交互通過(guò)axios發(fā)起HTTP請(qǐng)求拿到JSON數(shù)據(jù)后動(dòng)態(tài)展示。前后端分離帶來(lái)的直接好處是前端開發(fā)可以和后端并行只要接口文檔約定好了兩邊各自開發(fā)互不阻塞。對(duì)于你自己做畢設(shè)等于把戰(zhàn)線拉成兩條看起來(lái)工作量大了實(shí)際上是分散了壓力——后端寫累了可以調(diào)前端界面前端卡住了就回來(lái)改改Mapper接口不容易陷入死磕一個(gè)點(diǎn)的僵局。同時(shí)前后端分離項(xiàng)目在論文里能專門寫一個(gè)小節(jié)講“前后端數(shù)據(jù)交互規(guī)范”包括請(qǐng)求封裝、狀態(tài)碼約定、異常處理結(jié)構(gòu)。這些內(nèi)容非常加分能體現(xiàn)出你不僅是把功能跑通了還具備工程化意識(shí)。2. 數(shù)據(jù)庫(kù)設(shè)計(jì)與后端核心實(shí)現(xiàn)詳解2.1 核心表結(jié)構(gòu)設(shè)計(jì)——五張表起步八張表穩(wěn)妥數(shù)據(jù)庫(kù)設(shè)計(jì)能看出一個(gè)學(xué)生的基本功也是答辯老師重點(diǎn)提問(wèn)的區(qū)域。我的建議是最少設(shè)計(jì)以下八張核心表表名核心字段作用staff_infoid, staff_no, name, department, title, phone, family_info教職工基本信息building_infoid, building_no, layer_count, room_count, address公寓樓棟信息room_infoid, building_id, room_no, house_type, area, status房源房間信息check_inid, staff_id, room_id, check_in_date, expected_out_date, status入住記錄與當(dāng)前狀態(tài)payment_recordid, staff_id, room_id, fee_type, amount, month, status租金水電等繳費(fèi)記錄repair_orderid, room_id, reporter_id, content, assignee_id, status, result報(bào)修工單notice_infoid, title, content, publish_time, publisher_id公告信息sys_userid, username, password, real_name, role系統(tǒng)登錄賬號(hào)與權(quán)限其中sys_user和staff_info可以是獨(dú)立的也可以做一對(duì)一關(guān)聯(lián)。我個(gè)人建議獨(dú)立成表因?yàn)榈卿涃~號(hào)涉及密碼和角色和教職工業(yè)務(wù)字段混在一起既不利于安全也容易導(dǎo)致表結(jié)構(gòu)變得臃腫。在設(shè)置字段時(shí)有幾個(gè)細(xì)節(jié)必須注意。一是所有金額字段amount、deposit等建議用decimal(10,2)不要用float否則會(huì)出現(xiàn)0.1加0.2不等于0.3這類讓人血壓升高的浮點(diǎn)精度問(wèn)題。二是時(shí)間字段建議用datetime并且默認(rèn)值設(shè)為CURRENT_TIMESTAMP這樣插入數(shù)據(jù)時(shí)自動(dòng)記錄時(shí)間少寫一行代碼。三是一定要設(shè)計(jì)邏輯刪除字段is_deleted雖然畢設(shè)項(xiàng)目規(guī)模小但加上這個(gè)字段就能在論文“數(shù)據(jù)庫(kù)設(shè)計(jì)”里寫一句“考慮到數(shù)據(jù)的可追溯性采用邏輯刪除而非物理刪除”顯得專業(yè)。2.2 SSM整合時(shí)的依賴與配置文件要點(diǎn)SSM整合的“三座大山”就是三個(gè)配置文件spring-mvc.xml、spring-mybatis.xml、web.xml。很多新手一上來(lái)就在這栽跟頭不是包掃描漏了就是路徑映射配錯(cuò)。Maven的pom.xml中核心依賴就這么幾個(gè)spring-webmvc、mybatis-spring、mybatis、druid連接池、mysql-connector-java、jackson-databindJSON轉(zhuǎn)換必備。注意jackson-databind必須配SpringMVC返回對(duì)象轉(zhuǎn)JSON全靠它漏了這個(gè)你前端拿到的一律是亂碼或者報(bào)406錯(cuò)誤。spring-mvc.xml里關(guān)鍵配置是開啟注解驅(qū)動(dòng)和配置Json轉(zhuǎn)換器mvc:annotation-driven mvc:message-converters register-defaultstrue bean classorg.springframework.http.converter.json.MappingJackson2HttpMessageConverter property nameobjectMapper refjacksonObjectMapper / /bean /mvc:message-converters /mvc:annotation-driven這個(gè)配置加上以后Controller里返回的對(duì)象就能自動(dòng)序列化成JSON前端拿到的就是標(biāo)準(zhǔn)的數(shù)據(jù)結(jié)構(gòu)。spring-mybatis.xml里的核心是配置SqlSessionFactoryBean和MapperScannerConfigurerbean idsqlSessionFactory classorg.mybatis.spring.SqlSessionFactoryBean property namedataSource refdataSource / property nametypeAliasesPackage valuecom.example.entity / property namemapperLocations valueclasspath:mapper/*.xml / /bean bean classorg.mybatis.spring.mapper.MapperScannerConfigurer property namebasePackage valuecom.example.dao / /bean有了MapperScannerConfigurer你的DAO層接口就不需要寫實(shí)現(xiàn)類MyBatis自動(dòng)創(chuàng)建代理對(duì)象注入到Service里去。這是SSM項(xiàng)目中節(jié)省大量模板代碼的關(guān)鍵設(shè)計(jì)。2.3 SSM常用注解——答辯被問(wèn)爛的八張牌說(shuō)到SSM常用注解這個(gè)是面試和答辯環(huán)節(jié)最容易被問(wèn)到的知識(shí)點(diǎn)網(wǎng)上搜“ssm常用注解”相關(guān)熱度一直很高說(shuō)明大家都想知道哪些注解最核心。我在項(xiàng)目里實(shí)際用到頻率最高的給你總結(jié)成下面這幾個(gè)Controller聲明這是一個(gè)SpringMVC控制器類負(fù)責(zé)接收HTTP請(qǐng)求。在Controller類上配合RequestMapping(/api)可以設(shè)置類級(jí)別的URL前綴避免每個(gè)方法都寫全路徑。RestController與ResponseBodyRestController是Controller加ResponseBody的合成注解表示這個(gè)類所有方法的返回值都直接寫入HTTP響應(yīng)體而不是走視圖解析器。如果你的Controller每個(gè)方法都返回JSON直接用RestController最省事。RequestMapping映射HTTP請(qǐng)求路徑可以定義請(qǐng)求方法類型GET/POST/PUT/DELETE。GetMapping、PostMapping等是它的變體語(yǔ)義更清晰推薦使用。RequestBodyResponseBody前端傳JSON過(guò)來(lái)時(shí)用RequestBody把請(qǐng)求體綁定到Java對(duì)象返回?cái)?shù)據(jù)時(shí)ResponseBody把Java對(duì)象轉(zhuǎn)為JSON。這兩個(gè)注解是前后端分離項(xiàng)目的數(shù)據(jù)通道。Service聲明業(yè)務(wù)層類交給Spring容器管理。事務(wù)控制建議也放在Service層用Transactional(rollbackFor Exception.class)標(biāo)注保證多表操作要么全成功要么全回滾。Autowired依賴注入常用在Service層注入DAO接口、在Controller層注入Service接口。畢設(shè)評(píng)審老師如果看到你還在用XML配置的方式組裝bean印象分會(huì)打折扣但用注解就能說(shuō)明你吃透了Spring的設(shè)計(jì)思想。Repository標(biāo)記DAO接口但在實(shí)際項(xiàng)目中如果配了MapperScannerConfigurer這個(gè)注解可視情況省略我習(xí)慣還是寫上語(yǔ)義完整。ParamMapper接口中的方法如果接受多個(gè)參數(shù)必須用Param(xxx)標(biāo)注參數(shù)名否則MyBatis不知道#{xxx}該取哪個(gè)值。比如ListRoomInfo selectByCondition(Param(buildingId) Integer buildingId, Param(status) Integer status);每個(gè)注解都要能在答辯現(xiàn)場(chǎng)說(shuō)出它的作用和底層原理比如Autowired默認(rèn)按類型注入找到多個(gè)候選時(shí)再按屬性名實(shí)在不行還要搭配Qualifier指定名稱。這些細(xì)節(jié)就是你答辯時(shí)回答問(wèn)題不虛的底氣。2.4 MyBatis動(dòng)態(tài)SQL——多條件查詢的利器教工公寓管理系統(tǒng)的房源列表、繳費(fèi)記錄、維修工單全部都有“多條件組合查詢”的需求。比如房源管理頁(yè)面可能需要根據(jù)樓棟號(hào)、樓層、房間朝向、狀態(tài)等多個(gè)條件篩選房源查詢條件可能是全部為空也可能只填其中一個(gè)這時(shí)候MyBatis的動(dòng)態(tài)SQL就派上用場(chǎng)了。一個(gè)典型的房源查詢Mapper XML映射如下select idselectByCondition resultTypecom.example.entity.RoomInfo SELECT r.*, b.building_no FROM room_info r LEFT JOIN building_info b ON r.building_id b.id where if testbuildingId ! null and buildingId ! AND r.building_id #{buildingId} /if if testhouseType ! null and houseType ! AND r.house_type #{houseType} /if if teststatus ! null AND r.status #{status} /if /where ORDER BY r.id DESC /select注意where標(biāo)簽的用法它能讓開頭的AND自動(dòng)被處理掉避免了SQL拼接時(shí)的各種邊界問(wèn)題。如果你只寫WHERE 11加AND拼接也不是不行但答辯時(shí)老師看到where標(biāo)簽會(huì)認(rèn)為你懂MyBatis的精髓這是本質(zhì)區(qū)別。2.5 文件上傳與靜態(tài)資源訪問(wèn)教工公寓管理系統(tǒng)通常需要涉及教職工頭像上傳、維修驗(yàn)收照片上傳等場(chǎng)景SpringMVC的文件上傳需要配一個(gè)MultipartResolverbean idmultipartResolver classorg.springframework.web.multipart.commons.CommonsMultipartResolver property namemaxUploadSize value10485760 / property namedefaultEncoding valueUTF-8 / /beanController接收文件保存到本地上傳目錄同時(shí)返回訪問(wèn)URL給前端。注意上傳目錄不要放在項(xiàng)目部署的webapps下面我個(gè)人的做法是保存到服務(wù)器的一個(gè)獨(dú)立目錄如/data/upload/然后在SpringMVC配置一個(gè)虛擬路徑映射這樣項(xiàng)目重新部署時(shí)上傳文件不會(huì)丟失。在spring-mvc.xml里配置mvc:resources mapping/upload/** locationfile:/data/upload/ /前端拿到的圖片URL類似/upload/avatar/20260601.jpg可以直接放在img標(biāo)簽的src里訪問(wèn)。3. Vue前端項(xiàng)目的搭建與核心頁(yè)面實(shí)現(xiàn)3.1 Vue安裝與環(huán)境配置——從零到項(xiàng)目跑起來(lái)說(shuō)到Vue的環(huán)境配置和安裝網(wǎng)上的教程很多但真正照著做能一次成功的沒(méi)幾個(gè)主要坑都藏在細(xì)節(jié)里。第一步安裝Node.js。去官網(wǎng)下載LTS版本按提示一路下一步就行。安裝完成后打開命令行Windows建議用PowerShell或Git Bash輸入node -v和npm -v能輸出版本號(hào)就是成功了。第二步更換npm鏡像源。這一步不做的話后面大概率會(huì)在裝依賴時(shí)被漫長(zhǎng)的等待折磨到懷疑人生。執(zhí)行下面兩條命令npm config get registry npm config set registry https://registry.npmmirror.com第二條命令執(zhí)行后再用第一條命令檢查發(fā)現(xiàn)輸出的是國(guó)內(nèi)鏡像地址就說(shuō)明配置生效了。第三步創(chuàng)建Vue項(xiàng)目。目前官方推薦用create-vuenpm create vuelatest運(yùn)行后它會(huì)問(wèn)你項(xiàng)目名稱、是否要TypeScript、路由、Pinia等選項(xiàng)。做畢設(shè)的話我建議選擇Router和Pinia其他選項(xiàng)如TSX、E2E測(cè)試能選No就選No減少不必要的學(xué)習(xí)成本。如果提示包不存在先運(yùn)行npm i -g vue/cli裝上腳手架再試。第四步啟動(dòng)開發(fā)服務(wù)器cd 你的項(xiàng)目名 npm install npm run dev看到終端輸出Local: http://localhost:5173/瀏覽器打開這個(gè)地址就是你的Vue應(yīng)用跑起來(lái)了。3.2 Vue路由——前端頁(yè)面跳轉(zhuǎn)的核心機(jī)制很多同學(xué)在這個(gè)地方會(huì)犯迷糊Vue路由這個(gè)內(nèi)容是熱門搜索詞說(shuō)明大家確實(shí)覺(jué)得它有點(diǎn)繞。核心邏輯其實(shí)很簡(jiǎn)單路由就是“URL路徑”與“頁(yè)面組件”之間的映射關(guān)系用戶訪問(wèn)哪個(gè)路徑前端就把對(duì)應(yīng)的組件渲染出來(lái)。我在公寓管理系統(tǒng)里典型的路由配置是這樣的const routes [ { path: /login, name: Login, component: () import(../views/LoginView.vue) }, { path: /dashboard, component: () import(../layouts/MainLayout.vue), children: [ { path: , name: Dashboard, component: () import(../views/DashboardView.vue) }, { path: room/list, name: RoomList, component: () import(../views/room/RoomListView.vue) }, { path: checkin/list, name: CheckInList, component: () import(../views/checkin/CheckInListView.vue) }, { path: payment/list, name: PaymentList, component: () import(../views/payment/PaymentListView.vue) }, { path: repair/list, name: RepairList, component: () import(../views/repair/RepairListView.vue) } ] } ]這里的() import(...)是懶加載寫法意思是只有訪問(wèn)對(duì)應(yīng)路徑時(shí)才加載該組件把業(yè)務(wù)代碼切成小塊首屏加載速度會(huì)快很多。關(guān)于動(dòng)態(tài)路由適用于“不同角色加載不同菜單”的場(chǎng)景。實(shí)現(xiàn)思路是前端登錄后根據(jù)用戶角色動(dòng)態(tài)生成可訪問(wèn)的路由表通過(guò)router.addRoute()添加到路由器里。但說(shuō)實(shí)話畢設(shè)項(xiàng)目用Vue Router的導(dǎo)航守衛(wèi)就足夠了在路由跳轉(zhuǎn)前檢查本地是否存儲(chǔ)了token沒(méi)有就強(qiáng)制跳轉(zhuǎn)到登錄頁(yè)。router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.path ! /login !token) { next(/login) } else { next() } })這個(gè)寫法在我?guī)н^(guò)的項(xiàng)目里出現(xiàn)頻率極高簡(jiǎn)單可靠好在答辯時(shí)也能講清楚——訪問(wèn)受保護(hù)頁(yè)面時(shí)先驗(yàn)身份沒(méi)有登錄憑證就不能放行相當(dāng)于給系統(tǒng)加了一道門禁。3.3 Element UI布局——后臺(tái)管理界面的骨架Vue項(xiàng)目里做后臺(tái)管理系統(tǒng)90%的人會(huì)用Element Plus組件庫(kù)。布局就是典型的“頂部導(dǎo)航 側(cè)邊欄 主內(nèi)容區(qū)”三段式。當(dāng)初網(wǎng)絡(luò)熱搜詞里有一條問(wèn)“利用element-ui布局組件布局時(shí)如何將側(cè)欄作為一個(gè)單獨(dú)的vue文件引入到html中”說(shuō)明確實(shí)有不少人在布局這塊卡殼。我的做法是定義一個(gè)MainLayout.vue作為整體布局組件把側(cè)邊欄、頂欄、主內(nèi)容區(qū)組合在一起template el-container el-aside width220px SideMenu :menu-listmenuList / /el-aside el-container el-header HeaderBar :user-infouserInfo / /el-header el-main router-view / /el-main /el-container /el-container /template其中SideMenu和HeaderBar都單獨(dú)拆成獨(dú)立的Vue組件文件放到components/目錄。主內(nèi)容區(qū)放一個(gè)router-view /它是Vue Router提供的占位組件當(dāng)前路由匹配到的頁(yè)面組件就會(huì)渲染在這里。這里要特別注意側(cè)邊欄菜單的數(shù)據(jù)化。我對(duì)菜單的處理是定義成一個(gè)數(shù)組每個(gè)菜單項(xiàng)包括標(biāo)題、圖標(biāo)、路由路徑、和當(dāng)前登錄用戶角色是否匹配然后根據(jù)用戶角色過(guò)濾后展示。這樣做有兩個(gè)好處一是不同角色登錄后看到的菜單天然不同實(shí)現(xiàn)了按鈕級(jí)別的權(quán)限控制雛形二是代碼沒(méi)有寫死后續(xù)加菜單只改動(dòng)數(shù)組不用改模板。3.4 前端核心業(yè)務(wù)頁(yè)面實(shí)現(xiàn)房源管理頁(yè)面是整個(gè)系統(tǒng)最重要的界面我的布局設(shè)計(jì)是頁(yè)面頂部放一個(gè)篩選表單樓棟號(hào)下拉框、狀態(tài)下拉框、戶型下拉框、“查詢”和“重置”按鈕中間是房源列表的el-table右側(cè)是“新增”“編輯”“刪除”的操作列。核心實(shí)現(xiàn)是調(diào)后端接口獲取數(shù)據(jù)const loadData async () { const loading ElLoading.service({ target: .main-content }) try { const response await axios.get(/api/room/list, { params: { ...queryForm } }) tableData.value response.data.records total.value response.data.total } finally { loading.close() } }這里我把a(bǔ)xios實(shí)例封裝在了utils/request.js里統(tǒng)一配置了基礎(chǔ)URL和請(qǐng)求攔截器。請(qǐng)求攔截器的作用是從localStorage里取出token設(shè)置到請(qǐng)求頭的Authorization字段。如果不做這一步后端無(wú)法知道請(qǐng)求者是誰(shuí)權(quán)限校驗(yàn)全都會(huì)失效。3.5 打包部署——Vue構(gòu)建后如何放進(jìn)后端項(xiàng)目這是畢設(shè)最后的“臨門一腳”很多同學(xué)到這一步就開始慌了。SSM項(xiàng)目一般是打war包部署到Tomcat前端Vue項(xiàng)目構(gòu)建后是一堆靜態(tài)文件html、js、css。我推薦的部署方式是把Vue構(gòu)建后的產(chǎn)物放到SSM項(xiàng)目的webapp目錄下。先執(zhí)行構(gòu)建命令npm run build構(gòu)建完成后項(xiàng)目根目錄下會(huì)生成一個(gè)dist/文件夾。把這個(gè)文件夾里的所有內(nèi)容復(fù)制到SSM項(xiàng)目的src/main/webapp目錄下然后重新打war包部署到Tomcat。Tomcat啟動(dòng)后訪問(wèn)http://localhost:8080/項(xiàng)目名/就能看到你的Vue前端頁(yè)面了。需要注意一個(gè)坑如果前端項(xiàng)目使用了BrowserRouter模式的Vue Router地址欄是/room/list這種不帶#的路徑你在Tomcat里直接刷新頁(yè)面會(huì)返回404因?yàn)門omcat找不到/room/list這個(gè)真實(shí)文件。解決辦法有兩個(gè)要么給Tomcat配置一個(gè)RewriteValve把未匹配路徑重寫到index.html要么更省事——在Vue Router里使用createWebHashHistory模式路徑會(huì)變成/#/room/list這種帶#的格式刷新就不會(huì)丟失路由了。畢設(shè)項(xiàng)目圖省心我直接用哈希模式完全沒(méi)毛病。4. 后端接口設(shè)計(jì)與前后端聯(lián)調(diào)4.1 RESTful API 接口規(guī)范約定接口是前后端之間的“合同”。不管是自己一個(gè)人做整個(gè)項(xiàng)目還是有一個(gè)搭檔先把接口規(guī)范寫清楚后面開發(fā)效率會(huì)高非常非常多。我用的統(tǒng)一返回結(jié)構(gòu)是這樣設(shè)計(jì)的{ code: 200, message: 操作成功, data: { total: 56, records: [{ id: 1, roomNo: 1-201 }] } }后端封裝了一個(gè)Result類Controller所有方法都返回這個(gè)類型。這樣前端在axios響應(yīng)攔截器里統(tǒng)一判斷code字段等于給前后端的數(shù)據(jù)溝通建立了一個(gè)“協(xié)議”無(wú)論是成功還是各種失敗原因都能通過(guò)message字段透出前端只需要關(guān)心code是不是200剩下的事情交給統(tǒng)一的彈窗提示去處理。4.2 分頁(yè)接口設(shè)計(jì)——必考知識(shí)點(diǎn)所有列表頁(yè)面都需要分頁(yè)。MyBatis實(shí)現(xiàn)分頁(yè)最穩(wěn)定高效的方式是使用PageHelper插件在pom.xml引入依賴后只需要在Service實(shí)現(xiàn)類的查詢方法前寫一行PageHelper.startPage(pageNum, pageSize); ListRoomInfo list roomInfoDao.selectByCondition(query); PageInfoRoomInfo pageInfo new PageInfo(list);然后把這個(gè)PageInfo對(duì)象封裝到Result里返回前端。前端拿到total、pageNum、pageSize等字段后再配合Element Plus的el-pagination組件渲染分頁(yè)按鈕。整個(gè)過(guò)程在答辯時(shí)非常好講查詢前開啟分頁(yè)插件插件自動(dòng)攔截下一條SQL語(yǔ)句執(zhí)行COUNT(*)查詢和LIMIT語(yǔ)句把總記錄數(shù)算出來(lái)再把查詢結(jié)果封裝成分頁(yè)對(duì)象。4.3 跨域問(wèn)題解決——最常見的攔路虎前后端分離開發(fā)時(shí)前端運(yùn)行在http://localhost:5173后端在http://localhost:8080端口不同瀏覽器默認(rèn)會(huì)攔截跨域請(qǐng)求。你在Vue里調(diào)接口如果看到瀏覽器控制臺(tái)報(bào)CORS policy相關(guān)錯(cuò)誤就是這個(gè)原因。跨域不是安全問(wèn)題而是瀏覽器的一種同源限制策略。解決辦法有很多最省事的是在后端SpringMVC配置里加一個(gè)跨域過(guò)濾器Component public class CorsFilter implements Filter { Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletResponse res (HttpServletResponse) response; res.setHeader(Access-Control-Allow-Origin, http://localhost:5173); res.setHeader(Access-Control-Allow-Methods, GET, POST, PUT, DELETE, OPTIONS); res.setHeader(Access-Control-Allow-Headers, Content-Type, Authorization); res.setHeader(Access-Control-Allow-Credentials, true); if (OPTIONS.equalsIgnoreCase(((HttpServletRequest) request).getMethod())) { res.setStatus(HttpServletResponse.SC_OK); return; } chain.doFilter(request, response); } }注意有些預(yù)檢請(qǐng)求OPTIONS不會(huì)攜帶實(shí)際數(shù)據(jù)要提前放行否則前端會(huì)一直收到跨域報(bào)錯(cuò)、但后端日志里又看不到日志查半天也定位不到問(wèn)題。加上Access-Control-Allow-Credentials: true是為了允許跨域請(qǐng)求攜帶Cookie如果登錄狀態(tài)是存在Cookie里的就必須要它。4.4 登錄鑒權(quán)與會(huì)話管理教工公寓管理系統(tǒng)的登錄邏輯建議這樣做前端把用戶名密碼通過(guò)POST提交到/api/user/login后端判斷賬號(hào)是否存在、密碼是否匹配建議密碼用MD5加鹽后存儲(chǔ)直接存明文在畢設(shè)里也太丟人了驗(yàn)證通過(guò)后把用戶信息存到Session里同時(shí)返回一個(gè)簡(jiǎn)單的token字符串讓前端放在請(qǐng)求頭中攜帶。后續(xù)每一個(gè)受保護(hù)接口都通過(guò)攔截器檢查請(qǐng)求頭里這個(gè)token是否有效。用SpringMVC攔截器實(shí)現(xiàn)起來(lái)很簡(jiǎn)潔在spring-mvc.xml里配置mvc:interceptors mvc:interceptor mvc:mapping path/api/** / mvc:exclude-mapping path/api/user/login / bean classcom.example.interceptor.LoginInterceptor / /mvc:interceptor /mvc:interceptors攔截器里取請(qǐng)求頭的token無(wú)效就統(tǒng)一返回401狀態(tài)碼并附帶消息“登錄已過(guò)期請(qǐng)重新登錄”。前端axios響應(yīng)攔截器收到401后自動(dòng)跳轉(zhuǎn)回登錄頁(yè)。4.5 前端播放m3u8與PDF展示的擴(kuò)展場(chǎng)景熱搜詞里有很多關(guān)于“Vue播放m3u8”“Vue播放RTMP”的問(wèn)題。雖然公寓管理系統(tǒng)的核心不需要做視頻播放但如果你打算在“公告通知”模塊中發(fā)布會(huì)議視頻鏈接或者系統(tǒng)里要展示公寓戶型圖PDF、制度文件PDF這些是經(jīng)常會(huì)碰到的需求。開發(fā)時(shí)如果遇到我就順手整理了方案。在Vue里展示PDF最實(shí)用的方式不是用img它只能顯示PDF第一頁(yè)而且不同瀏覽器表現(xiàn)還不一致而是用vue-pdf組件Vue2時(shí)代比較常用或者pdfjs-dist。Vue3的話推薦vue-pdf-viewer/viewer拉取組件后渲染template vue-pdf :filepdfUrl / /template至于m3u8是視頻流切片格式常規(guī)video標(biāo)簽播放不了。如果你確實(shí)需要在Vue里播m3u8建議直接用hls.jsimport Hls from hls.js const video document.getElementById(video) if (Hls.isSupported()) { const hls new Hls() hls.loadSource(https://example.com/live/index.m3u8) hls.attachMedia(video) }但如果只是畢設(shè)里的一個(gè)附加功能別把精力過(guò)多投入在此。答辯時(shí)核心競(jìng)爭(zhēng)力仍然在主體業(yè)務(wù)功能這些播放功能做得再花哨也就是一個(gè)小亮點(diǎn)而已。5. 論文結(jié)構(gòu)設(shè)計(jì)與答辯準(zhǔn)備5.1 論文目錄參考“論文程序”這個(gè)項(xiàng)目標(biāo)題決定了你論文和程序都不能少而且論文是占評(píng)分比重很大的部分。很多同學(xué)的畢業(yè)論文最大的問(wèn)題不是寫不出來(lái)而是結(jié)構(gòu)太散看起來(lái)像在寫“技術(shù)心得”。一份標(biāo)準(zhǔn)的畢設(shè)論文目錄整理成下面的框架幾乎是通用格式摘要與Abstract第一章 緒論項(xiàng)目背景、國(guó)內(nèi)外研究現(xiàn)狀、研究?jī)?nèi)容與意義第二章 需求分析可行性分析、功能需求分析、非功能需求分析、用例圖第三章 系統(tǒng)設(shè)計(jì)總體架構(gòu)設(shè)計(jì)、功能模塊設(shè)計(jì)、數(shù)據(jù)庫(kù)設(shè)計(jì)E-R圖、表結(jié)構(gòu)表第四章 系統(tǒng)實(shí)現(xiàn)各模塊實(shí)現(xiàn)界面截圖加核心代碼解析第五章 系統(tǒng)測(cè)試測(cè)試環(huán)境、測(cè)試用例表、測(cè)試結(jié)果與分析第六章 總結(jié)與展望工作內(nèi)容總結(jié)、不足與改進(jìn)方向參考文獻(xiàn)致謝每個(gè)章節(jié)的工作量相對(duì)均衡進(jìn)度好控制。這里特別提醒一下需求分析章節(jié)不要只“假裝”分析業(yè)務(wù)可以把“教工公寓管理”不同于“學(xué)生宿舍管理”的地方寫出來(lái)如教職工入住申請(qǐng)的審核流程更嚴(yán)格、公寓租金補(bǔ)貼政策差異、家屬入住登記、資源調(diào)配機(jī)制等。這些細(xì)節(jié)會(huì)讓論文來(lái)源于實(shí)戰(zhàn)而非照搬模板。5.2 測(cè)試用例怎么設(shè)計(jì)才專業(yè)很多同學(xué)到測(cè)試章節(jié)就寫“點(diǎn)擊登錄按鈕能登錄成功”這種測(cè)試用例基本等于沒(méi)寫。好的測(cè)試用例要能反映出測(cè)試邏輯的嚴(yán)謹(jǐn)性比如登錄模塊的設(shè)計(jì)用例編號(hào)測(cè)試項(xiàng)輸入數(shù)據(jù)預(yù)期結(jié)果實(shí)際結(jié)果TC-001登錄成功正確用戶名正確密碼登錄成功跳轉(zhuǎn)到dashboard頁(yè)通過(guò)TC-002密碼錯(cuò)誤正確用戶名錯(cuò)誤密碼提示“用戶名或密碼錯(cuò)誤”通過(guò)TC-003用戶名不存在不存在的用戶名任意密碼提示“用戶名或密碼錯(cuò)誤”通過(guò)TC-004空字段校驗(yàn)用戶名為空提示“請(qǐng)輸入用戶名”通過(guò)TC-005重復(fù)提交快速連續(xù)點(diǎn)擊登錄按鈕不產(chǎn)生重復(fù)請(qǐng)求通過(guò)除了功能測(cè)試再加上并發(fā)登錄測(cè)試、接口響應(yīng)時(shí)間測(cè)試、數(shù)據(jù)一致性測(cè)試這幾個(gè)維度測(cè)試章節(jié)立刻顯得充實(shí)了。如果你是拿JMeter做了并發(fā)測(cè)試把截圖放進(jìn)論文答辯時(shí)亮出來(lái)就是加分項(xiàng)。5.3 答辯現(xiàn)場(chǎng)的常見追問(wèn)與應(yīng)對(duì)思路答辯老師在你講完P(guān)PT后通常會(huì)問(wèn)幾個(gè)固定套路的問(wèn)題提前準(zhǔn)備好應(yīng)對(duì)方案會(huì)從容很多第一問(wèn)你在這個(gè)項(xiàng)目中主要承擔(dān)了哪些工作——即使你一個(gè)人包辦了所有工作也不要傻乎乎地回答“什么都做了”而要說(shuō)“我主要負(fù)責(zé)后端SSM框架的搭建與核心業(yè)務(wù)的實(shí)現(xiàn)包括數(shù)據(jù)庫(kù)設(shè)計(jì)、房源管理、入住管理模塊的接口開發(fā)同時(shí)參與前端Vue頁(yè)面的部分功能開發(fā)”。第二問(wèn)你的系統(tǒng)安全性是如何保障的——可以從三個(gè)層面回答密碼加密存儲(chǔ)、攔截器統(tǒng)一登錄校驗(yàn)、角色權(quán)限控制。哪怕具體實(shí)現(xiàn)沒(méi)有做到位回答得條理清晰依然能獲得認(rèn)可。第三問(wèn)數(shù)據(jù)庫(kù)的索引、事務(wù)你是怎么處理的——答入住登記涉及房間狀態(tài)變更和住戶信息新增兩者必須保證原子性因此在Service層加了Transactional注解頻繁查詢的字段如room_no、status建立了普通索引加快檢索速度。第四問(wèn)如果后續(xù)增加“線上支付租金”功能你的設(shè)計(jì)思路是什么——這個(gè)問(wèn)題是開放題核心是想考察你有沒(méi)有擴(kuò)展性思維可以答在payment_record表增加支付流水號(hào)和支付平臺(tái)回調(diào)字段用定時(shí)任務(wù)檢查未支付賬單前端接入微信/支付寶支付SDK生成二維碼。把支付標(biāo)識(shí)、回調(diào)、對(duì)賬邏輯梳理清楚答案就是合格的。6. 常見問(wèn)題排查與踩坑記錄6.1 SpringMVC返回中文亂碼這個(gè)可以說(shuō)是SSM項(xiàng)目的高頻問(wèn)題了。表現(xiàn)是前端拿到的JSON數(shù)據(jù)里的中文變成了一串問(wèn)號(hào)。原因基本只有兩個(gè)一是spring-mvc.xml里沒(méi)配置UTF-8編碼過(guò)濾器請(qǐng)求和響應(yīng)的編碼默認(rèn)不是UTF-8二是MySQL連接URL沒(méi)加characterEncodingutf-8。解決方式是在web.xml里加上Spring自帶的編碼過(guò)濾器filter filter-nameencodingFilter/filter-name filter-classorg.springframework.web.filter.CharacterEncodingFilter/filter-class init-param param-nameencoding/param-name param-valueUTF-8/param-value /init-param /filter同時(shí)MySQL連接串統(tǒng)一寫成這樣jdbc:mysql://localhost:3306/apartment?useUnicodetruecharacterEncodingUTF-8serverTimezoneAsia/Shanghai6.2 MyBatis中查詢出的字段為null如果數(shù)據(jù)庫(kù)里的字段是room_no下劃線風(fēng)格而實(shí)體類的屬性是roomNo駝峰風(fēng)格MyBatis默認(rèn)是無(wú)法自動(dòng)映射的。最簡(jiǎn)單的解決方式是在mybatis-config.xml里開啟駝峰映射settings setting namemapUnderscoreToCamelCase valuetrue/ /settings這是一個(gè)不起眼但影響極大的配置項(xiàng)。不打開它你會(huì)發(fā)現(xiàn)查詢結(jié)果里大量字段都是null排查起來(lái)費(fèi)時(shí)間費(fèi)精力。6.3 頁(yè)面樣式丟失或刷新404正如前面講的部署時(shí)靜態(tài)資源問(wèn)題天天見。如果你把Vue打包好的dist文件放進(jìn)webapp后發(fā)現(xiàn)頁(yè)面樣式正常但一刷新就404八成就是前端路由使用了createWebHistory模式。我當(dāng)時(shí)也傻傻踩過(guò)幾次后來(lái)老老實(shí)實(shí)換成了createWebHashHistory再也沒(méi)出過(guò)問(wèn)題。如果想保留干凈美觀的URL也可以配置Tomcat的RewriteValve但需要用額外的jar包改動(dòng)工程配置文件不推薦在畢設(shè)里折騰。6.4 端口被占用導(dǎo)致啟動(dòng)失敗開發(fā)過(guò)程中經(jīng)常遇到Tomcat或Vue啟動(dòng)時(shí)報(bào)端口占用。Tomcat端口被占用時(shí)用命令找到占用進(jìn)程并結(jié)束它netstat -ano | findstr 8080 taskkill /pid 進(jìn)程號(hào) /F這是Windows下的做法。Vue開發(fā)服務(wù)器的5173端口被占用了可以直接在vite.config.js里改端口配置server: { port: 5174 }6.5 Maven依賴下載慢或者項(xiàng)目報(bào)紅Maven下載依賴卡的痛每個(gè)Java開發(fā)都知道。解決辦法還是換源找到你的settings.xml把mirror配置改成阿里云鏡像mirror idaliyunmaven/id mirrorOfcentral/mirrorOf urlhttps://maven.aliyun.com/repository/public/url /mirror改完后記得重啟IDEA在Maven面板里點(diǎn)“刷新”重新拉依賴。6.6 axios請(qǐng)求持續(xù)pending這個(gè)坑多半出在攔截器或者請(qǐng)求配置上。比如你寫了登錄攔截器但請(qǐng)求路徑根本沒(méi)有匹配到后端Controller或者攔截器在OPTIONS預(yù)檢請(qǐng)求時(shí)沒(méi)有放行所有正常請(qǐng)求都會(huì)卡在pending狀態(tài)。排查思路先看Network面板里請(qǐng)求是否真的發(fā)出去了再逐漸排除是前端卡住還是后端耗時(shí)最后再看是不是被攔截器攔截了但沒(méi)返回響應(yīng)。定位到這里問(wèn)題也就解決了一大半。7. 各角色權(quán)限管理實(shí)現(xiàn)思路7.1 三角色權(quán)限模型設(shè)計(jì)教工公寓管理系統(tǒng)的角色我建議至少分三類系統(tǒng)管理員、教職工公寓住戶、維修工作人員。不同角色的功能完全不一樣我用一個(gè)權(quán)限矩陣說(shuō)明功能模塊管理員教職工住戶維修工用戶信息管理全權(quán)限查看本人信息、修改本人聯(lián)系方式和密碼無(wú)房源管理全權(quán)限查看空閑房源無(wú)入住/退宿申請(qǐng)審核、分配、辦理提交申請(qǐng)、查詢申請(qǐng)進(jìn)度無(wú)租金繳費(fèi)記錄全權(quán)限、生成賬單查看本人賬單、登記繳費(fèi)無(wú)報(bào)修工單全權(quán)限提交報(bào)修、查看進(jìn)度接單、填寫處理結(jié)果公告管理發(fā)布、編輯、刪除查看、閱讀查看后端在做HandlerInterceptor時(shí)可以用一個(gè)Map維護(hù)每個(gè)接口的允許角色列表。這里有個(gè)技巧把權(quán)限校驗(yàn)和登錄校驗(yàn)放在同一個(gè)攔截器里一次斷言兩層邏輯代碼量更小。前端菜單再根據(jù)角色過(guò)濾實(shí)現(xiàn)了“后端兜底、前端優(yōu)化體驗(yàn)”的雙重策略在答辯中性價(jià)比很高。7.2 前端按鈕級(jí)權(quán)限控制熱搜詞里有一條是“vue按鈕權(quán)限怎么控制”這里就多聊一句。前端控制按鈕權(quán)限常見的就是自定義指令的方式。在main.js中注冊(cè)app.directive(permission, { mounted(el, binding) { const requiredPermission binding.value const userPermissions store.state.user.permissions if (!userPermissions.includes(requiredPermission)) { el.parentNode.removeChild(el) } } })然后在按鈕上這樣使用el-button v-permissionroom:delete typedanger刪除/el-button注意前端按鈕權(quán)限只是體驗(yàn)優(yōu)化真正的安全保障必須在后端接口層做權(quán)限校驗(yàn)。這一點(diǎn)在論文里可以寫一句“前端權(quán)限控制主要提升用戶操作體驗(yàn)后端接口依然進(jìn)行嚴(yán)格的角色驗(yàn)證”既展示了你的專業(yè)度也避免了被質(zhì)疑“前端權(quán)限不夠安全”。8. 我把這套項(xiàng)目從頭到尾做一遍的經(jīng)驗(yàn)總結(jié)從我自己做這個(gè)項(xiàng)目以及后來(lái)帶著學(xué)生做的心得來(lái)看畢設(shè)最大的障礙往往不是技術(shù)難度而是把一個(gè)大任務(wù)拆解成每天可執(zhí)行的小計(jì)劃。SSMVue教工公寓管理系統(tǒng)如果每天投入四小時(shí)滿打滿算三周左右可以完成一個(gè)相當(dāng)完整、能拿優(yōu)秀評(píng)級(jí)的成果。我建議的時(shí)間分配是這樣的第一周集中做數(shù)據(jù)庫(kù)設(shè)計(jì)、后端SSM框架搭建、實(shí)體與Mapper層開發(fā)第二周把Service層、Controller層和核心接口跑通同時(shí)開始Vue項(xiàng)目搭建和前端基礎(chǔ)布局第三周做前端業(yè)務(wù)頁(yè)面、前后端聯(lián)調(diào)、美化界面然后集中寫論文和做測(cè)試。最后留三到五天統(tǒng)一檢查Bug和準(zhǔn)備答辯PPT。有幾個(gè)地方我想單獨(dú)再叮囑一遍。一是數(shù)據(jù)庫(kù)的表結(jié)構(gòu)不要為了省事把公寓樓、房間、住戶信息全塞進(jìn)一張表八張表看起來(lái)多實(shí)際上每一張都有存在的必要性后期排查問(wèn)題和寫論文都會(huì)輕松很多。二是前端項(xiàng)目一定有版本管理哪怕自己一個(gè)人做也建議把代碼托管到Git平臺(tái)因?yàn)椴恢朗裁磿r(shí)候你寫壞了一個(gè)功能Git能讓你從容地回到上一個(gè)可用版本。三是別拖延最后一周再通宵是趕不出高質(zhì)量項(xiàng)目加論文的這一點(diǎn)說(shuō)多了都是淚。如果照著這篇文章走下來(lái)你應(yīng)該已經(jīng)擁有一套能跑、能演示、能答辯的完整項(xiàng)目了。接下來(lái)最重要的就是把論文里的系統(tǒng)實(shí)現(xiàn)截圖替換成自己項(xiàng)目的真實(shí)截圖把自己寫的核心代碼能講清楚原理——這文章里的每一句話建議都在自己腦子里重新過(guò)一遍。你答得從容老師自然能給高分。