# Todolist_node

**Repository Path**: litinyana/todolist_node

## Basic Information

- **Project Name**: Todolist_node
- **Description**: 任务管理的node.js和html版本，因为我突然觉得js很有意思诶，所以想要写个node后端的~
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-20
- **Last Updated**: 2025-12-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 任务管理应用（To-Do List）

一个基于 Node.js + Express + Lowdb 的前后端分离任务管理应用，支持任务的添加、查看、编辑、删除和状态切换，数据通过 JSON 文件持久化存储。


## 项目简介
本项目是一个轻量级的任务管理工具，采用前后端分离架构：
- **前端**：纯 HTML + CSS + JavaScript 实现，无需依赖任何前端框架，聚焦任务的可视化展示与用户交互。
- **后端**：基于 Node.js + Express 搭建 API 服务，使用 Lowdb 实现数据持久化（以 JSON 文件为“数据库”），支持完整的 CRUD 操作。
- **核心功能**：任务添加、任务列表展示、任务状态切换（已完成/未完成）、任务编辑、任务删除。


## 技术栈
| 模块       | 技术/工具                | 说明                          |
|------------|--------------------------|-------------------------------|
| 后端       | Node.js                  | JavaScript 运行环境            |
| 后端框架   | Express                  | 轻量级 Web 框架，用于搭建 API |
| 数据持久化 | Lowdb                    | 基于 JSON 文件的轻量级数据库  |
| 前端       | HTML + CSS + JavaScript  | 原生前端技术，实现交互界面    |
| 网络请求   | Fetch API                | 前端调用后端 API 的核心工具    |


## 项目结构
```
simple-nodejs-app/          # 项目根目录
├── backend/                # 后端服务目录
│   ├── node_modules/       # 后端依赖包（npm install 自动生成）
│   ├── db.json             # Lowdb 数据文件（自动生成，存储任务数据）
│   ├── package.json        # 后端项目配置与依赖清单
│   └── server.js           # 后端核心文件（API 服务、数据逻辑）
│
└── frontend/               # 前端界面目录
    └── index.html          # 前端核心文件（界面展示、用户交互逻辑）
```


## 快速启动
### 1. 环境准备
确保本地已安装 **Node.js**（推荐 v18+，项目已在 v22.12.0 验证通过），可通过以下命令检查：
```bash
node -v  # 输出 Node.js 版本号即表示安装成功
npm -v   # 输出 npm 版本号（Node.js 自带）
```


### 2. 后端启动
1. 进入后端目录：
   ```bash
   cd backend
   ```
2. 安装后端依赖：
   ```bash
   npm install  # 安装 express 和 lowdb
   ```
3. 启动后端服务：
   ```bash
   node server.js
   ```
4. 验证后端是否启动成功：
   - 控制台输出 `任务管理应用的后端服务器运行在 http://localhost:3000` 即表示启动成功。
   - 此时 `backend` 目录下会自动生成 `db.json` 文件（初始内容为 `{"tasks":[]}`）。


### 3. 前端启动
无需额外安装依赖，直接用浏览器打开前端文件即可：
1. 找到 `frontend/index.html` 文件。
2. 双击文件，或右键选择“用浏览器打开”（支持 Chrome、Edge、Firefox 等主流浏览器）。
3. 打开后即可看到任务管理界面，开始使用功能。


## 功能说明与使用指南
### 1. 添加任务
- 在页面顶部的输入框中输入任务内容（不能为空）。
- 点击“添加任务”按钮，任务会立即显示在下方的任务列表中，同时数据会保存到后端的 `db.json` 文件。


### 2. 查看任务列表
- 页面加载时会自动请求后端 API，获取所有任务并展示。
- 任务区分“未完成”（黑色文字）和“已完成”（灰色划线文字）两种状态，直观区分任务进度。


