一个兼顾界面表现力、功能完整度与学习友好性的全栈练习项目。
使用 React 构建前端界面，使用 Spring Boot + MyBatis 构建后端服务，
通过 MySQL 完成数据持久化。
Note
TaskFlow 是一个偏课程作业与作品展示场景的项目，目标是以较小的复杂度完成一次真实的前后端联动实践。 它不是企业级平台，但足够完整、清晰、可运行，也很适合继续扩展。
TaskFlow 是一个全栈 Todo 管理项目，围绕“从前端界面、到后端接口、再到数据库落地”的完整流程构建。
它目前已经实现：
- 风格化落地页
- 登录与注册
- 中英文切换
- 仪表盘式任务管理页面
- 任务增删改查
- 任务完成状态切换
- 搜索与分类筛选
- 任务进度与统计展示
这个项目适合用于：
- Java Web / Web 全栈课程作业
- 课堂答辩或项目展示
- React + Spring Boot 联动练习
- 个人作品集中的校园项目模块
- 不是只有表单和表格的传统作业页面
- 包含首页、认证页、任务页的完整交互流
- 页面风格统一，适合直接做展示截图
- 前端已接入真实后端接口
- 后端已连接 MySQL 数据库
- 用户认证、任务管理、统计展示形成完整业务链路
- 后端采用课堂项目友好的实现方式
- Spring Boot + MyBatis 组合简单直接
- 前端代码结构清晰，便于继续维护和扩展
- 用户注册
- 用户登录
- 用户退出登录
- 获取当前登录用户信息
- 新增任务
- 查看任务列表
- 编辑任务
- 删除任务
- 切换任务完成状态
- 按关键词搜索任务
- 按分类筛选任务
- 任务总数统计
- 已完成任务统计
- 待完成任务统计
- 完成率 / 进度条展示
- 中英文切换
- 表单校验反馈
- 密码显示 / 隐藏切换
- 统一风格的按钮、卡片、弹窗与输入框
| 层级 | 技术方案 |
|---|---|
| 前端 | React, TypeScript, Vite |
| UI | Tailwind CSS, Lucide Icons, Motion |
| 后端 | Spring Boot, Spring MVC |
| 数据访问 | MyBatis |
| 数据库 | MySQL |
| 构建工具 | Maven |
| 运行环境 | Java 17 |
TaskFlow
├─ frontend/ # React 前端项目
│ ├─ src/
│ │ ├─ components/ # 页面与组件
│ │ ├─ contexts/ # 语言上下文
│ │ ├─ api.ts # 前端接口封装
│ │ ├─ App.tsx # 应用入口
│ │ └─ main.tsx
│ ├─ package.json
│ └─ vite.config.ts
│
├─ backend/ # Spring Boot 后端项目
│ ├─ src/main/java/com/taskflow/
│ │ ├─ controller/ # 控制器层
│ │ ├─ service/ # 业务层
│ │ ├─ mapper/ # MyBatis Mapper 接口
│ │ ├─ entity/ # 实体类
│ │ ├─ dto/ # 请求参数对象
│ │ ├─ vo/ # 返回对象
│ │ ├─ common/ # 统一返回结构
│ │ ├─ exception/ # 全局异常处理
│ │ ├─ security/ # JWT 与用户上下文
│ │ ├─ interceptor/ # 登录拦截器
│ │ └─ config/ # MVC 配置
│ ├─ src/main/resources/
│ │ ├─ mapper/ # MyBatis XML 映射
│ │ └─ application.yml
│ ├─ sql/
│ │ ├─ schema.sql # 建表脚本
│ │ └─ test_data.sql # 测试数据
│ └─ pom.xml
│
├─ images/ # README 截图资源
├─ sql/ # 根目录 SQL 目录（可继续扩展）
├─ .gitignore
├─ LICENSE
└─ README.md
Landing Page- 项目介绍、功能亮点、界面展示
Auth- 登录与注册页面
Dashboard- 任务管理主界面
Language Context- 中英文切换
API Layer- 前端与后端的统一请求封装
AuthController / AuthService- 注册、登录、退出、当前用户
TaskController / TaskService- 任务 CRUD、状态切换、任务统计
Mapper + XML- 通过 MyBatis 操作 MySQL
Interceptor + JWT- 登录保护与身份识别
GlobalExceptionHandler- 统一异常处理和错误返回
Tip
当前 README 已接入项目中的本地截图资源，后续可以继续替换为最新版界面截图。
- Node.js 18 及以上
- Java 17
- Maven
- MySQL 8.x
git clone https://github.com/xiaoluosigithub/Taskflow.git
cd taskflow先执行建表脚本：
source sql/schema.sql;如需测试数据，再执行：
source sql/test_data.sql;cd backend
mvn spring-boot:run默认地址：
http://localhost:8080
cd frontend
npm install
npm run dev默认地址：
http://localhost:3000
推荐本地启动顺序：
- 启动 MySQL
- 执行数据库脚本
- 启动后端服务
- 启动前端开发服务器
- 打开浏览器访问项目页面
- 前端：
http://localhost:3000 - 后端：
http://localhost:8080 - 健康检查：
http://localhost:8080/api/v1/health
配置文件：
backend/src/main/resources/application.yml
默认数据库配置如下：
spring:
datasource:
url: jdbc:mysql://localhost:3306/taskflow?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
username: root
password: 123456如果你的 MySQL 用户名、密码或端口不同，请先修改这里再启动。
配置示例文件：
内容示例：
APP_URL=http://localhost:3000
VITE_API_BASE_URL=http://localhost:8080/api/v1推荐做法：
- 复制
.env.example - 创建
.env.local - 根据本地后端地址调整
VITE_API_BASE_URL
POST /api/v1/auth/register：注册POST /api/v1/auth/login：登录GET /api/v1/auth/me：获取当前用户POST /api/v1/auth/logout：退出登录
GET /api/v1/tasks：获取任务列表POST /api/v1/tasks：新增任务GET /api/v1/tasks/{taskId}：获取任务详情PATCH /api/v1/tasks/{taskId}：修改任务PATCH /api/v1/tasks/{taskId}/toggle：切换任务状态DELETE /api/v1/tasks/{taskId}：删除任务GET /api/v1/tasks/stats/summary：获取任务统计
Important
除登录、注册、健康检查外，其他接口需要在请求头中携带 Token：
Authorization: Bearer <token>
- 增加任务优先级、截止时间、备注字段
- 增加忘记密码 / 重置密码流程
- 将语言偏好持久化到后端
- 增加任务分页与排序能力
- 增加单元测试与接口测试
- 增加部署说明与线上演示地址
- 优化移动端细节体验
TaskFlow 由课堂项目场景出发构建，适合作为：
- Web 前后端分离课程作业
- Java Web 课程展示项目
- React + Spring Boot 全栈练习案例
- 个人作品集中的校园项目展示
如果你正在继续完善它，推荐优先优化：
- 多语言文案细节
- 表单反馈体验
- 仪表盘交互流畅度
- 项目说明与仓库展示完整度
本项目采用 MIT License 开源协议。
