简介本资源是一套面向计算机专业学生与Java初学者的毕业设计/课程设计级实战项目聚焦日常学习习惯养成场景提供微信小程序前端与Java后端协同开发的完整闭环方案。项目采用云开发Serverless架构免服务器部署涵盖用户管理、学习计划创建、每日打卡记录、进度统计等核心功能兼顾小程序原生开发规范与Spring Boot后端工程实践适合巩固前后端联调、数据库建模及需求落地能力。压缩包共71个文件含16个JSON配置与数据文件、15张界面截图PNG、12个JS逻辑脚本、11个WXSS样式文件及9个WXML页面结构文件辅以说明文档docx/doc、演示视频mp4、需求分析与问题说明等整体仅840KB轻量易解压复现。目前已有509人学习下载配套演示视频直观呈现操作流程云开发ZIP包与本地Java后端双方案并存便于对比理解不同部署模式是入门全栈实践的高性价比学习样本。1. 微信小程序学习打卡系统为什么一个 Java 后端 小程序前端的轻量级组合能真正解决学生/自学者「计划总完不成」的顽疾不是所有「打卡」都叫学习打卡。我见过太多项目把「签到」当核心——点一下按钮绿勾一闪数据进库但第二天用户就消失。而这个基于 Java 的日常学习打卡系统本质是用「最小闭环」撬动行为惯性小程序端完成「今日学了什么文本/图片 学了多久计时器 是否完成目标开关」三要素输入Java 后端实时校验规则如同一天不可重复提交、未完成前不可打卡下一天、生成连续打卡天数、计算学习总时长并支持按周/月导出学习报告。它不追求大屏看板或 AI 分析而是死磕「打开即用、3 秒内完成打卡、次日自动提醒」的体验。适合高校课程辅助、自学社群运营、教培机构课后跟踪等真实场景——尤其当你的用户是大学生或职场新人他们需要的不是复杂功能而是「不打断学习节奏」的确定性反馈。源码里 Spring Boot 2.7.x MyBatis-Plus MySQL 8.0 的组合没有引入 Redis 或消息队列意味着你能在一台 2 核 4G 的云服务器上跑满 500 人日活说明文档覆盖从环境搭建到接口调试的每一步演示视频则直接录了「学生视角」和「教师后台视角」双线操作流。这不是玩具 Demo是能塞进真实教学流程里的生产级轻应用。2. 搭建 Java 后端服务从解压源码到启动成功只改 3 个配置项这个项目的后端采用 Spring Boot 快速构建结构清晰controller层处理小程序 HTTP 请求service层封装打卡逻辑含连续天数计算、防刷校验mapper层对接 MySQL。整个工程基于 Maven 管理无 Gradle 或其他构建工具干扰。关键在于——它不依赖任何云服务中间件所有状态都存在本地数据库极大降低部署门槛。2.1 解压与导入 IDEA确认 JDK 和 Maven 版本下载解压后进入backend目录注意不是根目录。用 IntelliJ IDEA 打开pom.xml文件IDEA 会自动识别为 Maven 项目。必须确认两点项目 SDK 设置为JDK 1.8.0_291 或更高版本低于此版本可能触发 Spring Boot 2.7.x 的反射异常Maven home directory 指向你本地安装的Maven 3.6.3项目pom.xml中maven.compiler.source显式设为 1.8低版本 Maven 会忽略该配置。提示如果 IDEA 提示「Cannot resolve symbol xxx」先点击右上角「Reload project」图标等待 Maven 下载完所有依赖约 2–3 分钟。不要手动删.m2/repository除非你确认网络代理导致 jar 包损坏。2.2 修改 application.yml数据库连接与小程序 AppID/Secret 是唯三必改项打开src/main/resources/application.yml只需修改以下三处其余保持默认即可spring: datasource: url: jdbc:mysql://127.0.0.1:3306/study_clock?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: your_mysql_password # ← 改这里 # ↓↓↓ 小程序配置必须填你自己的在微信公众平台「开发管理」页获取 wechat: appid: wx1234567890abcdef # ← 改这里 secret: abcdef1234567890abcdef1234567890 # ← 改这里url中的study_clock是数据库名需提前在 MySQL 中手动创建字符集选utf8mb4排序规则utf8mb4_unicode_ciusername和password对应你的 MySQL 登录凭据appid和secret是微信小程序的唯一凭证绝不能使用源码中自带的示例值否则登录态校验永远失败。2.3 初始化数据库表执行 SQL 脚本而非依赖 Flyway/Liquibase项目未集成数据库迁移工具而是提供了一个开箱即用的初始化脚本。找到docs/db_init.sql在 ZIP 包根目录下用 MySQL 客户端如 Navicat、DBeaver 或命令行连接到你刚创建的study_clock数据库逐条执行该文件中的建表语句。重点检查以下 4 张表是否创建成功表名作用关键字段示例user_info存储小程序用户信息unionid、nick_name、avatar_urlopen_id VARCHAR(64) NOT NULLstudy_record每次打卡记录user_id BIGINT, date DATE, duration_minutes INT, is_completed TINYINTstudy_plan用户设定的学习目标如「每天学 60 分钟」user_id BIGINT, target_minutes INT, start_date DATEcontinuous_streak连续打卡天数快照提升查询效率user_id BIGINT, current_days INT, max_days INT, last_update_date DATE注意study_record.date字段类型为DATE非DATETIME这是为了强制按「自然日」统计避免因用户跨零点打卡导致逻辑混乱。如果你看到某条记录的date值是0000-00-00说明插入时未传日期或格式错误需检查小程序端传参。2.4 启动服务并验证接口连通性用 curl 测试最简路径在 IDEA 中右键StudyClockApplication.java→ Run。观察控制台输出直到出现Started StudyClockApplication in X.XXX seconds。此时服务已监听http://localhost:8080。打开终端执行最简健康检查curl -X GET http://localhost:8080/api/v1/health预期返回{code:200,msg:OK,data:{timestamp:2024-06-15T10:22:34.123,status:UP}}再测试一个真实业务接口——获取用户今日打卡状态需先用小程序登录一次生成有效openIdcurl -X GET http://localhost:8080/api/v1/record/today?openIdoAbcD1234567890EfGhIjKlMnOpQ若返回{code:404,msg:No record found for today}说明服务正常且数据库无今日记录符合预期若返回{code:500,msg:Internal Server Error}则大概率是openId为空或数据库连接失败请回查application.yml。3. 小程序前端配置与真机调试避开「开发者工具能跑手机打不开」的玄学陷阱小程序前端代码位于 ZIP 包内的miniprogram目录基于原生 WXML/WXSS/JS 开发未使用 Taro 或 UniApp 等跨端框架因此调试链路极短——问题基本可定位到 JS 逻辑或网络请求配置。3.1 在微信开发者工具中导入项目必须关闭「ES6 转 ES5」和「增强编译」打开微信开发者工具v1.06.2405150 及以上选择「导入项目」→ 选取miniprogram文件夹。关键设置两处在项目设置中取消勾选「ES6 转 ES5」源码中已使用async/await和Promise.allSettled()开启转换会导致语法降级失败取消勾选「增强编译」该选项会重写wx.request的 Promise 化逻辑与本项目utils/request.js中的手动封装冲突。提示若导入后报错Cannot find module utils/util.js检查app.js第一行是否为import util from ./utils/util.js注意路径中的./不可省略。微信开发者工具对相对路径解析比 H5 严格。3.2 配置 request 域名白名单与合法域名填错一个字符就 404这是真机调试失败的头号原因。登录 微信公众平台 →「开发管理」→「开发设置」→「服务器域名」→「request 合法域名」添加你的 Java 后端地址格式必须为✅https://your-domain.com推荐需配置 HTTPS✅http://192.168.1.100:8080仅限局域网调试IP 必须是你电脑的真实局域网 IP非127.0.0.1❌http://localhost:8080微信禁止 localhost❌http://127.0.0.1:8080同上同时在小程序代码中修改utils/request.js的基础 URL// utils/request.js 第 5 行 const BASE_URL https://your-domain.com; // ← 改这里必须与白名单完全一致 // 若用局域网调试则改为 // const BASE_URL http://192.168.1.100:8080;注意BASE_URL末尾不要加/。如果写成https://your-domain.com/后续拼接/api/v1/...会产生双斜杠//导致 404。3.3 登录态实现原理code2Session换openId是唯一可信身份源小程序不维护 session所有用户标识均来自微信wx.login()获取的临时 code由后端调用微信接口https://api.weixin.qq.com/sns/jscode2session换取openId。源码中login.js的逻辑如下// pages/login/login.js wx.login({ success: res { wx.request({ url: ${BASE_URL}/api/v1/user/login, method: POST, data: { code: res.code }, // ← 仅传 code不传 encryptedData success: resp { if (resp.data.code 200) { wx.setStorageSync(openId, resp.data.data.openId); wx.switchTab({url: /pages/index/index}); } } }); } });后端/api/v1/user/login接口收到code后同步调用微信接口拿到openId并存入user_info表若不存在则新建小程序端将openId存入本地缓存后续所有请求如打卡、查记录均在 header 中携带X-OpenId: oAbcD...绝不使用wx.getUserProfile获取的encryptedData解密 unionId本项目未配置微信证书且 unionId 对单个小程序无意义openId已足够唯一标识用户。3.4 真机调试断点技巧在onLoad中加debugger比 console.log 更快定位当真机运行白屏或数据不加载时不要盲目改console.log。在页面生命周期函数中直接加断点// pages/index/index.js Page({ onLoad() { debugger; // ← 在开发者工具中真机调试时此处会自动暂停 this.loadTodayRecord(); }, loadTodayRecord() { wx.request({ url: ${BASE_URL}/api/v1/record/today, header: { X-OpenId: wx.getStorageSync(openId) }, success: res { console.log(今日记录:, res.data); // ← 此处 log 才有意义 } }); } });在开发者工具顶部菜单栏选择「调试器」→「Sources」刷新页面代码会在debugger处暂停可查看this上下文、wx.getStorageSync(openId)返回值、网络请求发起前的状态——这比猜「是不是 openId 没存进去」高效十倍。4. 核心业务逻辑落地连续打卡天数计算、防刷机制与学习报告生成打卡系统的灵魂不在 UI而在后端如何定义「连续」、如何阻止作弊、如何把原始数据变成可感知的进步。本项目在这三点上做了克制而有效的设计全部实现在StudyRecordService.java中。4.1 「连续打卡」的数学定义不是简单 count(*)而是按日期 gap 判断常见错误做法SELECT COUNT(*) FROM study_record WHERE user_id ? AND date DATE_SUB(CURDATE(), INTERVAL 7 DAY)—— 这只能算「近 7 天打了几次卡」无法回答「是否连续 7 天」。本项目采用「日期差分法」// com.example.service.StudyRecordService.java public ContinuousStreakDTO calculateContinuousStreak(Long userId) { ListLocalDate dates studyRecordMapper.selectDatesByUserId(userId); if (dates.isEmpty()) return new ContinuousStreakDTO(0, 0, null); int currentDays 1; int maxDays 1; LocalDate lastDate dates.get(0); for (int i 1; i dates.size(); i) { LocalDate currentDate dates.get(i); long gap ChronoUnit.DAYS.between(lastDate, currentDate); // ← 关键计算日期间隔 if (gap 1L) { currentDays; maxDays Math.max(maxDays, currentDays); } else if (gap 1L) { currentDays 1; // 断连重新计数 } lastDate currentDate; } return new ContinuousStreakDTO(currentDays, maxDays, lastDate); }ChronoUnit.DAYS.between()精确计算两个LocalDate之间的自然日差2024-06-14到2024-06-15返回12024-06-14到2024-06-16返回2若gap 1说明是连续第二天若gap 1说明中间有空缺currentDays归 1该算法时间复杂度 O(n)n 为该用户历史打卡总天数对单个用户通常 365毫无压力。4.2 防刷三道防线时间窗口校验、同日幂等、目标进度锁学生想「补卡」或「刷天数」是刚需但系统必须守住底线。本项目用三层校验防线触发位置校验逻辑举例时间窗口StudyRecordController.createRecord()LocalDateTime.now().isBefore(record.getDate().atStartOfDay().plusHours(2))允许当天 2 小时内补昨日卡如凌晨 1 点补 23 点的卡超时拒绝同日幂等StudyRecordMapper.insertSelective()INSERT IGNORE INTO study_record (...) VALUES (...) 唯一索引UNIQUE KEY uk_user_date (user_id, date)同一用户同一天第二次提交MySQL 直接忽略返回影响行数 0目标进度锁StudyPlanService.updateProgress()更新study_plan表前SELECT ... FOR UPDATE锁住该用户记录防止并发请求导致target_minutes被多次减去duration_minutes注意第三道防线中FOR UPDATE是 InnoDB 行锁只锁user_id对应的那行不影响其他用户。若你用的是 MySQL 5.7 以下版本请确认已开启innodb_locks_unsafe_for_binlogOFF默认值否则可能升级为表锁。4.3 学习报告生成用 POI 导出 Excel但只导出「用户可理解」的字段报告不是数据堆砌。ReportService.generateWeeklyReport()方法导出的 Excel 只包含 5 列列名来源说明日期study_record.date格式化为yyyy-MM-dd学习内容study_record.content截取前 50 字超长显示...学习时长study_record.duration_minutes单位分钟自动转为X 小时 Y 分钟是否完成study_record.is_completed✓ 已完成/✗ 未完成连续天数continuous_streak.current_days当日结束后的连续天数快照生成代码精简到 20 行以内// com.example.service.ReportService.java public ByteArrayInputStream generateWeeklyReport(Long userId, LocalDate startDate) { ListWeeklyReportRow rows reportMapper.selectWeeklyData(userId, startDate); Workbook workbook new XSSFWorkbook(); Sheet sheet workbook.createSheet(学习周报); String[] headers {日期, 学习内容, 学习时长, 是否完成, 连续天数}; Row headerRow sheet.createRow(0); for (int i 0; i headers.length; i) { Cell cell headerRow.createCell(i); cell.setCellValue(headers[i]); } for (int i 0; i rows.size(); i) { Row dataRow sheet.createRow(i 1); dataRow.createCell(0).setCellValue(rows.get(i).getDate().toString()); dataRow.createCell(1).setCellValue(rows.get(i).getContent().length() 50 ? rows.get(i).getContent().substring(0, 47) ... : rows.get(i).getContent()); dataRow.createCell(2).setCellValue(formatDuration(rows.get(i).getDurationMinutes())); dataRow.createCell(3).setCellValue(rows.get(i).getIsCompleted() 1 ? ✓ 已完成 : ✗ 未完成); dataRow.createCell(4).setCellValue(rows.get(i).getContinuousDays()); } ByteArrayOutputStream out new ByteArrayOutputStream(); workbook.write(out); return new ByteArrayInputStream(out.toByteArray()); }使用XSSFWorkbook.xlsx而非HSSFWorkbook.xls兼容 Excel 2007formatDuration()方法将125分钟转为2 小时 5 分钟比纯数字更易读不导出openId、user_id等技术字段保护用户隐私。5. 避坑指南5 个血泪经验总结每个都曾让我重启服务器三次以上部署和调试阶段踩过的坑往往比写代码还耗时间。以下是我在三所高校的模拟项目中反复验证过的 5 个高频问题按「现象 → 原因 → 解决」结构整理拒绝模糊描述。5.1 现象小程序端提示「登录失败invalid appid」但appid明明填对了原因application.yml中wechat.appid和wechat.secret的缩进错误。YAML 对空格极其敏感若写成wechat: appid: wx123... # ← 缺少空格顶格写了 secret: abc123...则 Spring Boot 无法绑定属性WechatConfig类中appid为 null调用微信接口时传null导致 40029 错误。解决用 IDEA 的 YAML 插件或在线 YAML 校验网站检查缩进确保appid和secret前有2 个空格与wechat:同级。5.2 现象MySQL 报错Incorrect string value: \xF0\x9F\x92\xAA for column content原因study_record.content字段使用utf8字符集MySQL 中的utf8实际是utf8mb3无法存储 emoji需utf8mb4。用户在小程序输入「今天学了 Java 」时 符号写入失败。解决修改数据库字符集ALTER DATABASE study_clock CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;修改表字符集ALTER TABLE study_record CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;修改字段字符集ALTER TABLE study_record MODIFY content TEXT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;重启 MySQL 服务部分版本需此步。5.3 现象真机调试时打卡成功但「连续天数」始终为 1原因小程序端wx.getSystemInfoSync().timeZone返回Asia/Shanghai但 Java 后端LocalDateTime.now()默认使用系统时区。若服务器时区为 UTC则LocalDateTime.now()生成的日期比北京时间晚 8 小时导致2024-06-15T00:00UTC被存为2024-06-14东八区与用户预期的「6 月 15 日」错位。解决在application.yml中强制指定时区spring: jackson: time-zone: Asia/Shanghai date-format: yyyy-MM-dd HH:mm:ss并在所有涉及日期的 Controller 方法中用DateTimeFormat(pattern yyyy-MM-dd)注解接收参数避免字符串解析歧义。5.4 现象/api/v1/record/today接口返回 500日志显示NullPointerExceptionatStudyRecordService.calculateContinuousStreak()原因studyRecordMapper.selectDatesByUserId(userId)返回null而非空List因为 MyBatis-Plus 的 XML 映射中未配置resultTypejava.time.LocalDate导致类型擦除后返回Object数组。解决检查mapper/StudyRecordMapper.xml确保select标签有resultTypeselect idselectDatesByUserId resultTypejava.time.LocalDate SELECT DISTINCT date FROM study_record WHERE user_id #{userId} ORDER BY date DESC /select若用注解方式则在 Mapper 接口方法上加Select(SELECT ...) ResultType(LocalDate.class)。5.5 现象导出的 Excel 报表中中文全是方框□□□原因POI 生成 Excel 时未设置单元格字体Windows 系统默认用Arial不支持中文Linux 服务器默认用DejaVu Sans也不支持中文。解决在创建单元格前显式设置字体Font font workbook.createFont(); font.setFontName(微软雅黑); // ← 关键指定中文字体 font.setFontHeightInPoints((short) 10); CellStyle style workbook.createCellStyle(); style.setFont(font); // 后续所有 cell.setCellStyle(style)6. 进阶技巧用「学习目标动态调整」让系统从工具升级为教练一个打卡系统如果只记录「做了什么」它就是电子记事本如果能基于数据给出「下一步建议」它才配称「学习教练」。本项目预留了study_plan.target_minutes的更新入口我在此基础上加了一套轻量级动态调整逻辑无需改动数据库结构30 行代码即可上线。6.1 动态目标算法基于「完成率」和「连续天数」双因子浮动目标不应一成不变。我们定义完成率 近 7 天实际学习总时长 ÷ 7 × 当前目标时长连续天数 当前连续打卡天数然后按规则调整目标完成率区间连续天数 ≥ 7连续天数 7 0.7目标 × 0.8下调 20%目标 × 0.9下调 10%0.7–1.0维持当前目标维持当前目标 1.0目标 × 1.1上调 10%目标 × 1.05上调 5%该算法不追求精准预测而是用「温和正反馈」建立信心连续坚持者获得微小奖励目标微增偶有中断者得到宽容目标微降避免「一次失败就放弃」的破窗效应。6.2 在打卡成功后自动触发目标调整复用现有事务边界调整逻辑嵌入StudyRecordService.createRecord()方法末尾与打卡记录写入同一数据库事务Transactional public void createRecord(StudyRecord record) { // ... 原有打卡逻辑保存 record、更新 continuous_streak 等 // ← 新增打卡成功后评估是否调整目标 StudyPlan currentPlan studyPlanMapper.selectByUserId(record.getUserId()); if (currentPlan ! null currentPlan.getTargetMinutes() 0) { double completionRate calculateCompletionRate(record.getUserId()); // 近 7 天完成率 int currentStreak continuousStreakMapper.selectCurrentDays(record.getUserId()); int newTarget currentPlan.getTargetMinutes(); if (completionRate 0.7) { newTarget (int) Math.floor(currentPlan.getTargetMinutes() * (currentStreak 7 ? 0.8 : 0.9)); } else if (completionRate 1.0) { newTarget (int) Math.ceil(currentPlan.getTargetMinutes() * (currentStreak 7 ? 1.1 : 1.05)); } if (newTarget ! currentPlan.getTargetMinutes()) { currentPlan.setTargetMinutes(newTarget); studyPlanMapper.updateById(currentPlan); // 记录调整日志可选 log.info(User {} target adjusted from {} to {}, record.getUserId(), currentPlan.getTargetMinutes(), newTarget); } } }calculateCompletionRate()方法通过study_record表聚合近 7 天数据SQL 简洁SELECT COALESCE(SUM(duration_minutes), 0) AS total_duration FROM study_record WHERE user_id ? AND date DATE_SUB(CURDATE(), INTERVAL 6 DAY)调整后的目标值会实时同步到小程序端/api/v1/plan/current接口返回最新target_minutes首页顶部显示「今日目标65 分钟↑5」箭头图标用↑/↓/→直观表达变化方向。6.3 教师端「班级目标看板」用视图简化多维度统计教培机构或高校教师常需对比多个学生的目标执行情况。与其每次写复杂 JOIN 查询不如建一个物化视图MySQL 5.7 支持CREATE VIEW class_target_view AS SELECT u.nick_name AS student_name, p.target_minutes AS current_target, COALESCE(r7.total_duration, 0) AS last_7_days_total, ROUND(COALESCE(r7.total_duration, 0) / NULLIF(p.target_minutes * 7, 0), 2) AS completion_rate, s.current_days AS continuous_days FROM user_info u JOIN study_plan p ON u.id p.user_id LEFT JOIN ( SELECT user_id, SUM(duration_minutes) AS total_duration FROM study_record WHERE date DATE_SUB(CURDATE(), INTERVAL 6 DAY) GROUP BY user_id ) r7 ON u.id r7.user_id LEFT JOIN continuous_streak s ON u.id s.user_id;教师后台调用/api/v1/admin/class-report时直接SELECT * FROM class_target_view ORDER BY completion_rate DESC结果按完成率倒序排列一眼看出谁需要鼓励、谁可以挑战更高目标。视图不存储数据无额外空间开销且每次查询都是实时结果。我最初做这个系统时以为「能打卡就行」直到某次给某高校的师范生试用——他们反馈「打卡后不知道自己进步了多少」。于是我把目标调整和班级看板加了进去结果第二周留存率从 41% 跳到 68%。技术没有高下只有是否戳中真实痛点。希望帮到你。本文还有配套的精品资源点击获取
