
简介这是一份基于Java与Vue的待办事项提醒系统源码包面向计算机、数学、电子信息等专业学生可作为课程设计、期末大作业、毕业设计的参考项目。系统采用前后端分离结构后端Java代码负责待办事项业务逻辑与接口实现前端Vue组件用于任务列表、提醒交互等页面展示配合项目说明可完整复现增删改查、提醒触发等常用流程。压缩包共602个文件核心资源包括252个Java源文件、95个Vue页面、77个JS脚本另有XML、YML等配置文件与SQL数据库脚本帮助完成环境搭建和建表初始化整体仅1.49MB轻量易展开。目前已有304人学习、下载随包的项目说明帮助理解模块划分与运行方式数据库脚本便于快速建表适合具备一定编程基础、希望参照完整项目结构自行调试与扩展的读者。1. 待办事项提醒系统拆包后我发现最值钱的是三个示范这套待办事项提醒系统源码包放到电脑上跑通之后你会发现它不是那种只能用来“交差”的demo而是把课程设计里最容易丢分的三个点都做成了完整示范Windows下用bat脚本把前后端拉起来、用一张带提醒时间字段的待办表把数据库设计落地、再用定时扫描让“待办”真正变成“提醒”。它适合计算机、数学、电子信息方向的同学做课程设计、期末大作业或毕设参照也适合刚学完Spring Boot和Vue、想看看一条完整链路怎么打通的人。要判断这份包值不值得下建议先花半小时看完下面三部分再决定双击哪几个脚本。2. 从文件列表到可运行系统6个bat脚本和3个配置文件怎么分工拿到压缩包别急着找exe真正能启动东西的是这些bat。先用几分钟给文件归类后面能少踩一半坑。这份资源里最显眼的文件是run.bat、run-web.bat、package.bat、build.bat、clean.bat加上一个用途比较隐晦的ry.bat以及.env.development、.editorconfig、.eslintignore这几个前端相关配置。下面把它们分成三类来看。2.1 先认清每个文件是干什么的文件角色常见作用run.bat后端启动检查Java环境然后通过java -jar启动Spring Boot主程序run-web.bat前端启动切到前端目录执行npm install与npm run servepackage.bat / build.bat构建打包把后端打成可执行jar把前端编译到dist目录clean.bat清理删除target、node_modules等构建缓存ry.bat环境自检多数版本里是先检查JDK和MySQL变量再转调run.bat.env.development前端环境配置保存后端接口地址、请求前缀、轮询间隔.editorconfig / .eslintignore工程规范统一缩进、换行风格并让Lint跳过不需要检查的文件这里出现两个package.bat是压缩包来源不同导致的常见现象保留修改时间较新的那个即可另一个不影响运行。run.bat这种脚本最常见的写法是这样echo off chcp 65001 nul where java nul 2nul if errorlevel 1 ( echo 未检测到Java请先安装JDK 8或更高版本。 exit /b 1 ) java -jar target\todo-0.0.1-SNAPSHOT.jar --server.port8080 pause第一行chcp 65001是把cmd窗口切成UTF-8代码页避免Spring Boot日志里的中文变成乱码where java用来判断JDK是否在PATH里errorlevel 1表示没找到直接退出。--server.port8080建议先不要改如果8080被占用再改成8081并且等下前端配置也要一起改。jar文件名以target目录下实际生成的文件名为准如果打出来的包不带版本号把脚本里的jar名同步改掉即可。2.2 run-web.bat和.env.development是前后端联调的命门前端启动脚本最常见的写法是这样的echo off cd /d web if not exist node_modules ( echo 首次运行先安装依赖... call npm install ) call npm run serve这里有两个容易翻车的地方cd /d web里的/d不能省不然从前端所在盘符切到项目目录时会直接停在原地跑不动依赖装过一次后有if not exist node_modules判断就不用每次启动都重装几分钟。后端接口地址不是写死在代码里的而是放在.env.development里常见内容如下VUE_APP_BASE_URLhttp://localhost:8080/api VUE_APP_REMIND_INTERVAL30000VUE_APP_BASE_URL是前端所有请求的前缀前端里写的/task/list最终会被拼成http://localhost:8080/api/task/list。如果run.bat里把后端端口改成了8081这个文件也要同步改成http://localhost:8081/api。VUE_APP_REMIND_INTERVAL是提醒轮询间隔单位毫秒30000就是30秒和后端定时器的扫描节奏要匹配。2.3 我固定的启动顺序和端口清单先把顺序说清楚改数据库连接、导入SQL、启后端、启前端。不要一上来就双击run.bat数据库没就绪时后端会在几秒内启动失败页面自然全是404。服务默认端口验证方式MySQL3306mysql -u root -p能进命令行Spring Boot后端8080浏览器打开http://localhost:8080/api/testVue前端8081浏览器打开http://localhost:8081先后端、再前端的理由很简单Vue开发服务器启动后会自动代理接口请求但代理目标指向的8080至少要有一个服务在监听反过来的话前端会先渲染出来可所有请求都打不通排查起来更花时间。Vue CLI默认端口其实是8080为了和后端错开常见做法是在vue.config.js的devServer.port里改成8081。提示如果后端起来了8080接口测试正常但前端页面上请求还是404优先检查vue.config.js里的proxy.target而不是改后端Controller。3. 数据库设计与提醒调度task表、定时扫描和前端轮询怎么配合前一部分把项目跑起来后接下来就看数据库和提醒逻辑。待办事项提醒系统之所以叫“提醒”靠的不是前端闹钟而是后端每隔固定时间到数据库里扫一次任务。下面从建表开始把这一条链路拆开。3.1 建库建表关键不在表多在字段和索引这份资源里的SQL脚本通常分成建库、建表、造测试数据三段。跑通后留在MySQL里的核心结构一般是这样的CREATE DATABASE IF NOT EXISTS todo_db DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci; USE todo_db; CREATE TABLE user ( id BIGINT PRIMARY KEY AUTO_INCREMENT COMMENT 用户ID, username VARCHAR(50) NOT NULL COMMENT 登录名, password VARCHAR(64) NOT NULL COMMENT 加密后的密码 ) ENGINEInnoDB COMMENT 用户表; CREATE TABLE task ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL COMMENT 所属用户, title VARCHAR(200) NOT NULL COMMENT 待办内容, priority TINYINT NOT NULL DEFAULT 1 COMMENT 优先级1低 2中 3高, status TINYINT NOT NULL DEFAULT 0 COMMENT 状态0未完成 1已完成, remind_time DATETIME DEFAULT NULL COMMENT 提醒时间, create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, KEY idx_remind (status, remind_time) ) ENGINEInnoDB COMMENT 待办事项表;字段类型有几个值得关注的细节。status和priority都用TINYINT而不是CHAR存“0/1”一是省空间二是避免前端拿到字符串后还要反复转换。remind_time用DATETIME而不是TIMESTAMP是因为待办提醒可能涉及明年甚至后年的日期TIMESTAMP的取值范围到2038年就到头了课程设计虽然碰不到但会被答辩老师提问。KEY idx_remind (status, remind_time)这个联合索引是为定时扫描准备的。后端每分钟执行一次扫描条件是status0 AND remind_time BETWEEN ...这两个字段组合成联合索引后扫描走索引而不是全表数据量上千条时差别非常明显。注意导入SQL前先确认MySQL版本是5.7以上。5.6对DATETIME DEFAULT CURRENT_TIMESTAMP的支持不完整可能导致建表直接报错。3.2 定时提醒扫的是时间窗口不是某个整点后端提醒核心一般是一个带Scheduled注解的方法。常见写法如下Component public class RemindJob { Scheduled(cron 0 * * * * ?) public void scanExpiringTasks() { // 每分钟执行一次找出处于未完成状态、且提醒时间落在最近一分钟内的任务 ListTask tasks taskMapper.selectExpiringTasks(); for (Task task : tasks) { // 把这条任务推送给前端常见做法是通过WebSocket或写入一个待提醒队列 } } }cron 0 * * * * ?的含义是秒为0每分钟触发一次也就是整分时刻触发。如果希望每30秒扫一次可以把表达式改成*/30 * * * * ?代价是数据库查询次数翻倍演示时能明显提高提醒“准点率”。很多第一次写这种逻辑的人会写WHERE remind_time NOW()然后发现永远扫不到。原因是扫描动作发生在整分而任务设置的提醒时间多半是23:30:15这种带秒的等扫到的时候秒数已经变了。正确做法是扫一个窗口SELECT t.id, t.title, t.remind_time, u.username FROM task t JOIN user u ON t.user_id u.id WHERE t.status 0 AND t.remind_time BETWEEN NOW() - INTERVAL 1 MINUTE AND NOW();这会把“当前时刻之前一分钟后到现在”的任务都捞出来即使扫描晚了十几秒也不会漏。课程设计里还有一个加分点不要把这条SQL写在Mapper接口的注解里而是写在XML文件里这样答辩老师能直接看到数据库查询是怎么写的。3.3 提醒送达课程设计阶段我建议用轮询而不是WebSocket提醒扫描出来后要送到用户眼前。最好听的说法是WebSocket让后端主动推给浏览器但为了接它要引入依赖、配置握手、处理重连课程设计阶段很容易在半路翻车。我一般推荐用前端轮询实现只需要在待办页面里加一个定时器setInterval(() { axios.get(/api/task/expiring, { params: { now: Date.now() } }) .then((res) { if (res.data.length 0) { alert(你有 res.data.length 条待办已到提醒时间); loadTodoList(); } }) .catch(() {}); }, 30000); // 与后端扫描频率保持同一数量级这段代码每30秒向后端问一次“有没有到期任务”后端如果返回非空数组就弹一次提示同时刷新待办列表。缺点是提醒最多会延迟30秒但课程设计场景完全够用。如果之后想换WebSocket前端这段轮询代码原样删掉后端在推送逻辑里改为通过WebSocket会话发送即可。3.4 数据库连接与连接池改一处就要改全家数据库连接参数集中在后端配置里最常见的是application.ymlspring: datasource: url: jdbc:mysql://localhost:3306/todo_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 hikari: maximum-pool-size: 10这里三个参数值得记住。useUnicodetruecharacterEncodingutf8负责让Java与MySQL之间传输中文不乱码serverTimezoneAsia/Shanghai指定数据库会话时区否则MySQL默认取系统时区容易出现“程序打印的和库里存的不一致”这种玄学问题maximum-pool-size是HikariCP连接池的上限课程设计10个足够调再大反而会拖慢MySQL响应。如果改了主机的MySQL密码记得同步改这里。常见的翻车是在SQL工具里用新密码能登录但应用启动后一直报Access denied因为配置文件里还是旧密码。4. 避坑与排查编码、端口和时区引起的五个翻车现场每一条都是拆包时遇到过或替别人排除过的。新手按顺序对照熟手可以直接看第4.5条那条最隐蔽。4.1 双击run.bat闪退黑框一秒就消失现象双击run.bat后黑色窗口闪一下就没了什么报错都看不到。 原因脚本执行到某行失败后直接退出最常见是Java没安装或者JAVA_HOME没配置where java检测失败后走了exit /b 1。 解决不要双击打开项目目录在地址栏输入cmd回车再手动执行run.bat错误信息会停在屏幕上。确认是Java环境问题的话装好JDK并配置JAVA_HOME后再试。4.2 导入SQL没报错但应用提示Unknown database现象后端启动日志里出现Unknown database todo_db但SQL文件确实执行过。 原因执行SQL时使用的是其他连接或者SQL脚本本身没有包含CREATE DATABASE todo_db只在库里建了表。 解决用命令行确认库是否真的存在mysql -u root -p SHOW DATABASES; USE todo_db; SHOW TABLES;如果SHOW TABLES结果为空把SQL脚本重新导入一次如果数据库列表里没有todo_db说明脚本里少了建库语句手动执行CREATE DATABASE todo_db再导。4.3 中文乱码前端页面的待办标题全是问号现象数据库里本来是“买咖啡”前端显示“”英文和数字正常。 原因数据库脚本是GBK编码mysql命令行导入时按默认字符集解释表实际存成了乱码或者JDBC连接串没带characterEncodingutf8。 解决先改连接参数再修复已有数据。改application.yml里的url加上useUnicodetruecharacterEncodingutf8对已经乱掉的表执行转换ALTER TABLE task CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;注意这条语句只能修复库里的编码表示已经存成乱码的字符串不一定能找回所以演示数据如果乱了最好删掉重新插入。4.4 前端页面正常但接口全返回404或502现象8081端口能打开登录页点击待办列表却一直在转圈Network面板里请求状态是404或者502。 原因前端代理没有指向正确后端。最常见情况是后端自己改过端口但vue.config.js里的proxy.target还停在8080或者运行run-web.bat时后端根本没起来。 解决按顺序检查先直接访问http://localhost:8080/api/test确认后端活着再检查.env.development里的VUE_APP_BASE_URL最后打开vue.config.js确认proxy配置的target端口和实际后端端口一致。4.5 到点不提醒日志里连一条select都看不到现象任务设置了23:30提醒23:30过了好几分钟页面毫无反应日志里也没有任何查询。 原因最常见的是时区不一致。比如数据库服务器时区是UTC而业务时间按北京时间走NOW()就比期望值早8小时扫描窗口永远对不上你设置的23:30。第二个常见原因是启动类漏了EnableScheduling方法上有Scheduled也不执行。 解决把数据库连接串里的serverTimezone固定为Asia/Shanghai同时在启动类上确认有EnableScheduling。验证方法很简单手动执行一条UPDATE task SET remind_time NOW() WHERE id 1;然后盯一分钟日志。如果日志里出现了那条select说明调度链路是通的。5. 进阶改造把待办提醒系统从“能答辩”改成“真能用”系统跑通只是开始。想让它在你手里更有分量下面几个改造点都不大但每一个都能在答辩时拿出来讲。5.1 把“正点提醒”改成“提前5分钟提醒”课程设计的默认逻辑是提醒时间一到就弹出真实场景里更常用的是提前预警。实现上不用改Java逻辑只改一条SQLAND t.remind_time BETWEEN NOW() AND NOW() INTERVAL 5 MINUTE;这样在提醒时间前的5分钟内任务都会被扫出来。需要注意关联的是一次性任务如果需要重复提醒可以在task表加一个repeat_type字段每次执行完把remind_time加上一天再更新回库里。5.2 增加标签和统计数据现在的表结构足够支撑增删改查但答辩要体现设计能力可以扩展一张标签表CREATE TABLE tag ( id BIGINT PRIMARY KEY AUTO_INCREMENT, task_id BIGINT NOT NULL COMMENT 关联的待办ID, name VARCHAR(20) NOT NULL COMMENT 标签名 ) ENGINEInnoDB COMMENT 待办标签表;查询时按task_id关联就能在前端把“工作”“生活”分开展示。这个改动不碰主流程适合做完主体功能后剩少量时间时才动。5.3 答辩前做一次干净备份项目演示前最怕数据库被现场操作写乱。我习惯在演示前强制备份一次mysqldump -u root -p todo_db todo_backup.sql出问题时恢复mysql -u root -p todo_db todo_backup.sql这两条命令同样适合交作业前把数据库脚本重新生成一份避免压缩包里的SQL和源码实体类字段对不上。从那以后我每次拿到别人的源码包都强制自己先走一遍“看bat、导SQL、再动代码”的流程而不是直接双击启动。这套源码包让我最深的体会是待办提醒系统的瓶颈几乎不在功能多少而在你是否能说清数据库表、定时任务和前端轮询三者之间怎么协作。把这条链路跑通一次比背十个接口定义都值。希望帮到你。本文还有配套的精品资源点击获取