
简介这份资源是面向计算机相关专业在校学生、教师及企业员工的毕业设计与课程设计参考项目基于 Ruoyi 与 Vue 构建家教一体化系统适合作为毕设、课设、大作业或项目初期立项演示也便于基础较好的学习者在此基础上二次开发扩展功能。压缩包共 708 个文件约 5.36MB以 303 个 Java 后端源码、113 个 Vue 前端组件、83 个 JavaScript 脚本、36 个 XML 配置及 109 个 SVG 图标资源为主另含 SQL 建表脚本、YAML 与 properties 配置、批处理启动脚本和少量 Markdown 说明文档前后端分离结构清晰便于按模块检索与调试。项目代码均经测试运行成功后才上传答辩评审平均分达 96 分已有 81 人学习关注。读者可从中获取完整的家教业务功能模块实现、前后端交互逻辑、数据库设计与部署脚本并参考 README 快速跑通项目用于学习进阶或改造为其他管理系统。1. 家教一体化系统从 Ruoyi Vue 拆开一套能跑通的毕设骨架很多同学拿到「基于 Ruoyi-Vue 的家教一体化系统」这个题目时第一反应是去搜现成源码结果下载下来发现前端跑不起来、后端连不上数据库、权限菜单全是空的。这套技术栈本身并不复杂后端用 Ruoyi 的 Spring Boot 多模块脚手架前端用 Vue2 Element UI 的管理后台业务层再叠一套家教场景的教师、学员、课程、订单模型。真正卡人的地方在于——Ruoyi 自带的那套权限体系、代码生成器、数据字典跟家教业务怎么对接很多人没想清楚就动手了。这篇文章面向两类人一是正在做毕业设计或课程设计、需要一套能演示、能答辩、能写论文的系统骨架二是想用 Ruoyi-Vue 快速搭一个带业务闭环的管理系统、但不想从零写权限和 CRUD 的开发者。我会按「先跑通脚手架 → 再设计家教业务表 → 接代码生成器 → 前端联调 → 避坑 → 进阶」的顺序讲每一步都给出可复现的命令和配置。你跟着走完至少能得到一个能登录、能管理教师和课程、能下单的完整系统。2. Ruoyi-Vue 脚手架跑通前后端分离的最小启动路径2.1 后端模块结构与启动前必须改的三个配置Ruoyi 后端默认是多模块 Maven 结构核心模块包括ruoyi-admin启动入口、ruoyi-framework安全与拦截、ruoyi-system系统管理、ruoyi-common工具类。家教业务代码通常新增一个ruoyi-tutor模块或者直接写在ruoyi-system里。启动前必须改三处第一处是数据库连接。在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 关键片段 spring: datasource: druid: master: url: jdbc:mysql://localhost:3306/ruoyi_tutor?useUnicodetruecharacterEncodingutf8zeroDateTimeBehaviorconvertToNulluseSSLfalseserverTimezoneAsia/Shanghai username: root password: 你的密码# application.yml 关键片段 spring: redis: host: localhost port: 6379 database: 0 ruoyi: profile: D:/ruoyi/uploadPath改完后执行sql目录下的ry_20xxx.sql和quartz.sql建库建表。然后在 IDEA 里运行RuoYiApplication看到「启动成功」字样即可。常见做法是先用 Postman 调/captchaImage确认验证码接口通再调/login拿 token这一步过了说明后端骨架没问题。2.2 前端 Vue 工程安装依赖与代理配置前端在ruoyi-ui目录Vue2 Vue CLI 构建。先确认 Node 版本在 14 到 16 之间Node 18 以上会因为 OpenSSL 报错。安装依赖用npm install --registryhttps://registry.npmmirror.com国内直连 npm 官方源大概率超时。# 进入前端目录 cd ruoyi-ui # 安装依赖指定国内镜像 npm install --registryhttps://registry.npmmirror.com # 启动开发服务器 npm run dev启动后默认访问http://localhost:80。如果 80 端口被占用改vue.config.js里的port。前端请求后端靠vue.config.js里的proxy代理默认把/dev-api转发到http://localhost:8080。你后端端口如果改了这里必须同步改否则登录会报 404。// vue.config.js 代理片段 devServer: { port: 80, proxy: { /dev-api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/dev-api: } } } }登录账号admin密码admin123。进去后能看到系统管理、系统监控、系统工具三个大菜单说明脚手架完整跑通了。这一步是整个毕设的地基地基不稳后面全是玄学问题。3. 家教业务表设计教师、学员、课程、订单四张核心表怎么落3.1 从业务场景反推字段而不是先建表再想功能家教一体化系统的核心业务链是管理员审核教师入驻 → 学员浏览课程 → 下单购买 → 教师接单授课 → 订单完成结算。围绕这条链最少需要四张业务表tutor_teacher教师、tutor_student学员、tutor_course课程、tutor_order订单。教师表除了姓名、手机、头像关键字段是subject科目、grade_range年级段、hourly_rate时薪、audit_status审核状态。审核状态用 Ruoyi 的数据字典管理字典类型建audit_status字典项为 0 待审核、1 通过、2 驳回。这样前端下拉框直接读字典不用硬编码。课程表关联教师 ID字段包括course_name、subject、grade、price、duration课时长、status上架/下架。订单表关联学员 ID 和课程 ID字段包括order_no、amount、pay_status、create_time。订单号生成建议用「日期 随机数」不要用自增 ID 直接暴露。-- 教师表核心字段 CREATE TABLE tutor_teacher ( teacher_id BIGINT NOT NULL AUTO_INCREMENT COMMENT 教师ID, user_id BIGINT NOT NULL COMMENT 关联系统用户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 审核状态, create_time DATETIME DEFAULT NULL, PRIMARY KEY (teacher_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT教师信息表;设计时注意所有业务表都加create_by、create_time、update_by、update_time、remark五个通用字段这是 Ruoyi 代码生成器的默认约定加了之后生成的 CRUD 页面直接能用不用手动补。3.2 用 Ruoyi 代码生成器生成四套 CRUD表建好后进系统工具 → 代码生成 → 导入表选中四张业务表。生成配置里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会自动热更新。进系统菜单管理手动新增「家教管理」目录下面挂教师管理、学员管理、课程管理、订单管理四个菜单路由地址填tutor/teacher这种格式组件路径填tutor/teacher/index。配完给 admin 角色勾上权限刷新页面就能看到菜单。4. 前后端联调与权限控制菜单、按钮、数据权限三层怎么配4.1 菜单权限和按钮权限的配置差异Ruoyi 的权限分三层菜单权限控制页面能不能进按钮权限控制页面里的操作按钮显不显示数据权限控制能看哪些数据。菜单权限在「系统管理 → 菜单管理」里配新增菜单时menu_type选「菜单」perms填tutor:teacher:list。按钮权限的menu_type选「按钮」perms填tutor:teacher:add、tutor:teacher:edit、tutor:teacher:remove。前端页面里用v-hasPermi指令控制按钮显示!-- 教师管理页面按钮权限控制 -- el-button typeprimary iconel-icon-plus sizemini clickhandleAdd v-hasPermi[tutor:teacher:add] 新增/el-button这样配置后没有对应权限的角色登录后看不到新增按钮。答辩时演示不同角色登录看到不同菜单是很加分的点。4.2 数据权限教师只能看自己的订单Ruoyi 自带DataScope注解做数据权限。家教场景里教师登录后应该只能看到自己的课程和订单学员只能看自己的订单。实现方式是在SysUser里关联dept_id或自定义字段然后在 Mapper XML 里拼AND teacher_id #{params.dataScope}这类条件。更简单的做法是在 Service 层手动过滤从SecurityUtils.getUserId()拿到当前用户 ID查教师表得到teacher_id再拿这个 ID 去查订单。这种方式不依赖 Ruoyi 的数据权限注解代码更直观适合毕设场景。// 教师查看自己的订单 public ListTutorOrder selectMyOrders() { Long userId SecurityUtils.getUserId(); TutorTeacher teacher tutorTeacherMapper.selectByUserId(userId); if (teacher null) { return new ArrayList(); } return tutorOrderMapper.selectByTeacherId(teacher.getTeacherId()); }联调时最容易翻车的地方是跨域。Ruoyi 后端默认开了 CORS 配置但如果你改了端口或加了自定义过滤器可能把 CORS 头覆盖掉。排查方法是在浏览器 Network 面板看登录请求的 Response Headers 里有没有Access-Control-Allow-Origin没有的话检查ruoyi-framework里的CorsConfig或SecurityConfig。5. 避坑与排查家教系统联调中最容易翻车的五个点5.1 登录后菜单空白控制台报 401现象输入账号密码后跳转到首页但左侧菜单是空的F12 看/getRouters接口返回 401。原因通常是 token 没带上或者 Redis 里 token 过期了。Ruoyi 前端在request.js拦截器里从 cookie 取 token 放到请求头Authorization如果 cookie 被清或 token 过期就会 401。解决方法是清浏览器缓存重新登录或者检查application.yml里token.expireTime是不是设得太短。5.2 代码生成器生成的页面报「请求地址不存在」现象菜单配好了点进去页面加载但表格报 404。原因是后端 Controller 的RequestMapping路径和前端 API 文件里的url不一致。代码生成器默认生成/system/teacher这种路径如果你把 Controller 放到了ruoyi-tutor模块但没改包扫描路径Spring 扫不到这个 Controller。检查启动类上的SpringBootApplication或ComponentScan有没有覆盖到你的新模块包。5.3 上传教师头像报「文件上传失败」现象新增教师时上传图片前端提示失败后端日志显示FileNotFoundException。原因是ruoyi.profile配置的路径在服务器上不存在。Ruoyi 不会自动创建这个目录需要手动建。另外 Windows 下路径要用正斜杠或双反斜杠写D:\ruoyi\uploadPath在 yml 里可能被转义。解决方法是手动创建目录yml 里用D:/ruoyi/uploadPath。5.4 订单金额显示为 0.00 或科学计数法现象订单列表里金额列显示异常。原因是数据库字段用DECIMAL但 Java 实体用Double或者前端表格列没配formatter。Ruoyi 代码生成器默认把DECIMAL映射成BigDecimal如果你手动改成了Double精度会丢。解决方法是保持BigDecimal前端用toFixed(2)格式化。5.5 前端打包后放到 Spring Boot 里刷新 404现象npm run build后把dist放到ruoyi-admin的static目录访问首页正常但刷新子页面报 404。原因是 Vue Router 的 history 模式需要后端把所有未匹配路径转发到index.html。Ruoyi 默认用 hash 模式不会出这个问题如果你改成了 history 模式需要在后端加一个错误页面转发配置或者改回 hash 模式。毕设演示用 hash 模式完全够用没必要折腾 history。6. 进阶技巧用代码生成器 自定义模板把开发效率再提一档代码生成器默认模板生成的页面是标准 CRUD但家教系统里有些字段需要特殊处理。比如教师表的audit_status需要显示成标签而不是纯文本订单表的create_time需要格式化。与其每次生成后手动改不如直接改代码生成器的模板文件。模板文件在ruoyi-generator/src/main/resources/vm目录下vue/index.vue.vm是列表页模板java/domain.java.vm是实体类模板。你可以把常用的格式化逻辑写进模板比如日期字段统一加JsonFormat注解状态字段统一生成字典标签。// 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改完模板后重新生成所有日期字段自动带格式化注解省去逐个手动加的麻烦。这个技巧在需要生成十几张表的毕设里特别省时间。另一个实用技巧是给代码生成器加自定义的「树表」模板。家教系统里「科目分类」适合用树形结构Ruoyi 自带树表生成功能在导入表时把「树表」选项打开指定parent_id字段即可。生成的页面自带展开折叠比平铺列表好看得多。验证系统是否完整我一般会走一遍全流程admin 登录 → 新增教师 → 审核通过 → 新增课程 → 学员注册登录 → 下单 → 教师登录看订单 → 管理员看统计。这一圈走通答辩演示就不会翻车。最后说个血泪经验数据库一定要提前备份代码生成器导入表时如果选错字段类型重新生成会覆盖你手动改过的代码后悔药没得吃。希望帮到你。本文还有配套的精品资源点击获取