简介：这份资源是面向计算机相关专业在校学生、教师及企业员工的毕业设计与课程设计参考项目，基于 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和port，Ruoyi 用 Redis 存 token 和验证码，不启动 Redis 会直接报连接拒绝。第三处是文件上传路径，在application.yml的ruoyi.profile里改成你本机的绝对路径，否则上传教师头像时会写到不存在的目录。
# application-druid.yml 关键片段 spring: datasource: druid: master: url: jdbc:mysql://localhost:3306/ruoyi_tutor?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=false&serverTimezone=Asia/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 --registry=https://registry.npmmirror.com，国内直连 npm 官方源大概率超时。
# 进入前端目录 cd ruoyi-ui # 安装依赖，指定国内镜像 npm install --registry=https://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) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 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 type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" 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 List<TutorOrder> 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 登录 → 新增教师 → 审核通过 → 新增课程 → 学员注册登录 → 下单 → 教师登录看订单 → 管理员看统计。这一圈走通，答辩演示就不会翻车。最后说个血泪经验：数据库一定要提前备份，代码生成器导入表时如果选错字段类型，重新生成会覆盖你手动改过的代码，后悔药没得吃。希望帮到你。
本文还有配套的精品资源，点击获取
