【源码】基于React和Node.js的商城系统

项目简介

本项目是一个完整的商城系统，前端运用 React 搭建用户界面，利用其组件化特性构建交互界面，同时使用 Redux 管理应用状态。后端以 Node.js 和 Express 框架构建，负责处理路由与数据库操作，采用 Express 实现高效路由管理，使用 JWT 进行用户认证。系统为用户提供了商品展示、购物车、用户登录注册、资料更新、结账等一系列商城功能。

项目的主要特性和功能

1. 商品展示：主页面展示商品列表，包含商品名称、图片、价格、评分及评价数量等信息，支持点击查看商品详情。
2. 购物车功能：用户可在商品详情页选择商品数量并添加到购物车，能在购物车中管理商品，包括删除操作。
3. 用户认证：提供注册、登录功能，使用 JWT 进行身份验证，登录后导航栏显示用户信息，可进入个人中心和退出登录。
4. 用户资料管理：支持用户更新个人资料，如姓名、邮箱、密码等。
5. 结账流程：完成商品选择后，用户可进入结账页面完成订单操作。
6. 数据库关联：数据库表之间有关联关系，查询订单时可获取用户姓名等相关信息。
7. 文件上传：支持商品图片上传功能，借助 multer 实现。
8. 支付功能：集成 PayPal 支付，用户可通过 PayPal 完成在线支付。
9. 日志记录：使用 Morgan 记录服务器日志，方便调试和监控。

安装使用步骤

前提条件

确保已安装 Node.js 和 npm。

具体步骤

1. 下载源码：将项目源码下载到本地。
2. 安装依赖
   • 进入前端项目目录，执行 npm install 安装前端依赖。
   • 进入后端项目目录，执行 npm install 安装后端依赖。
3. 配置环境变量
   • 在后端项目根目录创建 .env 文件。
   • 在 .env 文件中配置数据库连接信息（如 DB_URI）、JWT 密钥（如 JWT_SECRET）、端口号（如 PORT=8000）等。
4. 运行项目
   • 在前端项目目录，执行 npm start 启动 React 应用，默认访问端口为 3000。
   • 在后端项目目录，执行 npm start 启动 Node.js 服务器，默认端口为 8000。也可使用 npm run dev 同时启动前后端项目。
5. 初始化数据库
   • 执行 npm run data:import 向数据库插入样本数据。
   • 若需清空数据库，执行 npm run data:destory。
6. 测试
   • 使用 Postman 等工具测试后端 API。
   • 添加全局变量 URL，值为 http://localhost:8000，方便测试。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】