每年到這個(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)容就是寫給你看的。這套題目可以說是經(jīng)典中的經(jīng)典后端用SSMSpring SpringMVC MyBatis前端用Vue再加一套完整的畢設(shè)論文。技術(shù)棧不新但也絕不落伍難度適中項(xiàng)目規(guī)模恰到好處評委老師看著也眼熟——選它作為畢業(yè)設(shè)計(jì)穩(wěn)妥。但這并不意味著你能糊弄過去正因?yàn)榻?jīng)典老師對它的“標(biāo)準(zhǔn)完成度”心里有數(shù)你做到什么水平他一眼就能看出來。這篇文章我就把這個(gè)項(xiàng)目的完整設(shè)計(jì)思路、技術(shù)細(xì)節(jié)、實(shí)操步驟、論文結(jié)構(gòu)和踩坑記錄一次性聊透保證你能拿來直接用。1. 項(xiàng)目整體設(shè)計(jì)與技術(shù)選型思路1.1 為什么是SSMVue而不是其他組合很多同學(xué)一上來就會(huì)問“老師用SpringBoot不好嗎為什么還要用SSM”這個(gè)問題我在不知道多少個(gè)論文開題答辯現(xiàn)場聽過。答案其實(shí)很實(shí)際SSMSpring SpringMVC MyBatis是傳統(tǒng)Java Web開發(fā)中分層最清晰、教學(xué)體系最成熟的一套組合。Spring管對象、SpringMVC管請求流轉(zhuǎn)、MyBatis管數(shù)據(jù)庫操作三層架構(gòu)天然分隔每一層都能在論文里單獨(dú)拎出來寫一段對畢設(shè)而言這不是缺點(diǎn)反而讓論文更容易寫出深度和條理。另一個(gè)現(xiàn)實(shí)因素是不少學(xué)校的Java課程還在用SSM體系教學(xué)機(jī)房里的實(shí)驗(yàn)環(huán)境、老師的參考代碼、往屆學(xué)長留下的模板全都基于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ā)能把這些事情簡化太多用原生JS寫代碼量翻三倍以上還不一定保證不出bug。1.2 教工公寓管理系統(tǒng)的核心需求拆解畢設(shè)題目叫“教工公寓管理”和常見的“學(xué)生宿舍管理系統(tǒng)”不一樣重點(diǎn)服務(wù)對象是教職工業(yè)務(wù)流程有明顯的特殊性。普通學(xué)生宿舍是統(tǒng)一分配、按學(xué)期繳費(fèi)、強(qiáng)制管理教工公寓則更像是“人才周轉(zhuǎn)房”涉及申請、審核、分配、續(xù)住、退房、租金核算和維修上報(bào)。我在指導(dǎo)學(xué)生的過程中建議至少把系統(tǒng)拆成以下幾個(gè)核心模塊教職工信息管理教職工的工號、姓名、部門、職稱、聯(lián)系方式、家屬信息因?yàn)榻坦す⑼ǔＴ试S帶家屬入住。公寓房源管理公寓樓信息、樓層與房間號、戶型一室一廳/兩室一廳、面積、朝向、當(dāng)前狀態(tài)空閑/已入住/維修中。入住申請與審核教職工線上提交入住申請管理員審核資格分配房源生成入住記錄。退宿與搬遷管理退宿申請、水電表結(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頁面但既然用了Vue就建議走前后端分離路線。后端SSM項(xiàng)目只負(fù)責(zé)提供JSON格式的RESTful接口如/api/house/list、/api/staff/login前端由Vue工程負(fù)責(zé)頁面渲染和用戶交互通過axios發(fā)起HTTP請求拿到JSON數(shù)據(jù)后動(dòng)態(tài)展示。前后端分離帶來的直接好處是前端開發(fā)可以和后端并行只要接口文檔約定好了兩邊各自開發(fā)互不阻塞。對于你自己做畢設(shè)等于把戰(zhàn)線拉成兩條看起來工作量大了實(shí)際上是分散了壓力——后端寫累了可以調(diào)前端界面前端卡住了就回來改改Mapper接口不容易陷入死磕一個(gè)點(diǎn)的僵局。同時(shí)前后端分離項(xiàng)目在論文里能專門寫一個(gè)小節(jié)講“前后端數(shù)據(jù)交互規(guī)范”包括請求封裝、狀態(tài)碼約定、異常處理結(jié)構(gòu)。這些內(nèi)容非常加分能體現(xiàn)出你不僅是把功能跑通了還具備工程化意識。2. 數(shù)據(jù)庫設(shè)計(jì)與后端核心實(shí)現(xiàn)詳解2.1 核心表結(jié)構(gòu)設(shè)計(jì)——五張表起步八張表穩(wěn)妥數(shù)據(jù)庫設(shè)計(jì)能看出一個(gè)學(xué)生的基本功也是答辯老師重點(diǎ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)登錄賬號與權(quán)限其中sys_user和staff_info可以是獨(dú)立的也可以做一對一關(guān)聯(lián)。我個(gè)人建議獨(dú)立成表因?yàn)榈卿涃~號涉及密碼和角色和教職工業(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)精度問題。二是時(shí)間字段建議用datetime并且默認(rèn)值設(shè)為CURRENT_TIMESTAMP這樣插入數(shù)據(jù)時(shí)自動(dòng)記錄時(shí)間少寫一行代碼。三是一定要設(shè)計(jì)邏輯刪除字段is_deleted雖然畢設(shè)項(xiàng)目規(guī)模小但加上這個(gè)字段就能在論文“數(shù)據(jù)庫設(shè)計(jì)”里寫一句“考慮到數(shù)據(jù)的可追溯性采用邏輯刪除而非物理刪除”顯得專業(yè)。2.2 SSM整合時(shí)的依賴與配置文件要點(diǎn)SSM整合的“三座大山”就是三個(gè)配置文件spring-mvc.xml、spring-mybatis.xml、web.xml。很多新手一上來就在這栽跟頭不是包掃描漏了就是路徑映射配錯(cuò)。Maven的pom.xml中核心依賴就這么幾個(gè)spring-webmvc、mybatis-spring、mybatis、druid連接池、mysql-connector-java、jackson-databindJSON轉(zhuǎn)換必備。注意jackson-databind必須配SpringMVC返回對象轉(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里返回的對象就能自動(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)建代理對象注入到Service里去。這是SSM項(xiàng)目中節(jié)省大量模板代碼的關(guān)鍵設(shè)計(jì)。2.3 SSM常用注解——答辯被問爛的八張牌說到SSM常用注解這個(gè)是面試和答辯環(huán)節(jié)最容易被問到的知識點(diǎn)網(wǎng)上搜“ssm常用注解”相關(guān)熱度一直很高說明大家都想知道哪些注解最核心。我在項(xiàng)目里實(shí)際用到頻率最高的給你總結(jié)成下面這幾個(gè)Controller聲明這是一個(gè)SpringMVC控制器類負(fù)責(zé)接收HTTP請求。在Controller類上配合RequestMapping(/api)可以設(shè)置類級別的URL前綴避免每個(gè)方法都寫全路徑。RestController與ResponseBodyRestController是Controller加ResponseBody的合成注解表示這個(gè)類所有方法的返回值都直接寫入HTTP響應(yīng)體而不是走視圖解析器。如果你的Controller每個(gè)方法都返回JSON直接用RestController最省事。RequestMapping映射HTTP請求路徑可以定義請求方法類型GET/POST/PUT/DELETE。GetMapping、PostMapping等是它的變體語義更清晰推薦使用。RequestBodyResponseBody前端傳JSON過來時(shí)用RequestBody把請求體綁定到Java對象返回?cái)?shù)據(jù)時(shí)ResponseBody把Java對象轉(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è)評審老師如果看到你還在用XML配置的方式組裝bean印象分會(huì)打折扣但用注解就能說明你吃透了Spring的設(shè)計(jì)思想。Repository標(biāo)記DAO接口但在實(shí)際項(xiàng)目中如果配了MapperScannerConfigurer這個(gè)注解可視情況省略我習(xí)慣還是寫上語義完整。ParamMapper接口中的方法如果接受多個(gè)參數(shù)必須用Param(xxx)標(biāo)注參數(shù)名否則MyBatis不知道#{xxx}該取哪個(gè)值。比如ListRoomInfo selectByCondition(Param(buildingId) Integer buildingId, Param(status) Integer status);每個(gè)注解都要能在答辯現(xiàn)場說出它的作用和底層原理比如Autowired默認(rèn)按類型注入找到多個(gè)候選時(shí)再按屬性名實(shí)在不行還要搭配Qualifier指定名稱。這些細(xì)節(jié)就是你答辯時(shí)回答問題不虛的底氣。2.4 MyBatis動(dòng)態(tài)SQL——多條件查詢的利器教工公寓管理系統(tǒng)的房源列表、繳費(fèi)記錄、維修工單全部都有“多條件組合查詢”的需求。比如房源管理頁面可能需要根據(jù)樓棟號、樓層、房間朝向、狀態(tài)等多個(gè)條件篩選房源查詢條件可能是全部為空也可能只填其中一個(gè)這時(shí)候MyBatis的動(dòng)態(tài)SQL就派上用場了。一個(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í)的各種邊界問題。如果你只寫WHERE 11加AND拼接也不是不行但答辯時(shí)老師看到where標(biāo)簽會(huì)認(rèn)為你懂MyBatis的精髓這是本質(zhì)區(qū)別。2.5 文件上傳與靜態(tài)資源訪問教工公寓管理系統(tǒng)通常需要涉及教職工頭像上傳、維修驗(yàn)收照片上傳等場景SpringMVC的文件上傳需要配一個(gè)MultipartResolverbean idmultipartResolver classorg.springframework.web.multipart.commons.CommonsMultipartResolver property namemaxUploadSize value10485760 / property namedefaultEncoding valueUTF-8 / /beanController接收文件保存到本地上傳目錄同時(shí)返回訪問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里訪問。3. Vue前端項(xiàng)目的搭建與核心頁面實(shí)現(xiàn)3.1 Vue安裝與環(huán)境配置——從零到項(xiàng)目跑起來說到Vue的環(huán)境配置和安裝網(wǎng)上的教程很多但真正照著做能一次成功的沒幾個(gè)主要坑都藏在細(xì)節(jié)里。第一步安裝Node.js。去官網(wǎng)下載LTS版本按提示一路下一步就行。安裝完成后打開命令行Windows建議用PowerShell或Git Bash輸入node -v和npm -v能輸出版本號就是成功了。第二步更換npm鏡像源。這一步不做的話后面大概率會(huì)在裝依賴時(shí)被漫長的等待折磨到懷疑人生。執(zhí)行下面兩條命令npm config get registry npm config set registry https://registry.npmmirror.com第二條命令執(zhí)行后再用第一條命令檢查發(fā)現(xiàn)輸出的是國內(nèi)鏡像地址就說明配置生效了。第三步創(chuàng)建Vue項(xiàng)目。目前官方推薦用create-vuenpm create vuelatest運(yùn)行后它會(huì)問你項(xiàng)目名稱、是否要TypeScript、路由、Pinia等選項(xiàng)。做畢設(shè)的話我建議選擇Router和Pinia其他選項(xiàng)如TSX、E2E測試能選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)用跑起來了。3.2 Vue路由——前端頁面跳轉(zhuǎn)的核心機(jī)制很多同學(xué)在這個(gè)地方會(huì)犯迷糊Vue路由這個(gè)內(nèi)容是熱門搜索詞說明大家確實(shí)覺得它有點(diǎn)繞。核心邏輯其實(shí)很簡單路由就是“URL路徑”與“頁面組件”之間的映射關(guān)系用戶訪問哪個(gè)路徑前端就把對應(yīng)的組件渲染出來。我在公寓管理系統(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(...)是懶加載寫法意思是只有訪問對應(yīng)路徑時(shí)才加載該組件把業(yè)務(wù)代碼切成小塊首屏加載速度會(huì)快很多。關(guān)于動(dòng)態(tài)路由適用于“不同角色加載不同菜單”的場景。實(shí)現(xiàn)思路是前端登錄后根據(jù)用戶角色動(dòng)態(tài)生成可訪問的路由表通過router.addRoute()添加到路由器里。但說實(shí)話畢設(shè)項(xiàng)目用Vue Router的導(dǎo)航守衛(wèi)就足夠了在路由跳轉(zhuǎn)前檢查本地是否存儲了token沒有就強(qiáng)制跳轉(zhuǎn)到登錄頁。router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.path ! /login !token) { next(/login) } else { next() } })這個(gè)寫法在我?guī)н^的項(xiàng)目里出現(xiàn)頻率極高簡單可靠好在答辯時(shí)也能講清楚——訪問受保護(hù)頁面時(shí)先驗(yàn)身份沒有登錄憑證就不能放行相當(dāng)于給系統(tǒng)加了一道門禁。3.3 Element UI布局——后臺管理界面的骨架Vue項(xiàng)目里做后臺管理系統(tǒng)90%的人會(huì)用Element Plus組件庫。布局就是典型的“頂部導(dǎo)航 側(cè)邊欄 主內(nèi)容區(qū)”三段式。當(dāng)初網(wǎng)絡(luò)熱搜詞里有一條問“利用element-ui布局組件布局時(shí)如何將側(cè)欄作為一個(gè)單獨(dú)的vue文件引入到html中”說明確實(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)前路由匹配到的頁面組件就會(huì)渲染在這里。這里要特別注意側(cè)邊欄菜單的數(shù)據(jù)化。我對菜單的處理是定義成一個(gè)數(shù)組每個(gè)菜單項(xiàng)包括標(biāo)題、圖標(biāo)、路由路徑、和當(dāng)前登錄用戶角色是否匹配然后根據(jù)用戶角色過濾后展示。這樣做有兩個(gè)好處一是不同角色登錄后看到的菜單天然不同實(shí)現(xiàn)了按鈕級別的權(quán)限控制雛形二是代碼沒有寫死后續(xù)加菜單只改動(dòng)數(shù)組不用改模板。3.4 前端核心業(yè)務(wù)頁面實(shí)現(xiàn)房源管理頁面是整個(gè)系統(tǒng)最重要的界面我的布局設(shè)計(jì)是頁面頂部放一個(gè)篩選表單樓棟號下拉框、狀態(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和請求攔截器。請求攔截器的作用是從localStorage里取出token設(shè)置到請求頭的Authorization字段。如果不做這一步后端無法知道請求者是誰權(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)后訪問http://localhost:8080/項(xiàng)目名/就能看到你的Vue前端頁面了。需要注意一個(gè)坑如果前端項(xiàng)目使用了BrowserRouter模式的Vue Router地址欄是/room/list這種不帶#的路徑你在Tomcat里直接刷新頁面會(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)目圖省心我直接用哈希模式完全沒毛病。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é)議”無論是成功還是各種失敗原因都能通過message字段透出前端只需要關(guān)心code是不是200剩下的事情交給統(tǒng)一的彈窗提示去處理。4.2 分頁接口設(shè)計(jì)——必考知識點(diǎn)所有列表頁面都需要分頁。MyBatis實(shí)現(xiàn)分頁最穩(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對象封裝到Result里返回前端。前端拿到total、pageNum、pageSize等字段后再配合Element Plus的el-pagination組件渲染分頁按鈕。整個(gè)過程在答辯時(shí)非常好講查詢前開啟分頁插件插件自動(dòng)攔截下一條SQL語句執(zhí)行COUNT(*)查詢和LIMIT語句把總記錄數(shù)算出來再把查詢結(jié)果封裝成分頁對象。4.3 跨域問題解決——最常見的攔路虎前后端分離開發(fā)時(shí)前端運(yùn)行在http://localhost:5173后端在http://localhost:8080端口不同瀏覽器默認(rèn)會(huì)攔截跨域請求。你在Vue里調(diào)接口如果看到瀏覽器控制臺報(bào)CORS policy相關(guān)錯(cuò)誤就是這個(gè)原因?？缬虿皇前踩珕栴}而是瀏覽器的一種同源限制策略。解決辦法有很多最省事的是在后端SpringMVC配置里加一個(gè)跨域過濾器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ù)檢請求OPTIONS不會(huì)攜帶實(shí)際數(shù)據(jù)要提前放行否則前端會(huì)一直收到跨域報(bào)錯(cuò)、但后端日志里又看不到日志查半天也定位不到問題。加上Access-Control-Allow-Credentials: true是為了允許跨域請求攜帶Cookie如果登錄狀態(tài)是存在Cookie里的就必須要它。4.4 登錄鑒權(quán)與會(huì)話管理教工公寓管理系統(tǒng)的登錄邏輯建議這樣做前端把用戶名密碼通過POST提交到/api/user/login后端判斷賬號是否存在、密碼是否匹配建議密碼用MD5加鹽后存儲直接存明文在畢設(shè)里也太丟人了驗(yàn)證通過后把用戶信息存到Session里同時(shí)返回一個(gè)簡單的token字符串讓前端放在請求頭中攜帶。后續(xù)每一個(gè)受保護(hù)接口都通過攔截器檢查請求頭里這個(gè)token是否有效。用SpringMVC攔截器實(shí)現(xià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攔截器里取請求頭的token無效就統(tǒng)一返回401狀態(tài)碼并附帶消息“登錄已過期請重新登錄”。前端axios響應(yīng)攔截器收到401后自動(dòng)跳轉(zhuǎn)回登錄頁。4.5 前端播放m3u8與PDF展示的擴(kuò)展場景熱搜詞里有很多關(guān)于“Vue播放m3u8”“Vue播放RTMP”的問題。雖然公寓管理系統(tǒng)的核心不需要做視頻播放但如果你打算在“公告通知”模塊中發(fā)布會(huì)議視頻鏈接或者系統(tǒng)里要展示公寓戶型圖PDF、制度文件PDF這些是經(jīng)常會(huì)碰到的需求。開發(fā)時(shí)如果遇到我就順手整理了方案。在Vue里展示PDF最實(shí)用的方式不是用img它只能顯示PDF第一頁而且不同瀏覽器表現(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è)附加功能別把精力過多投入在此。答辯時(shí)核心競爭力仍然在主體業(yè)務(wù)功能這些播放功能做得再花哨也就是一個(gè)小亮點(diǎn)而已。5. 論文結(jié)構(gòu)設(shè)計(jì)與答辯準(zhǔn)備5.1 論文目錄參考“論文程序”這個(gè)項(xiàng)目標(biāo)題決定了你論文和程序都不能少而且論文是占評分比重很大的部分。很多同學(xué)的畢業(yè)論文最大的問題不是寫不出來而是結(jié)構(gòu)太散看起來像在寫“技術(shù)心得”。一份標(biāo)準(zhǔn)的畢設(shè)論文目錄整理成下面的框架幾乎是通用格式摘要與Abstract第一章 緒論項(xiàng)目背景、國內(nèi)外研究現(xiàn)狀、研究內(nèi)容與意義第二章 需求分析可行性分析、功能需求分析、非功能需求分析、用例圖第三章 系統(tǒng)設(shè)計(jì)總體架構(gòu)設(shè)計(jì)、功能模塊設(shè)計(jì)、數(shù)據(jù)庫設(shè)計(jì)E-R圖、表結(jié)構(gòu)表第四章 系統(tǒng)實(shí)現(xiàn)各模塊實(shí)現(xiàn)界面截圖加核心代碼解析第五章 系統(tǒng)測試測試環(huán)境、測試用例表、測試結(jié)果與分析第六章 總結(jié)與展望工作內(nèi)容總結(jié)、不足與改進(jìn)方向參考文獻(xiàn)致謝每個(gè)章節(jié)的工作量相對均衡進(jìn)度好控制。這里特別提醒一下需求分析章節(jié)不要只“假裝”分析業(yè)務(wù)可以把“教工公寓管理”不同于“學(xué)生宿舍管理”的地方寫出來如教職工入住申請的審核流程更嚴(yán)格、公寓租金補(bǔ)貼政策差異、家屬入住登記、資源調(diào)配機(jī)制等。這些細(xì)節(jié)會(huì)讓論文來源于實(shí)戰(zhàn)而非照搬模板。5.2 測試用例怎么設(shè)計(jì)才專業(yè)很多同學(xué)到測試章節(jié)就寫“點(diǎn)擊登錄按鈕能登錄成功”這種測試用例基本等于沒寫。好的測試用例要能反映出測試邏輯的嚴(yán)謹(jǐn)性比如登錄模塊的設(shè)計(jì)用例編號測試項(xiàng)輸入數(shù)據(jù)預(yù)期結(jié)果實(shí)際結(jié)果TC-001登錄成功正確用戶名正確密碼登錄成功跳轉(zhuǎn)到dashboard頁通過TC-002密碼錯(cuò)誤正確用戶名錯(cuò)誤密碼提示“用戶名或密碼錯(cuò)誤”通過TC-003用戶名不存在不存在的用戶名任意密碼提示“用戶名或密碼錯(cuò)誤”通過TC-004空字段校驗(yàn)用戶名為空提示“請輸入用戶名”通過TC-005重復(fù)提交快速連續(xù)點(diǎn)擊登錄按鈕不產(chǎn)生重復(fù)請求通過除了功能測試再加上并發(fā)登錄測試、接口響應(yīng)時(shí)間測試、數(shù)據(jù)一致性測試這幾個(gè)維度測試章節(jié)立刻顯得充實(shí)了。如果你是拿JMeter做了并發(fā)測試把截圖放進(jìn)論文答辯時(shí)亮出來就是加分項(xiàng)。5.3 答辯現(xiàn)場的常見追問與應(yīng)對思路答辯老師在你講完P(guān)PT后通常會(huì)問幾個(gè)固定套路的問題提前準(zhǔn)備好應(yīng)對方案會(huì)從容很多第一問你在這個(gè)項(xiàng)目中主要承擔(dān)了哪些工作——即使你一個(gè)人包辦了所有工作也不要傻乎乎地回答“什么都做了”而要說“我主要負(fù)責(zé)后端SSM框架的搭建與核心業(yè)務(wù)的實(shí)現(xiàn)包括數(shù)據(jù)庫設(shè)計(jì)、房源管理、入住管理模塊的接口開發(fā)同時(shí)參與前端Vue頁面的部分功能開發(fā)”。第二問你的系統(tǒng)安全性是如何保障的——可以從三個(gè)層面回答密碼加密存儲、攔截器統(tǒng)一登錄校驗(yàn)、角色權(quán)限控制。哪怕具體實(shí)現(xiàn)沒有做到位回答得條理清晰依然能獲得認(rèn)可。第三問數(shù)據(jù)庫的索引、事務(wù)你是怎么處理的——答入住登記涉及房間狀態(tài)變更和住戶信息新增兩者必須保證原子性因此在Service層加了Transactional注解頻繁查詢的字段如room_no、status建立了普通索引加快檢索速度。第四問如果后續(xù)增加“線上支付租金”功能你的設(shè)計(jì)思路是什么——這個(gè)問題是開放題核心是想考察你有沒有擴(kuò)展性思維可以答在payment_record表增加支付流水號和支付平臺回調(diào)字段用定時(shí)任務(wù)檢查未支付賬單前端接入微信/支付寶支付SDK生成二維碼。把支付標(biāo)識、回調(diào)、對賬邏輯梳理清楚答案就是合格的。6. 常見問題排查與踩坑記錄6.1 SpringMVC返回中文亂碼這個(gè)可以說是SSM項(xiàng)目的高頻問題了。表現(xiàn)是前端拿到的JSON數(shù)據(jù)里的中文變成了一串問號。原因基本只有兩個(gè)一是spring-mvc.xml里沒配置UTF-8編碼過濾器請求和響應(yīng)的編碼默認(rèn)不是UTF-8二是MySQL連接URL沒加characterEncodingutf-8。解決方式是在web.xml里加上Spring自帶的編碼過濾器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ù)庫里的字段是room_no下劃線風(fēng)格而實(shí)體類的屬性是roomNo駝峰風(fēng)格MyBatis默認(rèn)是無法自動(dòng)映射的。最簡單的解決方式是在mybatis-config.xml里開啟駝峰映射settings setting namemapUnderscoreToCamelCase valuetrue/ /settings這是一個(gè)不起眼但影響極大的配置項(xiàng)。不打開它你會(huì)發(fā)現(xiàn)查詢結(jié)果里大量字段都是null排查起來費(fèi)時(shí)間費(fèi)精力。6.3 頁面樣式丟失或刷新404正如前面講的部署時(shí)靜態(tài)資源問題天天見。如果你把Vue打包好的dist文件放進(jìn)webapp后發(fā)現(xiàn)頁面樣式正常但一刷新就404八成就是前端路由使用了createWebHistory模式。我當(dāng)時(shí)也傻傻踩過幾次后來老老實(shí)實(shí)換成了createWebHashHistory再也沒出過問題。如果想保留干凈美觀的URL也可以配置Tomcat的RewriteValve但需要用額外的jar包改動(dòng)工程配置文件不推薦在畢設(shè)里折騰。6.4 端口被占用導(dǎo)致啟動(dòng)失敗開發(fā)過程中經(jīng)常遇到Tomcat或Vue啟動(dòng)時(shí)報(bào)端口占用。Tomcat端口被占用時(shí)用命令找到占用進(jìn)程并結(jié)束它netstat -ano | findstr 8080 taskkill /pid 進(jìn)程號 /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請求持續(xù)pending這個(gè)坑多半出在攔截器或者請求配置上。比如你寫了登錄攔截器但請求路徑根本沒有匹配到后端Controller或者攔截器在OPTIONS預(yù)檢請求時(shí)沒有放行所有正常請求都會(huì)卡在pending狀態(tài)。排查思路先看Network面板里請求是否真的發(fā)出去了再逐漸排除是前端卡住還是后端耗時(shí)最后再看是不是被攔截器攔截了但沒返回響應(yīng)。定位到這里問題也就解決了一大半。7. 各角色權(quán)限管理實(shí)現(xiàn)思路7.1 三角色權(quán)限模型設(shè)計(jì)教工公寓管理系統(tǒng)的角色我建議至少分三類系統(tǒng)管理員、教職工公寓住戶、維修工作人員。不同角色的功能完全不一樣我用一個(gè)權(quán)限矩陣說明功能模塊管理員教職工住戶維修工用戶信息管理全權(quán)限查看本人信息、修改本人聯(lián)系方式和密碼無房源管理全權(quán)限查看空閑房源無入住/退宿申請審核、分配、辦理提交申請、查詢申請進(jìn)度無租金繳費(fèi)記錄全權(quán)限、生成賬單查看本人賬單、登記繳費(fèi)無報(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ù)角色過濾實(shí)現(xiàn)了“后端兜底、前端優(yōu)化體驗(yàn)”的雙重策略在答辯中性價(jià)比很高。7.2 前端按鈕級權(quán)限控制熱搜詞里有一條是“vue按鈕權(quán)限怎么控制”這里就多聊一句。前端控制按鈕權(quán)限常見的就是自定義指令的方式。在main.js中注冊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)目以及后來帶著學(xué)生做的心得來看畢設(shè)最大的障礙往往不是技術(shù)難度而是把一個(gè)大任務(wù)拆解成每天可執(zhí)行的小計(jì)劃。SSMVue教工公寓管理系統(tǒng)如果每天投入四小時(shí)滿打滿算三周左右可以完成一個(gè)相當(dāng)完整、能拿優(yōu)秀評級的成果。我建議的時(shí)間分配是這樣的第一周集中做數(shù)據(jù)庫設(shè)計(jì)、后端SSM框架搭建、實(shí)體與Mapper層開發(fā)第二周把Service層、Controller層和核心接口跑通同時(shí)開始Vue項(xiàng)目搭建和前端基礎(chǔ)布局第三周做前端業(yè)務(wù)頁面、前后端聯(lián)調(diào)、美化界面然后集中寫論文和做測試。最后留三到五天統(tǒng)一檢查Bug和準(zhǔn)備答辯PPT。有幾個(gè)地方我想單獨(dú)再叮囑一遍。一是數(shù)據(jù)庫的表結(jié)構(gòu)不要為了省事把公寓樓、房間、住戶信息全塞進(jìn)一張表八張表看起來多實(shí)際上每一張都有存在的必要性后期排查問題和寫論文都會(huì)輕松很多。二是前端項(xiàng)目一定有版本管理哪怕自己一個(gè)人做也建議把代碼托管到Git平臺因?yàn)椴恢朗裁磿r(shí)候你寫壞了一個(gè)功能Git能讓你從容地回到上一個(gè)可用版本。三是別拖延最后一周再通宵是趕不出高質(zhì)量項(xiàng)目加論文的這一點(diǎn)說多了都是淚。如果照著這篇文章走下來你應(yīng)該已經(jīng)擁有一套能跑、能演示、能答辯的完整項(xiàng)目了。接下來最重要的就是把論文里的系統(tǒng)實(shí)現(xiàn)截圖替換成自己項(xiàng)目的真實(shí)截圖把自己寫的核心代碼能講清楚原理——這文章里的每一句話建議都在自己腦子里重新過一遍。你答得從容老師自然能給高分。