# vue-todo-demo

**Repository Path**: buptnetwork/vue-todo-demo

## Basic Information

- **Project Name**: vue-todo-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-16
- **Last Updated**: 2025-12-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue Todo Demo

这是一个使用多种前端框架实现的 Todo 应用示例项目，展示了如何在 Spring Boot 后端上使用不同的前端技术实现异步 CRUD 操作。

## 技术栈

### 后端
- Java 17
- Spring Boot 3.0.2
- MyBatis Plus
- H2 Database (运行时)
- Thymeleaf (模板引擎)

### 前端
- AlpineJS
- Petite-Vue
- Vue 2.7
- Bootstrap 4
- Axios (HTTP 客户端)

## 功能特性

- 创建、读取、更新、删除 (CRUD) Todo 项
- 响应式用户界面
- 异步数据操作
- 多种前端框架实现对比
- 模态框编辑界面

## 项目结构

```
src/
├── main/
│   ├── java/
│   │   └── cn/edu/bupt/vue/todo/demo/
│   │       ├── controller/     # 控制器层
│   │       ├── entity/         # 实体类
│   │       └── mapper/         # 数据访问层
│   ├── resources/
│   │   ├── static/             # 静态资源文件
│   │   ├── templates/          # Thymeleaf 模板
│   │   ├── application.properties  # 应用配置
│   │   ├── data.sql            # 初始数据
│   │   └── schema.sql          # 数据库结构
└── test/                       # 测试代码
```

## 快速开始

### 环境要求

- JDK 17 或更高版本
- Maven 3.6+ (可选，可使用项目自带的 mvnw)

### 运行项目

1. 克隆项目到本地：
   ```
   git clone <repository-url>
   ```

2. 进入项目目录：
   ```
   cd vue-todo-demo
   ```

3. 使用 Maven 运行应用：
   ```
   ./mvnw spring-boot:run
   ```
   
   Windows 用户可以使用：
   ```
   mvnw.cmd spring-boot:run
   ```

4. 访问应用：
   - 打开浏览器访问 http://localhost:8080
   
### 构建和部署

1. 构建项目：
   ```
   ./mvnw clean package
   ```

2. 运行构建的 JAR 文件：
   ```
   java -jar target/vue-todo-demo-0.0.1-SNAPSHOT.jar
   ```

## 使用说明

应用启动后，可以通过以下 URL 访问不同的实现版本：

- `/` - AlpineJS 版本
- `/vue` - Vue 版本
- `/petite-vue` - Petite-Vue 版本

每个版本都实现了相同的 Todo 功能：
1. 显示所有 Todo 项
2. 添加新的 Todo 项
3. 编辑现有 Todo 项
4. 删除 Todo 项

## 数据库

项目使用 H2 内存数据库，应用启动时会自动初始化数据库结构和初始数据。

- 数据库控制台: http://localhost:8080/h2-console
- JDBC URL: jdbc:h2:file:~/test
- 用户名: san
- 密码: (空)

## API 接口

| 方法 | 路径 | 描述 |
|------|------|------|
| GET | /todo/ | 获取所有 Todo 项 |
| POST | /todo/ | 创建新的 Todo 项 |
| PUT | /todo/{id} | 更新指定 ID 的 Todo 项 |
| DELETE | /todo/{id} | 删除指定 ID 的 Todo 项 |

## 开发

### 代码结构说明

- 前端代码分别位于 `src/main/resources/templates/` 目录下的对应 HTML 文件中
- 后端控制器位于 `src/main/java/cn/edu/bupt/vue/todo/demo/controller/TodoController.java`
- 数据实体位于 `src/main/java/cn/edu/bupt/vue/todo/demo/entity/Todo.java`
- 数据访问接口位于 `src/main/java/cn/edu/bupt/vue/todo/demo/mapper/TodoMapper.java`

### 主要特性实现

1. **AlpineJS 版本** (`alpine-todo.html`) - 使用 AlpineJS 实现响应式交互
2. **Vue 版本** (`vue-todo.html`) - 使用传统 Vue 2 实现
3. **Petite-Vue 版本** (`petite-vue-todo.html`) - 使用轻量级的 Petite-Vue 实现

## 许可证

本项目仅供学习和参考使用。

## 贡献

欢迎提出 Issue 和 Pull Request 来改进这个示例项目。