基于TypeScript的全栈待办事项应用Demo

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一起安装)

安装步骤

1. 克隆仓库

git clone https://gitcode.com/rmbnetlife/todo-app.git
cd todo-app

2. 安装后端依赖

cd backend
npm install

3. 安装前端依赖

cd ../frontend
npm install

运行应用

1. 启动后端服务器

cd backend
# 编译TypeScript代码
npx tsc
# 运行编译后的代码
node dist/app.js

后端服务器将在 http://localhost:5000 上运行。

2. 启动前端开发服务器

在新的终端窗口中：

cd frontend
npm start

前端开发服务器将在 http://localhost:3000 上运行。在浏览器中访问此地址即可使用应用。

可能遇到的问题及解决方案

1. 子模块问题：如果frontend目录显示为空或被识别为子模块，请运行：

git submodule update --init --recursive

2. 端口占用：如果端口5000或3000已被占用，您可能需要修改相应的配置：

   • 后端端口：在backend/src/app.ts中修改
   • 前端端口：可以通过环境变量设置，例如PORT=3001 npm start

3. 跨域问题：如果遇到CORS错误，确保后端的CORS配置正确，允许前端域名访问。

未来改进

• 添加用户认证功能
• 使用数据库替代内存存储
• 添加待办事项分类功能
• 添加截止日期和提醒功能
• 优化移动端体验
• 添加单元测试和集成测试

代码修改与推送

如果您对代码进行了修改并希望推送到GitCode仓库，请按照以下步骤操作：

1. 确保您有推送权限

在推送代码前，确保您已经：

• 被添加为项目协作者，或者
• Fork了项目到自己的账户（如果您想提交Pull Request）

2. 配置个人访问令牌（PAT）

GitCode不支持密码认证，需要使用个人访问令牌：

1. 登录GitCode账户
2. 进入用户设置 -> 访问令牌
3. 创建新的访问令牌，选择适当的权限范围
4. 复制生成的令牌（只显示一次）

3. 提交并推送更改

# 添加修改的文件
git add .

# 提交更改
git commit -m "描述您所做的更改"

# 推送到远程仓库
git push origin main

当首次推送时，Git会要求您输入用户名和密码。此时应输入：

• 用户名：您的GitCode用户名
• 密码：之前生成的个人访问令牌（PAT）

4. 存储凭据（可选）

为避免每次都输入凭据，可以配置凭据存储：

# 配置凭据缓存
git config --global credential.helper store

注意：这会以明文形式存储您的凭据，请确保您的计算机安全。

贡献

欢迎提交问题和拉取请求。对于重大更改，请先开issue讨论您想要更改的内容。

许可证

MIT