把創(chuàng)新創(chuàng)業(yè)教育中心的項目申報管理從Excel表格解放出來是我今年做的比較有成就感的一件事。這套系統(tǒng)采用SpringBootVue3MyBatisMySQL的前后端分離架構(gòu)覆蓋了從項目申報、指導(dǎo)教師審核、專家評審到結(jié)題驗收的完整閉環(huán)。前后端分離開發(fā)MySQL做數(shù)據(jù)持久化Web端操作流暢跑在校園網(wǎng)里非常穩(wěn)定。如果你正準(zhǔn)備做類似的管理系統(tǒng)或者正在糾結(jié)SpringBootVue3這套技術(shù)棧怎么選、怎么搭建這篇內(nèi)容會給你一個可以直接參考的完整落地路徑。1. 項目概述與核心需求拆解1.1 創(chuàng)新創(chuàng)業(yè)教育中心申報管理的現(xiàn)實痛點做這個系統(tǒng)之前創(chuàng)新創(chuàng)業(yè)教育中心的項目申報基本停留在“紙質(zhì)提交Excel匯總?cè)斯ち鬓D(zhuǎn)”的模式。學(xué)生提交申報書靠發(fā)郵件或者線下交材料指導(dǎo)老師簽字靠跑辦公室中心管理員統(tǒng)計項目信息要手動復(fù)制粘貼評審專家打分更是各看各的最后匯總成績要花好幾天。整個過程至少有四個問題流程進(jìn)度不透明學(xué)生不知道自己的項目卡在哪一步材料版本混亂同一個項目可能提交了好幾個版本的申報書數(shù)據(jù)統(tǒng)計靠人工項目類別、經(jīng)費預(yù)算、負(fù)責(zé)人信息這些字段整理起來又慢又容易錯歷史項目資料散落在不同人的電腦里第二年想查一下之前的項目數(shù)據(jù)根本找不到。所以立項時候的目標(biāo)很清晰做一個Web應(yīng)用讓學(xué)生在線填寫申報書、上傳附件、查看審核進(jìn)度讓指導(dǎo)老師和評審專家在線審核打分讓管理員可以靈活配置評審流程、導(dǎo)出各類統(tǒng)計報表。核心不是“做個網(wǎng)站”而是把整個申報業(yè)務(wù)規(guī)則用系統(tǒng)固化下來。1.2 技術(shù)選型為什么是SpringBootVue3MyBatis選型這件事很多人喜歡追新但實際做項目要的是穩(wěn)定、好招人、好維護(hù)。這套組合在2026年的校園項目和中小型企業(yè)管理系統(tǒng)中依然具有很強(qiáng)的普適性。后端選SpringBoot理由非常直接簡化配置內(nèi)嵌Tomcat一個SpringBootApplication注解就能啟動一個可運行的Web服務(wù)。它不像老式SSH框架那樣寫一堆XML配置也不像Spring Cloud那樣引入全套微服務(wù)組件——對這樣一個單體應(yīng)用來說SpringBoot屬于“開箱即用、按需擴(kuò)展”的定位。Java語言本身類型安全適合承載申報管理這類業(yè)務(wù)規(guī)則比較嚴(yán)謹(jǐn)?shù)南到y(tǒng)而且高校里用Java做服務(wù)端的團(tuán)隊占比很高后續(xù)找人接手維護(hù)也容易。前端選Vue3而不是Vue2不是跟風(fēng)而是Vue3的組合式API(Composition API)確實更適合中后臺開發(fā)。申報管理系統(tǒng)的頁面邏輯集中在“表單表格狀態(tài)流轉(zhuǎn)”如果用選項式API(Options API)一個申請表單頁可能需要維護(hù)data、computed、methods多個部分跳來跳去很割裂。組合式API可以把“申報表單校驗”“附件上傳邏輯”“審核狀態(tài)展示”各自封裝成setup里的邏輯單元代碼可讀性和復(fù)用性都明顯提升。配合Vite構(gòu)建工具開發(fā)熱更新速度快打包體積也能控制。MyBatis的存在感不像SpringBoot那么強(qiáng)但它是這套系統(tǒng)里跟數(shù)據(jù)庫打交道最順手的一層。為什么不用Spring Data JPA因為申報管理系統(tǒng)的SQL查詢非常具體統(tǒng)計某個學(xué)院某年各類別項目數(shù)量、聯(lián)表查詢用戶和申報書、按條件動態(tài)篩選……MyBatis直接用XML寫SQL控制力更強(qiáng)尤其是多表聯(lián)查和動態(tài)SQL的場景寫起來是“所見即所得”優(yōu)化起來也更直觀。MySQL作為數(shù)據(jù)庫不用多解釋開源、免費、生態(tài)成熟校園項目部署在服務(wù)器上連授權(quán)費都不用考慮。用InnoDB引擎做事務(wù)支持保證申報書提交、審核操作等關(guān)鍵數(shù)據(jù)操作的安全可靠。2. 系統(tǒng)整體架構(gòu)與數(shù)據(jù)庫設(shè)計2.1 前后端分離架構(gòu)的職責(zé)劃分前后端分離這個詞被說濫了真正落地的時候還是要清晰的邊界。系統(tǒng)分成兩個獨立的工程innovation-server后端API服務(wù)端口默認(rèn)8080和innovation-web前端Vue3應(yīng)用開發(fā)環(huán)境端口5173生產(chǎn)環(huán)境打成靜態(tài)文件部署在Nginx或者直接塞進(jìn)SpringBoot的static目錄。后端只負(fù)責(zé)三件事提供RESTful API、做業(yè)務(wù)邏輯處理、和MySQL交互。它不關(guān)心頁面長什么樣只返回JSON數(shù)據(jù)。前端只負(fù)責(zé)兩件事渲染頁面、收集用戶操作并通過Axios調(diào)用API。兩端通過統(tǒng)一的接口協(xié)議通信我用的響應(yīng)格式是{ code, message, data }code為0表示成功其他值為異常碼。部署形態(tài)上有兩種選擇方案一是前后端完全分離前端打包后配Nginx反向代理/api到后端8080端口方案二是把前端打包后的dist目錄拷貝到后端src/main/resources/static下直接用SpringBoot托管靜態(tài)資源。我給中心部署時用的是方案二因為校園網(wǎng)里就一臺Windows服務(wù)器裝一個Tomcat窗口跑一個Jar包最簡單少維護(hù)一個Nginx進(jìn)程。開發(fā)調(diào)試階段則完全分開跑用Vite代理解決跨域問題。2.2 數(shù)據(jù)庫表設(shè)計與MySQL配置要點數(shù)據(jù)庫設(shè)計是這類業(yè)務(wù)系統(tǒng)的地基我一開始就定了八張核心表表名職責(zé)關(guān)鍵字段sys_user用戶表id, username, password, real_name, role_id, college_idsys_role角色表id, role_code, role_namesys_college學(xué)院表id, college_nameproject_category項目類別表id, category_name, max_fundingproject_application申報書主表id, user_id, project_name, category_id, summary, status, budget, submit_timeproject_member項目成員表id, application_id, member_name, student_no, majorreview_record審核記錄表id, application_id, reviewer_id, score, comment, review_timeattachment_info附件表id, application_id, file_name, file_path, upload_time其中project_application.status是整個系統(tǒng)的業(yè)務(wù)核心我用一個tinyint字段存儲狀態(tài)碼0草稿、1已提交待初核、2初核通過待評審、3初核駁回、4評審中、5已立項、6已結(jié)題、7已終止。狀態(tài)流轉(zhuǎn)圖其實不需要在數(shù)據(jù)庫里做復(fù)雜設(shè)計只要在Service層寫好狀態(tài)機(jī)校驗邏輯就行禁止從“草稿”直接跳到“已立項”每個狀態(tài)的合法去向都定義清楚。MySQL配置方面有兩點值得說道。第一點是字符集建庫時我明確指定CREATE DATABASE innovation_center DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;utf8mb4是必須的因為申報書摘要里經(jīng)常有emoji表情、特殊字符老版utf8存不下。第二點是連接池配置我在application.yml里設(shè)置了HikariCP的核心參數(shù)spring: datasource: url: jdbc:mysql://localhost:3306/innovation_center?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalseallowPublicKeyRetrievaltrue username: root password: xxxxxx driver-class-name: com.mysql.cj.jdbc.Driver hikari: maximum-pool-size: 20 minimum-idle: 5 connection-timeout: 30000serverTimezoneAsia/Shanghai一定不能漏MySQL 8.x默認(rèn)時區(qū)是UTCJava服務(wù)跑在本地時區(qū)兩者不一致會導(dǎo)致java.time.LocalDateTime查詢結(jié)果差8個小時。allowPublicKeyRetrievaltrue是MySQL 8.x配合RSA加密連接時的常見連接錯誤解法不加的話會報Public Key Retrieval is not allowed。這些細(xì)節(jié)不踩一次坑根本記不住。3. 后端核心實現(xiàn)SpringBootMyBatis3.1 項目骨架與依賴配置創(chuàng)建SpringBoot項目我用的是Spring InitializrIDEA內(nèi)置的也可以Java版本選了17SpringBoot版本選了2.7.18。這里有個實際經(jīng)驗不要盲目用SpringBoot 3.x因為3.x基于Jakarta命名空間很多老教程和第三方包還沒完全跟上校園項目里2.7.x足夠穩(wěn)定Spring Security的用法也更常見。核心依賴如下dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-validation/artifactId /dependency dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.3.2/version /dependency dependency groupIdcom.mysql/groupId artifactIdmysql-connector-j/artifactId scoperuntime/scope /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies包結(jié)構(gòu)我習(xí)慣按業(yè)務(wù)模塊劃分而不是嚴(yán)格按技術(shù)類型劃分也就是controller/service/mapper/entity先建一層基礎(chǔ)包再在entity里按system和project兩個業(yè)務(wù)域拆子包。這樣一方面不會讓mapper目錄堆幾十個接口另一方面也方便后期拆微服務(wù)時直接按包遷移。3.2 用戶認(rèn)證與權(quán)限控制申報管理系統(tǒng)的用戶角色有學(xué)生、指導(dǎo)教師、評審專家、中心管理員四類權(quán)限控制必須做但不能做得太重。我最終選了Spring Security JWT的組合沒有引入Spring Security OAuth2那套復(fù)雜體系。JWT登錄的流程很直接用戶提交用戶名密碼后端校驗通過后生成一個包含用戶ID和角色編碼的Token客戶端存在LocalStorage里每次請求在Authorization請求頭帶上Bearer {token}。后端用OncePerRequestFilter攔截請求解析Token后把用戶信息塞進(jìn)SecurityContextHolder然后在PreAuthorize注解里寫權(quán)限規(guī)則。這里有個新手容易踩的坑Spring Security的默認(rèn)行為會攔截所有請求并生成登錄頁接入JWT之后一定要顯式放行登錄接口和靜態(tài)資源。我花了大半天排查為什么登錄接口返回401最后發(fā)現(xiàn)是WebSecurityConfigurerAdapter的配置順序問題。正確的配置核心部分是http.csrf().disable() .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS) .and() .authorizeRequests() .antMatchers(/api/auth/login, /api/auth/register).permitAll() .antMatchers(/api/admin/**).hasRole(ADMIN) .anyRequest().authenticated();認(rèn)證通過只是第一層業(yè)務(wù)數(shù)據(jù)層面的權(quán)限還要靠Service層控制。比如學(xué)生只能查詢自己的申報記錄我就在查詢方法的SQL里強(qiáng)制拼接where user_id #{currentUserId}而不是只依賴前端隱藏按鈕。這類“數(shù)據(jù)級權(quán)限”如果漏了很容易出現(xiàn)越權(quán)查看別人申報書的大問題。3.3 申報書提交與審核的Service事務(wù)處理申報書提交和審核是系統(tǒng)最關(guān)鍵的寫入操作絕對不能在事務(wù)上偷懶。我用一個粗粒度的事務(wù)方法處理申報書提交邏輯一次事務(wù)里完成三件事保存申報書主表數(shù)據(jù)、批量插入項目成員列表、記錄一條狀態(tài)變更日志。Transactional(rollbackFor Exception.class) public Long submitApplication(ApplicationSubmitDTO dto) { // 校驗項目名稱是否重復(fù)、預(yù)算是否超過類別上限 ProjectApplication application new ProjectApplication(); application.setUserId(dto.getUserId()); application.setProjectName(dto.getProjectName()); // ...省略字段拷貝 application.setStatus(0); // 草稿 projectApplicationMapper.insert(application); // 批量插入成員 ListProjectMember members dto.getMembers().stream().map(...).collect(Collectors.toList()); if (!members.isEmpty()) { projectMemberMapper.batchInsert(members); } return application.getId(); }Transactional里面還有一個容易忽視的點事務(wù)內(nèi)調(diào)用同類的方法rollbackFor必須指定Exception.class否則運行時異常以外的業(yè)務(wù)異常不會觸發(fā)回滾。我一開始只寫了Transactional測試時故意在批量插入成員前加了一個包含文件寫入失敗的邏輯結(jié)果主表數(shù)據(jù)還是保存進(jìn)去了排查半天才發(fā)現(xiàn)是回滾策略沒寫對。MyBatis的批量插入這里也補充一下不要用循環(huán)里單條insert的方式幾百條數(shù)據(jù)會有明顯的性能問題。直接在XML里寫foreach批量插入insert idbatchInsert insert into project_member(application_id, member_name, student_no, major) values foreach collectionlist itemmember separator, (#{member.applicationId}, #{member.memberName}, #{member.studentNo}, #{member.major}) /foreach /insert3.4 MyBatis動態(tài)SQL與多表聯(lián)查申報列表的查詢是最容易寫成一團(tuán)漿糊的地方因為篩選條件太多了按狀態(tài)查、按項目類別查、按學(xué)院查、按關(guān)鍵詞模糊搜索、按提交時間段查。如果每個條件組合都寫一條SQL那得寫幾十條。MyBatis的where配合if標(biāo)簽可以讓一條SQL自動適配所有篩選組合select idselectApplicationPage resultTypecom.innovation.entity.ProjectApplicationVO select a.id, a.project_name, c.category_name, u.real_name, col.college_name, a.budget, a.status, a.submit_time from project_application a left join project_category c on a.category_id c.id left join sys_user u on a.user_id u.id left join sys_college col on u.college_id col.id where if teststatus ! null and a.status #{status} /if if testcategoryId ! null and a.category_id #{categoryId} /if if testcollegeId ! null and u.college_id #{collegeId} /if if testkeyword ! null and keyword ! and (a.project_name like concat(%, #{keyword}, %) or u.real_name like concat(%, #{keyword}, %)) /if /where order by a.update_time desc /select這里的left join而不是inner join也是一個細(xì)節(jié)因為有一部分申報書可能還沒關(guān)聯(lián)指導(dǎo)老師用內(nèi)連接會把孤兒數(shù)據(jù)過濾掉。用ProjectApplicationVO承接聯(lián)查結(jié)果時MyBatis會自動做駝峰映射前提是在application.yml或MyBatis配置里開啟了map-underscore-to-camel-case: true否則project_name映射不到projectName列表頁會顯示一排空字段。給新手一個我踩過的坑動態(tài)SQL里的if標(biāo)簽判斷字符串時if testkeyword ! null and keyword ! 中間注意不能有特殊字符問題還有test里判斷參數(shù)類型為Long時status ! null沒問題但如果傳的是字符串0要用status 0的寫法兩個等號不能少。4. 前端核心實現(xiàn)Vue3 組合式API4.1 項目初始化與目錄組織前端用Vite創(chuàng)建Vue3項目命令很簡單npm create vitelatest innovation-web -- --template vue然后安裝Vue Router、Pinia、Element Plus、Axios。目錄結(jié)構(gòu)我是按頁面功能來組織的這樣后期增加一個模塊比如“創(chuàng)新創(chuàng)業(yè)大賽管理”直接復(fù)制一個已有模塊的目錄改改就能用src/ ├── api/ # 按模塊拆分的接口定義 │ ├── auth.js │ ├── application.js │ └── review.js ├── components/ # 通用組件 │ ├── StatusTag.vue │ └── UploadFile.vue ├── router/ # 路由配置 ├── stores/ # Pinia狀態(tài)管理 │ └── user.js ├── views/ # 頁面級組件 │ ├── student/ │ │ ├── ApplicationList.vue │ │ ├── ApplicationForm.vue │ │ └── ApplicationDetail.vue │ ├── teacher/ │ │ └── ReviewList.vue │ └── admin/ │ ├── ManageApplications.vue │ └── StatisticsBoard.vue └── utils/ └── request.js # Axios封裝Element Plus是我中后臺開發(fā)的首選組件庫表格、分頁、表單、上傳組件都有現(xiàn)成的項目進(jìn)度會快很多。需要留意的版本問題是Element Plus 2.x必須配合Vue 3使用不要再下成Element UI那是Vue 2的。組件庫引入方式我選全量引入雖然打包體積大一點但開發(fā)效率高一個校園內(nèi)網(wǎng)系統(tǒng)對首屏體積沒那么敏感。4.2 申報表單的設(shè)計與校驗邏輯申報表單是整個系統(tǒng)使用頻率最高的頁面學(xué)生填一份申報書至少要十分鐘所以表單交互做得好不好直接影響使用體驗。我把申報表單拆成了四個分區(qū)基本信息項目名稱、項目類別、預(yù)算金額、項目成員動態(tài)增刪成員行表、項目摘要多行文本、附件上傳申報書PDF、支撐材料。Element Plus的el-form配合rules校驗規(guī)則非常方便重點說兩個校驗細(xì)節(jié)。第一個是動態(tài)成員行的校驗。el-form-item數(shù)組進(jìn)行動態(tài)校驗時需要給每個成員行綁定prop格式是members.${index}.memberName校驗規(guī)則寫到rules.members下面const rules { projectName: [{ required: true, message: 請輸入項目名稱, trigger: blur }], categoryId: [{ required: true, message: 請選擇項目類別, trigger: change }], members: { memberName: [{ required: true, message: 請輸入成員姓名, trigger: blur }], studentNo: [{ required: true, message: 請輸入學(xué)號, trigger: blur }] } }第二個是預(yù)算金額的聯(lián)動檢查。預(yù)算上限由項目類別決定學(xué)生選擇“創(chuàng)新訓(xùn)練項目”后maxFunding會從接口拉回來提交時前端先校驗一次“預(yù)算不得超過類別上限”后端Service層再校驗一次前端校驗是為體驗后端校驗才是真防線。這里設(shè)計一個小提示語在預(yù)算輸入框旁邊實時顯示“該項目類別最高支持XXX元”學(xué)生就很少填超預(yù)算了。4.3 組合式API封裝數(shù)據(jù)請求與狀態(tài)管理Vue3組合式API最順手的用法是配合自定義Hooks。我抽了一個useApplicationList的Hook負(fù)責(zé)加載列表、處理分頁、篩選條件這類復(fù)用邏輯任何組件需要展示申報列表時直接引入這個Hook即可。import { ref, onMounted } from vue import { getApplicationPage } from /api/application export function useApplicationList(fetchParams) { const list ref([]) const total ref(0) const loading ref(false) const loadData async () { loading.value true try { const res await getApplicationPage(fetchParams.value) list.value res.data.records total.value res.data.total } finally { loading.value false } } onMounted(loadData) return { list, total, loading, loadData } }狀態(tài)管理方面很多中后臺項目其實用不上Pinia但申報管理系統(tǒng)里有一個典型的全局狀態(tài)——當(dāng)前登錄用戶的信息和權(quán)限按鈕列表。每個頁面都要判斷“當(dāng)前用戶是不是管理員能不能看到審核按鈕”如果每個頁面都從LocalStorage重新解析一遍Token太啰嗦我用Pinia存一份userStore頁面里直接調(diào)用。4.4 Axios封裝與跨域聯(lián)調(diào)Axios封裝有幾個要點統(tǒng)一請求前綴、統(tǒng)一響應(yīng)攔截處理業(yè)務(wù)碼、統(tǒng)一錯誤提示。我的request.js核心邏輯如下service.interceptors.response.use( (response) { const res response.data if (res.code ! 0) { ElMessage.error(res.message || 請求失敗) return Promise.reject(new Error(res.message)) } return res }, (error) { if (error.response?.status 401) { // Token過期清理本地信息并跳轉(zhuǎn)登錄頁 localStorage.removeItem(token) router.push(/login) } ElMessage.error(error.response?.data?.message || 網(wǎng)絡(luò)異常) return Promise.reject(error) } )這里比較關(guān)鍵的是要把res直接返回這樣調(diào)用方拿到的就是完整的業(yè)務(wù)響應(yīng)體不用每頁都寫res.data.data這種嵌套取值的代碼。開發(fā)環(huán)境跨域問題我用的是Vite代理。在vite.config.js里配置一個/api開頭的代理轉(zhuǎn)發(fā)前端請求/api/auth/loginVite會把請求轉(zhuǎn)發(fā)到http://localhost:8080瀏覽器看不到跨域訪問因為瀏覽器只跟Vite開發(fā)服務(wù)器通信server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }關(guān)鍵點提醒changeOrigin: true必須配置否則后端拿到的Host請求頭是前端地址部分接口會出問題。5. 常見問題與排查技巧實錄5.1 MySQL連接與版本兼容問題部署階段遇到最多的是MySQL連接問題。最典型的場景本地開發(fā)連MySQL 8.0沒問題部署到服務(wù)器上只裝了MySQL 5.7用同一個Jar包跑起來直接報Access denied for user或者Communications link failure。原因在于MySQL 5.7和8.0的認(rèn)證插件不同8.0默認(rèn)caching_sha2_password5.7默認(rèn)mysql_native_password而驅(qū)動版本不一樣行為也有差異。我的處理辦法是數(shù)據(jù)庫統(tǒng)一用MySQL 8.0驅(qū)動用mysql-connector-j注意新版Maven坐標(biāo)已經(jīng)改名了不再是mysql-connector-java并在連接串里明確指定useSSLfalse。如果你只能用5.7就在連接串里加allowMultiQueriestrue部分SQL里可能有多語句需求同時把驅(qū)動降級到5.1.49版本別用8.0驅(qū)動去連5.7會有一堆兼容性警告。還有一個高頻問題中文亂碼。檢查順序依次為數(shù)據(jù)庫字符集show variables like %character%、連接串編碼characterEncodingutf8、前端頁面編碼Vue3項目默認(rèn)UTF-8基本不用管。大概率問題出在前兩個。5.2 MyBatis結(jié)果映射和動態(tài)SQL的坑MyBatis的坑基本集中在映射和動態(tài)SQL上。第一個坑是resultType和resultMap混用。如果查詢的列名需要加別名做成VO我傾向于用resultTypecom.innovation.entity.ProjectApplicationVO然后SQL里明確寫別名開啟駝峰映射后就不用寫繁瑣的resultMap。但如果SQL里用了group by聚合函數(shù)比如統(tǒng)計各學(xué)院項目數(shù)量resultType對應(yīng)一個統(tǒng)計VO倒是沒問題有連表查詢加復(fù)雜字段映射時還是老實寫resultMap更清楚。第二個坑是foreach里collection參數(shù)名不對會報There is no getter for property named錯誤。當(dāng)Mapper方法是ListProjectMember batchInsert(Param(list) ListProjectMember list)時collection必須寫成list。如果沒加Param注解XML里collection要寫collection數(shù)組或list集合規(guī)則比較繞我的習(xí)慣是Mapper方法一律加Param這樣XML里一目了然。第三個值得一提的坑是MyBatis一級緩存和二級緩存的失效問題。在同一事務(wù)中多次查詢同一份數(shù)據(jù)第一次之后走一級緩存沒問題但如果中途執(zhí)行了任何寫操作一級緩存自動清空第二次查詢又會走數(shù)據(jù)庫。在審核統(tǒng)計的場景里先查一次申報數(shù)量再插入一條審核記錄再查一次數(shù)量兩次都實時查庫其實是對的。我就是因為一時沒想清楚這個機(jī)制懷疑查詢SQL寫錯了排查了半天。如果系統(tǒng)存在“先查數(shù)據(jù)再在后臺修改數(shù)據(jù)然后再查數(shù)據(jù)”的需求緩存機(jī)制的行為反而能保證數(shù)據(jù)一致性。5.3 前端部署與打包的典型問題前端部署階段的第一個坑是生產(chǎn)環(huán)境API地址寫死。開發(fā)環(huán)境用Vite代理很舒服打包之后代理沒了如果request.js里的baseURL還是/api部署到Nginx還好但直接塞進(jìn)SpringBoot靜態(tài)目錄時請求/api/auth/login會打到SpringBoot后端本身這時路由能對上但如果后端路徑也是/api前綴就沒問題。我的做法是統(tǒng)一后端所有Controller加/api前綴前端baseURL就寫/api這樣后端托管靜態(tài)資源時也能直接工作不需要Nginx改寫路徑。第二個坑是前端路由的history模式打包后刷新404。Vue Router如果用createWebHistory()部署在SpringBoot里刷新某個子路由路徑比如/student/application后端找不到這個路徑就會返回404。解決方案在SPA里通常有兩種一是用createWebHashHistory()改用哈希路由URL帶個#不太好看但零配置二是在SpringBoot寫一個WebMvcConfigurer把不存在的路徑轉(zhuǎn)發(fā)到index.html但需要排除/api開頭的真實接口路徑。我選了第一種省心。5.4 申報管理系統(tǒng)特有的業(yè)務(wù)邏輯陷阱最后說幾個這個系統(tǒng)特有的業(yè)務(wù)邏輯問題。第一個是審核狀態(tài)的冪等性。審核按鈕如果被用戶雙擊前端可能同時發(fā)出兩個審核請求后端會執(zhí)行兩次審核操作導(dǎo)致狀態(tài)錯亂。我的處理方案是在審核接口里加一個前置狀態(tài)校驗用“當(dāng)前狀態(tài)必須等于期望的前置狀態(tài)”作為樂觀鎖類似update ... where id ? and status #{expectStatus}受影響行數(shù)為0就說明狀態(tài)已被更新直接提示“請勿重復(fù)操作”。第二個是預(yù)算統(tǒng)計的精度問題。項目經(jīng)費金額涉及小數(shù)數(shù)據(jù)庫字段我用了DECIMAL(10,2)而不是FLOAT。FLOAT的二進(jìn)制存儲會導(dǎo)致0.1 0.2這類浮點誤差累計最終統(tǒng)計報表金額對不上預(yù)算額。MyBatis映射到Java用BigDecimal前端展示時保留兩位小數(shù)這套組合在金額處理上是公認(rèn)的安全方案。第三個問題跟角色有關(guān)評審專家也能是指導(dǎo)老師同一個用戶有多個角色。這時候簡單的role_id單字段設(shè)計就撐不住了我把用戶和角色的關(guān)系改成了用戶表一對一主角色、另加一張sys_user_extra_role表存附加角色。后端權(quán)限判斷從“你是什么角色”變成“你包不包含某角色”Spring Security里的hasRole就不好直接用了改為在Service層判斷userStore.getRoles().contains(REVIEWER)。這種多角色場景在高校系統(tǒng)里很常見設(shè)計之初就要考慮進(jìn)去。6. 從項目落地到后續(xù)擴(kuò)展的經(jīng)驗沉淀這套系統(tǒng)從零到上線大概用了三周時間去掉需求溝通和反復(fù)調(diào)整UI的時間真正開發(fā)時間兩周多一點。我個人最想強(qiáng)調(diào)的一點是做這類業(yè)務(wù)管理系統(tǒng)技術(shù)上反而不要追求花哨穩(wěn)定和可用才是第一位的。SpringBootVue3MyBatis這套組合的好處在于它的每一個環(huán)節(jié)都有大量成熟資料可查遇到問題不至于卡死。如果后續(xù)要擴(kuò)展我會優(yōu)先加兩個能力一是基于ECharts做統(tǒng)計分析大屏把各學(xué)院申報數(shù)量、項目經(jīng)費分布、評審?fù)ㄟ^率做成可視化圖表管理者一眼就能掌握全局二是接入消息通知項目狀態(tài)變更時給相關(guān)用戶發(fā)送站內(nèi)信或者郵件提醒減少學(xué)生反復(fù)刷新頁面查進(jìn)度的焦慮。另外一個很想提醒后來者的細(xì)節(jié)部署完成后一定要做一次完整的數(shù)據(jù)備份和恢復(fù)演練。系統(tǒng)上線半年后數(shù)據(jù)就是最寶貴的資產(chǎn)申報書、審核記錄、成績數(shù)據(jù)一旦丟了業(yè)務(wù)很難恢復(fù)。MySQL的mysqldump定時備份任務(wù)很少有人一開始就配好都是出了事故才后悔。做這套系統(tǒng)最大的成就感不是代碼寫得多漂亮而是中心真正用它替代了原來的Excel流程學(xué)生查進(jìn)度、老師做審核、管理員出報表都變成幾分鐘的事。技術(shù)選型、模塊拆分、踩坑排查這些經(jīng)驗如果你也要做類似的項目希望能幫你少走幾步彎路。