电商网站项目

这是一个使用 React + Node.js + PostgreSQL 构建的完整电商网站项目，包含商品展示、购物车、订单管理和用户认证等功能。

项目结构

node-project/
├── backend/              # Node.js 后端服务
│   ├── config/           # 配置文件
│   ├── database/         # 数据库相关
│   ├── middleware/       # 中间件
│   ├── models/           # 数据模型
│   ├── routes/           # API 路由
│   ├── server.js         # 主服务器文件
│   └── package.json      # 依赖配置
├── frontend/             # React 前端应用
│   ├── src/
│   │   ├── components/   # 组件
│   │   ├── context/      # React Context
│   │   ├── pages/        # 页面组件
│   │   ├── utils/        # 工具函数
│   │   ├── App.jsx       # 主应用组件
│   │   └── main.jsx      # 入口文件
│   ├── package.json      # 依赖配置
│   └── vite.config.js    # Vite 配置
└── README.md             # 项目说明

功能特性

后端功能

• 用户认证: 注册、登录、JWT验证、用户信息管理
• 商品管理: 商品列表、商品详情、商品搜索、分类筛选
• 购物车功能: 添加/删除商品、更新数量、清空购物车
• 订单管理: 创建订单、订单列表、订单详情、订单状态更新

前端功能

• 响应式界面: 使用 React + TypeScript 构建的现代化界面
• 路由管理: 使用 React Router 进行页面导航
• 状态管理: 使用 Context API 管理用户认证状态
• 类型安全: 完整的 TypeScript 类型定义
• API 集成: 与后端 API 完整集成

技术栈

• 前端: React, TypeScript, React Router, Vite
• 后端: Node.js, Express.js
• 数据库: PostgreSQL
• 认证: JWT
• 其他: bcryptjs (密码加密), cors, dotenv

API 端点

认证相关

• POST /api/auth/register - 用户注册
• POST /api/auth/login - 用户登录
• GET /api/auth/me - 获取当前用户信息
• PUT /api/auth/me - 更新用户信息
• PUT /api/auth/change-password - 更改密码

商品相关

• GET /api/products - 获取商品列表
• GET /api/products/:id - 获取商品详情
• POST /api/products - 创建商品 (需认证)
• PUT /api/products/:id - 更新商品 (需认证)
• DELETE /api/products/:id - 删除商品 (需认证)

购物车相关

• GET /api/cart - 获取用户购物车
• POST /api/cart - 添加商品到购物车
• PUT /api/cart/:id - 更新购物车商品数量
• DELETE /api/cart/:id - 从购物车删除商品
• DELETE /api/cart - 清空购物车

订单相关

• POST /api/orders - 创建订单
• GET /api/orders - 获取用户订单列表
• GET /api/orders/:id - 获取订单详情
• PUT /api/orders/:id/status - 更新订单状态 (需认证)
• PUT /api/orders/:id/cancel - 取消订单

安装和运行

后端设置

1. 进入后端目录: cd backend
2. 安装依赖: npm install
3. 配置环境变量: 复制 .env 文件并设置相应值
4. 启动服务器: npm run dev

前端设置

1. 进入前端目录: cd frontend
2. 安装依赖: npm install
3. 启动开发服务器: npm run dev
4. 访问 http://localhost:3000

数据库配置

项目使用 PostgreSQL 数据库，需要在 .env 文件中配置数据库连接字符串:

DATABASE_URL=postgresql://username:password@localhost:5432/ecommerce

数据库包含以下表:

• users - 用户信息
• products - 商品信息
• cart - 购物车
• orders - 订单信息
• order_items - 订单项

项目特点

1. 完整的用户认证系统: 包括注册、登录、JWT验证
2. 完整的购物流程: 从商品浏览到下单完成
3. 响应式设计: 适配不同屏幕尺寸
4. 安全的密码处理: 使用 bcryptjs 进行密码加密
5. 错误处理: 完善的错误处理和用户反馈
6. RESTful API: 遵循 REST 设计原则
7. 模块化架构: 清晰的代码结构和职责分离
8. 类型安全: 完整的 TypeScript 类型定义，提高代码质量

类型检查

项目包含完整的 TypeScript 类型定义，可以运行以下命令进行类型检查：

cd frontend && npx tsc --noEmit

总结

这个项目可以作为电商网站的基础模板，可以根据具体需求进行扩展和定制。