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