微搭低代码MBA 培训管理系统实战 22——课程排课

微搭低代码MBA 培训管理系统实战 22——课程排课

目录

在上一讲中,我们完成了班级管理与花名册的搭建。学员已经分好班了,接下来教务老师面临的最头疼的工作就是排课。本讲将详细介绍如何实现排课功能,包括教室管理、课表设计以及核心的资源冲突检测机制。


第一步:数据准备

1.1 教室表(MBA_Classrooms)

创建教室表,用于管理物理空间:

字段名称字段标识类型说明
教室名称room_name单行文本如:第一阶梯教室、VIP面授室
容纳人数capacity数字用于后期校验是否超载
状态status枚举启用、停用、维护中
创建时间created_at日期时间自动生成
更新时间updated_at日期时间自动更新
在这里插入图片描述

1.2 课表/排课记录表(MBA_Schedules)

创建排课记录表,承载具体的上课时间与资源绑定:

字段名称字段标识类型说明
关联班级rel_class_id关联关系关联MBA_Classes表
关联教师rel_teacher_id关联关系关联MBA_Teachers表
关联教室rel_room_id关联关系关联MBA_Classrooms表
上课日期course_date日期如:2026-04-15
开始时间start_time时间如:09:00
结束时间end_time时间如:11:30
课表状态status枚举待上课、已结课、已取消
创建时间created_at日期时间自动生成
更新时间updated_at日期时间自动更新
在这里插入图片描述

第二步:教室管理页面搭建

2.1 页面整体布局

点击创建页面的图标

在这里插入图片描述

输入页面的名称"教室管理",布局选择管理员布局(基础数据管理通常由管理员维护)

在这里插入图片描述

切换到页面布局,选择管理员布局,添加平级菜单,添加教室管理菜单

在这里插入图片描述

2.2 数据表格配置

在管理员布局的内容插槽下添加布局组件

在这里插入图片描述

修改标题,改为"教室管理"

在这里插入图片描述

在页面布局中添加数据表格组件,数据模型选择教室表

在这里插入图片描述

2.3 配置查询条件

点击筛选器,给表格配置查询条件

添加具体的查询条件:

  • 教室名称(模糊搜索)
  • 状态(下拉选择)
在这里插入图片描述

2.4 配置排序字段

默认按照创建时间的倒序进行排序,最新的教室显示在最前面

在这里插入图片描述

第三步:排课页面布局搭建

3.1 页面整体布局

点击创建页面的图标

在这里插入图片描述

输入页面的名称"排课管理",布局选择教务布局(因为主要是教务人员使用)

在这里插入图片描述

切换到页面布局,选择教务布局,添加平级菜单,添加排课管理菜单

在这里插入图片描述

3.2 数据表格配置

在教务布局的内容插槽下添加布局组件

在这里插入图片描述

修改标题,改为"排课管理"

在这里插入图片描述

在页面布局中添加数据表格组件,数据模型选择课表

在这里插入图片描述

3.3 配置查询条件

点击筛选器,给表格配置查询条件

添加具体的查询条件:

  • 关联班级(关联选择)
  • 关联教师(关联选择)
  • 关联教室(关联选择)
  • 上课日期范围(日期范围)
在这里插入图片描述

3.4 配置排序字段

默认按照上课日期的倒序进行排序,最新的排课显示在最前面

在这里插入图片描述

第四步:排课弹窗实现

在排课管理页面添加弹窗组件,用于录入新的排课

在这里插入图片描述

从组件库中拖拽弹窗组件到页面,设置弹窗标题为"新增排课"

在这里插入图片描述

在弹窗中添加表单容器组件,数据模型选择课表

在这里插入图片描述

修改表单布局,改为双列布局

在这里插入图片描述

选中弹窗组件,关闭显示底部按钮,关闭弹窗默认打开状态

在这里插入图片描述


在这里插入图片描述


给新建按钮配置点击事件,打开弹窗

在这里插入图片描述

第五步:冲突检测与排课提交

创建自定义方法,用来检查排课是否冲突并且提交排课记录

