：前后端分離實(shí)踐與部署)
1. 項(xiàng)目解析與整體思路1.1 校園生活信息平臺(tái)到底解決什么問題大學(xué)校園的信息流通說實(shí)話一直是個(gè)說起來重要、做起來隨意的事情。今天社團(tuán)要納新明天食堂有新品試吃后天圖書館臨時(shí)閉館——這些信息要么貼在公告欄要么發(fā)在幾個(gè)微信群里要么干脆靠口口相傳。學(xué)生想找二手教材、想撿回丟了的校園卡、想了解周邊兼職往往要翻好幾個(gè)群聊記錄效率極低。這套大學(xué)校園生活信息平臺(tái)就是沖著這個(gè)痛點(diǎn)去的。把校園內(nèi)的信息聚合到一個(gè)Web應(yīng)用里學(xué)生登錄后能看到分類清晰的通知公告、活動(dòng)動(dòng)態(tài)、失物招領(lǐng)、二手交易、校園問答等內(nèi)容也能自己發(fā)布信息。管理員則通過后臺(tái)管理用戶、審核內(nèi)容、維護(hù)分類形成一套從信息發(fā)布到消費(fèi)的完整閉環(huán)。先說清楚這套系統(tǒng)的適合人群。如果你是Java后端方向的在校生或者準(zhǔn)備做畢業(yè)設(shè)計(jì)、課程設(shè)計(jì)的開發(fā)者這套源碼的價(jià)值在于它覆蓋了用戶認(rèn)證 內(nèi)容發(fā)布 分類檢索 后臺(tái)管理這類典型業(yè)務(wù)場(chǎng)景技術(shù)棧又是目前國內(nèi)中小型項(xiàng)目最主流的SpringBoot2 Vue3組合。拿它做底子去改造比從零擼一個(gè)項(xiàng)目省太多事。如果你是企業(yè)里的開發(fā)新人想看看現(xiàn)代Java Web項(xiàng)目前后端分離的工程結(jié)構(gòu)長什么樣這套系統(tǒng)同樣值得參考。1.2 為什么選擇SpringBoot2 Vue3這套組合選型這事往往不是選最好的而是選最不容易出錯(cuò)的。這套系統(tǒng)用SpringBoot 2.7.x而不是SpringBoot 3很多人可能會(huì)問新的不好嗎其實(shí)在校生和大部分企業(yè)生產(chǎn)環(huán)境SpringBoot 2仍然是存量最大的版本。SpringBoot 3強(qiáng)制要求JDK 17起步一些老依賴的兼容成本會(huì)拖慢開發(fā)節(jié)奏。SpringBoot 2搭配JDK 8或JDK 11生態(tài)成熟網(wǎng)上資料多遇到問題搜一下就能找到答案這對(duì)學(xué)習(xí)者和中小型項(xiàng)目來說是實(shí)打?qū)嵉膬?yōu)勢(shì)。前端選Vue3而不是Vue2邏輯更簡單——Vue2已經(jīng)在2023年底停止維護(hù)新項(xiàng)目再用它等于給自己埋雷。而且Vue3的組合式APIComposition API在邏輯復(fù)用上的體驗(yàn)確實(shí)比Vue2的Options API舒服得多。再聊MyBatis-Plus。傳統(tǒng)MyBatis寫CRUD要手寫一堆XML單表操作用MyBatis-Plus幾乎不用寫SQL只靠BaseMapper提供的接口就能完成大部分持久化工作。配合它內(nèi)置的分頁插件、邏輯刪除、自動(dòng)填充開發(fā)效率是肉眼可見地提升。MySQL 8.0則是水到渠成的選擇窗口函數(shù)、公用表表達(dá)式CTE這些高級(jí)特性在寫統(tǒng)計(jì)報(bào)表類需求時(shí)非常好用而且8.0的默認(rèn)字符集utf8mb4對(duì)emoji等特殊字符的支持更友好做校園論壇類業(yè)務(wù)時(shí)會(huì)省掉不少亂碼煩惱。2. 數(shù)據(jù)庫設(shè)計(jì)與后端核心實(shí)現(xiàn)2.1 MySQL 8.0數(shù)據(jù)庫表結(jié)構(gòu)設(shè)計(jì)要點(diǎn)數(shù)據(jù)庫設(shè)計(jì)是整套系統(tǒng)的地基。我第一次跑通這套源碼時(shí)把核心表梳理了一遍發(fā)現(xiàn)它的設(shè)計(jì)思路很典型用戶體系、內(nèi)容體系、交互體系分開每張表都留著擴(kuò)展余地。用戶表user是最基礎(chǔ)的字段大致包含id、username、password、nickname、avatar、phone、email、role學(xué)生/管理員、status正常/禁用、create_time、update_time。密碼存儲(chǔ)用的是BCrypt加密不是MD5也不是SHA1這一點(diǎn)值得好好學(xué)習(xí)——BCrypt每次加密生成的鹽都不同就算兩個(gè)用戶密碼一樣密文也不一樣暴力破解的成本高得多。內(nèi)容類表是整個(gè)系統(tǒng)的大頭圍繞信息發(fā)布場(chǎng)景拆分成多張表表名核心字段業(yè)務(wù)說明noticeid, title, content, category_id, publisher_id, status, views發(fā)布通知公告activityid, title, description, location, start_time, end_time, organizer, cover_url校園活動(dòng)信息lost_foundid, type(失物/招領(lǐng)), title, description, contact, status, image失物招領(lǐng)模塊second_handid, title, price, description, images, seller_id, status二手交易questionid, title, content, author_id, reward_point, status校園問答設(shè)計(jì)內(nèi)容表時(shí)有個(gè)容易忽略的坑盡量把分類信息做成category_id外鍵關(guān)聯(lián)而不是直接存字符串。雖然直接存失物招領(lǐng)這種字符串看起來簡單但后期想改分類名、做統(tǒng)計(jì)聚合就要寫一堆麻煩的UPDATE語句。用關(guān)聯(lián)表或關(guān)聯(lián)ID配合JOIN查詢擴(kuò)展性完全不一樣。MySQL 8.0還有一個(gè)非常實(shí)用的特性就是可以直接用CREATE TABLE ... LIKE復(fù)制表結(jié)構(gòu)做臨時(shí)表排查數(shù)據(jù)問題的時(shí)候比手動(dòng)建一張同結(jié)構(gòu)表快得多。索引設(shè)計(jì)上每張內(nèi)容表我都建議給create_time加索引因?yàn)榱斜聿樵兡J(rèn)按時(shí)間倒序這個(gè)索引能明顯減少排序開銷。系統(tǒng)源碼里大部分內(nèi)容表都有這個(gè)索引屬于中規(guī)中矩但正確的設(shè)計(jì)。2.2 MyBatis-Plus的高效CRUD實(shí)踐MyBatis-Plus最核心的玩法就是讓你的Mapper接口繼承BaseMapperT然后一堆單表操作就自動(dòng)有了。public interface NoticeMapper extends BaseMapperNotice { // 復(fù)雜查詢才需要自定義方法 IPageNotice selectNoticePage(PageNotice page, Param(keyword) String keyword); }有了這層繼承你不寫XML也能完成insert、deleteById、selectById、updateById、selectList這些基礎(chǔ)操作。但真正讓開發(fā)效率起飛的是它的QueryWrapper和LambdaQueryWrapper。比如查最新發(fā)布的前10條活動(dòng)信息且狀態(tài)為已發(fā)布一行代碼搞定LambdaQueryWrapperActivity wrapper new LambdaQueryWrapper(); wrapper.eq(Activity::getStatus, 1) .orderByDesc(Activity::getCreateTime) .last(limit 10); ListActivity list activityMapper.selectList(wrapper);LambdaQueryWrapper相比字符串形式的QueryWrapper最大的好處是類型安全——字段名寫錯(cuò)了編譯期就能發(fā)現(xiàn)不會(huì)等到運(yùn)行時(shí)SQL報(bào)錯(cuò)才排查。我在項(xiàng)目里只用一個(gè)原則單表查詢一律用Wrapper多表關(guān)聯(lián)才寫XML或注解SQL。MyBatis-Plus的分頁插件配置也很關(guān)鍵。如果你忘了配置MybatisPlusInterceptorselectPage查出來的數(shù)據(jù)會(huì)是全量然后內(nèi)存里截?cái)鄶?shù)據(jù)量一大直接系統(tǒng)變慢。正確配置如下Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); PaginationInnerInterceptor pagination new PaginationInnerInterceptor(DbType.MYSQL); pagination.setMaxLimit(100L); // 防止一次性查過多數(shù)據(jù) interceptor.addInnerInterceptor(pagination); return interceptor; } }setMaxLimit(100L)是我強(qiáng)烈建議加上的——它可以從框架層面阻止有人惡意調(diào)用接口時(shí)size傳一個(gè)巨大的值把數(shù)據(jù)庫查崩。這種防御性設(shè)置很多項(xiàng)目都忽略了。另外字段自動(dòng)填充用起來也舒服。新建實(shí)體時(shí)createTime和updateTime如果有TableField(fill FieldFill.INSERT)標(biāo)記再寫一個(gè)實(shí)現(xiàn)MetaObjectHandler接口的類就能在插入和更新時(shí)自動(dòng)填充時(shí)間字段業(yè)務(wù)代碼里完全不用關(guān)心時(shí)間戳賦值。2.3 關(guān)鍵業(yè)務(wù)模塊的接口設(shè)計(jì)這套系統(tǒng)的后端接口風(fēng)格是標(biāo)準(zhǔn)的RESTful。認(rèn)證模塊用JWTJSON Web Token做無狀態(tài)登錄用戶登錄成功后后端返回一個(gè)token前端把它存到本地之后每次請(qǐng)求都在請(qǐng)求頭帶上Authorization: Bearer token后端通過攔截器校驗(yàn)身份。這么做的好處是服務(wù)端不需要存Session對(duì)前后端分離部署非常友好。登錄接口的邏輯大致這樣PostMapping(/login) public Result login(RequestBody LoginDTO dto) { // 1. 根據(jù)用戶名查用戶 User user userMapper.selectOne( new LambdaQueryWrapperUser() .eq(User::getUsername, dto.getUsername()) ); // 2. 校驗(yàn)密碼BCrypt if (user null || !BCrypt.checkpw(dto.getPassword(), user.getPassword())) { return Result.error(用戶名或密碼錯(cuò)誤); } // 3. 檢查狀態(tài) if (user.getStatus() 0) { return Result.error(賬號(hào)已被禁用); } // 4. 生成JWT String token JwtUtil.generateToken(user.getId(), user.getUsername(), user.getRole()); return Result.success(new LoginVO(token, user)); }內(nèi)容發(fā)布類的接口除了必要的參數(shù)校驗(yàn)后端還需要做一層權(quán)限校驗(yàn)?zāi)男┙巧馨l(fā)布、哪些內(nèi)容需要管理員審核。這套系統(tǒng)的處理方式是發(fā)布接口要求登錄發(fā)布之后內(nèi)容狀態(tài)默認(rèn)為待審核管理員在后臺(tái)審核通過才對(duì)外展示。這種設(shè)計(jì)比起所有內(nèi)容直接發(fā)布可控性高很多適合校園場(chǎng)景避免有人亂發(fā)廣告或不當(dāng)內(nèi)容。我還注意到一個(gè)細(xì)節(jié)分頁接口統(tǒng)一返回格式為{ records, total, current, size }前端配合Vue3的分頁組件幾乎是拿到即用。接口返回統(tǒng)一用Result包裝類約定code200表示成功其他code表示各種業(yè)務(wù)錯(cuò)誤。這種統(tǒng)一約定前后端聯(lián)調(diào)時(shí)最大的價(jià)值是——不需要每個(gè)接口都討論返回結(jié)構(gòu)長什么樣效率提升非常明顯。3. Vue3前端工程化實(shí)踐3.1 Vite構(gòu)建 Element Plus組件庫Vue3項(xiàng)目用Vite做構(gòu)建工具現(xiàn)在基本是默認(rèn)選項(xiàng)了相比Webpack冷啟動(dòng)速度快到讓人心情舒暢。Vite基于原生ESModule開發(fā)的時(shí)候只編譯修改的文件而不是整包重新打那種秒級(jí)熱更新的體驗(yàn)用習(xí)慣了真的回不去。前端工程結(jié)構(gòu)上頁面組件放在src/views公共組件放src/components狀態(tài)管理用Pinia路由用Vue Router 4。這套結(jié)構(gòu)是目前Vue3社區(qū)的標(biāo)準(zhǔn)答案照著寫基本不會(huì)出大錯(cuò)。Element Plus作為UI組件庫提供了表格、表單、彈窗、分頁等現(xiàn)成組件做后臺(tái)管理類界面效率極高。校園信息平臺(tái)的用戶端界面用Element Plus的卡片、列表、標(biāo)簽組件也能拼出很清爽的效果。// vite.config.ts 關(guān)鍵配置 import { defineConfig } from vite; import vue from vitejs/plugin-vue; export default defineConfig({ plugins: [vue()], server: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } });這個(gè)proxy配置尤其重要它解決了開發(fā)環(huán)境的跨域問題。前后端分離的項(xiàng)目前端運(yùn)行在3000端口后端在8080端口如果不在Vite里代理瀏覽器直接發(fā)請(qǐng)求會(huì)被CORS攔下來。配了代理之后前端代碼里寫的/api/login在開發(fā)時(shí)會(huì)被自動(dòng)轉(zhuǎn)發(fā)到http://localhost:8080/api/login聯(lián)調(diào)體驗(yàn)非常順滑。3.2 組合式API與核心頁面實(shí)現(xiàn)Vue3的組合式API對(duì)比Options API最大的區(qū)別就是讓代碼按功能組織而不是按選項(xiàng)類型組織。同一個(gè)功能的響應(yīng)式變量、計(jì)算屬性、方法、監(jiān)聽器可以放在一起寫改代碼時(shí)不用上下反復(fù)跳。以失物招領(lǐng)頁面為例核心邏輯用組合式API寫出來大概是這樣的結(jié)構(gòu)script setup langts import { ref, onMounted } from vue; import { getLostFoundList } from /api/lostFound; import { ElMessage } from element-plus; // 響應(yīng)式數(shù)據(jù) const list ref([]); const total ref(0); const loading ref(false); const queryParams reactive({ current: 1, size: 10, type: , status: 1 }); // 加載列表 async function loadList() { loading.value true; try { const res await getLostFoundList(queryParams); list.value res.data.records; total.value res.data.total; } finally { loading.value false; } } // 頁碼變化時(shí)重新加載 function handlePageChange(page: number) { queryParams.current page; loadList(); } onMounted(loadList); /script這個(gè)模式可以通用到幾乎所有列表頁定義查詢參數(shù)、調(diào)用接口、回填列表數(shù)據(jù)、處理分頁。我第一次用組合式API寫這種頁面時(shí)最大的感受是邏輯密度高且結(jié)構(gòu)線性不像Options API那樣數(shù)據(jù)、方法、生命周期散落三個(gè)區(qū)域。script setup語法糖更是把模板里的變量暴露操作簡化到了極致寫起來像是寫一個(gè)特別大的函數(shù)組件。用戶端的頁面還有幾個(gè)值得留意的交互細(xì)節(jié)。比如二手交易首頁每個(gè)商品卡片上有縮略圖、價(jià)格、成色標(biāo)簽點(diǎn)擊進(jìn)入詳情頁之后能看到賣家信息。這種前后端分離的項(xiàng)目圖片存的是URL字符串前端用el-image組件去渲染同時(shí)做好懶加載。大圖多的時(shí)候懶加載能顯著加速首屏渲染。3.3 Pinia狀態(tài)管理與權(quán)限控制Pinia是Vue3官方推薦的狀態(tài)管理庫比Vuex更簡潔沒有mutations的概念直接在store里寫action函數(shù)就能修改state。校園信息平臺(tái)的用戶狀態(tài)用Pinia存儲(chǔ)很合適登錄成功之后把用戶信息保存到store里導(dǎo)航欄的頭像和用戶名就反應(yīng)式地更新了。// stores/user.ts export const useUserStore defineStore(user, { state: () ({ token: localStorage.getItem(token) || , userInfo: null }), getters: { isLogin: (state) !!state.token, isAdmin: (state) state.userInfo?.role ADMIN }, actions: { login(token: string, user: UserInfo) { this.token token; this.userInfo user; localStorage.setItem(token, token); }, logout() { this.token ; this.userInfo null; localStorage.removeItem(token); } } });token放localStorage是一種常見做法好處是刷新頁面后會(huì)話不丟。風(fēng)險(xiǎn)點(diǎn)在于XSS攻擊——如果頁面被注入了惡意腳本腳本可以直接讀取localStorage拿到token。為了緩解這個(gè)風(fēng)險(xiǎn)前端要對(duì)用戶輸入內(nèi)容做轉(zhuǎn)義處理Element Plus的表單校驗(yàn)和基本組件本身就做了不少防護(hù)。更穩(wěn)妥的替代方案是放httpOnly Cookie但那樣又要改后端跨域配置權(quán)衡之下很多項(xiàng)目還是愿意存在localStorage。路由權(quán)限這塊Vue Router 4支持在路由配置里加meta字段標(biāo)記角色然后通過全局前置守衛(wèi)beforeEach做攔截router.beforeEach((to, from, next) { const userStore useUserStore(); if (to.meta.requiresAuth !userStore.isLogin) { next({ path: /login, query: { redirect: to.fullPath } }); } else if (to.meta.requiresAdmin !userStore.isAdmin) { next({ path: / }); } else { next(); } });再加上后端接口的權(quán)限攔截雙保險(xiǎn)基本能覆蓋校園信息平臺(tái)的權(quán)限需求。這里我強(qiáng)烈建議前端權(quán)限只能管體驗(yàn)和界面真正的數(shù)據(jù)安全必須靠后端控制否則接口被直接調(diào)用繞過前端也攔截不了。4. 部署、文檔與常見問題排查4.1 本地開發(fā)環(huán)境搭建想跑通這套系統(tǒng)先花半小時(shí)把環(huán)境準(zhǔn)備好后面會(huì)順暢很多。環(huán)境清單JDK 8或11SpringBoot 2完全支持Maven 3.6MySQL 8.0本地或Docker都行Node.js 16Vue3和Vite的要求IDEA社區(qū)版免費(fèi)但最好裝Lombok插件MySQL 8.0的安裝Windows用戶我推薦直接下載ZIP包解壓安裝不裝MSI安裝器因?yàn)镸SI版本經(jīng)常被系統(tǒng)權(quán)限卡住。解壓之后執(zhí)行mysqld --initialize-insecure初始化然后net start mysql啟動(dòng)服務(wù)再用mysql -uroot -p免密登錄后改密碼一套下來十分鐘搞定。Linux環(huán)境如果有Docker更省事docker run -d \ --name mysql8 \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORD123456 \ -e MYSQL_DATABASEcampus \ mysql:8.0前端依賴安裝有個(gè)注意點(diǎn)優(yōu)先用npm install不要用cnpm。cnpm雖然下載快但經(jīng)常出現(xiàn)依賴的軟鏈接結(jié)構(gòu)異常導(dǎo)致Vite啟動(dòng)報(bào)錯(cuò)排查起來很痛苦。如果npm網(wǎng)絡(luò)慢可以設(shè)置淘寶鏡像npm config set registry https://registry.npmmirror.com速度和穩(wěn)定性都比cnpm好。數(shù)據(jù)庫初始化時(shí)注意MySQL 8.0的默認(rèn)認(rèn)證插件是caching_sha2_password有些老版本的數(shù)據(jù)庫連接驅(qū)動(dòng)只支持mysql_native_password會(huì)報(bào)Public Key Retrieval is not allowed之類的錯(cuò)誤。解決辦法有兩個(gè)一是把數(shù)據(jù)庫連接URL加上allowPublicKeyRetrievaltrue二是在application.yml里正確配置驅(qū)動(dòng)類com.mysql.cj.jdbc.Driver。這套源碼的數(shù)據(jù)庫URL還帶了一長串參數(shù)其中useSSLfalse是必要的本地開發(fā)環(huán)境不需要SSL加密。4.2 常見問題速查表跑項(xiàng)目過程中幾個(gè)高頻問題基本每個(gè)開發(fā)者都會(huì)遇到直接整理成速查表問題現(xiàn)象根本原因解決辦法后端啟動(dòng)失敗報(bào)Unknown database campus數(shù)據(jù)庫沒有創(chuàng)建先執(zhí)行CREATE DATABASE campus再初始化SQL腳本前端接口請(qǐng)求全部404Vite代理路徑和后端context-path不一致檢查前后端/api前綴是否統(tǒng)一登錄后前端反復(fù)跳回登錄頁token寫入/讀出不一致或JWT密鑰不對(duì)檢查Pinia里存儲(chǔ)的token key和后端JWT配置是否一致MyBatis-Plus分頁不生效返回全量沒配置PaginationInnerInterceptor按前文配置加入MybatisPlusInterceptor時(shí)間差8小時(shí)數(shù)據(jù)庫時(shí)區(qū)設(shè)置問題JDBC URL加serverTimezoneAsia/Shanghai上傳圖片打不開本地存儲(chǔ)路徑配置不對(duì)檢查application.yml里的文件上傳路徑并做靜態(tài)資源映射npm install后Vite啟動(dòng)報(bào)錯(cuò)依賴版本不匹配刪除node_modules和package-lock.json重新安裝時(shí)間問題一定要單獨(dú)強(qiáng)調(diào)。MySQL 8.0默認(rèn)時(shí)區(qū)是UTC如果JDBC URL沒指定serverTimezoneJava的LocalDateTime讀到的時(shí)間會(huì)比你本地時(shí)間晚8小時(shí)。校園活動(dòng)的開始時(shí)間是晚上7點(diǎn)前端顯示成了凌晨3點(diǎn)這個(gè)bug排查起來極其迷惑。解決方案就是在連接串里顯式寫上serverTimezoneAsia/Shanghai同時(shí)可以在MySQL里執(zhí)行SET GLOBAL time_zone 8:00徹底根治。4.3 不同難度環(huán)境的部署思路開發(fā)環(huán)境跑通之后把系統(tǒng)真正部署到服務(wù)器上是另一個(gè)階段。這套系統(tǒng)前端是純靜態(tài)文件后端是Spring Boot的可執(zhí)行JAR包部署思路很清晰后端部署用Maven打包前先確認(rèn)application.yml里數(shù)據(jù)庫連接改成了生產(chǎn)環(huán)境配置然后執(zhí)行mvn clean package -DskipTests生成的JAR包直接放到服務(wù)器上nohup java -jar campus-server.jar --spring.profiles.activeprod app.log 21 前端部署npm run build之后生成的dist目錄是一堆靜態(tài)文件可以交給Nginx托管同時(shí)Nginx配置反向代理把/api開頭的請(qǐng)求轉(zhuǎn)發(fā)到后端的8080端口server { listen 80; server_name campus.example.com; root /var/www/campus/dist; index 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; } location / { try_files $uri $uri/ /index.html; } }try_files $uri $uri/ /index.html這一行千萬不能少。Vue Router用了history模式刷新/lost-found這個(gè)路徑時(shí)Nginx要在磁盤上找不到對(duì)應(yīng)文件的情況下把請(qǐng)求導(dǎo)回index.html讓Vue Router接管路由。少了這行刷新就404部署上線后最常踩的坑之一。如果服務(wù)器內(nèi)存緊張前端還可以考慮不單獨(dú)部署Nginx直接用Spring Boot的靜態(tài)資源映射把dist目錄托管但那樣會(huì)讓前后端耦合以后做獨(dú)立部署或擴(kuò)容會(huì)麻煩很多。我的建議是標(biāo)準(zhǔn)方案Nginx管前端獨(dú)立Java進(jìn)程管后端互不干擾。5. 文檔質(zhì)量與二次開發(fā)建議5.1 配套文檔怎么看、怎么用這套源碼自帶文檔很多人容易低估文檔的價(jià)值。我拿到的文檔內(nèi)容一般包括項(xiàng)目介紹、技術(shù)選型說明、數(shù)據(jù)庫表結(jié)構(gòu)說明、接口文檔、部署文檔?？次臋n有技巧不是從頭到尾讀一遍就完事而是帶著要解決的問題去查。后端要改接口邏輯就看對(duì)應(yīng)的控制器和Service代碼前端要做新頁面就看一個(gè)類似頁面的路由、接口和組件是怎么搭起來的。接口文檔的價(jià)值在聯(lián)調(diào)時(shí)尤其凸顯。用Swagger或接口文檔工具導(dǎo)出的API列表參數(shù)類型、是否必填、返回結(jié)構(gòu)一目了然。我自己排查問題最快的一次就是發(fā)現(xiàn)前端傳的參數(shù)名是goods_id后端解析的字段是goodsId對(duì)齊接口文檔之后五分鐘定位到問題。凡是前后端聯(lián)調(diào)出現(xiàn)參數(shù)對(duì)不上的詭異問題第一反應(yīng)一定是去查接口文檔而不是反復(fù)看代碼。5.2 從這套系統(tǒng)擴(kuò)展成真正能用的產(chǎn)品源碼是起點(diǎn)不是終點(diǎn)。要從能跑變成能用還有幾條路可以走第一個(gè)方向是消息推送能力?，F(xiàn)在的校園信息平臺(tái)如果需要實(shí)時(shí)通知用戶比如活動(dòng)報(bào)名成功提示、失物招領(lǐng)匹配提醒可以接入WebSocket或服務(wù)器推送技術(shù)。Spring Boot集成WebSocket后端用ServerEndpoint寫一個(gè)推送端點(diǎn)前端Vue3用new WebSocket()建立連接數(shù)據(jù)結(jié)構(gòu)可以自己定義核心是把用戶ID和連接會(huì)話做一個(gè)綁定關(guān)系這樣才能定向推送。第二個(gè)方向是文件資源管理?，F(xiàn)在圖片上傳都放在本地磁盤單機(jī)沒問題但生產(chǎn)環(huán)境如果有多個(gè)后端實(shí)例上傳的圖片在A機(jī)器、請(qǐng)求落到B機(jī)器就訪問不到了。把存儲(chǔ)層換成對(duì)象存儲(chǔ)或者至少規(guī)劃一個(gè)獨(dú)立的靜態(tài)資源域名是必須考慮的改造點(diǎn)。第三個(gè)方向是內(nèi)容審核自動(dòng)化。校園信息平臺(tái)如果用戶量上來人工審核內(nèi)容會(huì)變成大負(fù)擔(dān)?？梢詮膸讉€(gè)維度做自動(dòng)化敏感詞過濾、圖片審核、用戶舉報(bào)降權(quán)、異常發(fā)布行為風(fēng)控。這些能力在源碼基礎(chǔ)上是一個(gè)個(gè)模塊加進(jìn)去的結(jié)合Spring Boot AOP做方法級(jí)攔截改造起來非常順手。5.3 我做過的改造實(shí)踐和經(jīng)驗(yàn)總結(jié)最后分享兩個(gè)真實(shí)場(chǎng)景的調(diào)整記錄可以幫助你更好地理解數(shù)量級(jí)變化對(duì)系統(tǒng)的影響。第一件事我把這套系統(tǒng)的列表頁從每頁10條改成了每頁20條前端分頁參數(shù)改了之后發(fā)現(xiàn)接口響應(yīng)明顯變慢。排查后發(fā)現(xiàn)內(nèi)容表雖然create_time有索引但查詢條件里還用了status字段做過濾而status沒有索引。MySQL 8.0在聯(lián)合條件查詢時(shí)沒走理想的索引策略數(shù)據(jù)量到幾萬條后性能就有了可感知的下降。最后我加了一個(gè)(status, create_time)的聯(lián)合索引問題直接消失。這類數(shù)據(jù)量上來才會(huì)暴露的問題在校園平臺(tái)這種中小型系統(tǒng)里也可能會(huì)遇到遇到時(shí)別慌慢慢看執(zhí)行計(jì)劃。第二件事我在做用戶活躍度統(tǒng)計(jì)時(shí)用到了MySQL 8.0的窗口函數(shù)。統(tǒng)計(jì)每周發(fā)布內(nèi)容數(shù)量排名前10的用戶傳統(tǒng)寫法要自連接或子查詢用ROW_NUMBER()或RANK()窗口函數(shù)幾行就搞定了。這讓我強(qiáng)烈推薦大家在項(xiàng)目里多嘗試MySQL 8.0的新特性寫統(tǒng)計(jì)報(bào)表SQL會(huì)輕松一個(gè)量級(jí)。如果你正準(zhǔn)備上手這套源碼我的建議是拿到手先在本地完整跑通一遍然后用文檔里的數(shù)據(jù)庫說明把表結(jié)構(gòu)梳理一遍接著選一個(gè)你最感興趣的模塊從頭到尾讀一遍后端代碼和前端代碼的調(diào)用鏈路最后再動(dòng)手改一個(gè)功能。這樣一套流程走下來收獲遠(yuǎn)大于直接照著demo敲一遍。技術(shù)選型是工具業(yè)務(wù)理解才是核心。校園生活信息平臺(tái)本質(zhì)上做的是一件事把信息以合適的結(jié)構(gòu)展示給需要的人。想清楚了這一點(diǎn)用SpringBoot還是其他的框架用Vue3還是其他前端方案都只是實(shí)現(xiàn)路徑的選擇。 SpringBoot2+Vue3校園生活信息平臺(tái)：前后端分離實(shí)踐與部署
1. 項(xiàng)目解析與整體思路1.1 校園生活信息平臺(tái)到底解決什么問題大學(xué)校園的信息流通說實(shí)話一直是個(gè)說起來重要、做起來隨意的事情。今天社團(tuán)要納新明天食堂有新品試吃后天圖書館臨時(shí)閉館——這些信息要么貼在公告欄要么發(fā)在幾個(gè)微信群里要么干脆靠口口相傳。學(xué)生想找二手教材、想撿回丟了的校園卡、想了解周邊兼職往往要翻好幾個(gè)群聊記錄效率極低。這套大學(xué)校園生活信息平臺(tái)就是沖著這個(gè)痛點(diǎn)去的。把校園內(nèi)的信息聚合到一個(gè)Web應(yīng)用里學(xué)生登錄后能看到分類清晰的通知公告、活動(dòng)動(dòng)態(tài)、失物招領(lǐng)、二手交易、校園問答等內(nèi)容也能自己發(fā)布信息。管理員則通過后臺(tái)管理用戶、審核內(nèi)容、維護(hù)分類形成一套從信息發(fā)布到消費(fèi)的完整閉環(huán)。先說清楚這套系統(tǒng)的適合人群。如果你是Java后端方向的在校生或者準(zhǔn)備做畢業(yè)設(shè)計(jì)、課程設(shè)計(jì)的開發(fā)者這套源碼的價(jià)值在于它覆蓋了用戶認(rèn)證 內(nèi)容發(fā)布 分類檢索 后臺(tái)管理這類典型業(yè)務(wù)場(chǎng)景技術(shù)棧又是目前國內(nèi)中小型項(xiàng)目最主流的SpringBoot2 Vue3組合。拿它做底子去改造比從零擼一個(gè)項(xiàng)目省太多事。如果你是企業(yè)里的開發(fā)新人想看看現(xiàn)代Java Web項(xiàng)目前后端分離的工程結(jié)構(gòu)長什么樣這套系統(tǒng)同樣值得參考。1.2 為什么選擇SpringBoot2 Vue3這套組合選型這事往往不是選最好的而是選最不容易出錯(cuò)的。這套系統(tǒng)用SpringBoot 2.7.x而不是SpringBoot 3很多人可能會(huì)問新的不好嗎其實(shí)在校生和大部分企業(yè)生產(chǎn)環(huán)境SpringBoot 2仍然是存量最大的版本。SpringBoot 3強(qiáng)制要求JDK 17起步一些老依賴的兼容成本會(huì)拖慢開發(fā)節(jié)奏。SpringBoot 2搭配JDK 8或JDK 11生態(tài)成熟網(wǎng)上資料多遇到問題搜一下就能找到答案這對(duì)學(xué)習(xí)者和中小型項(xiàng)目來說是實(shí)打?qū)嵉膬?yōu)勢(shì)。前端選Vue3而不是Vue2邏輯更簡單——Vue2已經(jīng)在2023年底停止維護(hù)新項(xiàng)目再用它等于給自己埋雷。而且Vue3的組合式APIComposition API在邏輯復(fù)用上的體驗(yàn)確實(shí)比Vue2的Options API舒服得多。再聊MyBatis-Plus。傳統(tǒng)MyBatis寫CRUD要手寫一堆XML單表操作用MyBatis-Plus幾乎不用寫SQL只靠BaseMapper提供的接口就能完成大部分持久化工作。配合它內(nèi)置的分頁插件、邏輯刪除、自動(dòng)填充開發(fā)效率是肉眼可見地提升。MySQL 8.0則是水到渠成的選擇窗口函數(shù)、公用表表達(dá)式CTE這些高級(jí)特性在寫統(tǒng)計(jì)報(bào)表類需求時(shí)非常好用而且8.0的默認(rèn)字符集utf8mb4對(duì)emoji等特殊字符的支持更友好做校園論壇類業(yè)務(wù)時(shí)會(huì)省掉不少亂碼煩惱。2. 數(shù)據(jù)庫設(shè)計(jì)與后端核心實(shí)現(xiàn)2.1 MySQL 8.0數(shù)據(jù)庫表結(jié)構(gòu)設(shè)計(jì)要點(diǎn)數(shù)據(jù)庫設(shè)計(jì)是整套系統(tǒng)的地基。我第一次跑通這套源碼時(shí)把核心表梳理了一遍發(fā)現(xiàn)它的設(shè)計(jì)思路很典型用戶體系、內(nèi)容體系、交互體系分開每張表都留著擴(kuò)展余地。用戶表user是最基礎(chǔ)的字段大致包含id、username、password、nickname、avatar、phone、email、role學(xué)生/管理員、status正常/禁用、create_time、update_time。密碼存儲(chǔ)用的是BCrypt加密不是MD5也不是SHA1這一點(diǎn)值得好好學(xué)習(xí)——BCrypt每次加密生成的鹽都不同就算兩個(gè)用戶密碼一樣密文也不一樣暴力破解的成本高得多。內(nèi)容類表是整個(gè)系統(tǒng)的大頭圍繞信息發(fā)布場(chǎng)景拆分成多張表表名核心字段業(yè)務(wù)說明noticeid, title, content, category_id, publisher_id, status, views發(fā)布通知公告activityid, title, description, location, start_time, end_time, organizer, cover_url校園活動(dòng)信息lost_foundid, type(失物/招領(lǐng)), title, description, contact, status, image失物招領(lǐng)模塊second_handid, title, price, description, images, seller_id, status二手交易questionid, title, content, author_id, reward_point, status校園問答設(shè)計(jì)內(nèi)容表時(shí)有個(gè)容易忽略的坑盡量把分類信息做成category_id外鍵關(guān)聯(lián)而不是直接存字符串。雖然直接存失物招領(lǐng)這種字符串看起來簡單但后期想改分類名、做統(tǒng)計(jì)聚合就要寫一堆麻煩的UPDATE語句。用關(guān)聯(lián)表或關(guān)聯(lián)ID配合JOIN查詢擴(kuò)展性完全不一樣。MySQL 8.0還有一個(gè)非常實(shí)用的特性就是可以直接用CREATE TABLE ... LIKE復(fù)制表結(jié)構(gòu)做臨時(shí)表排查數(shù)據(jù)問題的時(shí)候比手動(dòng)建一張同結(jié)構(gòu)表快得多。索引設(shè)計(jì)上每張內(nèi)容表我都建議給create_time加索引因?yàn)榱斜聿樵兡J(rèn)按時(shí)間倒序這個(gè)索引能明顯減少排序開銷。系統(tǒng)源碼里大部分內(nèi)容表都有這個(gè)索引屬于中規(guī)中矩但正確的設(shè)計(jì)。2.2 MyBatis-Plus的高效CRUD實(shí)踐MyBatis-Plus最核心的玩法就是讓你的Mapper接口繼承BaseMapperT然后一堆單表操作就自動(dòng)有了。public interface NoticeMapper extends BaseMapperNotice { // 復(fù)雜查詢才需要自定義方法 IPageNotice selectNoticePage(PageNotice page, Param(keyword) String keyword); }有了這層繼承你不寫XML也能完成insert、deleteById、selectById、updateById、selectList這些基礎(chǔ)操作。但真正讓開發(fā)效率起飛的是它的QueryWrapper和LambdaQueryWrapper。比如查最新發(fā)布的前10條活動(dòng)信息且狀態(tài)為已發(fā)布一行代碼搞定LambdaQueryWrapperActivity wrapper new LambdaQueryWrapper(); wrapper.eq(Activity::getStatus, 1) .orderByDesc(Activity::getCreateTime) .last(limit 10); ListActivity list activityMapper.selectList(wrapper);LambdaQueryWrapper相比字符串形式的QueryWrapper最大的好處是類型安全——字段名寫錯(cuò)了編譯期就能發(fā)現(xiàn)不會(huì)等到運(yùn)行時(shí)SQL報(bào)錯(cuò)才排查。我在項(xiàng)目里只用一個(gè)原則單表查詢一律用Wrapper多表關(guān)聯(lián)才寫XML或注解SQL。MyBatis-Plus的分頁插件配置也很關(guān)鍵。如果你忘了配置MybatisPlusInterceptorselectPage查出來的數(shù)據(jù)會(huì)是全量然后內(nèi)存里截?cái)鄶?shù)據(jù)量一大直接系統(tǒng)變慢。正確配置如下Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); PaginationInnerInterceptor pagination new PaginationInnerInterceptor(DbType.MYSQL); pagination.setMaxLimit(100L); // 防止一次性查過多數(shù)據(jù) interceptor.addInnerInterceptor(pagination); return interceptor; } }setMaxLimit(100L)是我強(qiáng)烈建議加上的——它可以從框架層面阻止有人惡意調(diào)用接口時(shí)size傳一個(gè)巨大的值把數(shù)據(jù)庫查崩。這種防御性設(shè)置很多項(xiàng)目都忽略了。另外字段自動(dòng)填充用起來也舒服。新建實(shí)體時(shí)createTime和updateTime如果有TableField(fill FieldFill.INSERT)標(biāo)記再寫一個(gè)實(shí)現(xiàn)MetaObjectHandler接口的類就能在插入和更新時(shí)自動(dòng)填充時(shí)間字段業(yè)務(wù)代碼里完全不用關(guān)心時(shí)間戳賦值。2.3 關(guān)鍵業(yè)務(wù)模塊的接口設(shè)計(jì)這套系統(tǒng)的后端接口風(fēng)格是標(biāo)準(zhǔn)的RESTful。認(rèn)證模塊用JWTJSON Web Token做無狀態(tài)登錄用戶登錄成功后后端返回一個(gè)token前端把它存到本地之后每次請(qǐng)求都在請(qǐng)求頭帶上Authorization: Bearer token后端通過攔截器校驗(yàn)身份。這么做的好處是服務(wù)端不需要存Session對(duì)前后端分離部署非常友好。登錄接口的邏輯大致這樣PostMapping(/login) public Result login(RequestBody LoginDTO dto) { // 1. 根據(jù)用戶名查用戶 User user userMapper.selectOne( new LambdaQueryWrapperUser() .eq(User::getUsername, dto.getUsername()) ); // 2. 校驗(yàn)密碼BCrypt if (user null || !BCrypt.checkpw(dto.getPassword(), user.getPassword())) { return Result.error(用戶名或密碼錯(cuò)誤); } // 3. 檢查狀態(tài) if (user.getStatus() 0) { return Result.error(賬號(hào)已被禁用); } // 4. 生成JWT String token JwtUtil.generateToken(user.getId(), user.getUsername(), user.getRole()); return Result.success(new LoginVO(token, user)); }內(nèi)容發(fā)布類的接口除了必要的參數(shù)校驗(yàn)后端還需要做一層權(quán)限校驗(yàn)?zāi)男┙巧馨l(fā)布、哪些內(nèi)容需要管理員審核。這套系統(tǒng)的處理方式是發(fā)布接口要求登錄發(fā)布之后內(nèi)容狀態(tài)默認(rèn)為待審核管理員在后臺(tái)審核通過才對(duì)外展示。這種設(shè)計(jì)比起所有內(nèi)容直接發(fā)布可控性高很多適合校園場(chǎng)景避免有人亂發(fā)廣告或不當(dāng)內(nèi)容。我還注意到一個(gè)細(xì)節(jié)分頁接口統(tǒng)一返回格式為{ records, total, current, size }前端配合Vue3的分頁組件幾乎是拿到即用。接口返回統(tǒng)一用Result包裝類約定code200表示成功其他code表示各種業(yè)務(wù)錯(cuò)誤。這種統(tǒng)一約定前后端聯(lián)調(diào)時(shí)最大的價(jià)值是——不需要每個(gè)接口都討論返回結(jié)構(gòu)長什么樣效率提升非常明顯。3. Vue3前端工程化實(shí)踐3.1 Vite構(gòu)建 Element Plus組件庫Vue3項(xiàng)目用Vite做構(gòu)建工具現(xiàn)在基本是默認(rèn)選項(xiàng)了相比Webpack冷啟動(dòng)速度快到讓人心情舒暢。Vite基于原生ESModule開發(fā)的時(shí)候只編譯修改的文件而不是整包重新打那種秒級(jí)熱更新的體驗(yàn)用習(xí)慣了真的回不去。前端工程結(jié)構(gòu)上頁面組件放在src/views公共組件放src/components狀態(tài)管理用Pinia路由用Vue Router 4。這套結(jié)構(gòu)是目前Vue3社區(qū)的標(biāo)準(zhǔn)答案照著寫基本不會(huì)出大錯(cuò)。Element Plus作為UI組件庫提供了表格、表單、彈窗、分頁等現(xiàn)成組件做后臺(tái)管理類界面效率極高。校園信息平臺(tái)的用戶端界面用Element Plus的卡片、列表、標(biāo)簽組件也能拼出很清爽的效果。// vite.config.ts 關(guān)鍵配置 import { defineConfig } from vite; import vue from vitejs/plugin-vue; export default defineConfig({ plugins: [vue()], server: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } });這個(gè)proxy配置尤其重要它解決了開發(fā)環(huán)境的跨域問題。前后端分離的項(xiàng)目前端運(yùn)行在3000端口后端在8080端口如果不在Vite里代理瀏覽器直接發(fā)請(qǐng)求會(huì)被CORS攔下來。配了代理之后前端代碼里寫的/api/login在開發(fā)時(shí)會(huì)被自動(dòng)轉(zhuǎn)發(fā)到http://localhost:8080/api/login聯(lián)調(diào)體驗(yàn)非常順滑。3.2 組合式API與核心頁面實(shí)現(xiàn)Vue3的組合式API對(duì)比Options API最大的區(qū)別就是讓代碼按功能組織而不是按選項(xiàng)類型組織。同一個(gè)功能的響應(yīng)式變量、計(jì)算屬性、方法、監(jiān)聽器可以放在一起寫改代碼時(shí)不用上下反復(fù)跳。以失物招領(lǐng)頁面為例核心邏輯用組合式API寫出來大概是這樣的結(jié)構(gòu)script setup langts import { ref, onMounted } from vue; import { getLostFoundList } from /api/lostFound; import { ElMessage } from element-plus; // 響應(yīng)式數(shù)據(jù) const list ref([]); const total ref(0); const loading ref(false); const queryParams reactive({ current: 1, size: 10, type: , status: 1 }); // 加載列表 async function loadList() { loading.value true; try { const res await getLostFoundList(queryParams); list.value res.data.records; total.value res.data.total; } finally { loading.value false; } } // 頁碼變化時(shí)重新加載 function handlePageChange(page: number) { queryParams.current page; loadList(); } onMounted(loadList); /script這個(gè)模式可以通用到幾乎所有列表頁定義查詢參數(shù)、調(diào)用接口、回填列表數(shù)據(jù)、處理分頁。我第一次用組合式API寫這種頁面時(shí)最大的感受是邏輯密度高且結(jié)構(gòu)線性不像Options API那樣數(shù)據(jù)、方法、生命周期散落三個(gè)區(qū)域。script setup語法糖更是把模板里的變量暴露操作簡化到了極致寫起來像是寫一個(gè)特別大的函數(shù)組件。用戶端的頁面還有幾個(gè)值得留意的交互細(xì)節(jié)。比如二手交易首頁每個(gè)商品卡片上有縮略圖、價(jià)格、成色標(biāo)簽點(diǎn)擊進(jìn)入詳情頁之后能看到賣家信息。這種前后端分離的項(xiàng)目圖片存的是URL字符串前端用el-image組件去渲染同時(shí)做好懶加載。大圖多的時(shí)候懶加載能顯著加速首屏渲染。3.3 Pinia狀態(tài)管理與權(quán)限控制Pinia是Vue3官方推薦的狀態(tài)管理庫比Vuex更簡潔沒有mutations的概念直接在store里寫action函數(shù)就能修改state。校園信息平臺(tái)的用戶狀態(tài)用Pinia存儲(chǔ)很合適登錄成功之后把用戶信息保存到store里導(dǎo)航欄的頭像和用戶名就反應(yīng)式地更新了。// stores/user.ts export const useUserStore defineStore(user, { state: () ({ token: localStorage.getItem(token) || , userInfo: null }), getters: { isLogin: (state) !!state.token, isAdmin: (state) state.userInfo?.role ADMIN }, actions: { login(token: string, user: UserInfo) { this.token token; this.userInfo user; localStorage.setItem(token, token); }, logout() { this.token ; this.userInfo null; localStorage.removeItem(token); } } });token放localStorage是一種常見做法好處是刷新頁面后會(huì)話不丟。風(fēng)險(xiǎn)點(diǎn)在于XSS攻擊——如果頁面被注入了惡意腳本腳本可以直接讀取localStorage拿到token。為了緩解這個(gè)風(fēng)險(xiǎn)前端要對(duì)用戶輸入內(nèi)容做轉(zhuǎn)義處理Element Plus的表單校驗(yàn)和基本組件本身就做了不少防護(hù)。更穩(wěn)妥的替代方案是放httpOnly Cookie但那樣又要改后端跨域配置權(quán)衡之下很多項(xiàng)目還是愿意存在localStorage。路由權(quán)限這塊Vue Router 4支持在路由配置里加meta字段標(biāo)記角色然后通過全局前置守衛(wèi)beforeEach做攔截router.beforeEach((to, from, next) { const userStore useUserStore(); if (to.meta.requiresAuth !userStore.isLogin) { next({ path: /login, query: { redirect: to.fullPath } }); } else if (to.meta.requiresAdmin !userStore.isAdmin) { next({ path: / }); } else { next(); } });再加上后端接口的權(quán)限攔截雙保險(xiǎn)基本能覆蓋校園信息平臺(tái)的權(quán)限需求。這里我強(qiáng)烈建議前端權(quán)限只能管體驗(yàn)和界面真正的數(shù)據(jù)安全必須靠后端控制否則接口被直接調(diào)用繞過前端也攔截不了。4. 部署、文檔與常見問題排查4.1 本地開發(fā)環(huán)境搭建想跑通這套系統(tǒng)先花半小時(shí)把環(huán)境準(zhǔn)備好后面會(huì)順暢很多。環(huán)境清單JDK 8或11SpringBoot 2完全支持Maven 3.6MySQL 8.0本地或Docker都行Node.js 16Vue3和Vite的要求IDEA社區(qū)版免費(fèi)但最好裝Lombok插件MySQL 8.0的安裝Windows用戶我推薦直接下載ZIP包解壓安裝不裝MSI安裝器因?yàn)镸SI版本經(jīng)常被系統(tǒng)權(quán)限卡住。解壓之后執(zhí)行mysqld --initialize-insecure初始化然后net start mysql啟動(dòng)服務(wù)再用mysql -uroot -p免密登錄后改密碼一套下來十分鐘搞定。Linux環(huán)境如果有Docker更省事docker run -d \ --name mysql8 \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORD123456 \ -e MYSQL_DATABASEcampus \ mysql:8.0前端依賴安裝有個(gè)注意點(diǎn)優(yōu)先用npm install不要用cnpm。cnpm雖然下載快但經(jīng)常出現(xiàn)依賴的軟鏈接結(jié)構(gòu)異常導(dǎo)致Vite啟動(dòng)報(bào)錯(cuò)排查起來很痛苦。如果npm網(wǎng)絡(luò)慢可以設(shè)置淘寶鏡像npm config set registry https://registry.npmmirror.com速度和穩(wěn)定性都比cnpm好。數(shù)據(jù)庫初始化時(shí)注意MySQL 8.0的默認(rèn)認(rèn)證插件是caching_sha2_password有些老版本的數(shù)據(jù)庫連接驅(qū)動(dòng)只支持mysql_native_password會(huì)報(bào)Public Key Retrieval is not allowed之類的錯(cuò)誤。解決辦法有兩個(gè)一是把數(shù)據(jù)庫連接URL加上allowPublicKeyRetrievaltrue二是在application.yml里正確配置驅(qū)動(dòng)類com.mysql.cj.jdbc.Driver。這套源碼的數(shù)據(jù)庫URL還帶了一長串參數(shù)其中useSSLfalse是必要的本地開發(fā)環(huán)境不需要SSL加密。4.2 常見問題速查表跑項(xiàng)目過程中幾個(gè)高頻問題基本每個(gè)開發(fā)者都會(huì)遇到直接整理成速查表問題現(xiàn)象根本原因解決辦法后端啟動(dòng)失敗報(bào)Unknown database campus數(shù)據(jù)庫沒有創(chuàng)建先執(zhí)行CREATE DATABASE campus再初始化SQL腳本前端接口請(qǐng)求全部404Vite代理路徑和后端context-path不一致檢查前后端/api前綴是否統(tǒng)一登錄后前端反復(fù)跳回登錄頁token寫入/讀出不一致或JWT密鑰不對(duì)檢查Pinia里存儲(chǔ)的token key和后端JWT配置是否一致MyBatis-Plus分頁不生效返回全量沒配置PaginationInnerInterceptor按前文配置加入MybatisPlusInterceptor時(shí)間差8小時(shí)數(shù)據(jù)庫時(shí)區(qū)設(shè)置問題JDBC URL加serverTimezoneAsia/Shanghai上傳圖片打不開本地存儲(chǔ)路徑配置不對(duì)檢查application.yml里的文件上傳路徑并做靜態(tài)資源映射npm install后Vite啟動(dòng)報(bào)錯(cuò)依賴版本不匹配刪除node_modules和package-lock.json重新安裝時(shí)間問題一定要單獨(dú)強(qiáng)調(diào)。MySQL 8.0默認(rèn)時(shí)區(qū)是UTC如果JDBC URL沒指定serverTimezoneJava的LocalDateTime讀到的時(shí)間會(huì)比你本地時(shí)間晚8小時(shí)。校園活動(dòng)的開始時(shí)間是晚上7點(diǎn)前端顯示成了凌晨3點(diǎn)這個(gè)bug排查起來極其迷惑。解決方案就是在連接串里顯式寫上serverTimezoneAsia/Shanghai同時(shí)可以在MySQL里執(zhí)行SET GLOBAL time_zone 8:00徹底根治。4.3 不同難度環(huán)境的部署思路開發(fā)環(huán)境跑通之后把系統(tǒng)真正部署到服務(wù)器上是另一個(gè)階段。這套系統(tǒng)前端是純靜態(tài)文件后端是Spring Boot的可執(zhí)行JAR包部署思路很清晰后端部署用Maven打包前先確認(rèn)application.yml里數(shù)據(jù)庫連接改成了生產(chǎn)環(huán)境配置然后執(zhí)行mvn clean package -DskipTests生成的JAR包直接放到服務(wù)器上nohup java -jar campus-server.jar --spring.profiles.activeprod app.log 21 前端部署npm run build之后生成的dist目錄是一堆靜態(tài)文件可以交給Nginx托管同時(shí)Nginx配置反向代理把/api開頭的請(qǐng)求轉(zhuǎn)發(fā)到后端的8080端口server { listen 80; server_name campus.example.com; root /var/www/campus/dist; index 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; } location / { try_files $uri $uri/ /index.html; } }try_files $uri $uri/ /index.html這一行千萬不能少。Vue Router用了history模式刷新/lost-found這個(gè)路徑時(shí)Nginx要在磁盤上找不到對(duì)應(yīng)文件的情況下把請(qǐng)求導(dǎo)回index.html讓Vue Router接管路由。少了這行刷新就404部署上線后最常踩的坑之一。如果服務(wù)器內(nèi)存緊張前端還可以考慮不單獨(dú)部署Nginx直接用Spring Boot的靜態(tài)資源映射把dist目錄托管但那樣會(huì)讓前后端耦合以后做獨(dú)立部署或擴(kuò)容會(huì)麻煩很多。我的建議是標(biāo)準(zhǔn)方案Nginx管前端獨(dú)立Java進(jìn)程管后端互不干擾。5. 文檔質(zhì)量與二次開發(fā)建議5.1 配套文檔怎么看、怎么用這套源碼自帶文檔很多人容易低估文檔的價(jià)值。我拿到的文檔內(nèi)容一般包括項(xiàng)目介紹、技術(shù)選型說明、數(shù)據(jù)庫表結(jié)構(gòu)說明、接口文檔、部署文檔?？次臋n有技巧不是從頭到尾讀一遍就完事而是帶著要解決的問題去查。后端要改接口邏輯就看對(duì)應(yīng)的控制器和Service代碼前端要做新頁面就看一個(gè)類似頁面的路由、接口和組件是怎么搭起來的。接口文檔的價(jià)值在聯(lián)調(diào)時(shí)尤其凸顯。用Swagger或接口文檔工具導(dǎo)出的API列表參數(shù)類型、是否必填、返回結(jié)構(gòu)一目了然。我自己排查問題最快的一次就是發(fā)現(xiàn)前端傳的參數(shù)名是goods_id后端解析的字段是goodsId對(duì)齊接口文檔之后五分鐘定位到問題。凡是前后端聯(lián)調(diào)出現(xiàn)參數(shù)對(duì)不上的詭異問題第一反應(yīng)一定是去查接口文檔而不是反復(fù)看代碼。5.2 從這套系統(tǒng)擴(kuò)展成真正能用的產(chǎn)品源碼是起點(diǎn)不是終點(diǎn)。要從能跑變成能用還有幾條路可以走第一個(gè)方向是消息推送能力?，F(xiàn)在的校園信息平臺(tái)如果需要實(shí)時(shí)通知用戶比如活動(dòng)報(bào)名成功提示、失物招領(lǐng)匹配提醒可以接入WebSocket或服務(wù)器推送技術(shù)。Spring Boot集成WebSocket后端用ServerEndpoint寫一個(gè)推送端點(diǎn)前端Vue3用new WebSocket()建立連接數(shù)據(jù)結(jié)構(gòu)可以自己定義核心是把用戶ID和連接會(huì)話做一個(gè)綁定關(guān)系這樣才能定向推送。第二個(gè)方向是文件資源管理?，F(xiàn)在圖片上傳都放在本地磁盤單機(jī)沒問題但生產(chǎn)環(huán)境如果有多個(gè)后端實(shí)例上傳的圖片在A機(jī)器、請(qǐng)求落到B機(jī)器就訪問不到了。把存儲(chǔ)層換成對(duì)象存儲(chǔ)或者至少規(guī)劃一個(gè)獨(dú)立的靜態(tài)資源域名是必須考慮的改造點(diǎn)。第三個(gè)方向是內(nèi)容審核自動(dòng)化。校園信息平臺(tái)如果用戶量上來人工審核內(nèi)容會(huì)變成大負(fù)擔(dān)?？梢詮膸讉€(gè)維度做自動(dòng)化敏感詞過濾、圖片審核、用戶舉報(bào)降權(quán)、異常發(fā)布行為風(fēng)控。這些能力在源碼基礎(chǔ)上是一個(gè)個(gè)模塊加進(jìn)去的結(jié)合Spring Boot AOP做方法級(jí)攔截改造起來非常順手。5.3 我做過的改造實(shí)踐和經(jīng)驗(yàn)總結(jié)最后分享兩個(gè)真實(shí)場(chǎng)景的調(diào)整記錄可以幫助你更好地理解數(shù)量級(jí)變化對(duì)系統(tǒng)的影響。第一件事我把這套系統(tǒng)的列表頁從每頁10條改成了每頁20條前端分頁參數(shù)改了之后發(fā)現(xiàn)接口響應(yīng)明顯變慢。排查后發(fā)現(xiàn)內(nèi)容表雖然create_time有索引但查詢條件里還用了status字段做過濾而status沒有索引。MySQL 8.0在聯(lián)合條件查詢時(shí)沒走理想的索引策略數(shù)據(jù)量到幾萬條后性能就有了可感知的下降。最后我加了一個(gè)(status, create_time)的聯(lián)合索引問題直接消失。這類數(shù)據(jù)量上來才會(huì)暴露的問題在校園平臺(tái)這種中小型系統(tǒng)里也可能會(huì)遇到遇到時(shí)別慌慢慢看執(zhí)行計(jì)劃。第二件事我在做用戶活躍度統(tǒng)計(jì)時(shí)用到了MySQL 8.0的窗口函數(shù)。統(tǒng)計(jì)每周發(fā)布內(nèi)容數(shù)量排名前10的用戶傳統(tǒng)寫法要自連接或子查詢用ROW_NUMBER()或RANK()窗口函數(shù)幾行就搞定了。這讓我強(qiáng)烈推薦大家在項(xiàng)目里多嘗試MySQL 8.0的新特性寫統(tǒng)計(jì)報(bào)表SQL會(huì)輕松一個(gè)量級(jí)。如果你正準(zhǔn)備上手這套源碼我的建議是拿到手先在本地完整跑通一遍然后用文檔里的數(shù)據(jù)庫說明把表結(jié)構(gòu)梳理一遍接著選一個(gè)你最感興趣的模塊從頭到尾讀一遍后端代碼和前端代碼的調(diào)用鏈路最后再動(dòng)手改一個(gè)功能。這樣一套流程走下來收獲遠(yuǎn)大于直接照著demo敲一遍。技術(shù)選型是工具業(yè)務(wù)理解才是核心。校園生活信息平臺(tái)本質(zhì)上做的是一件事把信息以合適的結(jié)構(gòu)展示給需要的人。想清楚了這一點(diǎn)用SpringBoot還是其他的框架用Vue3還是其他前端方案都只是實(shí)現(xiàn)路徑的選擇。