作者：Zeeshan Haider Shaheen
原文连接：How I built an e-commerce website in React JS and Node.js in 1 week(Part - 1/3)
在本教程中，我们将学习如何使用React和Node.js.构建电子商务网络应用程序
这个项目来自我跟随的布拉德·特拉弗斯Udemy课程。我以书面形式分享，以反映我的学习。github代码、Udemy课程和演示链接在本系列的末尾提到。
该应用程序将演示一个基本的购物车管理系统，以及处理用户身份验证的简单方法。我们将使用React-Redux进行状态管理，我们将使用MongoDB存储我们的数据。
先决条件
本教程假定您对React、Node.js、express.js和MongoDB有基本了解。
对于这个项目，您应该已经在系统中安装了Node和npm的最新版本。
您可以通过从命令行发出以下命令来检查两者是否安装正确：
node -v
> 15.4.0
npm -v
> 7.0.15
在开始开发之前，让我们在本部分讨论Web应用的规范。
特点：
- 全功能购物车
- 产品评论和评级
- 顶级产品旋转木马
- 产品分页
- 产品搜索功能
- 带有订单的用户配置文件
- 管理产品管理
- 管理员用户管理
- 管理订单详情页
- 将订单标记为交付选项
- 结帐流程（送货、付款方式等）
- PayPal/信用卡集成
- 数据库播种机（产品和用户）
我们将要使用的技术堆栈是：
- MongoDB
- Express.js
- 的翻译是： React js
- Node.js
- 反应引导v4
- 归来
网站地图
概述
现在，我们将概述我们的Web应用程序以及屏幕截图，之后，在本系列的第2部分中，我们将开始使用Node.js.实现后端
在主页上，我们列出了我们的产品。
在导航栏上，我们有我们的标志和搜索栏，在导航栏的右侧，我们有一个购物车和登录按钮。
我们也有分页。这意味着，如果页面上的项目数大于3，那么剩余的产品将移动到下一页。
导航栏上的登录按钮将带我们进入登录屏幕。
您可以通过点击登录按钮下的“注册”链接来创建帐户。
对于这个应用程序，您可以作为用户和管理员登录。
让我们先以用户身份登录。登录后，我们可以看到列出的所有产品，我们可以在导航栏的右侧看到我们的名字。
当我们点击产品时，我们可以看到产品的所有细节。
我们也可以在产品上添加评论，
当我们点击添加到购物车按钮时，它会把我们带到购物车。
这里我们可以从购物车中删除产品并添加产品的数量。
点击继续结账后，它会把我们带到结账页面，在那里我们可以把我们所有的送货细节，
在输入详细信息并选择付款方式后，它将带我们到付款选项。
您可以使用PayPal支付。
让我们注销并以管理员身份登录。要以管理员身份登录，请使用以下详细信息：
Email: admin@gmail.com
Password: 123456
登录后，我们可以看到列出的产品，在导航栏的右上角，我们可以看到管理员用户和管理员。
管理员用户与用户帐户相同。
让我们探索管理员。
点击导航栏右侧的“管理员”，我们可以看到三个选项，用户、产品和订单。
当我们点击用户时，
我们可以看到所有使用这个应用程序的用户列表，
现在管理员可以编辑和删除用户。
点击产品后，我们可以看到产品列表，
在这里，管理员可以编辑和删除产品，并可以在单击“创建产品”按钮时创建产品。
点击订单按钮后，我们可以看到所有用户的所有订单，
在这里，管理员可以标记为交付产品，如果产品已支付并在给定的地址交付。
我希望这篇文章是有趣的，在下一部分，我们将深入开发，并将开始使用Node.js实现后端
谢谢。
