📋 三端全栈 · 个人实战项目

Ethan's ToDoList

基于 Spring Boot + Vue 3 + Android 的跨平台任务管理应用,支持 Web 端、Android 端统一数据访问

🌐 Web 前端 ⚙️ Spring Boot 后端 📱 Android App ☁️ 云端部署 🔌 RESTful API
3
端覆盖(Web / Android / 后端)
5
RESTful API 接口
7+
技术栈组合
V2.0
持续迭代中

平台概述

一款面向个人使用的轻量 ToDo 管理应用,云同步、跨设备访问

🎯

核心定位

"随时可用、简单直接"的个人待办管理工具,聚焦任务的基本生命周期管理,而非复杂协作或高级计划。

☁️

云端存储

任务数据统一存储在云端 MySQL 数据库,通过后端 API 提供统一服务,支持多端、多设备访问同一套数据。

🔧

实战驱动

通过完整的「Android + Spring Boot + Vue3 + MySQL」技术栈实现,是可上线运行的真实全栈项目案例。

📱

跨端体验

手机端(Android Material Design)与电脑端(Vue3 Web)均可操作任务,数据实时同步、一致性好。

系统架构

三端分离、统一 API、云端部署

客户端层 服务端层 数据层 📱 Android App Java · Material Design 🌐 Web 前端 Vue 3 · Vite · Axios HTTP/REST HTTP/REST ⚙️ Spring Boot 后端服务 Controller 层 /api/tasks Service 层 TaskService · 业务逻辑 Repository 层 Spring Data JPA 🔒 Security 配置:CORS 跨域放开 · CSRF 关闭 · 全部接口 permitAll JPA / Hibernate 🗄️ MySQL 8.0 · todolist_db

三端技术详情

Web 端 + 后端 + Android 端,全链路覆盖

🌐

Web 前端

Vue 3 + Vite + Axios · 现代化 SPA 应用

组件化架构

TaskList(列表管理)、TaskCard(任务卡片)、TaskForm(表单弹窗)、UsageGuide(使用指南),职责清晰、复用性强

智能连接

后端自动检测(backendChecker.js),支持多地址轮询,连接失败降级离线模式,用户体验平滑

交互完善

筛选(全部/待办/已完成)、排序(时间/标题/状态)、一键清空、Loading/空状态/错误状态覆盖

Vue 3.4 Vite 4.5 Axios 1.6 dayjs ES Module
⚙️

后端服务

Spring Boot 2.6 + Spring Data JPA · RESTful API

分层架构

Controller → Service → Repository 标准三层,职责分离、易维护、易扩展

数据访问

Spring Data JPA + Hibernate,实体与 MySQL task 表自动映射,ddl-auto: update

安全配置

Spring Security 最小化配置:CORS 开放、CSRF 关闭、全部接口 permitAll

Spring Boot 2.6.13 Spring Data JPA Spring Security MySQL Connector Maven Java 8
📱

Android 客户端

Java + Material Design + Retrofit · 原生体验

单 Activity 架构

MainActivity + RecyclerView + Dialog,简洁清晰,适合个人工具类应用

Material Design

Google Material 风格界面、FloatingActionButton、Toolbar 菜单、卡片式布局

DatePicker

内置 DatePickerDialog + TimePickerDialog,时间选择体验原生流畅

Java 11 Retrofit 2.9 Gson Material Design RecyclerView ConstraintLayout Gradle (Kotlin DSL)

功能模块

覆盖任务全生命周期的增删改查与状态管理

Ethan's ToDoList — 产品功能结构 📋 Ethan's ToDoList 📝 任务管理模块 ➕ 新增任务 ✏️ 编辑任务 🗑️ 删除任务 🔄 一键清空 📊 任务展示模块 🃏 卡片式列表 📋 按状态排序 🎨 已完成弱化 🔍 筛选与排序 ✅ 任务状态模块 ☑️ 完成/未完成 🔄 CheckBox 🎨 状态UI强绑定(颜色/删除线) ☁️ 数据存储与同步 🗄️ MySQL 🔌 REST API 🔄 实时刷新 📱 跨端同步 任务生命周期 CRUD 流程 📥 创建 (POST) 表单校验 → 调用API 📖 查询 (GET) 获取列表 → 排序展示 ✏️ 更新 (PUT) 预填数据 → 修改提交 🗑️ 删除 (DELETE) 确认弹窗 → 移除记录 ✅ 所有操作完成后自动刷新列表
📝

新增任务

填写标题、时间(日期+时间双选择器)、地点三个字段,提交后立即刷新列表

✏️

编辑任务

弹出预填原数据的对话框,支持修改任意字段,保留完成状态

🗑️

删除 / 清空

单条删除需确认,一键清空并行删除全部任务,操作不可逆

☑️

状态切换

CheckBox 切换完成/未完成,已完成任务自动移至列表末尾,视觉弱化

📊

排序规则

未完成任务置顶优先展示,Web 端额外支持按时间、标题、状态排序

🔄

实时同步

所有增删改操作均通过 API 实时同步至 MySQL,操作后自动刷新列表

RESTful API 接口

Base URL:http://服务器地址:8080/api/tasks

方法 路径 说明 请求体 响应
GET /api/tasks 获取全部任务列表 Task[]
GET /api/tasks/{id} 获取单条任务 Task | 404
POST /api/tasks 新建任务 { content, time, loc } Task
PUT /api/tasks/{id} 更新任务 { content, time, loc, done } Task | 404
DELETE /api/tasks/{id} 删除任务 { "message": "删除成功" }

数据模型

MySQL task 表结构 — 简洁高效的单表设计

📋 task 表

id BIGINT 主键,自增
title VARCHAR(100) 任务描述 必填
time DATETIME 任务时间 必填
location VARCHAR(100) 活动地点 必填
status TINYINT(1) 0=未完成,1=已完成

技术栈总览

覆盖前端、后端、移动端、数据库全链路

🌐

Web 前端

Vue 3Vite Axiosdayjs ES Module
⚙️

后端

Spring BootSpring Data JPA Spring SecurityMaven Java 8
📱

Android

JavaRetrofit 2 GsonMaterial Gradle
🗄️

数据库 & 部署

MySQL 8.0JPA/Hibernate Huawei Cloud

项目亮点

从产品设计到全栈实现的完整闭环

📋 完整 PRD 文档 产品需求文档驱动开发 🔧 三端全栈实现 Web + Android + 后端 ☁️ 云端部署上线 华为云服务器运行 🚀 持续演进 预留扩展空间