### 3. 切换任务状态
- 点击任务左侧的复选框，可切换任务状态：
  - 勾选：标记为“已完成”（文字划线、变灰）。
  - 取消勾选：恢复为“未完成”（文字正常显示）。
- 状态切换会实时同步到后端数据库，刷新页面后状态不丢失。


### 4. 编辑任务
- 点击任务右侧的“编辑”按钮，任务标题会变为输入框，显示当前任务内容。
- 在输入框中修改内容后，点击“保存”按钮，修改会同步到后端；点击“取消”则放弃修改。
- 编辑时任务内容不能为空，否则会提示“任务标题不能为空”。


### 5. 删除任务
- 点击任务右侧的“删除”按钮，会弹出确认提示框（防止误操作）。
- 点击“确定”后，任务会从列表中移除，同时后端数据库中对应的任务也会被删除；点击“取消”则保留任务。


## API 接口文档
后端提供 4 个核心 API 接口，支持前端完成所有任务操作，接口基础路径为 `http://localhost:3000/api`。

| 接口地址         | 请求方法 | 功能描述               | 请求体参数（Body）                | 响应说明                          |
|------------------|----------|------------------------|-----------------------------------|-----------------------------------|
| /tasks           | GET      | 获取所有任务           | 无                                | 成功：200 OK，返回任务数组 `[{id, title, completed}, ...]` |
| /tasks           | POST     | 添加新任务             | `{ title: "任务内容" }`（必填）   | 成功：201 Created，返回新创建的任务对象；失败：400 Bad Request（标题为空） |
| /tasks/:id       | PUT      | 更新任务（状态/标题）  | `{ completed: true/false }` 或 `{ title: "新标题" }` | 成功：200 OK，返回更新后的任务对象；失败：404 Not Found（任务不存在） |
| /tasks/:id       | DELETE   | 删除指定任务           | 无                                | 成功：204 No Content（无返回内容）；失败：404 Not Found（任务不存在） |


## 常见问题
### 1. 后端启动报错“lowdb: missing default data”
- **原因**：Lowdb 版本兼容性问题（v7+ 要求初始化时必须传入默认数据）。
- **解决方案**：确保 `server.js` 中 Lowdb 初始化代码如下（参考项目中的正确写法）：
  ```javascript
  const db = new Low(adapter, { tasks: [] }); // 第二个参数为默认数据
  ```


### 2. 前端点击“添加任务”无反应/提示“请求失败”
- 检查后端服务是否已启动（控制台需显示 `运行在 http://localhost:3000`）。
- 检查前端 `index.html` 中 `API_BASE_URL` 是否为 `http://localhost:3000/api`（需与后端端口一致）。
- 清除浏览器缓存后重新打开前端页面。


### 3. 重启后端后任务数据丢失
- 检查 `backend/db.json` 文件是否存在：若存在，数据会自动加载；若不存在，需重新添加任务（首次启动会自动创建该文件）。
- 若 `db.json` 被手动删除，重启后端后会重新创建空文件，需重新添加任务。


## 扩展建议
本项目为基础版本，可基于以下方向进行扩展，提升功能与体验：
1. **后端扩展**：
   - 集成用户认证（如 JWT），实现“多用户任务隔离”（每个用户只能查看自己的任务）。
   - 替换 Lowdb 为 MySQL/MongoDB，支持更大规模的数据存储与复杂查询。
   - 添加 API 权限控制、请求频率限制，提升服务安全性。
2. **前端扩展**：
   - 使用 React/Vue/Angular 重构前端，引入组件化开发模式。
   - 添加任务分类（如“工作”“生活”“学习”）、任务优先级（高/中/低）功能。
   - 实现任务搜索、筛选（如筛选“已完成”/“未完成”任务）功能。
3. **部署扩展**：
   - 将后端部署到云服务器（如阿里云、腾讯云），前端部署到静态资源服务（如 Nginx、Netlify）。
   - 配置 HTTPS，提升访问安全性。