：畢設骨架搭建與業(yè)務閉環(huán)實現(xiàn))
簡介這份資源是面向計算機相關(guān)專業(yè)在校學生、教師及企業(yè)員工的畢業(yè)設計與課程設計參考項目基于 Ruoyi 與 Vue 構(gòu)建家教一體化系統(tǒng)適合作為畢設、課設、大作業(yè)或項目初期立項演示也便于基礎較好的學習者在此基礎上二次開發(fā)擴展功能。壓縮包共 708 個文件約 5.36MB以 303 個 Java 后端源碼、113 個 Vue 前端組件、83 個 JavaScript 腳本、36 個 XML 配置及 109 個 SVG 圖標資源為主另含 SQL 建表腳本、YAML 與 properties 配置、批處理啟動腳本和少量 Markdown 說明文檔前后端分離結(jié)構(gòu)清晰便于按模塊檢索與調(diào)試。項目代碼均經(jīng)測試運行成功后才上傳答辯評審平均分達 96 分已有 81 人學習關(guān)注。讀者可從中獲取完整的家教業(yè)務功能模塊實現(xiàn)、前后端交互邏輯、數(shù)據(jù)庫設計與部署腳本并參考 README 快速跑通項目用于學習進階或改造為其他管理系統(tǒng)。1. 家教一體化系統(tǒng)從 Ruoyi Vue 拆開一套能跑通的畢設骨架很多同學拿到「基于 Ruoyi-Vue 的家教一體化系統(tǒng)」這個題目時第一反應是去搜現(xiàn)成源碼結(jié)果下載下來發(fā)現(xiàn)前端跑不起來、后端連不上數(shù)據(jù)庫、權(quán)限菜單全是空的。這套技術(shù)棧本身并不復雜后端用 Ruoyi 的 Spring Boot 多模塊腳手架前端用 Vue2 Element UI 的管理后臺業(yè)務層再疊一套家教場景的教師、學員、課程、訂單模型。真正卡人的地方在于——Ruoyi 自帶的那套權(quán)限體系、代碼生成器、數(shù)據(jù)字典跟家教業(yè)務怎么對接很多人沒想清楚就動手了。這篇文章面向兩類人一是正在做畢業(yè)設計或課程設計、需要一套能演示、能答辯、能寫論文的系統(tǒng)骨架二是想用 Ruoyi-Vue 快速搭一個帶業(yè)務閉環(huán)的管理系統(tǒng)、但不想從零寫權(quán)限和 CRUD 的開發(fā)者。我會按「先跑通腳手架 → 再設計家教業(yè)務表 → 接代碼生成器 → 前端聯(lián)調(diào) → 避坑 → 進階」的順序講每一步都給出可復現(xiàn)的命令和配置。你跟著走完至少能得到一個能登錄、能管理教師和課程、能下單的完整系統(tǒng)。2. Ruoyi-Vue 腳手架跑通前后端分離的最小啟動路徑2.1 后端模塊結(jié)構(gòu)與啟動前必須改的三個配置Ruoyi 后端默認是多模塊 Maven 結(jié)構(gòu)核心模塊包括ruoyi-admin啟動入口、ruoyi-framework安全與攔截、ruoyi-system系統(tǒng)管理、ruoyi-common工具類。家教業(yè)務代碼通常新增一個ruoyi-tutor模塊或者直接寫在ruoyi-system里。啟動前必須改三處第一處是數(shù)據(jù)庫連接。在ruoyi-admin/src/main/resources/application-druid.yml里改 URL、用戶名、密碼。第二處是 Redis 配置在application.yml里改spring.redis.host和portRuoyi 用 Redis 存 token 和驗證碼不啟動 Redis 會直接報連接拒絕。第三處是文件上傳路徑在application.yml的ruoyi.profile里改成你本機的絕對路徑否則上傳教師頭像時會寫到不存在的目錄。# application-druid.yml 關(guān)鍵片段 spring: datasource: druid: master: url: jdbc:mysql://localhost:3306/ruoyi_tutor?useUnicodetruecharacterEncodingutf8zeroDateTimeBehaviorconvertToNulluseSSLfalseserverTimezoneAsia/Shanghai username: root password: 你的密碼# application.yml 關(guān)鍵片段 spring: redis: host: localhost port: 6379 database: 0 ruoyi: profile: D:/ruoyi/uploadPath改完后執(zhí)行sql目錄下的ry_20xxx.sql和quartz.sql建庫建表。然后在 IDEA 里運行RuoYiApplication看到「啟動成功」字樣即可。常見做法是先用 Postman 調(diào)/captchaImage確認驗證碼接口通再調(diào)/login拿 token這一步過了說明后端骨架沒問題。2.2 前端 Vue 工程安裝依賴與代理配置前端在ruoyi-ui目錄Vue2 Vue CLI 構(gòu)建。先確認 Node 版本在 14 到 16 之間Node 18 以上會因為 OpenSSL 報錯。安裝依賴用npm install --registryhttps://registry.npmmirror.com國內(nèi)直連 npm 官方源大概率超時。# 進入前端目錄 cd ruoyi-ui # 安裝依賴指定國內(nèi)鏡像 npm install --registryhttps://registry.npmmirror.com # 啟動開發(fā)服務器 npm run dev啟動后默認訪問http://localhost:80。如果 80 端口被占用改vue.config.js里的port。前端請求后端靠vue.config.js里的proxy代理默認把/dev-api轉(zhuǎn)發(fā)到http://localhost:8080。你后端端口如果改了這里必須同步改否則登錄會報 404。// vue.config.js 代理片段 devServer: { port: 80, proxy: { /dev-api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/dev-api: } } } }登錄賬號admin密碼admin123。進去后能看到系統(tǒng)管理、系統(tǒng)監(jiān)控、系統(tǒng)工具三個大菜單說明腳手架完整跑通了。這一步是整個畢設的地基地基不穩(wěn)后面全是玄學問題。3. 家教業(yè)務表設計教師、學員、課程、訂單四張核心表怎么落3.1 從業(yè)務場景反推字段而不是先建表再想功能家教一體化系統(tǒng)的核心業(yè)務鏈是管理員審核教師入駐 → 學員瀏覽課程 → 下單購買 → 教師接單授課 → 訂單完成結(jié)算。圍繞這條鏈最少需要四張業(yè)務表tutor_teacher教師、tutor_student學員、tutor_course課程、tutor_order訂單。教師表除了姓名、手機、頭像關(guān)鍵字段是subject科目、grade_range年級段、hourly_rate時薪、audit_status審核狀態(tài)。審核狀態(tài)用 Ruoyi 的數(shù)據(jù)字典管理字典類型建audit_status字典項為 0 待審核、1 通過、2 駁回。這樣前端下拉框直接讀字典不用硬編碼。課程表關(guān)聯(lián)教師 ID字段包括course_name、subject、grade、price、duration課時長、status上架/下架。訂單表關(guān)聯(lián)學員 ID 和課程 ID字段包括order_no、amount、pay_status、create_time。訂單號生成建議用「日期 隨機數(shù)」不要用自增 ID 直接暴露。-- 教師表核心字段 CREATE TABLE tutor_teacher ( teacher_id BIGINT NOT NULL AUTO_INCREMENT COMMENT 教師ID, user_id BIGINT NOT NULL COMMENT 關(guān)聯(lián)系統(tǒng)用戶ID, real_name VARCHAR(50) NOT NULL COMMENT 真實姓名, subject VARCHAR(50) NOT NULL COMMENT 科目, grade_range VARCHAR(50) DEFAULT NULL COMMENT 年級段, hourly_rate DECIMAL(10,2) DEFAULT 0.00 COMMENT 時薪, audit_status CHAR(1) DEFAULT 0 COMMENT 審核狀態(tài), create_time DATETIME DEFAULT NULL, PRIMARY KEY (teacher_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT教師信息表;設計時注意所有業(yè)務表都加create_by、create_time、update_by、update_time、remark五個通用字段這是 Ruoyi 代碼生成器的默認約定加了之后生成的 CRUD 頁面直接能用不用手動補。3.2 用 Ruoyi 代碼生成器生成四套 CRUD表建好后進系統(tǒng)工具 → 代碼生成 → 導入表選中四張業(yè)務表。生成配置里tutor_teacher的audit_status字段把顯示類型改成「下拉框」字典類型填audit_status。tutor_order的pay_status同理建字典pay_status。生成后下載 zip解壓得到main后端和vue前端兩個目錄。后端 Java 文件按包路徑放到ruoyi-system或新建的ruoyi-tutor模塊下Mapper XML 放到resources/mapper/tutor目錄。前端 API 文件放到ruoyi-ui/src/api/tutor視圖文件放到ruoyi-ui/src/views/tutor。# 后端文件放置示例 ruoyi-system/src/main/java/com/ruoyi/system/domain/TutorTeacher.java ruoyi-system/src/main/java/com/ruoyi/system/mapper/TutorTeacherMapper.java ruoyi-system/src/main/java/com/ruoyi/system/service/ITutorTeacherService.java ruoyi-system/src/main/java/com/ruoyi/system/service/impl/TutorTeacherServiceImpl.java ruoyi-system/src/main/java/com/ruoyi/system/controller/TutorTeacherController.java ruoyi-system/src/main/resources/mapper/tutor/TutorTeacherMapper.xml放完后重啟后端前端npm run dev會自動熱更新。進系統(tǒng)菜單管理手動新增「家教管理」目錄下面掛教師管理、學員管理、課程管理、訂單管理四個菜單路由地址填tutor/teacher這種格式組件路徑填tutor/teacher/index。配完給 admin 角色勾上權(quán)限刷新頁面就能看到菜單。4. 前后端聯(lián)調(diào)與權(quán)限控制菜單、按鈕、數(shù)據(jù)權(quán)限三層怎么配4.1 菜單權(quán)限和按鈕權(quán)限的配置差異Ruoyi 的權(quán)限分三層菜單權(quán)限控制頁面能不能進按鈕權(quán)限控制頁面里的操作按鈕顯不顯示數(shù)據(jù)權(quán)限控制能看哪些數(shù)據(jù)。菜單權(quán)限在「系統(tǒng)管理 → 菜單管理」里配新增菜單時menu_type選「菜單」perms填tutor:teacher:list。按鈕權(quán)限的menu_type選「按鈕」perms填tutor:teacher:add、tutor:teacher:edit、tutor:teacher:remove。前端頁面里用v-hasPermi指令控制按鈕顯示!-- 教師管理頁面按鈕權(quán)限控制 -- el-button typeprimary iconel-icon-plus sizemini clickhandleAdd v-hasPermi[tutor:teacher:add] 新增/el-button這樣配置后沒有對應權(quán)限的角色登錄后看不到新增按鈕。答辯時演示不同角色登錄看到不同菜單是很加分的點。4.2 數(shù)據(jù)權(quán)限教師只能看自己的訂單Ruoyi 自帶DataScope注解做數(shù)據(jù)權(quán)限。家教場景里教師登錄后應該只能看到自己的課程和訂單學員只能看自己的訂單。實現(xiàn)方式是在SysUser里關(guān)聯(lián)dept_id或自定義字段然后在 Mapper XML 里拼AND teacher_id #{params.dataScope}這類條件。更簡單的做法是在 Service 層手動過濾從SecurityUtils.getUserId()拿到當前用戶 ID查教師表得到teacher_id再拿這個 ID 去查訂單。這種方式不依賴 Ruoyi 的數(shù)據(jù)權(quán)限注解代碼更直觀適合畢設場景。// 教師查看自己的訂單 public ListTutorOrder selectMyOrders() { Long userId SecurityUtils.getUserId(); TutorTeacher teacher tutorTeacherMapper.selectByUserId(userId); if (teacher null) { return new ArrayList(); } return tutorOrderMapper.selectByTeacherId(teacher.getTeacherId()); }聯(lián)調(diào)時最容易翻車的地方是跨域。Ruoyi 后端默認開了 CORS 配置但如果你改了端口或加了自定義過濾器可能把 CORS 頭覆蓋掉。排查方法是在瀏覽器 Network 面板看登錄請求的 Response Headers 里有沒有Access-Control-Allow-Origin沒有的話檢查ruoyi-framework里的CorsConfig或SecurityConfig。5. 避坑與排查家教系統(tǒng)聯(lián)調(diào)中最容易翻車的五個點5.1 登錄后菜單空白控制臺報 401現(xiàn)象輸入賬號密碼后跳轉(zhuǎn)到首頁但左側(cè)菜單是空的F12 看/getRouters接口返回 401。原因通常是 token 沒帶上或者 Redis 里 token 過期了。Ruoyi 前端在request.js攔截器里從 cookie 取 token 放到請求頭Authorization如果 cookie 被清或 token 過期就會 401。解決方法是清瀏覽器緩存重新登錄或者檢查application.yml里token.expireTime是不是設得太短。5.2 代碼生成器生成的頁面報「請求地址不存在」現(xiàn)象菜單配好了點進去頁面加載但表格報 404。原因是后端 Controller 的RequestMapping路徑和前端 API 文件里的url不一致。代碼生成器默認生成/system/teacher這種路徑如果你把 Controller 放到了ruoyi-tutor模塊但沒改包掃描路徑Spring 掃不到這個 Controller。檢查啟動類上的SpringBootApplication或ComponentScan有沒有覆蓋到你的新模塊包。5.3 上傳教師頭像報「文件上傳失敗」現(xiàn)象新增教師時上傳圖片前端提示失敗后端日志顯示FileNotFoundException。原因是ruoyi.profile配置的路徑在服務器上不存在。Ruoyi 不會自動創(chuàng)建這個目錄需要手動建。另外 Windows 下路徑要用正斜杠或雙反斜杠寫D:\ruoyi\uploadPath在 yml 里可能被轉(zhuǎn)義。解決方法是手動創(chuàng)建目錄yml 里用D:/ruoyi/uploadPath。5.4 訂單金額顯示為 0.00 或科學計數(shù)法現(xiàn)象訂單列表里金額列顯示異常。原因是數(shù)據(jù)庫字段用DECIMAL但 Java 實體用Double或者前端表格列沒配formatter。Ruoyi 代碼生成器默認把DECIMAL映射成BigDecimal如果你手動改成了Double精度會丟。解決方法是保持BigDecimal前端用toFixed(2)格式化。5.5 前端打包后放到 Spring Boot 里刷新 404現(xiàn)象npm run build后把dist放到ruoyi-admin的static目錄訪問首頁正常但刷新子頁面報 404。原因是 Vue Router 的 history 模式需要后端把所有未匹配路徑轉(zhuǎn)發(fā)到index.html。Ruoyi 默認用 hash 模式不會出這個問題如果你改成了 history 模式需要在后端加一個錯誤頁面轉(zhuǎn)發(fā)配置或者改回 hash 模式。畢設演示用 hash 模式完全夠用沒必要折騰 history。6. 進階技巧用代碼生成器 自定義模板把開發(fā)效率再提一檔代碼生成器默認模板生成的頁面是標準 CRUD但家教系統(tǒng)里有些字段需要特殊處理。比如教師表的audit_status需要顯示成標簽而不是純文本訂單表的create_time需要格式化。與其每次生成后手動改不如直接改代碼生成器的模板文件。模板文件在ruoyi-generator/src/main/resources/vm目錄下vue/index.vue.vm是列表頁模板java/domain.java.vm是實體類模板。你可以把常用的格式化邏輯寫進模板比如日期字段統(tǒng)一加JsonFormat注解狀態(tài)字段統(tǒng)一生成字典標簽。// domain.java.vm 模板片段給日期字段加注解 #foreach($column in $columns) #if($column.javaType Date) JsonFormat(pattern yyyy-MM-dd HH:mm:ss) private $column.javaType $column.javaField; #end #end改完模板后重新生成所有日期字段自動帶格式化注解省去逐個手動加的麻煩。這個技巧在需要生成十幾張表的畢設里特別省時間。另一個實用技巧是給代碼生成器加自定義的「樹表」模板。家教系統(tǒng)里「科目分類」適合用樹形結(jié)構(gòu)Ruoyi 自帶樹表生成功能在導入表時把「樹表」選項打開指定parent_id字段即可。生成的頁面自帶展開折疊比平鋪列表好看得多。驗證系統(tǒng)是否完整我一般會走一遍全流程admin 登錄 → 新增教師 → 審核通過 → 新增課程 → 學員注冊登錄 → 下單 → 教師登錄看訂單 → 管理員看統(tǒng)計。這一圈走通答辯演示就不會翻車。最后說個血淚經(jīng)驗數(shù)據(jù)庫一定要提前備份代碼生成器導入表時如果選錯字段類型重新生成會覆蓋你手動改過的代碼后悔藥沒得吃。希望幫到你。本文還有配套的精品資源點擊獲取 基于Ruoyi-Vue的家教一體化系統(tǒng)：畢設骨架搭建與業(yè)務閉環(huán)實現(xiàn)
簡介這份資源是面向計算機相關(guān)專業(yè)在校學生、教師及企業(yè)員工的畢業(yè)設計與課程設計參考項目基于 Ruoyi 與 Vue 構(gòu)建家教一體化系統(tǒng)適合作為畢設、課設、大作業(yè)或項目初期立項演示也便于基礎較好的學習者在此基礎上二次開發(fā)擴展功能。壓縮包共 708 個文件約 5.36MB以 303 個 Java 后端源碼、113 個 Vue 前端組件、83 個 JavaScript 腳本、36 個 XML 配置及 109 個 SVG 圖標資源為主另含 SQL 建表腳本、YAML 與 properties 配置、批處理啟動腳本和少量 Markdown 說明文檔前后端分離結(jié)構(gòu)清晰便于按模塊檢索與調(diào)試。項目代碼均經(jīng)測試運行成功后才上傳答辯評審平均分達 96 分已有 81 人學習關(guān)注。讀者可從中獲取完整的家教業(yè)務功能模塊實現(xiàn)、前后端交互邏輯、數(shù)據(jù)庫設計與部署腳本并參考 README 快速跑通項目用于學習進階或改造為其他管理系統(tǒng)。1. 家教一體化系統(tǒng)從 Ruoyi Vue 拆開一套能跑通的畢設骨架很多同學拿到「基于 Ruoyi-Vue 的家教一體化系統(tǒng)」這個題目時第一反應是去搜現(xiàn)成源碼結(jié)果下載下來發(fā)現(xiàn)前端跑不起來、后端連不上數(shù)據(jù)庫、權(quán)限菜單全是空的。這套技術(shù)棧本身并不復雜后端用 Ruoyi 的 Spring Boot 多模塊腳手架前端用 Vue2 Element UI 的管理后臺業(yè)務層再疊一套家教場景的教師、學員、課程、訂單模型。真正卡人的地方在于——Ruoyi 自帶的那套權(quán)限體系、代碼生成器、數(shù)據(jù)字典跟家教業(yè)務怎么對接很多人沒想清楚就動手了。這篇文章面向兩類人一是正在做畢業(yè)設計或課程設計、需要一套能演示、能答辯、能寫論文的系統(tǒng)骨架二是想用 Ruoyi-Vue 快速搭一個帶業(yè)務閉環(huán)的管理系統(tǒng)、但不想從零寫權(quán)限和 CRUD 的開發(fā)者。我會按「先跑通腳手架 → 再設計家教業(yè)務表 → 接代碼生成器 → 前端聯(lián)調(diào) → 避坑 → 進階」的順序講每一步都給出可復現(xiàn)的命令和配置。你跟著走完至少能得到一個能登錄、能管理教師和課程、能下單的完整系統(tǒng)。2. Ruoyi-Vue 腳手架跑通前后端分離的最小啟動路徑2.1 后端模塊結(jié)構(gòu)與啟動前必須改的三個配置Ruoyi 后端默認是多模塊 Maven 結(jié)構(gòu)核心模塊包括ruoyi-admin啟動入口、ruoyi-framework安全與攔截、ruoyi-system系統(tǒng)管理、ruoyi-common工具類。家教業(yè)務代碼通常新增一個ruoyi-tutor模塊或者直接寫在ruoyi-system里。啟動前必須改三處第一處是數(shù)據(jù)庫連接。在ruoyi-admin/src/main/resources/application-druid.yml里改 URL、用戶名、密碼。第二處是 Redis 配置在application.yml里改spring.redis.host和portRuoyi 用 Redis 存 token 和驗證碼不啟動 Redis 會直接報連接拒絕。第三處是文件上傳路徑在application.yml的ruoyi.profile里改成你本機的絕對路徑否則上傳教師頭像時會寫到不存在的目錄。# application-druid.yml 關(guān)鍵片段 spring: datasource: druid: master: url: jdbc:mysql://localhost:3306/ruoyi_tutor?useUnicodetruecharacterEncodingutf8zeroDateTimeBehaviorconvertToNulluseSSLfalseserverTimezoneAsia/Shanghai username: root password: 你的密碼# application.yml 關(guān)鍵片段 spring: redis: host: localhost port: 6379 database: 0 ruoyi: profile: D:/ruoyi/uploadPath改完后執(zhí)行sql目錄下的ry_20xxx.sql和quartz.sql建庫建表。然后在 IDEA 里運行RuoYiApplication看到「啟動成功」字樣即可。常見做法是先用 Postman 調(diào)/captchaImage確認驗證碼接口通再調(diào)/login拿 token這一步過了說明后端骨架沒問題。2.2 前端 Vue 工程安裝依賴與代理配置前端在ruoyi-ui目錄Vue2 Vue CLI 構(gòu)建。先確認 Node 版本在 14 到 16 之間Node 18 以上會因為 OpenSSL 報錯。安裝依賴用npm install --registryhttps://registry.npmmirror.com國內(nèi)直連 npm 官方源大概率超時。# 進入前端目錄 cd ruoyi-ui # 安裝依賴指定國內(nèi)鏡像 npm install --registryhttps://registry.npmmirror.com # 啟動開發(fā)服務器 npm run dev啟動后默認訪問http://localhost:80。如果 80 端口被占用改vue.config.js里的port。前端請求后端靠vue.config.js里的proxy代理默認把/dev-api轉(zhuǎn)發(fā)到http://localhost:8080。你后端端口如果改了這里必須同步改否則登錄會報 404。// vue.config.js 代理片段 devServer: { port: 80, proxy: { /dev-api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/dev-api: } } } }登錄賬號admin密碼admin123。進去后能看到系統(tǒng)管理、系統(tǒng)監(jiān)控、系統(tǒng)工具三個大菜單說明腳手架完整跑通了。這一步是整個畢設的地基地基不穩(wěn)后面全是玄學問題。3. 家教業(yè)務表設計教師、學員、課程、訂單四張核心表怎么落3.1 從業(yè)務場景反推字段而不是先建表再想功能家教一體化系統(tǒng)的核心業(yè)務鏈是管理員審核教師入駐 → 學員瀏覽課程 → 下單購買 → 教師接單授課 → 訂單完成結(jié)算。圍繞這條鏈最少需要四張業(yè)務表tutor_teacher教師、tutor_student學員、tutor_course課程、tutor_order訂單。教師表除了姓名、手機、頭像關(guān)鍵字段是subject科目、grade_range年級段、hourly_rate時薪、audit_status審核狀態(tài)。審核狀態(tài)用 Ruoyi 的數(shù)據(jù)字典管理字典類型建audit_status字典項為 0 待審核、1 通過、2 駁回。這樣前端下拉框直接讀字典不用硬編碼。課程表關(guān)聯(lián)教師 ID字段包括course_name、subject、grade、price、duration課時長、status上架/下架。訂單表關(guān)聯(lián)學員 ID 和課程 ID字段包括order_no、amount、pay_status、create_time。訂單號生成建議用「日期 隨機數(shù)」不要用自增 ID 直接暴露。-- 教師表核心字段 CREATE TABLE tutor_teacher ( teacher_id BIGINT NOT NULL AUTO_INCREMENT COMMENT 教師ID, user_id BIGINT NOT NULL COMMENT 關(guān)聯(lián)系統(tǒng)用戶ID, real_name VARCHAR(50) NOT NULL COMMENT 真實姓名, subject VARCHAR(50) NOT NULL COMMENT 科目, grade_range VARCHAR(50) DEFAULT NULL COMMENT 年級段, hourly_rate DECIMAL(10,2) DEFAULT 0.00 COMMENT 時薪, audit_status CHAR(1) DEFAULT 0 COMMENT 審核狀態(tài), create_time DATETIME DEFAULT NULL, PRIMARY KEY (teacher_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT教師信息表;設計時注意所有業(yè)務表都加create_by、create_time、update_by、update_time、remark五個通用字段這是 Ruoyi 代碼生成器的默認約定加了之后生成的 CRUD 頁面直接能用不用手動補。3.2 用 Ruoyi 代碼生成器生成四套 CRUD表建好后進系統(tǒng)工具 → 代碼生成 → 導入表選中四張業(yè)務表。生成配置里tutor_teacher的audit_status字段把顯示類型改成「下拉框」字典類型填audit_status。tutor_order的pay_status同理建字典pay_status。生成后下載 zip解壓得到main后端和vue前端兩個目錄。后端 Java 文件按包路徑放到ruoyi-system或新建的ruoyi-tutor模塊下Mapper XML 放到resources/mapper/tutor目錄。前端 API 文件放到ruoyi-ui/src/api/tutor視圖文件放到ruoyi-ui/src/views/tutor。# 后端文件放置示例 ruoyi-system/src/main/java/com/ruoyi/system/domain/TutorTeacher.java ruoyi-system/src/main/java/com/ruoyi/system/mapper/TutorTeacherMapper.java ruoyi-system/src/main/java/com/ruoyi/system/service/ITutorTeacherService.java ruoyi-system/src/main/java/com/ruoyi/system/service/impl/TutorTeacherServiceImpl.java ruoyi-system/src/main/java/com/ruoyi/system/controller/TutorTeacherController.java ruoyi-system/src/main/resources/mapper/tutor/TutorTeacherMapper.xml放完后重啟后端前端npm run dev會自動熱更新。進系統(tǒng)菜單管理手動新增「家教管理」目錄下面掛教師管理、學員管理、課程管理、訂單管理四個菜單路由地址填tutor/teacher這種格式組件路徑填tutor/teacher/index。配完給 admin 角色勾上權(quán)限刷新頁面就能看到菜單。4. 前后端聯(lián)調(diào)與權(quán)限控制菜單、按鈕、數(shù)據(jù)權(quán)限三層怎么配4.1 菜單權(quán)限和按鈕權(quán)限的配置差異Ruoyi 的權(quán)限分三層菜單權(quán)限控制頁面能不能進按鈕權(quán)限控制頁面里的操作按鈕顯不顯示數(shù)據(jù)權(quán)限控制能看哪些數(shù)據(jù)。菜單權(quán)限在「系統(tǒng)管理 → 菜單管理」里配新增菜單時menu_type選「菜單」perms填tutor:teacher:list。按鈕權(quán)限的menu_type選「按鈕」perms填tutor:teacher:add、tutor:teacher:edit、tutor:teacher:remove。前端頁面里用v-hasPermi指令控制按鈕顯示!-- 教師管理頁面按鈕權(quán)限控制 -- el-button typeprimary iconel-icon-plus sizemini clickhandleAdd v-hasPermi[tutor:teacher:add] 新增/el-button這樣配置后沒有對應權(quán)限的角色登錄后看不到新增按鈕。答辯時演示不同角色登錄看到不同菜單是很加分的點。4.2 數(shù)據(jù)權(quán)限教師只能看自己的訂單Ruoyi 自帶DataScope注解做數(shù)據(jù)權(quán)限。家教場景里教師登錄后應該只能看到自己的課程和訂單學員只能看自己的訂單。實現(xiàn)方式是在SysUser里關(guān)聯(lián)dept_id或自定義字段然后在 Mapper XML 里拼AND teacher_id #{params.dataScope}這類條件。更簡單的做法是在 Service 層手動過濾從SecurityUtils.getUserId()拿到當前用戶 ID查教師表得到teacher_id再拿這個 ID 去查訂單。這種方式不依賴 Ruoyi 的數(shù)據(jù)權(quán)限注解代碼更直觀適合畢設場景。// 教師查看自己的訂單 public ListTutorOrder selectMyOrders() { Long userId SecurityUtils.getUserId(); TutorTeacher teacher tutorTeacherMapper.selectByUserId(userId); if (teacher null) { return new ArrayList(); } return tutorOrderMapper.selectByTeacherId(teacher.getTeacherId()); }聯(lián)調(diào)時最容易翻車的地方是跨域。Ruoyi 后端默認開了 CORS 配置但如果你改了端口或加了自定義過濾器可能把 CORS 頭覆蓋掉。排查方法是在瀏覽器 Network 面板看登錄請求的 Response Headers 里有沒有Access-Control-Allow-Origin沒有的話檢查ruoyi-framework里的CorsConfig或SecurityConfig。5. 避坑與排查家教系統(tǒng)聯(lián)調(diào)中最容易翻車的五個點5.1 登錄后菜單空白控制臺報 401現(xiàn)象輸入賬號密碼后跳轉(zhuǎn)到首頁但左側(cè)菜單是空的F12 看/getRouters接口返回 401。原因通常是 token 沒帶上或者 Redis 里 token 過期了。Ruoyi 前端在request.js攔截器里從 cookie 取 token 放到請求頭Authorization如果 cookie 被清或 token 過期就會 401。解決方法是清瀏覽器緩存重新登錄或者檢查application.yml里token.expireTime是不是設得太短。5.2 代碼生成器生成的頁面報「請求地址不存在」現(xiàn)象菜單配好了點進去頁面加載但表格報 404。原因是后端 Controller 的RequestMapping路徑和前端 API 文件里的url不一致。代碼生成器默認生成/system/teacher這種路徑如果你把 Controller 放到了ruoyi-tutor模塊但沒改包掃描路徑Spring 掃不到這個 Controller。檢查啟動類上的SpringBootApplication或ComponentScan有沒有覆蓋到你的新模塊包。5.3 上傳教師頭像報「文件上傳失敗」現(xiàn)象新增教師時上傳圖片前端提示失敗后端日志顯示FileNotFoundException。原因是ruoyi.profile配置的路徑在服務器上不存在。Ruoyi 不會自動創(chuàng)建這個目錄需要手動建。另外 Windows 下路徑要用正斜杠或雙反斜杠寫D:\ruoyi\uploadPath在 yml 里可能被轉(zhuǎn)義。解決方法是手動創(chuàng)建目錄yml 里用D:/ruoyi/uploadPath。5.4 訂單金額顯示為 0.00 或科學計數(shù)法現(xiàn)象訂單列表里金額列顯示異常。原因是數(shù)據(jù)庫字段用DECIMAL但 Java 實體用Double或者前端表格列沒配formatter。Ruoyi 代碼生成器默認把DECIMAL映射成BigDecimal如果你手動改成了Double精度會丟。解決方法是保持BigDecimal前端用toFixed(2)格式化。5.5 前端打包后放到 Spring Boot 里刷新 404現(xiàn)象npm run build后把dist放到ruoyi-admin的static目錄訪問首頁正常但刷新子頁面報 404。原因是 Vue Router 的 history 模式需要后端把所有未匹配路徑轉(zhuǎn)發(fā)到index.html。Ruoyi 默認用 hash 模式不會出這個問題如果你改成了 history 模式需要在后端加一個錯誤頁面轉(zhuǎn)發(fā)配置或者改回 hash 模式。畢設演示用 hash 模式完全夠用沒必要折騰 history。6. 進階技巧用代碼生成器 自定義模板把開發(fā)效率再提一檔代碼生成器默認模板生成的頁面是標準 CRUD但家教系統(tǒng)里有些字段需要特殊處理。比如教師表的audit_status需要顯示成標簽而不是純文本訂單表的create_time需要格式化。與其每次生成后手動改不如直接改代碼生成器的模板文件。模板文件在ruoyi-generator/src/main/resources/vm目錄下vue/index.vue.vm是列表頁模板java/domain.java.vm是實體類模板。你可以把常用的格式化邏輯寫進模板比如日期字段統(tǒng)一加JsonFormat注解狀態(tài)字段統(tǒng)一生成字典標簽。// domain.java.vm 模板片段給日期字段加注解 #foreach($column in $columns) #if($column.javaType Date) JsonFormat(pattern yyyy-MM-dd HH:mm:ss) private $column.javaType $column.javaField; #end #end改完模板后重新生成所有日期字段自動帶格式化注解省去逐個手動加的麻煩。這個技巧在需要生成十幾張表的畢設里特別省時間。另一個實用技巧是給代碼生成器加自定義的「樹表」模板。家教系統(tǒng)里「科目分類」適合用樹形結(jié)構(gòu)Ruoyi 自帶樹表生成功能在導入表時把「樹表」選項打開指定parent_id字段即可。生成的頁面自帶展開折疊比平鋪列表好看得多。驗證系統(tǒng)是否完整我一般會走一遍全流程admin 登錄 → 新增教師 → 審核通過 → 新增課程 → 學員注冊登錄 → 下單 → 教師登錄看訂單 → 管理員看統(tǒng)計。這一圈走通答辯演示就不會翻車。最后說個血淚經(jīng)驗數(shù)據(jù)庫一定要提前備份代碼生成器導入表時如果選錯字段類型重新生成會覆蓋你手動改過的代碼后悔藥沒得吃。希望幫到你。本文還有配套的精品資源點擊獲取