Amazona 第一部分：构建类似亚马逊的电商网站

欢迎学习我的 React 和 Node 教程，学习如何在 5 小时内构建一个功能齐全的电商网站。打开你的代码编辑器，在接下来的几个小时里跟着我一起用 React 和 Node.JS 构建一个电商网站吧。

源代码和演示

👉 演示：https://amazonaapp.herokuapp.com
👉 代码：https://github.com/basir/amazona

观看 React 和 Node 教程

您将学到

• HTML5 和 CSS3：语义元素、CSS 网格、Flexbox
• React：组件、Props、事件、Hooks、路由器、Axios
• Redux：Store、Reducers、Actions
• Node 和 Express：Web API、Body Parser、文件上传、JWT
• MongoDB：Mongoose、聚合
• 开发：ESLint、Babel、Git、Github、
• 部署：Heroku
• 观看 React 和 Node 教程

目录：

• 第 01 部分 - 简介
• 第 02 部分-创建主页模板（HTML、CSS）
• 第 03 部分-添加侧边栏菜单和产品页面（JavaScript）
• 第 04 部分-创建 React 应用 (React)
• 第 05 部分-创建购物车 (React)
• 第 06 部分-构建后端（节点）
• 第 07 部分-连接到数据库（MongoDB）
• 第 08 部分 - 管理产品
• 第 09 部分-注册和登录
• 第 10 部分 - 结帐表格
• 第 11 部分 - 创建订单
• 第 12 部分 - 管理订单
• 第 13 部分 - 用户资料
• 第 14 部分 - 搜索和排序产品
• 第 15 部分 - 评论和评价产品
• 第 16 部分 - 在 Heroku 上发布

让我们先浏览一下上面的内容，我将在接下来的文章中与大家分享。请留下您的评论，让我知道它们是否符合您的需求。

免费直播课程（第二部分）：设计网页模板

请于美国东部时间 2 月 26 日星期三晚上 9:30 在我的 YouTube 频道上在线参加我的在线课程，了解 Amazona 的设计方式。

订阅 Basir YouTube 频道

第 01 部分 - 简介

它为您概述了构建像亚马逊这样的电子商务网站的教程。

第 02 部分-创建主页模板（HTML、CSS）

在本部分中，您将为电商网站创建一个网页模板。我们首先安装开发工具。VS Code 是代码编辑器，Google Chrome 是本教程中使用的网页浏览器。

第 03 部分-添加侧边栏菜单和产品页面（JavaScript）

我们将创建一个汉堡菜单，用于显示和隐藏侧边栏。此外，我们还将设计产品的详情页面。

第 04 部分-创建 React 应用 (React)

这部分是关于前端的。我们使用 React 库来构建 UI 元素。

第 05 部分-创建购物车 (React)

当您将产品添加到购物车时，我们需要将用户重定向到购物车页面以更新或删除购物车中的商品。

第 06 部分-构建后端（节点）

本部分介绍 Node 和 Express。它们是使用 JavaScript 语言创建 Web 服务器的流行框架。

第 07 部分-连接到数据库（MongoDB）

在本部分中，我们将创建一个 MongoDB 数据库并保存和检索管理员用户。

第 08 部分 - 管理产品

管理员应该能够定义产品并随时更新库存数量。本页面介绍如何管理电商产品。

第 09 部分-注册和登录

在将用户重定向到结账页面之前，我们需要注册用户。在本部分中，我们将创建表单来获取用户信息并将其保存到数据库中。

第 10 部分 - 结帐表格

在这一部分，我们实现了结帐向导，包括登录、运输信息、付款方式和下订单。

第 11 部分 - 创建订单

用户下订单后我们需要将其保存在数据库中并处理订单。

第 12 部分 - 管理订单

管理员需要查看最近的订单并进行处理。此部分显示产品列表。

第 13 部分 - 用户资料

在这一部分，我们创建一个用户资料页面来更新用户信息，包括姓名、电子邮件和密码。

第 14 部分 - 搜索和排序产品

用户应该能够筛选产品并根据价格和时间对其进行排序。

第 15 部分 - 评论和评价产品

在这一部分，我们为产品创建一个评论表并向用户显示平均评分。

第 16 部分 - 在 Heroku 上发布

最后，我们需要将网站发布到互联网上。在本部分中，我们将在 Heroku 上发布，但其他云服务器的步骤相同。

概括

在本教程中，您将创建一个类似亚马逊的电商网站。我们将逐步讲解所有步骤，并介绍构建此网站所需的所有工具和技巧。欢迎在此分享您的想法。