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

安装步骤

克隆仓库

bash 复制代码

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

安装后端依赖

bash 复制代码

cd backend
npm install

安装前端依赖

bash 复制代码

cd ../frontend
npm install

运行应用

启动后端服务器

bash 复制代码

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

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

启动前端开发服务器

在新的终端窗口中：

bash 复制代码

cd frontend
npm start

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

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

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

bash 复制代码

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. 提交并推送更改

bash 复制代码

# 添加修改的文件
git add .

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

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

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

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

4. 存储凭据（可选）

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

bash 复制代码

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

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

贡献

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

许可证

MIT