简介这份资源是面向计算机相关专业在校学生、教师及企业员工的毕业设计与课程设计参考项目基于 Ruoyi 与 Vue 构建家教一体化系统适合作为毕设、课设、大作业或项目初期立项演示也便于基础较好的学习者二次修改扩展功能。压缩包共 708 个文件约 5.36MB以 303 个 Java 后端源码、113 个 Vue 前端组件、83 个 JavaScript 脚本、36 个 XML 配置及 9 个 SCSS 样式为主另含 SQL 建表脚本、YML 配置、批处理启动脚本与说明文档前后端分离结构清晰。项目代码均经严格测试运行成功后才上传答辩评审平均分达 96 分已有 81 人学习关注。读者可据此掌握 Ruoyi 权限体系、Vue 页面组织、数据库设计与接口联调思路并借助 README 与脚本快速跑通环境对照模块结构完成自己的毕设或课设开发。1. 从一份 zip 说起Ruoyi Vue 家教一体化系统到底能跑出什么很多同学拿到「毕业设计课设_基于 Ruoyi - Vue 的家教一体化系统」这个压缩包时第一反应是解压、找 README、翻 application.yml然后卡在数据库连不上或者前端 npm install 报错。我带过几届学生的课设也帮人改过不少基于 Ruoyi 框架的毕设最常见的翻车点不是业务逻辑写不出来而是环境没对齐——后端跑在 8080前端 devServer 代理没配登录接口 404然后开始怀疑代码是抄来的。这个标题拆开看其实有三层信息Ruoyi 是后端脚手架Vue 是前端框架家教一体化系统是业务场景。所谓「一体化」通常指家长、教师、学生、管理员四类角色在同一套系统里完成找老师、约课、排课、订单、评价这条链路。它适合两类人一是计算机相关专业需要交毕设或课设的同学二是想拿一个真实多角色权限项目练 SpringBoot Vue 前后端分离的入门开发者。这篇文章不讲空泛的架构图只讲怎么把这份代码在本地跑起来、每个模块改哪里、参数怎么调、以及哪些坑我替你踩过了。2. Ruoyi 后端与 Vue 前端的环境对齐从零到登录成功2.1 先确认版本组合别急着改代码Ruoyi 有多个分支常见的是 RuoYi-Vue前后端分离和 RuoYi-Cloud微服务。家教系统这类课设 99% 用的是 RuoYi-Vue 单体版后端 SpringBoot MyBatis Redis MySQL前端 Vue2 Element UI。拿到 zip 后先看两个文件后端的pom.xml里 SpringBoot 版本前端的package.json里 vue 版本。如果后端是 2.x、前端是 vue2那基本就是标准 RuoYi-Vue 结构不要按 vue3 的教程去装依赖否则vue-cli-service和vite会打架。环境清单我一般这样列组件推荐版本说明JDK1.8RuoYi-Vue 老版本对 JDK17 兼容差MySQL5.7 / 8.08.0 注意驱动和时区Redis5.x验证码和 token 缓存依赖它Node14 / 16别用 18node-sass 会编译失败Maven3.6配阿里云镜像提示如果 zip 里带了sql目录先别执行打开看编码和表前缀RuoYi 默认表前缀是sys_业务表可能是edu_或jy_。2.2 后端启动数据库、Redis、配置文件三件套第一步建库导数据。用 Navicat 或命令行都行命令行更稳# 登录 MySQL 并创建数据库字符集必须是 utf8mb4 mysql -u root -p -e CREATE DATABASE jiajiao DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; # 导入项目自带的 sql 文件注意路径换成你解压后的实际位置 mysql -u root -p jiajiao ./sql/jiajiao.sql逻辑说明RuoYi 的 sql 脚本通常包含建表、菜单权限、字典数据三部分缺一不可。如果只导了业务表没导sys_menu登录后左侧菜单是空的你会以为前端坏了。参数上字符集必须 utf8mb4否则家长评价里的 emoji 或特殊符号会报Incorrect string value。第二步改application-druid.yml和application.yml# application-druid.yml 数据源 url: jdbc:mysql://localhost:3306/jiajiao?useUnicodetruecharacterEncodingutf8zeroDateTimeBehaviorconvertToNulluseSSLfalseserverTimezoneGMT%2B8 username: root password: 你的密码 # application.yml Redis redis: host: localhost port: 6379 database: 0 password: # 本地没设密码就留空逻辑说明serverTimezoneGMT%2B8是东八区不写会报时区错误或时间差 8 小时。Redis 的database建议用 0如果你本机跑过别的项目占了 0 库改成 1 避免 key 冲突导致验证码读不出来。第三步启动。在 IDEA 里找到RuoYiApplication直接 run控制台出现启动成功且端口 8080 没被占用即可。如果报RedisConnectionFailureException先确认 redis-server 起了没如果报Access denied for user是密码错了不是代码问题。2.3 前端启动npm 依赖与代理配置前端目录一般叫ruoyi-ui或vue进去先装依赖# 进入前端目录 cd ruoyi-ui # 用淘宝镜像加速避免 node-sass 下载超时 npm config set registry https://registry.npmmirror.com # 安装依赖如果 package-lock.json 存在优先用 npm ci npm install # 启动开发服务器 npm run dev逻辑说明npm install最常卡在node-sass或sass-loader编译本质是 Node 版本太高。如果报Node Sass version 6.0.1 is incompatible with ^4.0.0要么降 Node 到 14要么把package.json里的 node-sass 换成sassdart-sass。启动成功后浏览器开http://localhost:80RuoYi 默认前端端口是 80不是 8080。代理配置在vue.config.js// vue.config.js 片段 devServer: { port: 80, proxy: { /dev-api: { target: http://localhost:8080, // 后端地址 changeOrigin: true, pathRewrite: { ^/dev-api: } } } }逻辑说明前端所有请求走/dev-api前缀代理转发到后端并去掉前缀。如果登录报 404先看 Network 里请求地址是不是http://localhost/dev-api/login如果是而没转发说明changeOrigin或pathRewrite写错了。参数changeOrigin: true用于跨域时修改请求头 host本地开发必开。3. 家教一体化系统的核心模块四类角色与业务链路怎么落地3.1 角色权限模型RuoYi 的 RBAC 怎么套到家教场景RuoYi 自带 RBAC基于角色的访问控制核心是用户-角色-菜单三张表。家教系统要落地四类角色管理员、家长、教师、学生。常见做法是在sys_role里建四个角色然后给每个角色分配菜单权限。但这里有个坑RuoYi 的菜单权限控制的是「能不能看到某个页面」不控制「能不能操作某条数据」。比如家长 A 不能看到家长 B 的订单这属于数据权限需要自己在 Service 层加过滤。我一般这样改在业务表里加user_id或create_by字段查询时用SecurityUtils.getUserId()拿到当前登录用户拼到 SQL 的 where 条件里。教师查看自己的排课、家长查看自己的订单都走这个逻辑。不要指望 RuoYi 的DataScope注解能直接搞定那个更适合部门维度的数据隔离。3.2 约课与排课时间冲突检测的代码实现约课是家教系统的核心。家长选教师、选时间段提交后生成订单。这里必须做时间冲突检测否则同一个教师同一时段会被约两次。实现思路教师有schedule表记录可约时段家长下单时查该教师该时段是否已有status1已确认的订单。// 伪代码约课冲突检测 public boolean checkConflict(Long teacherId, Date startTime, Date endTime) { // 查询该教师在该时间段内已确认的订单数量 QueryWrapperOrder wrapper new QueryWrapper(); wrapper.eq(teacher_id, teacherId) .eq(status, 1) // 1 表示已确认 .le(start_time, endTime) // 已有订单开始 新订单结束 .ge(end_time, startTime); // 已有订单结束 新订单开始 return orderMapper.selectCount(wrapper) 0; }逻辑说明这是经典的时间区间重叠判断两个区间重叠的条件是A.start B.end A.end B.start。参数上status的取值要和字典表对齐RuoYi 的字典通常在sys_dict_data里别硬编码。如果返回 true 就抛业务异常提示「该时段已被预约」。排课模块通常是教师端设置自己的可授课时间家长端只能选这些时间。表设计上teacher_schedule存教师开放的时段order存实际订单两者用schedule_id关联。这样教师改时间时能级联影响未支付的订单。3.3 订单与支付状态机怎么设计才不混乱订单状态是课设里最容易写乱的地方。我见过有人用 0-9 十个状态最后自己都记不清。建议用状态机最少四个状态待支付、已支付、已完成、已取消。状态流转只能按固定路径走比如待支付→已支付→已完成待支付→已取消。// 订单状态枚举 public enum OrderStatus { UNPAID(0, 待支付), PAID(1, 已支付), FINISHED(2, 已完成), CANCELED(3, 已取消); private final int code; private final String desc; // 构造和 getter 省略 }逻辑说明用枚举代替魔法数字前端传状态时后端做合法性校验。比如已完成的订单不能再取消已取消的不能再支付。参数上支付接口在课设里通常用模拟支付直接改状态即可不要真接支付 SDK答辩时说不清楚还容易出安全事故。3.4 评价与统计ECharts 在 Vue 里的接入家教系统一般有个数据看板管理员看订单量、教师评分教师看自己的课时统计。前端用 EChartsVue2 里通过npm install echarts引入。// Vue 组件里初始化 ECharts import * as echarts from echarts; export default { mounted() { // 基于准备好的 dom 初始化实例 const chart echarts.init(this.$refs.chartRef); chart.setOption({ tooltip: { trigger: axis }, xAxis: { type: category, data: [1月,2月,3月] }, yAxis: { type: value }, series: [{ type: bar, data: [12, 19, 8], name: 订单量 }] }); // 窗口 resize 时重绘否则图表会变形 window.addEventListener(resize, () chart.resize()); } }逻辑说明echarts.init必须等 DOM 渲染完所以放mounted里。resize监听是必须的否则侧边栏收起时图表宽度不更新。数据从后端接口拿用 RuoYi 封装的request工具别直接写 axios否则 token 带不上。4. 避坑与排查那些让课设卡三天的常见问题4.1 登录验证码不显示或一直提示错误现象前端登录页验证码图片是裂的或者输入正确也提示验证码错误。原因通常是 Redis 没启动或者前后端 Redis 配置的 database 不一致。RuoYi 的验证码存在 Redis 里key 是 UUID前端提交时带这个 UUID。如果 Redis 连不上验证码生成就失败。解决先redis-cli ping确认返回 PONG再检查application.yml里 redis 的 host、port、database 是否和实际一致。如果用了 Docker 跑 Redis注意端口映射。4.2 前端 npm install 报 node-sass 编译失败现象gyp ERR! stack Error: Cant find Python executable或Node Sass does not yet support your current environment。原因是 node-sass 是二进制包和 Node 版本强绑定Node 16 基本装不上老版本。解决优先降 Node 到 14用 nvm 管理多版本最省事。如果不想降把package.json里node-sass替换成sass同时把sass-loader升到 10.x然后删掉node_modules和package-lock.json重装。注意 dart-sass 对/deep/语法支持不同样式穿透要改成::v-deep。4.3 跨域报错但代理明明配了现象浏览器控制台报Access-Control-Allow-Origin但vue.config.js里 proxy 写了。原因通常是请求没走代理比如在 axios 里写了完整地址http://localhost:8080/login而不是/dev-api/login。代理只对相对路径生效。解决检查request.js里的baseURL是不是process.env.VUE_APP_BASE_API这个变量在.env.development里定义为/dev-api。如果改了.env文件必须重启npm run dev热更新不生效。4.4 菜单不显示或按钮权限失效现象登录后左侧菜单空白或者某个按钮该显示却不显示。原因是sys_menu表数据没导全或者角色没分配菜单。RuoYi 的菜单是动态路由登录后调/getRouters接口拿菜单树。解决用管理员账号登录进「系统管理-菜单管理」看有没有数据再进「角色管理」确认当前角色勾选了菜单。如果是按钮权限检查v-hasPermi指令里的权限标识和sys_menu的perms字段是否一致大小写敏感。4.5 打包部署后接口 404现象本地npm run dev正常npm run build后放到 Nginx 或 SpringBoot 静态目录接口全 404。原因是生产环境的VUE_APP_BASE_API还是/dev-api但 Nginx 没配对应的反向代理。解决改.env.production里的VUE_APP_BASE_API为/prod-apiNginx 里加location /prod-api/ { proxy_pass http://后端IP:8080/; }。如果打包放进 SpringBoot 的static目录注意 RuoYi 的拦截器会拦截静态资源需要在SecurityConfig里放行。5. 从能跑到能答辩二次开发与验证的几个实用技巧把系统跑起来只是第一步答辩时老师一定会问「你做了什么」。我的习惯是先在 RuoYi 的代码生成器上做文章。RuoYi 自带代码生成功能在「系统工具-代码生成」里导入业务表能一键生成 Controller、Service、Mapper、Vue 页面。家教系统里的教师表、课程表、订单表都可以先生成基础 CRUD再手动改业务逻辑。这样省掉大量重复劳动也保证代码风格和框架一致。验证功能是否真的通了不要只看页面能点。我一般用 Postman 或 Apifox 直接调后端接口带上登录返回的 token看返回 JSON 的code是不是 200。比如约课接口构造两个时间重叠的请求确认第二个返回业务异常。这一步能提前发现前端校验被绕过的问题。二次开发建议从「评价模块」入手。RuoYi 的代码生成器生成评价表 CRUD 后加一个逻辑只有订单状态为「已完成」的家长才能评价对应教师且每个订单只能评一次。这个逻辑写在 Service 层用order_id和user_id做唯一性校验。改完用不同角色登录测试家长 A 不能评价家长 B 的订单教师不能自己评自己。最后一个技巧关于打包。如果老师要求提交可运行的项目别只给源码。用 Maven 的package打 jar前端npm run build:prod生成 dist把 dist 放进后端resources/static再打一个完整 jar。这样对方只需要装 JDK 和 MySQL、Redis 就能跑不用配 Node 环境。命令行是mvn clean package -DskipTests注意跳过测试否则数据库连不上会打包失败。我自己踩过最深的坑是时区。有次答辩前夜订单时间全部差 8 小时查了两小时才发现 MySQL 连接串漏了serverTimezone。从那以后任何新项目我都先把数据库、Redis、时区这三样对齐再写业务。希望帮到你。本文还有配套的精品资源点击获取