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