%20(2).svg)
项目简介
本项目是一个纯前端的待办事项管理系统，运用 React 和 TypeScript 构建。为用户提供了一个便捷的界面，方便进行个人待办事项的管理，支持待办事项的列出、添加、更新和删除操作。
项目的主要特性和功能
- 技术框架：采用 React 和 TypeScript 结合开发，提高代码可维护性和类型安全性。
- 状态管理：利用 React Hooks 进行组件内部状态管理，简化状态管理逻辑。
- 功能完整：实现待办事项的列表展示、添加、更新和删除功能。
- 测试覆盖：包含组件测试和单元测试，确保代码质量。
- 代码规范：代码基本符合 Clean Code 要求，体现“快速实现”和“重构”的交替过程。
安装使用步骤
1. 下载依赖
进入项目目录后，运行以下命令安装项目所需依赖：
bash
npm install
2. 运行网站
执行以下命令启动前端服务，并在浏览器中访问 http://localhost:1234：
bash
npm dev
3. 启动 Json Server
运行以下命令启动 Json Server，以模拟数据的增删改查操作：
bash
npm run server
启动后可使用以下 API：
- 获取 tasks 数据：
URL: 'http://localhost:8080/tasks'
Method: GET
Response status: 200
Response body 示例: [{id: 1, name: 'xx', completed: false}, {id: 2, name: 'xx', completed: false}]
- 创建 task：
URL: 'http://localhost:8080/tasks'
Method: POST
Request body 示例: {name: 'xx', completed: false}
Response status: 201
Response body 示例: {id: 1, name: 'xx', completed: false}
- 删除指定 id 的 task：
URL: 'http://localhost:8080/tasks/${id}'
Method: DELETE
Response status: 204
Response body 示例: {}
- 修改指定 id 的 task：
URL: 'http://localhost:8080/tasks/${id}'
Method: PUT
Request body 示例: {name: 'xx', completed: false}
Response status: 200
Response body 示例: {id: 1, name: 'xx', completed: false}
4. 代码检查与格式化
- 检查代码：
bash npm run lint - 格式化代码：
bash npm run format
5. 使用 ES dataSources 与 GraphQL Server
- 启动 docker：
bash cd docker && docker-compose up -d - 启动 Apollo Server：
bash cd server && ts-node-esm server.ts
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】