📘 《ToDo 待办事项清单系统》技术文档（Vue3 + Spring Boot + MariaDB）

1. 项目技术选型（Tech Stack）

✔ 前端

• Vue 3
• Vite
• Axios
• Pinia（可选）
• Element Plus / Naive UI（可选 UI 框架）

✔ 后端

• Spring Boot 3.x
• Spring Web（提供 REST API）
• Spring Data JPA（数据库操作）
• Spring Validation（参数校验）
• Lombok（简化代码）
• MariaDB JDBC Driver（驱动）
• Spring Boot Starter Test（测试）

✔ 数据库

• MariaDB 10+

需要安装的库（关键）

2. 后端 Maven 依赖（完整可用）

<dependencies>
    <!-- Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- JPA -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>

    <!-- MariaDB Driver -->
    <dependency>
        <groupId>org.mariadb.jdbc</groupId>
        <artifactId>mariadb-java-client</artifactId>
        <version>3.4.1</version>
    </dependency>

    <!-- Lombok -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>

    <!-- Validation -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-validation</artifactId>
    </dependency>

    <!-- Test -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
    </dependency>
</dependencies>

3. application.yml（MariaDB 配置）

spring:
  datasource:
    url: jdbc:mariadb://localhost:3306/todo_db?useUnicode=true&characterEncoding=utf8mb4
    username: root
    password: yourpassword
    driver-class-name: org.mariadb.jdbc.Driver

  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true
    properties:
      hibernate:
        format_sql: true

server:
  port: 8080

4. 数据库 SQL（初始化）

数据库：

CREATE DATABASE todo_db DEFAULT CHARACTER SET utf8mb4;

表由 JPA 自动生成，也可以手动建：

CREATE TABLE todos (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(255),
    description TEXT,
    status TINYINT,
    due_time DATETIME,
    create_time DATETIME,
    update_time DATETIME
);

5. 后端结构（标准 Spring Boot）

src/main/java/com/example/todo/
│
├── controller/      # REST API 控制器
│   └── TodoController.java
│
├── service/         # 业务层
│   └── TodoService.java
│   └── impl/TodoServiceImpl.java
│
├── repository/
│   └── TodoRepository.java
│
├── entity/
│   └── Todo.java
│
└── dto/
    └── TodoRequest.java

6. 实体类（Todo.java）

@Entity
@Table(name = "todos")
@Data
public class Todo {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String title;
    private String description;
    private Integer status;     // 0 未完成，1 完成

    private LocalDateTime dueTime;
    private LocalDateTime createTime;
    private LocalDateTime updateTime;
}

7. Repo（TodoRepository.java）

public interface TodoRepository extends JpaRepository<Todo, Long> {
    List<Todo> findByTitleContaining(String keyword);
}

8. Service（TodoService.java）

public interface TodoService {
    List<Todo> getAll();
    Todo create(Todo todo);
    Todo update(Long id, Todo newTodo);
    void delete(Long id);
    Todo updateStatus(Long id, Integer status);
}

9. Controller（TodoController.java）

@RestController
@RequestMapping("/api/todos")
@CrossOrigin
public class TodoController {

    @Autowired
    private TodoService todoService;

    @GetMapping
    public List<Todo> list() {
        return todoService.getAll();
    }

    @PostMapping
    public Todo create(@RequestBody Todo todo) {
        return todoService.create(todo);
    }

    @PutMapping("/{id}")
    public Todo update(@PathVariable Long id, @RequestBody Todo todo) {
        return todoService.update(id, todo);
    }

    @PatchMapping("/{id}/status")
    public Todo updateStatus(@PathVariable Long id, @RequestBody Map<String, Integer> body) {
        return todoService.updateStatus(id, body.get("status"));
    }

    @DeleteMapping("/{id}")
    public void delete(@PathVariable Long id) {
        todoService.delete(id);
    }
}

10. 前端需要写的东西（Vue3）

推荐目录

src/
├── api/todo.js
├── components/TodoItem.vue
├── components/TodoList.vue
├── pages/Home.vue
└── main.js

Axios 配置（api/todo.js）

import axios from "axios";

const API = "http://localhost:8080/api/todos";

export function getTodos() {
  return axios.get(API);
}

export function createTodo(data) {
  return axios.post(API, data);
}

export function updateTodo(id, data) {
  return axios.put(`${API}/${id}`, data);
}

export function deleteTodo(id) {
  return axios.delete(`${API}/${id}`);
}

export function updateStatus(id, status) {
  return axios.patch(`${API}/${id}/status`, { status });
}

11. 主流程（前端）

1. 打开页面 → 调用 getTodos()
2. 渲染任务列表
3. 用户创建 → 调用 createTodo()
4. 用户修改 → 调用 updateTodo()
5. 删除任务 → 调用 deleteTodo()
6. 切换状态 → 调用 updateStatus()