// 提交排课asyncfunctioncheckScheduleConflict(params){const{ teacherId, roomId, classId, courseDate, startTime, endTime }= params;// 计算开始和结束的时间戳(日期毫秒值 + 时间毫秒值)const startTimestamp = courseDate + startTime;const endTimestamp = courseDate + endTime;// 构造核心的时间重叠查询条件: (新开始 < 旧结束) AND (新结束 > 旧开始)const timeOverlapFilter ={$and:[{course_date:{$eq: courseDate }},// 同一天{start_time:{$lt: endTime }},// 新开始时间 < 旧结束时间{end_time:{$gt: startTime }},// 新结束时间 > 旧开始时间{status:{$neq:'3'}}// 排除已取消的课程]};try{// 1. 检测【教师】冲突const teacherRes =await $w.cloud.callDataSource({dataSourceName:'MBA_Schedules',methodName:'wedaGetRecordsV2',params:{filter:{where:{$and:[{rel_teacher_id:{$eq: teacherId }}, timeOverlapFilter ]}},getCount:true}});if(teacherRes.total >0){return{code:-1,msg:'排课失败:该教师在此时间段已有排课安排!'};}// 2. 检测【教室】冲突const roomRes =await $w.cloud.callDataSource({dataSourceName:'MBA_Schedules',methodName:'wedaGetRecordsV2',params:{filter:{where:{$and:[{rel_room_id:{$eq: roomId }}, timeOverlapFilter ]}},getCount:true}});if(roomRes.total >0){return{code:-2,msg:'排课失败:该教室在此时间段已被占用!'};}// 3. 检测【班级】自身的冲突(防止同一班级同一时间排两节不同的课)const classRes =await $w.cloud.callDataSource({dataSourceName:'MBA_Schedules',methodName:'wedaGetRecordsV2',params:{filter:{where:{$and:[{rel_class_id:{$eq: classId }}, timeOverlapFilter ]}},getCount:true}});if(classRes.total >0){return{code:-3,msg:'排课失败:该班级在此时间段已排有课程!'};}// 全部通过,无冲突return{code:0,msg:'校验通过,资源可用'};}catch(error){ console.error('冲突检测失败:', error);return{code:-99,msg:'系统异常,请稍后重试'};}}exportdefaultasyncfunctionsubmitSchedule({ event, data }){// 1. 获取表单数据const formData = $w.form1.value;// 2. 校验时间合法性(course_date、start_time、end_time都是毫秒值)if(formData.start_time >= formData.end_time){ $w.utils.showToast({title:'开始时间必须小于结束时间',icon:'error'});return;} $w.utils.showLoading({title:'正在检测资源冲突...'});try{// 3. 调用前端的冲突检测方法const checkRes =awaitcheckScheduleConflict({teacherId: formData.rel_teacher_id,roomId: formData.rel_room_id,classId: formData.rel_class_id,courseDate: formData.course_date,startTime: formData.start_time,endTime: formData.end_time });// 4. 根据校验结果决定是否入库if(checkRes.code !==0){ $w.utils.hideLoading(); $w.utils.showModal({title:'冲突警告',content: checkRes.msg });return;}// 5. 校验通过,正式写入排课表await $w.cloud.callDataSource({dataSourceName:'MBA_Schedules',methodName:'wedaCreateV2',params:{data:{rel_class_id:{_id: formData.rel_class_id },rel_teacher_id:{_id: formData.rel_teacher_id },rel_room_id:{_id: formData.rel_room_id },course_date: formData.course_date,start_time: formData.start_time,end_time: formData.end_time,status:'1',// 待上课}}}); $w.utils.hideLoading(); $w.utils.showToast({title:'排课成功',icon:'success'}); $w.modal1.close({});// 关闭弹窗 $w.table1.refresh();// 刷新排课列表}catch(error){ $w.utils.hideLoading(); $w.utils.showToast({title:'系统异常',icon:'error'});}}

选择表单容器,修改表单的提交方法,改为我们的自定义方法

在这里插入图片描述


最终效果

教务人员打开排课管理页面,可以看到所有的排课记录:

在这里插入图片描述

点击"新增排课"按钮,打开排课弹窗:

在这里插入图片描述

当试图把张老师同时排给 A 班和 B 班时,系统会立即拦截并弹出:"排课失败:该教师在此时间段已有排课安排!"的警告。

在这里插入图片描述

总结

本节我们完成了排课系统引擎的完整实现:

  1. 数据模型设计
    • 创建了MBA_Classrooms教室表,管理物理空间
    • 创建了MBA_Schedules课表,记录排课信息
  2. 页面搭建
    • 创建排课管理页面,使用教务布局
    • 配置数据表格,显示排课列表
    • 配置查询条件和排序规则
  3. 冲突检测引擎
    • 实现教师冲突检测
    • 实现教室冲突检测
    • 实现班级冲突检测
    • 使用 (Start A < End B) AND (End A > Start B) 算法
  4. 排课提交
    • 时间戳转换与校验
    • 冲突检测调用
    • 排课数据写入

通过本讲的实现,教务人员可以方便地进行排课操作,系统会自动检测并拦截冲突的排课安排。

下一步,我们将继续完善考勤消课机制,实现扫码签到与课时扣减功能。

Read more

前端防范 XSS(跨站脚本攻击)

目录 一、防范措施 1.layui util  核心转义的特殊字符 示例 2.js-xss.js库 安装 1. Node.js 环境(npm/yarn) 2. 浏览器环境 核心 API 基础使用 1. 基础过滤(默认规则) 2. 自定义过滤规则 (1)允许特定标签 (2)允许特定属性 (3)自定义标签处理 (4)自定义属性处理 (5)转义特定字符 常见场景示例 1. 过滤用户输入的评论内容 2. 允许特定富文本标签(如富文本编辑器内容) 注意事项 更多配置 XSS(跨站脚本攻击)是一种常见的网络攻击手段,它允许攻击者将恶意脚本注入到其他用户的浏览器中。

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题(CORS) 作为一名后端工程师,理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具(F12)查看和分析这些信息,并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章,打开开发者工具进行演示。 2. 使用

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例)

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例) 前端开发中最令人头疼的莫过于那些难以定位的UI问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在,通过Cursor编辑器集成的Codex功能,你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始,掌握这套革命性的调试工作流。 1. 环境准备与基础配置 在开始之前,确保你已经具备以下环境: * Cursor编辑器最新版(v2.5+) * Node.js 18.x及以上版本 * React 18项目(本文以Chakra UI 2.x为例) 首先在Cursor中安装Codex插件: 1. 点击左侧扩展图标 2. 搜索"Codex"并安装 3. 登录你的OpenAI账户(需要ChatGPT Plus订阅) 关键配置项: // 在项目根目录创建.