# nodejs-todo-list-demo

**Repository Path**: thamiti/nodejs-todo-list-demo

## Basic Information

- **Project Name**: nodejs-todo-list-demo
- **Description**: 使用 nodejs 的 todolist demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-10
- **Last Updated**: 2025-10-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TODO List 应用

一个使用 React + Ant Design + NestJS 构建的待办事项应用。

## 项目结构

```
todo-list/
├── web/        # 前端项目 (React + TypeScript + Ant Design)
├── server/     # 后端项目 (NestJS)
└── README.md
```

## 功能特性

- ✅ 用户注册与登录
- ✅ 任务管理（创建、编辑、删除、完成）
- ✅ 团队协作（创建团队、添加成员）
- ✅ 任务分配与负责人
- ✅ 任务到期提醒功能
- ✅ 多维度筛选（未完成、负责人筛选、创建人筛选、团队筛选）
- ✅ 美观的现代化 UI 界面
- ✅ 完整的 RESTful API
- ✅ Swagger API 文档

## 应用截图

### 用户认证

<table>
  <tr>
    <td width="50%">
      <img src="screenshot/ScreenShot_2025-10-10_135952_179.png" alt="登录页面" />
      <p align="center"><b>登录页面</b></p>
    </td>
    <td width="50%">
      <img src="screenshot/ScreenShot_2025-10-10_140004_020.png" alt="注册页面" />
      <p align="center"><b>注册页面</b></p>
    </td>
  </tr>
</table>

### 任务管理

<p align="center">
  <img src="screenshot/ScreenShot_2025-10-10_135928_960.png" alt="任务列表" width="100%" />
  <br/>
  <b>任务管理界面 - 支持多维度筛选、任务分配、到期时间设置</b>
</p>

### 任务到期提醒

<p align="center">
  <img src="screenshot/ScreenShot_2025-10-10_135844_982.png" alt="任务提醒" width="100%" />
  <br/>
  <b>后台自动检测并提醒即将到期的任务</b>
</p>

### API 文档

<table>
  <tr>
    <td width="50%">
      <img src="screenshot/ScreenShot_2025-10-10_141831_452.png" alt="API文档 - 认证和任务接口" />
      <p align="center"><b>API 文档 - 认证和任务接口</b></p>
    </td>
    <td width="50%">
      <img src="screenshot/ScreenShot_2025-10-10_141845_170.png" alt="API文档 - 用户和团队接口" />
      <p align="center"><b>API 文档 - 用户和团队接口</b></p>
    </td>
  </tr>
  <tr>
    <td width="50%">
      <img src="screenshot/ScreenShot_2025-10-10_141854_461.png" alt="API Schemas" />
      <p align="center"><b>API Schemas 定义</b></p>
    </td>
    <td width="50%">
      <img src="screenshot/ScreenShot_2025-10-10_141909_948.png" alt="创建任务 DTO" />
      <p align="center"><b>创建任务 DTO 详细定义</b></p>
    </td>
  </tr>
</table>

## 快速开始

### 第一步：启动 MySQL 数据库

```bash
# 启动 Docker 容器（MySQL + phpMyAdmin）
docker-compose up -d
```

### 第二步：启动后端服务

打开一个终端：

```bash
cd server
npm run start:dev
```

### 第三步：启动前端服务

打开另一个终端：

```bash
cd web
npm start
```

前端将自动在浏览器打开 http://localhost:3000

## API 接口

### 获取所有待办事项

```
GET http://localhost:3001/todos
```

### 获取单个待办事项

```
GET http://localhost:3001/todos/:id
```

### 创建待办事项

```
POST http://localhost:3001/todos
Content-Type: application/json

{
  "title": "待办事项标题"
}
```

### 更新待办事项

```
PATCH http://localhost:3001/todos/:id
Content-Type: application/json

{
  "title": "更新的标题",
  "completed": true
}
```

### 删除待办事项

```
DELETE http://localhost:3001/todos/:id
```

## 技术栈

### 前端

- React 18
- TypeScript
- Ant Design 5
- Create React App

### 后端

- NestJS
- TypeScript
- TypeORM
- MySQL 8.0
- RESTful API

### 基础设施

- Docker & Docker Compose
- phpMyAdmin (数据库管理工具)

## 开发说明

### 服务端口

- 前端端口：3000 - http://localhost:3000
- 后端端口：3001 - http://localhost:3001
- MySQL 端口：3306
- phpMyAdmin：8080 - http://localhost:8080

### 数据库配置

数据库连接信息（`server/.env`）：

```env
DB_HOST=localhost
DB_PORT=3306
DB_USERNAME=todo_user
DB_PASSWORD=todo123456
DB_DATABASE=todo_db
```

### Docker 管理

```bash
# 启动数据库
docker-compose up -d

# 停止数据库
docker-compose down

# 查看日志
docker-compose logs -f

# 查看运行状态
docker-compose ps
```

## 数据持久化

- 数据存储在 MySQL 数据库中
- 重启服务后数据不会丢失
- Docker 卷挂载确保容器重启后数据保留