Demo地址：git clone https://gitcode.com/rmbnetlife/todo-app.git
Todo List 应用
这是一个基于TypeScript的全栈待办事项应用，前端使用React，后端使用Node.js和Express。
项目概述
这个Todo List应用允许用户：
- 查看所有待办事项
- 添加新的待办事项
- 标记待办事项为已完成/未完成
- 删除待办事项
技术栈
前端
- React: 用于构建用户界面的JavaScript库
- TypeScript: 为JavaScript添加静态类型定义
- Axios: 用于进行HTTP请求的客户端库
- CSS: 自定义样式，包括响应式设计
后端
- Node.js: JavaScript运行时环境
- Express: Web应用框架
- TypeScript: 为JavaScript添加静态类型定义
- UUID: 用于生成唯一标识符
- CORS: 用于处理跨域资源共享
项目结构
todo-app/ # 项目根目录
├── backend/ # 后端代码
│ ├── src/ # TypeScript 源码目录
│ │ └── app.ts # 后端入口文件（定义 API 和逻辑）
│ ├── dist/ # 编译后的 JavaScript 代码目录
│ ├── package.json # 后端依赖和脚本配置
│ └── tsconfig.json # TypeScript 编译配置
│
└── frontend/ # 前端代码
├── public/ # 静态资源
│ └── index.html # 前端入口 HTML
├── src/ # 前端源码目录
│ ├── App.tsx # 主组件（核心交互逻辑）
│ ├── App.css # 应用样式
│ └── index.tsx # React 应用入口文件
├── package.json # 前端依赖和脚本配置
└── tsconfig.json # TypeScript 编译配置
功能详解
后端 API
后端提供以下RESTful API端点：
GET /api/todos: 获取所有待办事项POST /api/todos: 创建新的待办事项PUT /api/todos/:id: 更新待办事项状态DELETE /api/todos/:id: 删除待办事项
数据暂时存储在内存中，实际生产环境应替换为数据库存储。
前端组件
前端主要由以下部分组成：
- 待办事项输入表单
- 待办事项列表显示
- 待办事项状态切换（复选框）
- 待办事项删除按钮
- 加载状态和错误提示
安装与运行
前提条件
- Node.js (推荐 v14 或更高版本)
- npm (通常随Node.js一起安装)
安装步骤
- 克隆仓库
git clone https://gitcode.com/rmbnetlife/todo-app.git
cd todo-app
- 安装后端依赖
cd backend
npm install
- 安装前端依赖
cd ../frontend
npm install
运行应用
- 启动后端服务器
cd backend
# 编译TypeScript代码
npx tsc
# 运行编译后的代码
node dist/app.js
后端服务器将在 http://localhost:5000 上运行。
- 启动前端开发服务器
在新的终端窗口中：
cd frontend
npm start
前端开发服务器将在 http://localhost:3000 上运行。在浏览器中访问此地址即可使用应用。
可能遇到的问题及解决方案
- 子模块问题：如果frontend目录显示为空或被识别为子模块，请运行：
git submodule update --init --recursive
-
端口占用：如果端口5000或3000已被占用，您可能需要修改相应的配置：
- 后端端口：在
backend/src/app.ts中修改 - 前端端口：可以通过环境变量设置，例如
PORT=3001 npm start
- 后端端口：在
-
跨域问题：如果遇到CORS错误，确保后端的CORS配置正确，允许前端域名访问。
未来改进
- 添加用户认证功能
- 使用数据库替代内存存储
- 添加待办事项分类功能
- 添加截止日期和提醒功能
- 优化移动端体验
- 添加单元测试和集成测试
代码修改与推送
如果您对代码进行了修改并希望推送到GitCode仓库，请按照以下步骤操作：
1. 确保您有推送权限
在推送代码前，确保您已经：
- 被添加为项目协作者，或者
- Fork了项目到自己的账户（如果您想提交Pull Request）
2. 配置个人访问令牌（PAT）
GitCode不支持密码认证，需要使用个人访问令牌：
- 登录GitCode账户
- 进入用户设置 -> 访问令牌
- 创建新的访问令牌，选择适当的权限范围
- 复制生成的令牌（只显示一次）
3. 提交并推送更改
# 添加修改的文件
git add .
# 提交更改
git commit -m "描述您所做的更改"
# 推送到远程仓库
git push origin main
当首次推送时，Git会要求您输入用户名和密码。此时应输入：
- 用户名：您的GitCode用户名
- 密码：之前生成的个人访问令牌（PAT）
4. 存储凭据（可选）
为避免每次都输入凭据，可以配置凭据存储：
# 配置凭据缓存
git config --global credential.helper store
注意：这会以明文形式存储您的凭据，请确保您的计算机安全。
贡献
欢迎提交问题和拉取请求。对于重大更改，请先开issue讨论您想要更改的内容。
许可证
MIT
