管理系統(tǒng)全棧實戰(zhàn))
在 Java 后端圈子里Spring Boot 3 已經(jīng)成了繞不開的話題前端這邊 Vue 3 的組合式 API 也早就普及。但很多初學(xué)者最頭疼的問題不是學(xué)不會而是不知道怎么串起來。小區(qū)物業(yè)管理系統(tǒng)這個名字聽起來老套但放到 Spring Boot 3 Vue 3 這個技術(shù)棧組合下它反而是最適合用來練全棧實戰(zhàn)的項目之一業(yè)務(wù)場景足夠貼近現(xiàn)實CRUD 密集又有權(quán)限控制、狀態(tài)流轉(zhuǎn)、前后端聯(lián)調(diào)、環(huán)境配置這些硬骨頭要啃。這篇文章我會直接按手把手帶敲的節(jié)奏來寫從后端工程初始化、數(shù)據(jù)庫表設(shè)計、JWT 認(rèn)證、日志配置到前端 Vite 項目搭建、核心頁面實現(xiàn)、聯(lián)調(diào)部署把每一步的關(guān)鍵細(xì)節(jié)和踩坑點全展開。這篇教程適合有一定 Java 和前端基礎(chǔ)、但還沒獨立完成過全棧項目的讀者也適合想快速把 Spring Boot 3 新特性落地一遍的開發(fā)者。1. 項目認(rèn)知與技術(shù)選型為什么是 Spring Boot 3 Vue 31.1 一個老項目的新價值物業(yè)管理系統(tǒng)確實是個被寫爛了的題目大學(xué)課程設(shè)計、培訓(xùn)機構(gòu)項目、畢業(yè)設(shè)計里到處都是。但你仔細(xì)想一下它之所以長盛不衰恰恰是因為它覆蓋了一個企業(yè)級應(yīng)用最常見的所有環(huán)節(jié)登錄認(rèn)證、角色權(quán)限、基礎(chǔ)數(shù)據(jù)維護業(yè)主、房產(chǎn)、業(yè)務(wù)流程報修工單從提交到處理到完成、財務(wù)記錄物業(yè)費、停車費、公告發(fā)布。這些場景的 CRUD 并不是無腦增刪改查每張表之間都有外鍵關(guān)聯(lián)每個接口都要考慮參數(shù)校驗、異常處理和權(quán)限約束這正好能把 Spring Boot 3 和 Vue 3 的核心知識點全部帶出來。還有一個更實際的理由這個項目做好了它可以直接寫進簡歷。比起仿某某電商項目一個你完整經(jīng)歷過設(shè)計、開發(fā)、部署全流程的物業(yè)管理系統(tǒng)在面試的時候反而更能講出細(xì)節(jié)——比如你當(dāng)時怎么設(shè)計的表結(jié)構(gòu)為什么用 JWT 不用 Session前端路由守衛(wèi)怎么控制頁面訪問權(quán)限。面試官問到的點你全都踩過坑這就是它最大的價值。1.2 系統(tǒng)模塊劃分與業(yè)務(wù)邊界開始敲代碼之前我強烈建議你先花半小時把模塊邊界劃清楚。別上來就建工程寫接口最后百分之百會返工。一個標(biāo)準(zhǔn)的物業(yè)管理系統(tǒng)最小可用版本我建議做這些模塊登錄認(rèn)證模塊管理員和業(yè)主兩種角色JWT 簽發(fā)與校驗Spring Security 配置。房產(chǎn)與業(yè)主管理小區(qū)樓棟、單元、房屋信息維護業(yè)主與房屋的綁定關(guān)系。費用管理物業(yè)費、水電費的賬單生成、繳費記錄、欠費統(tǒng)計。報修工單業(yè)主提交報修、物業(yè)人員接單、處理、完成狀態(tài)流轉(zhuǎn)。公告管理物業(yè)發(fā)布通知公告業(yè)主端可見。我特意砍掉了訪客管理、車位管理、投訴建議這些模塊不是它們不重要而是對于一個教學(xué)性質(zhì)的項目來說MVP 階段把這些核心鏈路跑通比堆功能有意義得多。你后續(xù)完全可以在同樣的架構(gòu)上繼續(xù)加表加接口套路都是一樣的。1.3 技術(shù)棧全景與版本鎖定版本鎖死是這種帶敲項目最關(guān)鍵的起步動作不然你搜教程的時候Spring Boot 2.7 的寫法放到 3.x 上大概率跑不起來。我這里直接給出一份我實際驗證過的版本清單技術(shù)組件推薦版本說明JDK17Spring Boot 3 強制要求 JDK 17 以上Spring Boot3.2.x穩(wěn)定版Jakarta EE 規(guī)范基礎(chǔ)Spring Security6.x隨 Spring Boot 3 內(nèi)置配置寫法變化大MyBatis-Plus3.5.x國產(chǎn)增強 ORM適合快速開發(fā)MySQL8.0性能和功能都夠用Vue3.4組合式 API setup 語法糖Vite5.x新一代前端構(gòu)建工具Element Plus2.xVue 3 生態(tài)最成熟的 UI 組件庫Pinia2.x替代 Vuex更簡潔的狀態(tài)管理Axios1.xHTTP 客戶端強調(diào)幾個容易被坑的點Spring Boot 3.x 的包名從javax遷移到了jakarta網(wǎng)上大量舊教程里的import javax.servlet到了 3.x 直接編譯不過Spring Security 6 的配置從原來的繼承WebSecurityConfigurerAdapter改成了基于SecurityFilterChainBean 的 lambda 風(fēng)格寫法這個不搞清楚光登錄認(rèn)證就能卡你一天。2. 后端動手實錄從零搭建 Spring Boot 3 工程2.1 初始化工程與 JDK 17 環(huán)境后端工程我建議直接用 start.spring.io 生成骨架別自己在 IDEA 里手動建 Maven 項目再補依賴容易漏。選好 Maven 項目和 Java 17依賴這里只需要先勾上 Spring Web、Spring Security、MySQL Driver、Lombok、ValidationORM 框架我們后面手動加 MyBatis-Plus因為 Spring Initializr 默認(rèn)沒有它的選項。生成后解壓用 IDEA 打開先看一眼pom.xml。Spring Boot 3.2.x 的父工程版本號會寫清楚你最好確認(rèn)一下自己本地的 Maven 用的是 JDK 17 編譯。這里有個小白最容易忽略的地方IDEA 里就算你把 Project SDK 設(shè)成了 17Maven 的maven.compiler.source和maven.compiler.target如果沒對上編譯出來的字節(jié)碼版本也可能不對。建議在pom.xml里顯式加一下properties java.version17/java.version maven.compiler.source17/maven.compiler.source maven.compiler.target17/maven.compiler.target /properties然后引入 MyBatis-Plus 的 Spring Boot 3 starter。注意MyBatis-Plus 從 3.5.3 開始才提供了專門的mybatis-plus-spring-boot3-starter依賴?yán)习姹驹?Spring Boot 3 下會報各種奇怪的兼容性錯誤dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-spring-boot3-starter/artifactId version3.5.5/version /dependency2.2 數(shù)據(jù)庫表設(shè)計與代碼生成在寫接口之前先建表。表設(shè)計的好壞直接決定后端代碼的復(fù)雜度我把核心表的字段梳理出來你自己建庫執(zhí)行即可。數(shù)據(jù)庫名建議用property_system字符集utf8mb4排序規(guī)則utf8mb4_unicode_ci。第一張是管理員/用戶表我直接叫sys_user字段包括id主鍵自增、username用戶名唯一、password密碼BCrypt 加密后存儲、real_name真實姓名、role角色ADMIN或OWNER、phone、status狀態(tài)。第二張是房屋表house_info字段id、building_no樓棟號、unit_no單元號、house_no房號、area面積、owner_id業(yè)主 ID外鍵、status入住狀態(tài)。第三張業(yè)主表owner_info字段id、name、phone、id_card身份證號、house_id關(guān)聯(lián)房屋、create_time。第四張費用表fee_record字段id、house_id、fee_type物業(yè)費/水費/電費、amount金額、status未繳/已繳、due_date到期日、pay_time繳費時間。第五張報修工單表repair_order字段id、owner_id報修人、house_id、title、description、status待處理/處理中/已完成、create_time、handler處理人。第六張公告表notice_info字段id、title、content、publish_time。就這六張表你仔細(xì)觀察一下業(yè)主和房屋是雙向關(guān)聯(lián)的房屋表有owner_id業(yè)主表也有house_id這種冗余在設(shè)計上是為了查詢方便但寫代碼的時候要小心別在新增業(yè)主和綁定房屋的時候忘記同步更新兩邊。我實際做的時候是讓房屋表成為主導(dǎo)業(yè)主表中的house_id主要用于業(yè)主端展示自己關(guān)聯(lián)的房子。表的引擎一律 InnoDB主鍵用BIGINT自增所有業(yè)務(wù)表都加上create_time和update_time兩個datetime字段。索引方面sys_user.username建唯一索引repair_order.owner_id、fee_record.house_id、house_info.owner_id建普通索引。這些都能讓后續(xù)分頁查詢少走不少彎路。2.3 JWT 認(rèn)證與 Spring Security 整合后端最核心的認(rèn)證流程我單獨拿出來講。Spring Boot 3 內(nèi)置的是 Spring Security 6配置方式和老版本完全不一樣。你如果以前是用extends WebSecurityConfigurerAdapter寫法的這里一定要轉(zhuǎn)變思路——現(xiàn)在是用SecurityFilterChainBean 加 lambda 表達式來聲明規(guī)則。先加 JWT 依賴我用的是io.jsonwebtoken的 jjwt 庫0.11.5 版本dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.11.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-impl/artifactId version0.11.5/version scoperuntime/scope /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-jackson/artifactId version0.11.5/version scoperuntime/scope /dependencyJWT 工具類JwtUtils核心方法就兩個generateToken生成 tokenparseToken解析 token。生成時把用戶 ID 和角色塞進 claims過期時間設(shè) 24 小時。注意 jjwt 0.11.x 的簽名密鑰要求至少 256 bit你直接寫一個常量字符串也行生產(chǎn)環(huán)境務(wù)必放到配置中心和加密存儲里教學(xué)項目寫在application.yml里即可。Spring Security 配置類關(guān)鍵代碼長這樣Configuration EnableWebSecurity public class SecurityConfig { Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http.csrf(csrf - csrf.disable()) .sessionManagement(session - session.sessionCreationPolicy(SessionCreationPolicy.STATELESS)) .authorizeHttpRequests(auth - auth .requestMatchers(/api/auth/login, /api/auth/register).permitAll() .requestMatchers(/api/admin/**).hasRole(ADMIN) .anyRequest().authenticated() ) .exceptionHandling(ex - ex.authenticationEntryPoint(jwtAuthenticationEntryPoint)) .addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class); return http.build(); } }三個重點第一csrf.disable()必須寫前后端分離項目壓根不需要 CSRF Token第二sessionManagement設(shè)成STATELESS因為 JWT 本身就是無狀態(tài)的你不需要服務(wù)端保存任何會話第三自定義的JwtAuthenticationFilter要搶在默認(rèn)認(rèn)證過濾器之前執(zhí)行它的作用是從請求頭的Authorization字段里把 token 取出來解析后把用戶信息放進SecurityContextHolder。登錄接口的邏輯不復(fù)雜接收用戶名密碼 - 用BCryptPasswordEncoder校驗密碼 - 生成 token 返回給前端。這里我強烈建議你用 MyBatis-Plus 的LambdaQueryWrapper查用戶不要手寫 XML SQL省太多事了。2.4 日志配置logback-spring.xml 和 log4j2 二選一日志這個東西平時沒人看出了線上問題恨不得穿越回去補上。Spring Boot 3 默認(rèn)用的是 Logback內(nèi)置的spring-boot-starter-logging已經(jīng)幫我們接好了。但很多講究一點的項目組會切換成 Log4j2性能更好功能更豐富。這里我兩種方案都說一下。如果你繼續(xù)用默認(rèn) Logback我不建議你直接改logback.xml這個名字因為 Spring Boot 官方推薦用logback-spring.xml這個命名允許你在配置里使用springProfile標(biāo)簽做環(huán)境區(qū)分。我在這個項目里用的是 Logback配置文件放在src/main/resources/logback-spring.xml大致結(jié)構(gòu)如下?xml version1.0 encodingUTF-8? configuration springProfile namedev appender nameCONSOLE classch.qos.logback.core.ConsoleAppender encoder pattern%d{yyyy-MM-dd HH:mm:ss.SSS} %-5level [%thread] %logger{36} - %msg%n/pattern /encoder /appender root levelINFO appender-ref refCONSOLE/ /root /springProfile springProfile nameprod appender nameFILE classch.qos.logback.core.rolling.RollingFileAppender filelogs/property-system.log/file rollingPolicy classch.qos.logback.core.rolling.TimeBasedRollingPolicy fileNamePatternlogs/property-system.%d{yyyy-MM-dd}.log/fileNamePattern maxHistory30/maxHistory /rollingPolicy encoder pattern%d{yyyy-MM-dd HH:mm:ss.SSS} %-5level [%thread] %logger{36} - %msg%n/pattern /encoder /appender root levelWARN appender-ref refFILE/ /root /springProfile /configuration開發(fā)環(huán)境打印到控制臺生產(chǎn)環(huán)境按天滾動寫文件并保留 30 天這是最常見的標(biāo)準(zhǔn)配置。如果你想讓控制臺日志帶顏色pattern里用%highlight(%level)和%cyan(%logger{36})包一下就行。如果要切 Log4j2操作也不復(fù)雜先從spring-boot-starter-web里排除掉spring-boot-starter-logging再把spring-boot-starter-log4j2加進依賴最后在resources下建立log4j2-spring.xml。這個命名同樣是為了讓 Spring Boot 自動識別log4j2.xml也可以但優(yōu)先級會變化。Log4j2 的配置核心是RollingFile加PatternLayout性能確實比 Logback 好一些但在這種 CRUD 為主的系統(tǒng)里感知差異不大選一個你熟練的就好。我再提醒一點日志里永遠(yuǎn)別打用戶的明文密碼和身份證號。我之前見過有人為了方便排查在登錄接口打印了完整的入?yún)ο筮@要是數(shù)據(jù)泄露了鍋全在寫日志的人身上。3. 前端 Vite Vue 3 開發(fā)實錄核心頁面逐個擊破3.1 創(chuàng)建工程Vue 3 安裝與 Vite 環(huán)境搭建前端工程我用 Vite 創(chuàng)建命令是npm create vitelatest property-web -- --template vue。這里注意 Node.js 版本最好 18Vite 5 對 Node 版本有硬性要求太舊了會直接報錯。創(chuàng)建好之后先安裝基礎(chǔ)依賴我把命令直接貼出來cd property-web npm install vue-router4 pinia axios element-plus sass這里有兩個細(xì)節(jié)。第一個是 SassVue 3 項目里用langscss寫樣式之前一定要先把sass這個依賴裝上Vite 會自動識別并編譯 scss 文件不裝的話組件跑起來控制臺會飄紅。熱詞里搜vue3 安裝 scss的人特別多大多數(shù)就是漏了這一步。裝的時候注意新版本sass包用的是現(xiàn)代 API個別老項目里import的寫法可能報廢棄警告問題不大但不舒服建議直接用use語法。第二個細(xì)節(jié)是 Vite 配置請求代理這個屬于聯(lián)調(diào)關(guān)鍵點我放到后面專門講。Element Plus 的引入方式我建議先全局引入省心import ElementPlus from element-plus import element-plus/dist/index.css app.use(ElementPlus)等你的項目大到一定程度再考慮按需自動引入用unplugin-vue-components和unplugin-auto-import兩個插件配合搞定。初期全局引入對學(xué)習(xí)階段來說完全夠用。3.2 布局與路由后臺管理界面的骨架物業(yè)管理系統(tǒng)的前端是一個典型的中后臺管理界面我不會用太多花里胡哨的設(shè)計一個干凈的布局就夠了左側(cè)側(cè)邊欄菜單頂部頂欄放用戶信息和退出按鈕中間內(nèi)容區(qū)域是路由出口router-view。路由表我分成兩部分公共路由和動態(tài)路由。公共路由只有/login和/register剩下的/home、/owner、/house、/fee、/repair、/notice全部掛在Layout組件下作為子路由。這樣實現(xiàn)的效果是訪問系統(tǒng)主頁時是帶側(cè)邊欄的整體布局而登錄頁是獨立的無邊框頁面。路由守衛(wèi)是前端的重點也是熱詞里vue3 登錄不跳轉(zhuǎn)的高發(fā)區(qū)。正確的邏輯是在router.beforeEach里判斷l(xiāng)ocalStorage.getItem(token)是否存在不存在則跳轉(zhuǎn)到/login存在則放行。同時還要處理一種邊界情況用戶已經(jīng)登錄了還去訪問登錄頁這屬于多余操作直接next({ path: / })重定向回首頁。很多人寫著寫著發(fā)現(xiàn)登錄成功后點擊跳轉(zhuǎn)沒反應(yīng)十有八九是這里邏輯寫擰了。router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.path /login) { token ? next(/) : next() } else { token ? next() : next(/login) } })這個寫法不是最優(yōu)的但對你理解路由守衛(wèi)的運作機制最直接。真實項目里一般會把路由表動態(tài)生成用后端返回的菜單數(shù)據(jù)做篩選這就是另外一個話題了。3.3 業(yè)主管理頁CRUD 加搜索條件保留登錄框架搭完我們來敲第一個完整的核心頁面——業(yè)主管理。這個頁面能帶出你后面所有 CRUD 頁面的套路認(rèn)真過一遍后面房屋管理、費用管理就是照貓畫虎。template 部分的結(jié)構(gòu)是頂部搜索區(qū)輸入框 搜索/重置按鈕、中間表格區(qū)、底部彈窗表單。搜索區(qū)用el-form的inline屬性el-form :inlinetrue :modelsearchForm submit.prevent el-form-item label業(yè)主姓名 el-input v-modelsearchForm.name placeholder請輸入業(yè)主姓名 clearable / /el-form-item el-form-item el-button typeprimary clickhandleSearch搜索/el-button el-button clickhandleReset重置/el-button /el-form-item /el-form這里有個熱詞叫vue3 搜索條件保留意思是搜索完翻頁、跳轉(zhuǎn)詳情后回來搜索條件應(yīng)該還在。我給你的方案是搜索條件放在回應(yīng)組件的reactive對象里當(dāng)路由跳轉(zhuǎn)到別處再返回時因為組件被keep-alive緩存了數(shù)據(jù)自然還在。但 keep-alive 會帶來一個新問題——組件的onMounted在第二次進入時不會重新觸發(fā)你需要用onActivated鉤子來做數(shù)據(jù)刷新。這兩者的配合算是我實際開發(fā)里最經(jīng)常踩的組合坑。表格區(qū)直接用el-table綁數(shù)據(jù)el-table :datatableData border stripe v-loadingloading el-table-column propname label業(yè)主姓名 / el-table-column propphone label聯(lián)系電話 / el-table-column prophouseInfo label關(guān)聯(lián)房屋 / el-table-column label操作 template #default{ row } el-button link typeprimary clickhandleEdit(row)編輯/el-button el-popconfirm title確定刪除該業(yè)主 confirmhandleDelete(row.id) template #reference el-button link typedanger刪除/el-button /template /el-popconfirm /template /el-table-column /el-table刪除操作一定要加二次確認(rèn)彈窗el-popconfirm是 Element Plus 里最簡單直接的選擇。后端接口設(shè)計GET /api/owner/page分頁查詢參數(shù)是pageNum、pageSize、name模糊查詢POST /api/owner新增PUT /api/owner更新DELETE /api/owner/{id}刪除。這套接口命名風(fēng)格前后端統(tǒng)一別搞出/api/getOwnerList或者/api/updateOwner這種不倫不類的名字。彈窗表單校驗用el-form的rules屬性這個也是熱詞里vue3 rules 日期檢驗和動態(tài)校驗的高頻區(qū)。常見規(guī)則對象我簡單列一下const rules { name: [{ required: true, message: 請輸入業(yè)主姓名, trigger: blur }], phone: [ { required: true, message: 請輸入聯(lián)系電話, trigger: blur }, { pattern: /^1[3-9]\d{9}$/, message: 手機號格式不正確, trigger: blur } ] }日期類字段的校驗稍微特殊一點你用el-date-picker選完的值是 Date 對象但提交給后端前要格式化成字符串。我看過太多人在這里栽跟頭前端校驗都過了傳給后端卻報參數(shù)類型錯誤。解決方式是用dayjs或者直接new Date(value).toISOString().slice(0, 10)建議統(tǒng)一用 dayjs 格式化Element Plus 本身就內(nèi)置了 dayjs你不用額外裝。3.4 報修工單頁動態(tài)表單與日期校驗報修工單模塊比業(yè)主管理更復(fù)雜的地方在于可能存在同一個報修單里有多項維修內(nèi)容的情況比如這次要換燈泡、修水龍頭、檢查電路。如果只能用靜態(tài)表單提交用戶得反復(fù)填好幾遍報修單。我這里的做法是彈窗表單中提供動態(tài)添加刪除明細(xì)行的功能。核心思路是用數(shù)組detailList配合v-for渲染表單項每一行都可以單獨移除同時提供一個添加行按鈕向數(shù)組里 push 一個新對象div v-for(item, index) in form.detailList :keyindex el-input v-modelitem.content placeholder維修內(nèi)容 / el-input-number v-modelitem.amount :min0 placeholder預(yù)估費用 / el-button clickremoveDetail(index) :disabledform.detailList.length 1移除/el-button /div el-button clickaddDetail添加維修項/el-button這個功能看起來簡單但有一個容易忽略的細(xì)節(jié)每一行的key千萬不要用index因為你刪除中間某一行時Vue 的 diff 會復(fù)用 DOM導(dǎo)致輸入框里的值和數(shù)據(jù)錯位。我當(dāng)年第一次寫動態(tài)表單就碰上了這個問題key改成用Date.now() Math.random()生成唯一 ID 后這個問題徹底消失。熱詞里搜vue3 動態(tài)添加刪除 form 表單一行數(shù)據(jù)的人遇到的絕大多數(shù)情況就是這個原因。工單表單的狀態(tài)流轉(zhuǎn)也是一個值得展開的細(xì)節(jié)。列表頁上工單有待處理、處理中、已完成三種狀態(tài)我用el-tag加不同類型來區(qū)分顯示切換狀態(tài)的按鈕根據(jù)當(dāng)前狀態(tài)動態(tài)渲染。比如待處理 - 顯示接單按鈕點擊后置為處理中處理中 - 顯示完成按鈕點擊后置為已完成已完成 - 不顯示任何操作按鈕僅展示狀態(tài)變化要調(diào)用后端接口而不是只在前端改數(shù)組這是很多人寫前端時容易犯的毛病——刷新頁面狀態(tài)就丟了。接口設(shè)計一個PUT /api/repair/{id}/status請求體里帶新的狀態(tài)值即可。3.5 Axios 封裝與 Token 注入前后端聯(lián)通的關(guān)鍵前端頁面寫得再好看調(diào)不動后端接口就是廢的。Axios 封裝這一節(jié)我建議你嚴(yán)格按下面的套路來能少掉很多頭發(fā)。先建一個utils/request.js創(chuàng)建 axios 實例設(shè)置baseURL和超時時間。這里注意baseURL要區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境。開發(fā)環(huán)境用相對路徑/api靠 Vite 代理轉(zhuǎn)發(fā)到后端生產(chǎn)環(huán)境可以也寫相對路徑然后讓 Nginx 統(tǒng)一轉(zhuǎn)發(fā)這是最靈活的方式。然后在請求攔截器里帶上 tokenconst service axios.create({ baseURL: /api, timeout: 10000 }) service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer token } return config }) service.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.message || 請求失敗) return Promise.reject(new Error(res.message)) } return res }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) router.push(/login) } ElMessage.error(error.message || 網(wǎng)絡(luò)異常) return Promise.reject(error) } )響應(yīng)攔截器的 401 處理是登錄態(tài)失效的關(guān)鍵兜底token 過期了自動清除本地 token 并跳回登錄頁。熱詞vue3 登錄不跳轉(zhuǎn)有兩種常見情況一個是前面說的路由守衛(wèi)邏輯寫錯另一個就是這里——請求返回 401 但沒有跳轉(zhuǎn)用戶還以為自己在登錄頁什么反應(yīng)都沒有。兩者都排查過基本能解決九成問題。后端接口統(tǒng)一約定的返回結(jié)構(gòu)是{ code: 200, message: success, data: {...} }所以前端拿到response.data之后先解構(gòu)檢查code。這個結(jié)構(gòu)在后端我用一個ResultT泛型類統(tǒng)一返回前后端約定清楚寫起來就不會各搞各的。3.6 Vite 代理與跨域問題環(huán)境配置的坑熱詞里有個vue3 vite dev 局域網(wǎng)打開空白另一個是vue3 訪問后端。這兩個其實都和 Vite 配置有關(guān)。vite.config.js里的server.proxy配置解決的是開發(fā)環(huán)境下前端向后端發(fā)請求的跨域問題export default defineConfig({ server: { host: 0.0.0.0, port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })設(shè)置host: 0.0.0.0之后你同一局域網(wǎng)內(nèi)的手機和另一臺電腦就可以通過你的局域網(wǎng) IP 訪問前端頁面了。默認(rèn)情況下 Vite 只監(jiān)聽localhost其他設(shè)備訪問會直接白屏或者連接拒絕這就是局域網(wǎng)打開空白的最常見原因。關(guān)于跨域還有一個后端的兜底配置。在 Spring Boot 里寫一個WebMvcConfigurer配置類加CorsRegistry或者在 Spring Security 的過濾器鏈上加http.cors(cors - cors.configurationSource(corsConfigurationSource()))二選一。我實際開發(fā)中只要前端配了 Vite 代理后端其實不需要額外處理 CORS。但如果你哪天直接不通過代理讓前端頁面里寫絕對的http://localhost:8080那就必須后端開 CORS 了。兩種方案都能走通但在項目里保持一致我推薦代理方案干凈利落。4. 前后端聯(lián)調(diào)、部署與實戰(zhàn)避坑4.1 經(jīng)典問題排查速查表做完整項目流程聯(lián)調(diào)階段是最折磨人的。我從自己的實戰(zhàn)經(jīng)歷和各路踩坑帖里整理了一份高頻問題速查表每個問題都是我親眼見過或者親身體會過的你按表排查效率會高很多現(xiàn)象可能原因排查思路與修復(fù)方式前端請求 404Vite 代理沒配置 / 后端接口路徑不匹配先看瀏覽器 Network 面板的請求 URL確認(rèn)是不是經(jīng)過代理轉(zhuǎn)發(fā)到了正確的http://localhost:8080再看后端RequestMapping路徑登錄后不跳轉(zhuǎn)路由守衛(wèi)邏輯問題 / 登錄成功后沒有執(zhí)行router.push登錄接口返回后先打印 token 是否存進localStorage再檢查路由守衛(wèi)中 token 判斷邏輯請求返回 401token 沒帶 / token 過期 / 白名單路徑寫錯檢查前端請求攔截器是否注入了Authorization頭檢查 Security 配置中.permitAll()路徑是否覆蓋了登錄、注冊接口Element Plus 的 upload on-success 不觸發(fā)使用了http-request自定義上傳 / 響應(yīng)格式不符如果用自定義上傳要自己調(diào)options.onSuccess()如果沒有自定義上傳確認(rèn)后端返回結(jié)構(gòu)是否為{ code, data }格式動態(tài)表單行數(shù)據(jù)錯位v-for的key用了index改成業(yè)務(wù)唯一值如時間戳生成的 ID編譯報錯Cannot find module sass沒裝 sass 依賴執(zhí)行npm install -D sass局域網(wǎng)訪問前端白屏server.host沒有設(shè)為0.0.0.0修改 Vite 配置后重啟 dev serverSpring Boot 啟動報Failed to configure a DataSource數(shù)據(jù)庫連接配置缺失確認(rèn)application.yml中spring.datasource.url/username/password是否正確MySQL 服務(wù)是否啟動我重點展開幾個表里沒有完全說透的。第一個是 Element Plus Upload 的on-success監(jiān)聽不到這個問題在熱詞里出現(xiàn)頻率很高。如果你用的是默認(rèn)的上傳方式Element Plus 會自行發(fā)請求on-success觸發(fā)條件要求后端返回的 JSON 必須能被解析。但如果你用了http-request屬性自定義上傳邏輯那么組件完全不會監(jiān)聽后臺的響應(yīng)——你需要在上傳邏輯里手動調(diào)用options.onSuccess(responseData)才能觸發(fā)這個回調(diào)。這一點文檔寫得很隱晦坑了不少人。第二個是vxetable 避免 vue3 首屏加載。這個不是物業(yè)系統(tǒng)的必選項但如果你覺得 El-Table 在大數(shù)據(jù)量下卡頓換成 vxe-table 是很常見的選擇。首屏加載慢的主要原因是把大型組件庫全部全局引入了解決思路是路由懶加載加組件按需引入const OwnerManage () import(/views/owner/OwnerManage.vue)用箭頭函數(shù)包一層就是懶加載Vue Router 會自動在路由命中時才加載對應(yīng)組件首屏 JS 體積能小不少。vxe-table 本身也有按需引入插件的機制需要什么功能就引入對應(yīng)的模塊不用的千萬別全量注冊。第三個是 Spring Boot 3 的接口參數(shù)校驗。Controller 層如果不在參數(shù)上做校驗臟數(shù)據(jù)直接打進數(shù)據(jù)庫后面排查到崩潰。我在Owner實體類上用 Jakarta Validation 的注解NotBlank、Pattern、Email等Controller 接收參數(shù)時加Validated注解。同時用RestControllerAdvice寫一個全局異常處理器統(tǒng)一捕獲MethodArgumentNotValidException返回結(jié)構(gòu)合法的錯誤提示。記住 Spring Boot 3 這些校驗注解的包名也改成了jakarta.validation.*引錯包會編譯不過。4.2 打包部署前后端分離的上線流程項目開發(fā)完總要部署。前后端分離項目的主流方案是兩種我都給你過一遍。第一種最簡單前端構(gòu)建產(chǎn)物塞進后端的src/main/resources/static目錄。執(zhí)行npm run build后dist目錄里的文件就是純靜態(tài)資源把它復(fù)制到后端的 static 目錄下然后mvn clean package打成單個 jar 包java -jar property-system.jar一條命令啟動瀏覽器訪問http://服務(wù)器IP:8080就能看到完整的系統(tǒng)。這個方案的優(yōu)點是部署成本低適合小而美的單體項目缺點是前后端耦合了前端一改版就得重新打后端包。第二種是標(biāo)準(zhǔn)前后端分離部署后端仍以 jar 包形式跑在 8080前端dist目錄交給 NginxNginx 配置一個location /指向前端文件location /api反向代理到后端。我用一份最簡 Nginx 配置示例server { listen 80; server_name your-domain.com; location / { root /usr/share/nginx/html/property-web; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }try_files $uri $uri/ /index.html;這行非常重要Vue Router 默認(rèn)是 history 模式前端路由直接訪問/owner在刷新時就是一次真實 HTTP 請求如果沒有這行配置Nginx 會返回 404。這個坑在部署階段出現(xiàn)率極高我做過好幾次了每次都要檢查一遍有沒有漏掉。部署完別急著慶祝先用幾條命令做冒煙測試。后端看日志有沒有啟動報錯curl http://127.0.0.1:8080/api/...試試接口通不通前端打開頁面 F12 控制臺看有沒有紅色的網(wǎng)絡(luò)請求失敗。生產(chǎn)環(huán)境配置文件里數(shù)據(jù)庫密碼、JWT 密鑰這些敏感信息建議通過環(huán)境變量注入不要直接硬編碼在 yml 文件里不然代碼倉庫一泄漏生產(chǎn)環(huán)境就裸奔了。4.3 從源碼理解 Vue 3面試能講的加分點項目做完以后你如果打算拿它去面試一定要能講清楚 Vue 3 的底層原理而不是只會寫業(yè)務(wù)。熱詞里vue3 源碼解析、vue3 computed、vue3 面試最經(jīng)典 6 個問題都是高頻考點。我給你提煉幾個從源碼層面回答的點。Vue 3 的響應(yīng)式系統(tǒng)是基于Proxy實現(xiàn)的和 Vue 2 的Object.defineProperty完全不同。reactive是用Proxy對對象進行代理攔截 get、set、deleteProperty 等操作完成依賴收集和觸發(fā)更新。ref則是對基本類型數(shù)據(jù)的包裝內(nèi)部通過RefImpl類管理一個 value 屬性訪問.value時觸發(fā)依賴收集賦值時觸發(fā)更新。這個設(shè)計解決了 Vue 2 里新增屬性、刪除屬性無法被檢測到的問題。computed的原理是基于惰性求值和緩存兩個機制。它的內(nèi)部實現(xiàn)了一個ComputedRefImpl有一個_dirty標(biāo)志位第一次訪問時執(zhí)行 getter 函數(shù)算出值后續(xù)訪問如果依賴沒有變化直接返回緩存結(jié)果只有依賴的響應(yīng)式數(shù)據(jù)發(fā)生變化時_dirty才會重新置為 true下次訪問才會重新計算。這就解釋了為什么在模板中多處使用同一個 computed 屬性只會計算一次性能優(yōu)于調(diào)用普通方法。watch和watchEffect是另一個高頻考點。watch需要顯式指定監(jiān)聽的來源并且可以拿到新值和舊值watchEffect則會自動追蹤回調(diào)里訪問的所有響應(yīng)式數(shù)據(jù)。源碼層面兩者最終都走的是doWatch這個函數(shù)只是參數(shù)和觸發(fā)時機有差異。面試官只要聽到你能從實現(xiàn)層面答出來印象分會明顯不一樣。4.4 一個真實的工程化體驗從 0 到 1 的沉淀最后說一下我在整個項目開發(fā)過程中最真實的體會。做這類管理系統(tǒng)的關(guān)鍵從來不是某個技術(shù)點的高深用法而是規(guī)范兩個字。前端接口路徑、后端返回結(jié)構(gòu)、命名風(fēng)格、異常處理方式、日志規(guī)范這些統(tǒng)一了聯(lián)調(diào)效率能翻幾倍各寫各的代碼規(guī)模一大就是一場災(zāi)難。還有一定要從一開始就學(xué)會看控制臺的報錯信息。很多新手前端一報錯就問別人其實瀏覽器 DevTools 的 Console 面板已經(jīng)把問題說得明明白白了——是哪一行代碼、哪個接口失敗、什么類型的錯誤。后端異常也一樣Spring Boot 啟動時的堆棧信息是最直接的診斷依據(jù)。學(xué)會讀報錯是獨立開發(fā)者的基本功。我個人在實際操作中的體會是這個項目第二遍、第三遍做的時候速度會快到你想象不到因為你已經(jīng)把所有的坑都踩過一遍了。你能開始講出這里的 key 不能用 index要用唯一 ID這里的代理配置漏了 host 字段這里的校驗注解包名是 jakarta 不是 javax這類經(jīng)驗就說明它已經(jīng)真正內(nèi)化成你自己的技能了。小區(qū)物業(yè)管理系統(tǒng)確實是個老項目但用 Spring Boot 3 Vue 3 整個技術(shù)棧重寫一遍的工程化過程含金量依然足夠高。這套流程跑通之后遷移到商城、進銷存、內(nèi)容管理都只是業(yè)務(wù)層面的事架構(gòu)上你已經(jīng)站住腳了。 Spring Boot 3 + Vue 3 物業(yè)管理系統(tǒng)全棧實戰(zhàn)
在 Java 后端圈子里Spring Boot 3 已經(jīng)成了繞不開的話題前端這邊 Vue 3 的組合式 API 也早就普及。但很多初學(xué)者最頭疼的問題不是學(xué)不會而是不知道怎么串起來。小區(qū)物業(yè)管理系統(tǒng)這個名字聽起來老套但放到 Spring Boot 3 Vue 3 這個技術(shù)棧組合下它反而是最適合用來練全棧實戰(zhàn)的項目之一業(yè)務(wù)場景足夠貼近現(xiàn)實CRUD 密集又有權(quán)限控制、狀態(tài)流轉(zhuǎn)、前后端聯(lián)調(diào)、環(huán)境配置這些硬骨頭要啃。這篇文章我會直接按手把手帶敲的節(jié)奏來寫從后端工程初始化、數(shù)據(jù)庫表設(shè)計、JWT 認(rèn)證、日志配置到前端 Vite 項目搭建、核心頁面實現(xiàn)、聯(lián)調(diào)部署把每一步的關(guān)鍵細(xì)節(jié)和踩坑點全展開。這篇教程適合有一定 Java 和前端基礎(chǔ)、但還沒獨立完成過全棧項目的讀者也適合想快速把 Spring Boot 3 新特性落地一遍的開發(fā)者。1. 項目認(rèn)知與技術(shù)選型為什么是 Spring Boot 3 Vue 31.1 一個老項目的新價值物業(yè)管理系統(tǒng)確實是個被寫爛了的題目大學(xué)課程設(shè)計、培訓(xùn)機構(gòu)項目、畢業(yè)設(shè)計里到處都是。但你仔細(xì)想一下它之所以長盛不衰恰恰是因為它覆蓋了一個企業(yè)級應(yīng)用最常見的所有環(huán)節(jié)登錄認(rèn)證、角色權(quán)限、基礎(chǔ)數(shù)據(jù)維護業(yè)主、房產(chǎn)、業(yè)務(wù)流程報修工單從提交到處理到完成、財務(wù)記錄物業(yè)費、停車費、公告發(fā)布。這些場景的 CRUD 并不是無腦增刪改查每張表之間都有外鍵關(guān)聯(lián)每個接口都要考慮參數(shù)校驗、異常處理和權(quán)限約束這正好能把 Spring Boot 3 和 Vue 3 的核心知識點全部帶出來。還有一個更實際的理由這個項目做好了它可以直接寫進簡歷。比起仿某某電商項目一個你完整經(jīng)歷過設(shè)計、開發(fā)、部署全流程的物業(yè)管理系統(tǒng)在面試的時候反而更能講出細(xì)節(jié)——比如你當(dāng)時怎么設(shè)計的表結(jié)構(gòu)為什么用 JWT 不用 Session前端路由守衛(wèi)怎么控制頁面訪問權(quán)限。面試官問到的點你全都踩過坑這就是它最大的價值。1.2 系統(tǒng)模塊劃分與業(yè)務(wù)邊界開始敲代碼之前我強烈建議你先花半小時把模塊邊界劃清楚。別上來就建工程寫接口最后百分之百會返工。一個標(biāo)準(zhǔn)的物業(yè)管理系統(tǒng)最小可用版本我建議做這些模塊登錄認(rèn)證模塊管理員和業(yè)主兩種角色JWT 簽發(fā)與校驗Spring Security 配置。房產(chǎn)與業(yè)主管理小區(qū)樓棟、單元、房屋信息維護業(yè)主與房屋的綁定關(guān)系。費用管理物業(yè)費、水電費的賬單生成、繳費記錄、欠費統(tǒng)計。報修工單業(yè)主提交報修、物業(yè)人員接單、處理、完成狀態(tài)流轉(zhuǎn)。公告管理物業(yè)發(fā)布通知公告業(yè)主端可見。我特意砍掉了訪客管理、車位管理、投訴建議這些模塊不是它們不重要而是對于一個教學(xué)性質(zhì)的項目來說MVP 階段把這些核心鏈路跑通比堆功能有意義得多。你后續(xù)完全可以在同樣的架構(gòu)上繼續(xù)加表加接口套路都是一樣的。1.3 技術(shù)棧全景與版本鎖定版本鎖死是這種帶敲項目最關(guān)鍵的起步動作不然你搜教程的時候Spring Boot 2.7 的寫法放到 3.x 上大概率跑不起來。我這里直接給出一份我實際驗證過的版本清單技術(shù)組件推薦版本說明JDK17Spring Boot 3 強制要求 JDK 17 以上Spring Boot3.2.x穩(wěn)定版Jakarta EE 規(guī)范基礎(chǔ)Spring Security6.x隨 Spring Boot 3 內(nèi)置配置寫法變化大MyBatis-Plus3.5.x國產(chǎn)增強 ORM適合快速開發(fā)MySQL8.0性能和功能都夠用Vue3.4組合式 API setup 語法糖Vite5.x新一代前端構(gòu)建工具Element Plus2.xVue 3 生態(tài)最成熟的 UI 組件庫Pinia2.x替代 Vuex更簡潔的狀態(tài)管理Axios1.xHTTP 客戶端強調(diào)幾個容易被坑的點Spring Boot 3.x 的包名從javax遷移到了jakarta網(wǎng)上大量舊教程里的import javax.servlet到了 3.x 直接編譯不過Spring Security 6 的配置從原來的繼承WebSecurityConfigurerAdapter改成了基于SecurityFilterChainBean 的 lambda 風(fēng)格寫法這個不搞清楚光登錄認(rèn)證就能卡你一天。2. 后端動手實錄從零搭建 Spring Boot 3 工程2.1 初始化工程與 JDK 17 環(huán)境后端工程我建議直接用 start.spring.io 生成骨架別自己在 IDEA 里手動建 Maven 項目再補依賴容易漏。選好 Maven 項目和 Java 17依賴這里只需要先勾上 Spring Web、Spring Security、MySQL Driver、Lombok、ValidationORM 框架我們后面手動加 MyBatis-Plus因為 Spring Initializr 默認(rèn)沒有它的選項。生成后解壓用 IDEA 打開先看一眼pom.xml。Spring Boot 3.2.x 的父工程版本號會寫清楚你最好確認(rèn)一下自己本地的 Maven 用的是 JDK 17 編譯。這里有個小白最容易忽略的地方IDEA 里就算你把 Project SDK 設(shè)成了 17Maven 的maven.compiler.source和maven.compiler.target如果沒對上編譯出來的字節(jié)碼版本也可能不對。建議在pom.xml里顯式加一下properties java.version17/java.version maven.compiler.source17/maven.compiler.source maven.compiler.target17/maven.compiler.target /properties然后引入 MyBatis-Plus 的 Spring Boot 3 starter。注意MyBatis-Plus 從 3.5.3 開始才提供了專門的mybatis-plus-spring-boot3-starter依賴?yán)习姹驹?Spring Boot 3 下會報各種奇怪的兼容性錯誤dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-spring-boot3-starter/artifactId version3.5.5/version /dependency2.2 數(shù)據(jù)庫表設(shè)計與代碼生成在寫接口之前先建表。表設(shè)計的好壞直接決定后端代碼的復(fù)雜度我把核心表的字段梳理出來你自己建庫執(zhí)行即可。數(shù)據(jù)庫名建議用property_system字符集utf8mb4排序規(guī)則utf8mb4_unicode_ci。第一張是管理員/用戶表我直接叫sys_user字段包括id主鍵自增、username用戶名唯一、password密碼BCrypt 加密后存儲、real_name真實姓名、role角色ADMIN或OWNER、phone、status狀態(tài)。第二張是房屋表house_info字段id、building_no樓棟號、unit_no單元號、house_no房號、area面積、owner_id業(yè)主 ID外鍵、status入住狀態(tài)。第三張業(yè)主表owner_info字段id、name、phone、id_card身份證號、house_id關(guān)聯(lián)房屋、create_time。第四張費用表fee_record字段id、house_id、fee_type物業(yè)費/水費/電費、amount金額、status未繳/已繳、due_date到期日、pay_time繳費時間。第五張報修工單表repair_order字段id、owner_id報修人、house_id、title、description、status待處理/處理中/已完成、create_time、handler處理人。第六張公告表notice_info字段id、title、content、publish_time。就這六張表你仔細(xì)觀察一下業(yè)主和房屋是雙向關(guān)聯(lián)的房屋表有owner_id業(yè)主表也有house_id這種冗余在設(shè)計上是為了查詢方便但寫代碼的時候要小心別在新增業(yè)主和綁定房屋的時候忘記同步更新兩邊。我實際做的時候是讓房屋表成為主導(dǎo)業(yè)主表中的house_id主要用于業(yè)主端展示自己關(guān)聯(lián)的房子。表的引擎一律 InnoDB主鍵用BIGINT自增所有業(yè)務(wù)表都加上create_time和update_time兩個datetime字段。索引方面sys_user.username建唯一索引repair_order.owner_id、fee_record.house_id、house_info.owner_id建普通索引。這些都能讓后續(xù)分頁查詢少走不少彎路。2.3 JWT 認(rèn)證與 Spring Security 整合后端最核心的認(rèn)證流程我單獨拿出來講。Spring Boot 3 內(nèi)置的是 Spring Security 6配置方式和老版本完全不一樣。你如果以前是用extends WebSecurityConfigurerAdapter寫法的這里一定要轉(zhuǎn)變思路——現(xiàn)在是用SecurityFilterChainBean 加 lambda 表達式來聲明規(guī)則。先加 JWT 依賴我用的是io.jsonwebtoken的 jjwt 庫0.11.5 版本dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.11.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-impl/artifactId version0.11.5/version scoperuntime/scope /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-jackson/artifactId version0.11.5/version scoperuntime/scope /dependencyJWT 工具類JwtUtils核心方法就兩個generateToken生成 tokenparseToken解析 token。生成時把用戶 ID 和角色塞進 claims過期時間設(shè) 24 小時。注意 jjwt 0.11.x 的簽名密鑰要求至少 256 bit你直接寫一個常量字符串也行生產(chǎn)環(huán)境務(wù)必放到配置中心和加密存儲里教學(xué)項目寫在application.yml里即可。Spring Security 配置類關(guān)鍵代碼長這樣Configuration EnableWebSecurity public class SecurityConfig { Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http.csrf(csrf - csrf.disable()) .sessionManagement(session - session.sessionCreationPolicy(SessionCreationPolicy.STATELESS)) .authorizeHttpRequests(auth - auth .requestMatchers(/api/auth/login, /api/auth/register).permitAll() .requestMatchers(/api/admin/**).hasRole(ADMIN) .anyRequest().authenticated() ) .exceptionHandling(ex - ex.authenticationEntryPoint(jwtAuthenticationEntryPoint)) .addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class); return http.build(); } }三個重點第一csrf.disable()必須寫前后端分離項目壓根不需要 CSRF Token第二sessionManagement設(shè)成STATELESS因為 JWT 本身就是無狀態(tài)的你不需要服務(wù)端保存任何會話第三自定義的JwtAuthenticationFilter要搶在默認(rèn)認(rèn)證過濾器之前執(zhí)行它的作用是從請求頭的Authorization字段里把 token 取出來解析后把用戶信息放進SecurityContextHolder。登錄接口的邏輯不復(fù)雜接收用戶名密碼 - 用BCryptPasswordEncoder校驗密碼 - 生成 token 返回給前端。這里我強烈建議你用 MyBatis-Plus 的LambdaQueryWrapper查用戶不要手寫 XML SQL省太多事了。2.4 日志配置logback-spring.xml 和 log4j2 二選一日志這個東西平時沒人看出了線上問題恨不得穿越回去補上。Spring Boot 3 默認(rèn)用的是 Logback內(nèi)置的spring-boot-starter-logging已經(jīng)幫我們接好了。但很多講究一點的項目組會切換成 Log4j2性能更好功能更豐富。這里我兩種方案都說一下。如果你繼續(xù)用默認(rèn) Logback我不建議你直接改logback.xml這個名字因為 Spring Boot 官方推薦用logback-spring.xml這個命名允許你在配置里使用springProfile標(biāo)簽做環(huán)境區(qū)分。我在這個項目里用的是 Logback配置文件放在src/main/resources/logback-spring.xml大致結(jié)構(gòu)如下?xml version1.0 encodingUTF-8? configuration springProfile namedev appender nameCONSOLE classch.qos.logback.core.ConsoleAppender encoder pattern%d{yyyy-MM-dd HH:mm:ss.SSS} %-5level [%thread] %logger{36} - %msg%n/pattern /encoder /appender root levelINFO appender-ref refCONSOLE/ /root /springProfile springProfile nameprod appender nameFILE classch.qos.logback.core.rolling.RollingFileAppender filelogs/property-system.log/file rollingPolicy classch.qos.logback.core.rolling.TimeBasedRollingPolicy fileNamePatternlogs/property-system.%d{yyyy-MM-dd}.log/fileNamePattern maxHistory30/maxHistory /rollingPolicy encoder pattern%d{yyyy-MM-dd HH:mm:ss.SSS} %-5level [%thread] %logger{36} - %msg%n/pattern /encoder /appender root levelWARN appender-ref refFILE/ /root /springProfile /configuration開發(fā)環(huán)境打印到控制臺生產(chǎn)環(huán)境按天滾動寫文件并保留 30 天這是最常見的標(biāo)準(zhǔn)配置。如果你想讓控制臺日志帶顏色pattern里用%highlight(%level)和%cyan(%logger{36})包一下就行。如果要切 Log4j2操作也不復(fù)雜先從spring-boot-starter-web里排除掉spring-boot-starter-logging再把spring-boot-starter-log4j2加進依賴最后在resources下建立log4j2-spring.xml。這個命名同樣是為了讓 Spring Boot 自動識別log4j2.xml也可以但優(yōu)先級會變化。Log4j2 的配置核心是RollingFile加PatternLayout性能確實比 Logback 好一些但在這種 CRUD 為主的系統(tǒng)里感知差異不大選一個你熟練的就好。我再提醒一點日志里永遠(yuǎn)別打用戶的明文密碼和身份證號。我之前見過有人為了方便排查在登錄接口打印了完整的入?yún)ο筮@要是數(shù)據(jù)泄露了鍋全在寫日志的人身上。3. 前端 Vite Vue 3 開發(fā)實錄核心頁面逐個擊破3.1 創(chuàng)建工程Vue 3 安裝與 Vite 環(huán)境搭建前端工程我用 Vite 創(chuàng)建命令是npm create vitelatest property-web -- --template vue。這里注意 Node.js 版本最好 18Vite 5 對 Node 版本有硬性要求太舊了會直接報錯。創(chuàng)建好之后先安裝基礎(chǔ)依賴我把命令直接貼出來cd property-web npm install vue-router4 pinia axios element-plus sass這里有兩個細(xì)節(jié)。第一個是 SassVue 3 項目里用langscss寫樣式之前一定要先把sass這個依賴裝上Vite 會自動識別并編譯 scss 文件不裝的話組件跑起來控制臺會飄紅。熱詞里搜vue3 安裝 scss的人特別多大多數(shù)就是漏了這一步。裝的時候注意新版本sass包用的是現(xiàn)代 API個別老項目里import的寫法可能報廢棄警告問題不大但不舒服建議直接用use語法。第二個細(xì)節(jié)是 Vite 配置請求代理這個屬于聯(lián)調(diào)關(guān)鍵點我放到后面專門講。Element Plus 的引入方式我建議先全局引入省心import ElementPlus from element-plus import element-plus/dist/index.css app.use(ElementPlus)等你的項目大到一定程度再考慮按需自動引入用unplugin-vue-components和unplugin-auto-import兩個插件配合搞定。初期全局引入對學(xué)習(xí)階段來說完全夠用。3.2 布局與路由后臺管理界面的骨架物業(yè)管理系統(tǒng)的前端是一個典型的中后臺管理界面我不會用太多花里胡哨的設(shè)計一個干凈的布局就夠了左側(cè)側(cè)邊欄菜單頂部頂欄放用戶信息和退出按鈕中間內(nèi)容區(qū)域是路由出口router-view。路由表我分成兩部分公共路由和動態(tài)路由。公共路由只有/login和/register剩下的/home、/owner、/house、/fee、/repair、/notice全部掛在Layout組件下作為子路由。這樣實現(xiàn)的效果是訪問系統(tǒng)主頁時是帶側(cè)邊欄的整體布局而登錄頁是獨立的無邊框頁面。路由守衛(wèi)是前端的重點也是熱詞里vue3 登錄不跳轉(zhuǎn)的高發(fā)區(qū)。正確的邏輯是在router.beforeEach里判斷l(xiāng)ocalStorage.getItem(token)是否存在不存在則跳轉(zhuǎn)到/login存在則放行。同時還要處理一種邊界情況用戶已經(jīng)登錄了還去訪問登錄頁這屬于多余操作直接next({ path: / })重定向回首頁。很多人寫著寫著發(fā)現(xiàn)登錄成功后點擊跳轉(zhuǎn)沒反應(yīng)十有八九是這里邏輯寫擰了。router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.path /login) { token ? next(/) : next() } else { token ? next() : next(/login) } })這個寫法不是最優(yōu)的但對你理解路由守衛(wèi)的運作機制最直接。真實項目里一般會把路由表動態(tài)生成用后端返回的菜單數(shù)據(jù)做篩選這就是另外一個話題了。3.3 業(yè)主管理頁CRUD 加搜索條件保留登錄框架搭完我們來敲第一個完整的核心頁面——業(yè)主管理。這個頁面能帶出你后面所有 CRUD 頁面的套路認(rèn)真過一遍后面房屋管理、費用管理就是照貓畫虎。template 部分的結(jié)構(gòu)是頂部搜索區(qū)輸入框 搜索/重置按鈕、中間表格區(qū)、底部彈窗表單。搜索區(qū)用el-form的inline屬性el-form :inlinetrue :modelsearchForm submit.prevent el-form-item label業(yè)主姓名 el-input v-modelsearchForm.name placeholder請輸入業(yè)主姓名 clearable / /el-form-item el-form-item el-button typeprimary clickhandleSearch搜索/el-button el-button clickhandleReset重置/el-button /el-form-item /el-form這里有個熱詞叫vue3 搜索條件保留意思是搜索完翻頁、跳轉(zhuǎn)詳情后回來搜索條件應(yīng)該還在。我給你的方案是搜索條件放在回應(yīng)組件的reactive對象里當(dāng)路由跳轉(zhuǎn)到別處再返回時因為組件被keep-alive緩存了數(shù)據(jù)自然還在。但 keep-alive 會帶來一個新問題——組件的onMounted在第二次進入時不會重新觸發(fā)你需要用onActivated鉤子來做數(shù)據(jù)刷新。這兩者的配合算是我實際開發(fā)里最經(jīng)常踩的組合坑。表格區(qū)直接用el-table綁數(shù)據(jù)el-table :datatableData border stripe v-loadingloading el-table-column propname label業(yè)主姓名 / el-table-column propphone label聯(lián)系電話 / el-table-column prophouseInfo label關(guān)聯(lián)房屋 / el-table-column label操作 template #default{ row } el-button link typeprimary clickhandleEdit(row)編輯/el-button el-popconfirm title確定刪除該業(yè)主 confirmhandleDelete(row.id) template #reference el-button link typedanger刪除/el-button /template /el-popconfirm /template /el-table-column /el-table刪除操作一定要加二次確認(rèn)彈窗el-popconfirm是 Element Plus 里最簡單直接的選擇。后端接口設(shè)計GET /api/owner/page分頁查詢參數(shù)是pageNum、pageSize、name模糊查詢POST /api/owner新增PUT /api/owner更新DELETE /api/owner/{id}刪除。這套接口命名風(fēng)格前后端統(tǒng)一別搞出/api/getOwnerList或者/api/updateOwner這種不倫不類的名字。彈窗表單校驗用el-form的rules屬性這個也是熱詞里vue3 rules 日期檢驗和動態(tài)校驗的高頻區(qū)。常見規(guī)則對象我簡單列一下const rules { name: [{ required: true, message: 請輸入業(yè)主姓名, trigger: blur }], phone: [ { required: true, message: 請輸入聯(lián)系電話, trigger: blur }, { pattern: /^1[3-9]\d{9}$/, message: 手機號格式不正確, trigger: blur } ] }日期類字段的校驗稍微特殊一點你用el-date-picker選完的值是 Date 對象但提交給后端前要格式化成字符串。我看過太多人在這里栽跟頭前端校驗都過了傳給后端卻報參數(shù)類型錯誤。解決方式是用dayjs或者直接new Date(value).toISOString().slice(0, 10)建議統(tǒng)一用 dayjs 格式化Element Plus 本身就內(nèi)置了 dayjs你不用額外裝。3.4 報修工單頁動態(tài)表單與日期校驗報修工單模塊比業(yè)主管理更復(fù)雜的地方在于可能存在同一個報修單里有多項維修內(nèi)容的情況比如這次要換燈泡、修水龍頭、檢查電路。如果只能用靜態(tài)表單提交用戶得反復(fù)填好幾遍報修單。我這里的做法是彈窗表單中提供動態(tài)添加刪除明細(xì)行的功能。核心思路是用數(shù)組detailList配合v-for渲染表單項每一行都可以單獨移除同時提供一個添加行按鈕向數(shù)組里 push 一個新對象div v-for(item, index) in form.detailList :keyindex el-input v-modelitem.content placeholder維修內(nèi)容 / el-input-number v-modelitem.amount :min0 placeholder預(yù)估費用 / el-button clickremoveDetail(index) :disabledform.detailList.length 1移除/el-button /div el-button clickaddDetail添加維修項/el-button這個功能看起來簡單但有一個容易忽略的細(xì)節(jié)每一行的key千萬不要用index因為你刪除中間某一行時Vue 的 diff 會復(fù)用 DOM導(dǎo)致輸入框里的值和數(shù)據(jù)錯位。我當(dāng)年第一次寫動態(tài)表單就碰上了這個問題key改成用Date.now() Math.random()生成唯一 ID 后這個問題徹底消失。熱詞里搜vue3 動態(tài)添加刪除 form 表單一行數(shù)據(jù)的人遇到的絕大多數(shù)情況就是這個原因。工單表單的狀態(tài)流轉(zhuǎn)也是一個值得展開的細(xì)節(jié)。列表頁上工單有待處理、處理中、已完成三種狀態(tài)我用el-tag加不同類型來區(qū)分顯示切換狀態(tài)的按鈕根據(jù)當(dāng)前狀態(tài)動態(tài)渲染。比如待處理 - 顯示接單按鈕點擊后置為處理中處理中 - 顯示完成按鈕點擊后置為已完成已完成 - 不顯示任何操作按鈕僅展示狀態(tài)變化要調(diào)用后端接口而不是只在前端改數(shù)組這是很多人寫前端時容易犯的毛病——刷新頁面狀態(tài)就丟了。接口設(shè)計一個PUT /api/repair/{id}/status請求體里帶新的狀態(tài)值即可。3.5 Axios 封裝與 Token 注入前后端聯(lián)通的關(guān)鍵前端頁面寫得再好看調(diào)不動后端接口就是廢的。Axios 封裝這一節(jié)我建議你嚴(yán)格按下面的套路來能少掉很多頭發(fā)。先建一個utils/request.js創(chuàng)建 axios 實例設(shè)置baseURL和超時時間。這里注意baseURL要區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境。開發(fā)環(huán)境用相對路徑/api靠 Vite 代理轉(zhuǎn)發(fā)到后端生產(chǎn)環(huán)境可以也寫相對路徑然后讓 Nginx 統(tǒng)一轉(zhuǎn)發(fā)這是最靈活的方式。然后在請求攔截器里帶上 tokenconst service axios.create({ baseURL: /api, timeout: 10000 }) service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer token } return config }) service.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.message || 請求失敗) return Promise.reject(new Error(res.message)) } return res }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) router.push(/login) } ElMessage.error(error.message || 網(wǎng)絡(luò)異常) return Promise.reject(error) } )響應(yīng)攔截器的 401 處理是登錄態(tài)失效的關(guān)鍵兜底token 過期了自動清除本地 token 并跳回登錄頁。熱詞vue3 登錄不跳轉(zhuǎn)有兩種常見情況一個是前面說的路由守衛(wèi)邏輯寫錯另一個就是這里——請求返回 401 但沒有跳轉(zhuǎn)用戶還以為自己在登錄頁什么反應(yīng)都沒有。兩者都排查過基本能解決九成問題。后端接口統(tǒng)一約定的返回結(jié)構(gòu)是{ code: 200, message: success, data: {...} }所以前端拿到response.data之后先解構(gòu)檢查code。這個結(jié)構(gòu)在后端我用一個ResultT泛型類統(tǒng)一返回前后端約定清楚寫起來就不會各搞各的。3.6 Vite 代理與跨域問題環(huán)境配置的坑熱詞里有個vue3 vite dev 局域網(wǎng)打開空白另一個是vue3 訪問后端。這兩個其實都和 Vite 配置有關(guān)。vite.config.js里的server.proxy配置解決的是開發(fā)環(huán)境下前端向后端發(fā)請求的跨域問題export default defineConfig({ server: { host: 0.0.0.0, port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })設(shè)置host: 0.0.0.0之后你同一局域網(wǎng)內(nèi)的手機和另一臺電腦就可以通過你的局域網(wǎng) IP 訪問前端頁面了。默認(rèn)情況下 Vite 只監(jiān)聽localhost其他設(shè)備訪問會直接白屏或者連接拒絕這就是局域網(wǎng)打開空白的最常見原因。關(guān)于跨域還有一個后端的兜底配置。在 Spring Boot 里寫一個WebMvcConfigurer配置類加CorsRegistry或者在 Spring Security 的過濾器鏈上加http.cors(cors - cors.configurationSource(corsConfigurationSource()))二選一。我實際開發(fā)中只要前端配了 Vite 代理后端其實不需要額外處理 CORS。但如果你哪天直接不通過代理讓前端頁面里寫絕對的http://localhost:8080那就必須后端開 CORS 了。兩種方案都能走通但在項目里保持一致我推薦代理方案干凈利落。4. 前后端聯(lián)調(diào)、部署與實戰(zhàn)避坑4.1 經(jīng)典問題排查速查表做完整項目流程聯(lián)調(diào)階段是最折磨人的。我從自己的實戰(zhàn)經(jīng)歷和各路踩坑帖里整理了一份高頻問題速查表每個問題都是我親眼見過或者親身體會過的你按表排查效率會高很多現(xiàn)象可能原因排查思路與修復(fù)方式前端請求 404Vite 代理沒配置 / 后端接口路徑不匹配先看瀏覽器 Network 面板的請求 URL確認(rèn)是不是經(jīng)過代理轉(zhuǎn)發(fā)到了正確的http://localhost:8080再看后端RequestMapping路徑登錄后不跳轉(zhuǎn)路由守衛(wèi)邏輯問題 / 登錄成功后沒有執(zhí)行router.push登錄接口返回后先打印 token 是否存進localStorage再檢查路由守衛(wèi)中 token 判斷邏輯請求返回 401token 沒帶 / token 過期 / 白名單路徑寫錯檢查前端請求攔截器是否注入了Authorization頭檢查 Security 配置中.permitAll()路徑是否覆蓋了登錄、注冊接口Element Plus 的 upload on-success 不觸發(fā)使用了http-request自定義上傳 / 響應(yīng)格式不符如果用自定義上傳要自己調(diào)options.onSuccess()如果沒有自定義上傳確認(rèn)后端返回結(jié)構(gòu)是否為{ code, data }格式動態(tài)表單行數(shù)據(jù)錯位v-for的key用了index改成業(yè)務(wù)唯一值如時間戳生成的 ID編譯報錯Cannot find module sass沒裝 sass 依賴執(zhí)行npm install -D sass局域網(wǎng)訪問前端白屏server.host沒有設(shè)為0.0.0.0修改 Vite 配置后重啟 dev serverSpring Boot 啟動報Failed to configure a DataSource數(shù)據(jù)庫連接配置缺失確認(rèn)application.yml中spring.datasource.url/username/password是否正確MySQL 服務(wù)是否啟動我重點展開幾個表里沒有完全說透的。第一個是 Element Plus Upload 的on-success監(jiān)聽不到這個問題在熱詞里出現(xiàn)頻率很高。如果你用的是默認(rèn)的上傳方式Element Plus 會自行發(fā)請求on-success觸發(fā)條件要求后端返回的 JSON 必須能被解析。但如果你用了http-request屬性自定義上傳邏輯那么組件完全不會監(jiān)聽后臺的響應(yīng)——你需要在上傳邏輯里手動調(diào)用options.onSuccess(responseData)才能觸發(fā)這個回調(diào)。這一點文檔寫得很隱晦坑了不少人。第二個是vxetable 避免 vue3 首屏加載。這個不是物業(yè)系統(tǒng)的必選項但如果你覺得 El-Table 在大數(shù)據(jù)量下卡頓換成 vxe-table 是很常見的選擇。首屏加載慢的主要原因是把大型組件庫全部全局引入了解決思路是路由懶加載加組件按需引入const OwnerManage () import(/views/owner/OwnerManage.vue)用箭頭函數(shù)包一層就是懶加載Vue Router 會自動在路由命中時才加載對應(yīng)組件首屏 JS 體積能小不少。vxe-table 本身也有按需引入插件的機制需要什么功能就引入對應(yīng)的模塊不用的千萬別全量注冊。第三個是 Spring Boot 3 的接口參數(shù)校驗。Controller 層如果不在參數(shù)上做校驗臟數(shù)據(jù)直接打進數(shù)據(jù)庫后面排查到崩潰。我在Owner實體類上用 Jakarta Validation 的注解NotBlank、Pattern、Email等Controller 接收參數(shù)時加Validated注解。同時用RestControllerAdvice寫一個全局異常處理器統(tǒng)一捕獲MethodArgumentNotValidException返回結(jié)構(gòu)合法的錯誤提示。記住 Spring Boot 3 這些校驗注解的包名也改成了jakarta.validation.*引錯包會編譯不過。4.2 打包部署前后端分離的上線流程項目開發(fā)完總要部署。前后端分離項目的主流方案是兩種我都給你過一遍。第一種最簡單前端構(gòu)建產(chǎn)物塞進后端的src/main/resources/static目錄。執(zhí)行npm run build后dist目錄里的文件就是純靜態(tài)資源把它復(fù)制到后端的 static 目錄下然后mvn clean package打成單個 jar 包java -jar property-system.jar一條命令啟動瀏覽器訪問http://服務(wù)器IP:8080就能看到完整的系統(tǒng)。這個方案的優(yōu)點是部署成本低適合小而美的單體項目缺點是前后端耦合了前端一改版就得重新打后端包。第二種是標(biāo)準(zhǔn)前后端分離部署后端仍以 jar 包形式跑在 8080前端dist目錄交給 NginxNginx 配置一個location /指向前端文件location /api反向代理到后端。我用一份最簡 Nginx 配置示例server { listen 80; server_name your-domain.com; location / { root /usr/share/nginx/html/property-web; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }try_files $uri $uri/ /index.html;這行非常重要Vue Router 默認(rèn)是 history 模式前端路由直接訪問/owner在刷新時就是一次真實 HTTP 請求如果沒有這行配置Nginx 會返回 404。這個坑在部署階段出現(xiàn)率極高我做過好幾次了每次都要檢查一遍有沒有漏掉。部署完別急著慶祝先用幾條命令做冒煙測試。后端看日志有沒有啟動報錯curl http://127.0.0.1:8080/api/...試試接口通不通前端打開頁面 F12 控制臺看有沒有紅色的網(wǎng)絡(luò)請求失敗。生產(chǎn)環(huán)境配置文件里數(shù)據(jù)庫密碼、JWT 密鑰這些敏感信息建議通過環(huán)境變量注入不要直接硬編碼在 yml 文件里不然代碼倉庫一泄漏生產(chǎn)環(huán)境就裸奔了。4.3 從源碼理解 Vue 3面試能講的加分點項目做完以后你如果打算拿它去面試一定要能講清楚 Vue 3 的底層原理而不是只會寫業(yè)務(wù)。熱詞里vue3 源碼解析、vue3 computed、vue3 面試最經(jīng)典 6 個問題都是高頻考點。我給你提煉幾個從源碼層面回答的點。Vue 3 的響應(yīng)式系統(tǒng)是基于Proxy實現(xiàn)的和 Vue 2 的Object.defineProperty完全不同。reactive是用Proxy對對象進行代理攔截 get、set、deleteProperty 等操作完成依賴收集和觸發(fā)更新。ref則是對基本類型數(shù)據(jù)的包裝內(nèi)部通過RefImpl類管理一個 value 屬性訪問.value時觸發(fā)依賴收集賦值時觸發(fā)更新。這個設(shè)計解決了 Vue 2 里新增屬性、刪除屬性無法被檢測到的問題。computed的原理是基于惰性求值和緩存兩個機制。它的內(nèi)部實現(xiàn)了一個ComputedRefImpl有一個_dirty標(biāo)志位第一次訪問時執(zhí)行 getter 函數(shù)算出值后續(xù)訪問如果依賴沒有變化直接返回緩存結(jié)果只有依賴的響應(yīng)式數(shù)據(jù)發(fā)生變化時_dirty才會重新置為 true下次訪問才會重新計算。這就解釋了為什么在模板中多處使用同一個 computed 屬性只會計算一次性能優(yōu)于調(diào)用普通方法。watch和watchEffect是另一個高頻考點。watch需要顯式指定監(jiān)聽的來源并且可以拿到新值和舊值watchEffect則會自動追蹤回調(diào)里訪問的所有響應(yīng)式數(shù)據(jù)。源碼層面兩者最終都走的是doWatch這個函數(shù)只是參數(shù)和觸發(fā)時機有差異。面試官只要聽到你能從實現(xiàn)層面答出來印象分會明顯不一樣。4.4 一個真實的工程化體驗從 0 到 1 的沉淀最后說一下我在整個項目開發(fā)過程中最真實的體會。做這類管理系統(tǒng)的關(guān)鍵從來不是某個技術(shù)點的高深用法而是規(guī)范兩個字。前端接口路徑、后端返回結(jié)構(gòu)、命名風(fēng)格、異常處理方式、日志規(guī)范這些統(tǒng)一了聯(lián)調(diào)效率能翻幾倍各寫各的代碼規(guī)模一大就是一場災(zāi)難。還有一定要從一開始就學(xué)會看控制臺的報錯信息。很多新手前端一報錯就問別人其實瀏覽器 DevTools 的 Console 面板已經(jīng)把問題說得明明白白了——是哪一行代碼、哪個接口失敗、什么類型的錯誤。后端異常也一樣Spring Boot 啟動時的堆棧信息是最直接的診斷依據(jù)。學(xué)會讀報錯是獨立開發(fā)者的基本功。我個人在實際操作中的體會是這個項目第二遍、第三遍做的時候速度會快到你想象不到因為你已經(jīng)把所有的坑都踩過一遍了。你能開始講出這里的 key 不能用 index要用唯一 ID這里的代理配置漏了 host 字段這里的校驗注解包名是 jakarta 不是 javax這類經(jīng)驗就說明它已經(jīng)真正內(nèi)化成你自己的技能了。小區(qū)物業(yè)管理系統(tǒng)確實是個老項目但用 Spring Boot 3 Vue 3 整個技術(shù)棧重寫一遍的工程化過程含金量依然足夠高。這套流程跑通之后遷移到商城、進銷存、內(nèi)容管理都只是業(yè)務(wù)層面的事架構(gòu)上你已經(jīng)站住腳了。