微信小程序班级管理全套资源：含学生签到、作业提交、通知发布与后台管理源码

本文还有配套的精品资源点击获取简介直接可用的微信小程序班级事务管理工具覆盖教师、学生、管理员三类角色。学生扫码或定位一键签到实时查收班级通知查看并提交作业教师发布作业、审核提交结果、管理班级成员管理员统一维护账号和班级基础信息。所有功能基于微信原生小程序框架开发无需额外安装App。配套提供完整Java后端参考逻辑MySQL兼容数据库设计、详细部署文档、微信开发者工具配置文件project.config.、app.等、基础UI素材banner图、关闭图标、头像占位图及二维码生成脚本。包含标准小程序目录结构app.js、util.js、pages下细分页面如sign-student、homework-student、notice-student等、配置文件sitemap.、package.以及两个演示视频签到与作业流程。适合高校课程设计、毕业项目快速搭建或教学场景直接演示使用。1. 项目概述为什么这套班级管理小程序能真正“开箱即用”你是不是也经历过——为了课程设计或毕业项目花三天搭环境、两天调接口、一周改样式最后发现微信登录授权死活不回调签到定位权限被拒作业提交后后台查不到数据我带过六届计算机专业实训课每年都有至少三分之一的学生卡在“跑通第一个页面”这一步。而这套资源是我把过去三年里给高校教师做教学支撑、帮学生改毕设时反复打磨出的最小可行闭环系统不是Demo不是框架模板是真正能当天部署、次日上课就用得上的班级管理工具。它解决的从来不是“有没有功能”而是“能不能立刻上线”。关键词里的班级管理、微信小程序、学生签到、作业提交、班级通知每一个都不是孤立模块而是被拧成一股绳的业务流学生扫码签到后教师端实时看到红点提醒作业提交成功自动触发通知推送给对应班级管理员删掉一个休学学生账号他的签到记录、作业历史、通知阅读状态全部联动清理——这种数据一致性不是靠文档里写“建议同步”而是靠数据库外键约束事务封装小程序端状态机控制三重保障实现的。它面向三类人学生只关心“点一下就完事”、教师只关心“发完就不用管”、管理员只关心“删错一个就完蛋”。所以学生端没有设置页教师端发布作业只需填标题、截止时间、附件支持PDF/图片管理员后台所有增删改操作都带二次确认弹窗和操作日志。这不是功能堆砌是角色认知驱动的设计选择。配套的两个MP4视频c122c0c058c9405548905569e4f7a398.mp4 和 4d57307d1d8e6fcb68573c3e266f7ac0.mp4也不是演示动画而是实录——前者是学生用真机扫二维码完成签到全过程含网络抖动重试后者是教师在后台点击“批阅”按钮后学生手机立刻收到带批注的反馈通知。你看的是操作我写的是背后每一步的容错逻辑。它不依赖云开发、不绑定某家云服务商、不强制使用小程序插件。所有接口调用走标准HTTPSJava后端用Spring Boot 2.7.x MyBatis-Plus数据库脚本直接适配MySQL 5.7连建表语句里的ENGINEInnoDB DEFAULT CHARSETutf8mb4都帮你写好了。你甚至可以把project.config.json里开发者AppID直接替换成自己的改两行配置就能在自己公众号下运行。这不是“理论上可用”是我在三所不同高校的教务系统对接现场看着老师用它替代Excel打卡表、替代微信群发作业、替代U盘拷贝通知的真实产物。2. 整体架构与设计思路为什么选这个组合而不是其他方案2.1 三层角色权限模型不是RBAC而是业务驱动的“职责切片”很多开源项目一上来就搞RBAC基于角色的访问控制建五张权限表结果学生登录后点个签到都要查三次权限。这套资源用的是更轻量但更贴合教育场景的职责切片模型学生端只拥有READ_NOTICE、SUBMIT_HOMEWORK、CHECK_IN三个原子权限且全部硬编码在前端路由守卫里app.js中onLaunch检查wx.getStorageSync(role)。为什么因为学生不可能临时被授予权限角色一旦注册就固定。教师端拥有PUBLISH_HOMEWORK、MANAGE_STUDENTS、REVIEW_HOMEWORK但MANAGE_STUDENTS仅限于自己创建的班级关键后端接口/teacher/class/{classId}/students会校验teacher_id #{currentTeacherId}避免跨班管理。管理员端不走小程序是独立Web后台/admin/login用JWT鉴权所有接口加PreAuthorize(hasRole(ADMIN))。重点来了——管理员删用户时不是简单执行DELETE FROM user WHERE id ?而是调用AdminService.deleteUserWithCascade(Long userId)内部事务包含1. 删除该用户在class_student关联表中的记录2. 将该用户所有作业记录homework_submit.status置为DELETED而非物理删除保留审计线索3. 向该用户所在班级的所有教师推送系统通知“学生[姓名]已退出班级”。提示这种设计牺牲了通用性换来了教育场景下的确定性。你在src/main/resources/sql/init.sql里能看到所有外键约束比如homework_submit.student_id引用user.id且ON DELETE SET NULL这就是为级联清理埋的伏笔。2.2 签到模块为什么同时支持扫码和定位且定位精度要求≤50米学生签到失败率最高的两个原因教室WIFI信号弱导致扫码超时以及教学楼GPS漂移导致定位不准。这套方案用“双通道冗余”解决扫码签到生成的是动态二维码非静态图有效期2小时URL形如https://yourdomain.com/sign?codeabc123classId1001。学生扫描后小程序不直接调用后端而是先用wx.login()获取临时登录凭证再携带code和encryptedData请求/sign/scan接口。后端用wx.getUserInfo()解密获取手机号需用户授权再比对classId是否匹配该学生所在班级。全程不暴露用户敏感信息且单次扫码只能生效一次sign_log表有is_used字段。定位签到调用wx.getLocation({type: gcj02})获取国测局加密坐标传给后端/sign/location接口。关键参数不是经纬度本身而是地理围栏半径。在application.yml里配置yaml sign: geo-fence-radius: 50 # 单位米后端用Haversine公式计算学生坐标与教室预设坐标存于class_location表的距离≤50米才允许签到。为什么是50米实测数据普通教学楼长宽约40米走廊宽度约3米50米覆盖整层教室洗手间楼梯口既防作弊隔壁班签到又保可用不因GPS漂移误拒。注意weapp.qrcode.min.js不是简单调用qrcode.js而是封装了微信小程序Canvas API的离屏渲染逻辑。你打开pages/sign-student/index.wxml会发现canvas标签的hidden{{!showQr}}二维码只在需要时绘制避免首页加载卡顿。2.3 作业提交文件上传为什么用分片断点续传而不是直接wx.uploadFile学生交一份20MB的课程设计PDF3G网络下上传失败率超65%。直接wx.uploadFile遇到网络中断就得重头来。这套方案采用前端分片 后端合并小程序端用wx.getFileSystemManager().readFile将文件按1MB切片每片调用/homework/upload/chunk携带fileIdUUID、chunkIndex、totalChunks后端用MultipartFile接收存入临时目录/tmp/upload/${fileId}/所有分片上传完成后调用/homework/upload/merge用Files.move()合并并重命名最终返回fileUrl存入homework_submit.file_url字段。这样做的好处是学生中途退出再进来时调用/homework/upload/status?fileIdxxx可查询已传分片只续传剩余部分。你在HomeworkController.java里能看到PostMapping(/upload/chunk)方法上加了Transactional(propagation Propagation.REQUIRED, rollbackFor Exception.class)确保分片写入和状态更新原子性。2.4 通知发布为什么用“广播定向”双模式且阅读状态实时回传教师发一条“明天停课通知”全班45人有人没看有人看了忘。传统方案是发完就结束。这套系统让通知变成双向通信节点广播模式教师选择“全体发送”后端向notice_read表插入45条记录statusUNREAD同时向微信服务端发送模板消息template_id在application.yml配置触达未读用户。定向模式教师勾选“仅发送给未交作业学生”后端先查homework_submit表找出class_id1001 AND homework_id2001 AND statusNOT_SUBMITTED的学生ID列表再批量插入notice_read。阅读回传学生打开通知详情页pages/notice-student/detail.wxmlonShow生命周期里调用/notice/read?noticeIdxxx后端将对应记录status改为READ并更新read_time。教师后台能看到每条通知的“已读/未读人数柱状图”。实操心得sitemap.json里必须把notice-student/detail设为access: allow否则微信爬虫抓不到页面模板消息里的跳转链接会失效。这是我在某次学校巡检时被教务处当场指出的问题——他们用爬虫监控所有通知页面可用性。3. 核心模块详解与实操要点3.1 学生端如何让“扫码签到”从3步压缩到1步学生最反感的操作链打开小程序 → 点击“签到” → 等待页面加载 → 再点“扫码” → 对准二维码。这套资源把流程压到极致app.js的onLaunch里检测到用户是学生且当前时间在上课时段class_schedule表查start_time/end_time自动跳转到sign-student页面sign-student/index.wxml里camera组件默认开启device-positionfront并叠加一层半透明蒙版中央显示动态二维码区域学生拿起手机摄像头画面里一出现二维码wx.scanCode()自动触发无需点击立即调用签到接口。实现的关键在sign-student/index.js// 页面加载时启动摄像头 onLoad() { this.startCamera() }, startCamera() { const query wx.createSelectorQuery() query.select(#camera).context(res { if (res.context) { res.context.startRecord({ success: () { // 启动录像用于捕捉二维码帧 this.captureFrame() } }) } }).exec() }, captureFrame() { // 每200ms截取一帧用wx.scanCode识别 this.frameTimer setInterval(() { wx.scanCode({ onlyFromCamera: true, success: (res) { this.handleScanResult(res.result) }, fail: () {} // 忽略识别失败继续下一帧 }) }, 200) }注意camera组件需在app.json的permission字段声明permission: { scope.camera: { desc: 用于扫码签到 } }否则iOS设备首次进入直接白屏。这个坑我在帮某高职院校部署时踩过——他们学生用iPhone比例高达82%没声明权限导致首日签到率不足15%。3.2 教师端作业发布表单的“防呆设计”细节教师发布作业最容易填错的是截止时间。很多人输成“2024-01-01”实际想写“今天下午5点”。表单做了三层防护前端限制homework/index.wxml里截止时间用picker modetime而非文本框强制选择时分后端校验HomeworkController.createHomework()方法里用LocalDateTime.now().plusHours(1)作为最小允许时间防止教师误选“现在”智能填充当教师第一次进入页面onLoad自动填充- 标题《${courseName}》第${weekNum}周作业从class_course表读取- 截止时间今天17:00若当前时间17:00或明天17:00若当前时间≥17:00- 附件类型默认勾选PDF和IMAGEhomework.type字段存JSON数组[pdf,image]。更关键的是附件预览逻辑学生提交后教师在homework/detail.wxml看到的不是冷冰冰的URL而是- PDF嵌入web-view src{{pdfUrl}}/web-view兼容iOS/Android- 图片用image modeaspectFill src{{imageUrl}}/自动缩放不拉伸- 其他格式如DOCX显示下载按钮调用wx.downloadFile。你在util.js里能找到formatFileSize(size)函数把字节数转成“2.4 MB”这种人类可读格式避免教师看到2457600发懵。3.3 后台管理为什么管理员操作日志要存三张表安全审计不是摆设。管理员所有操作必须留痕且满足“谁在何时何地干了什么”的追溯要求。日志存三张表表名存储内容关键字段admin_log_basic操作基础信息admin_id,action_type(CREATE/UPDATE/DELETE),target_table,target_id,ip_address,created_timeadmin_log_detail操作前后快照log_id,before_data(JSON),after_data(JSON)例如删用户前存{name:张三,student_id:2023001}删后存{}admin_log_trace操作链路追踪log_id,trace_id(UUID),step_order,step_desc例如[1,校验权限,通过]、[2,执行删除,SQL: DELETE FROM user...]部署时在application.yml里配置logging: level: com.example.admin: DEBUG # 开启管理员模块DEBUG日志这样每次操作控制台会打印完整SQL和参数方便排查问题。实操心得banner.jpg不只是装饰图。它被用作小程序启动页app.json的splashPage尺寸必须是750×1334像素iPhone X及以上。我见过学生直接用手机拍黑板当banner结果启动页拉伸变形被老师质疑“技术不专业”。资源包里这张图是纯色渐变校徽矢量图适配所有机型。4. 部署全流程与关键配置解析4.1 后端Java服务部署从零开始的5步落地别被“Spring Boot”吓住这套后端连Tomcat都不用装。以下是我在三所高校现场部署的标准化流程步骤1准备环境- 安装JDK 11必须Spring Boot 2.7.x不支持JDK 17- 安装MySQL 5.7推荐8.0但需关闭sql_mode里的ONLY_FULL_GROUP_BY- 创建数据库CREATE DATABASE class_manager DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;步骤2导入SQL脚本执行src/main/resources/sql/init.sql注意不是schema.sql这个脚本包含初始化数据如管理员账号admin/admin123INSERT INTO user (id, username, password, role, real_name, created_time) VALUES (1, admin, $2a$10$..., ADMIN, 系统管理员, NOW());密码是BCrypt加密后的明文admin123可直接登录后台。步骤3修改配置文件编辑application-prod.yml生产环境配置spring: datasource: url: jdbc:mysql://localhost:3306/class_manager?useSSLfalseserverTimezoneAsia/Shanghai username: root password: your_mysql_password wechat: app-id: wx1234567890abcdef # 替换为你公众号的AppID secret: abcdef1234567890 # 替换为你公众号的AppSecret mch-id: 1234567890 # 微信支付商户号如不用支付留空步骤4编译打包# 在项目根目录执行 mvn clean package -Dmaven.test.skiptrue # 生成 target/class-manager-1.0.jar步骤5启动服务# 直接运行jar包无需Tomcat java -jar -Dspring.profiles.activeprod target/class-manager-1.0.jar # 查看日志tail -f nohup.out提示nohup java -jar ... 启动后用curl http://localhost:8080/actuator/health检查服务健康状态。返回{status:UP}即成功。如果报错Connection refused90%是MySQL密码错了去application-prod.yml核对。4.2 小程序前端配置微信开发者工具的3个致命设置很多学生卡在“本地调试正常真机扫不出码”。问题往往出在开发者工具配置project.config.json的appid必须是你自己的找到appid: touristappid这行替换成你在微信公众平台申请的小程序AppID。注意不是公众号AppID是小程序的app.json的sitemap.json必须设为setting:{ignore:false}否则微信搜索无法收录你的页面。检查sitemap.json内容json { desc: 关于本小程序的网站地图, rules: [{ action: allow, page: * }] }开发者工具右上角必须选“不校验合法域名”路径详情 → 本地设置 → 勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”。这是本地调试必需上线前再取消。部署后用真机测试- 学生扫qrcode目录下的二维码qrcode.png是示例实际用weapp.qrcode.min.js生成- 教师用pages/homework/index发布作业- 管理员访问https://yourdomain.com/admin/login默认账号admin/admin123。4.3 域名与HTTPS为什么必须用备案域名且SSL证书要选Let’s Encrypt微信小程序强制要求所有wx.request调用的域名必须在小程序后台的“开发管理-服务器域名”里备案且协议必须是HTTPS。域名备案个人主体只能备案1个域名推荐用二级域名如class.yourschool.edu.cn教育机构通常有edu.cn域名SSL证书用Let’s Encrypt免费证书命令一行搞定bash # 安装certbot sudo apt install certbot python3-certbot-nginx # 为域名申请证书 sudo certbot --nginx -d class.yourschool.edu.cnNginx配置里加入nginx server { listen 443 ssl; server_name class.yourschool.edu.cn; ssl_certificate /etc/letsencrypt/live/class.yourschool.edu.cn/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/class.yourschool.edu.cn/privkey.pem; # 代理到后端 location / { proxy_pass http://localhost:8080; proxy_set_header Host $host; } }注意close.png和photo.png这两个图标文件路径必须是/static/images/close.png。我在app.wxss里写了全局样式css .icon-close { width: 32rpx; height: 32rpx; background: url(/static/images/close.png) no-repeat center; background-size: contain; }如果你把图片放错目录所有关闭按钮都会显示为小方块。5. 常见问题与排查技巧实录5.1 签到失败的5种真实场景及解决方案现象原因排查命令/步骤解决方案扫码后提示“班级不存在”学生注册时选错班级或班级已被管理员删除查user表class_id字段对比class表是否存在该ID后台管理员重新启用班级或让学生重新注册定位签到始终提示“不在教室范围内”class_location表里教室坐标为空或geo-fence-radius配置过大/过小SELECT * FROM class_location WHERE class_id 1001;用高德地图API获取教室精确坐标更新lng/lat字段扫码后页面卡住控制台报request:fail timeout后端/sign/scan接口响应超时默认10秒curl -v https://yourdomain.com/sign/scan?codeabc123classId1001检查MySQL连接池application.yml里增加spring.datasource.hikari.connection-timeout30000学生提交作业后教师后台看不到文件文件上传分片未合并或/homework/upload/merge接口未被调用查/tmp/upload/目录下是否有对应fileId子目录检查小程序端homework-student/index.js里uploadFile方法是否执行到最后一步通知模板消息收不到微信模板ID未在小程序后台配置或template_id写错登录微信公众平台 → 功能 → 模板消息 → 查看ID是否启用复制后台application.yml里的wechat.template-id粘贴到微信后台模板库搜索5.2 教师端作业批阅的“状态机陷阱”教师点击“批阅”学生却没收到反馈。这不是Bug是状态机设计的必然结果。作业提交后homework_submit.status字段流转如下NOT_SUBMITTED → SUBMITTED → REVIEWING → REVIEWED → REJECTEDSUBMITTED学生提交成功文件已存REVIEWING教师点“批阅”后状态变为此值此时学生看到“教师正在批阅中”REVIEWED教师填写评语并保存状态变更触发模板消息REJECTED教师点击“退回”学生可重新提交。陷阱如果教师点“批阅”后关闭页面状态卡在REVIEWING学生永远等不到结果。解决方案是在HomeworkService.reviewHomework()方法里加定时任务// 批阅后启动10分钟倒计时 if (status.equals(REVIEWING)) { taskScheduler.schedule(() - { // 检查是否超时未操作 if (homeworkSubmit.getStatus().equals(REVIEWING) Duration.between(homeworkSubmit.getUpdateTime(), LocalDateTime.now()).toMinutes() 10) { homeworkSubmit.setStatus(SUBMITTED); // 自动退回 } }, Instant.now().plus(10, ChronoUnit.MINUTES)); }5.3 管理员后台登录401的3个检查点当你输入admin/admin123却提示“未授权”按顺序检查检查JWT密钥是否一致application.yml里的jwt.secret: your_secret_key必须和JwtUtil.java里的SECRET_KEY字符串完全相同区分大小写。检查Cookie域名是否匹配管理员后台是Web应用登录后Set-Cookie的Domain必须是你的域名。在Nginx配置里加nginx proxy_cookie_domain ~^(.)$ $1;检查浏览器是否禁用第三方CookieSafari和新版Chrome默认阻止第三方Cookie。解决方案在AdminLoginController.java里登录成功后返回JSON前端用localStorage.setItem(token, data.token)存储后续请求头加Authorization: Bearer ${token}。最后分享一个小技巧README.md里写的“快速启动”命令其实可以一键执行。我把所有步骤写成Shell脚本deploy.shbash!/bin/bashecho “正在部署班级管理系统…”mysql -u root -p class_manager src/main/resources/sql/init.sqlmvn clean package -Dmaven.test.skiptruejava -jar -Dspring.profiles.activeprod target/class-manager-1.0.jar echo “部署完成访问 https://yourdomain.com/admin/login”学生双击运行全程无需敲命令。这才是真正的“开箱即用”。这套资源不是代码的堆砌而是把三年教学实战中踩过的每一个坑、验证过的每一个方案、学生问得最多的问题都揉进了每一行代码、每一张表、每一个配置项里。它不追求炫技只求让你今天下午部署明天早上就能用。本文还有配套的精品资源点击获取简介直接可用的微信小程序班级事务管理工具覆盖教师、学生、管理员三类角色。学生扫码或定位一键签到实时查收班级通知查看并提交作业教师发布作业、审核提交结果、管理班级成员管理员统一维护账号和班级基础信息。所有功能基于微信原生小程序框架开发无需额外安装App。配套提供完整Java后端参考逻辑MySQL兼容数据库设计、详细部署文档、微信开发者工具配置文件project.config.、app.等、基础UI素材banner图、关闭图标、头像占位图及二维码生成脚本。包含标准小程序目录结构app.js、util.js、pages下细分页面如sign-student、homework-student、notice-student等、配置文件sitemap.、package.以及两个演示视频签到与作业流程。适合高校课程设计、毕业项目快速搭建或教学场景直接演示使用。本文还有配套的精品资源点击获取