首页>编程相关>其他源码
下载

亚马逊电子商务网站

亚马逊

React 和 Node 教程 - 9 小时内完成电子商务 [2021]

欢迎来到我的 React 和 Node 教程，构建一个功能齐全的电子商务网站，就像亚马逊一样。打开代码编辑器，在接下来的几个小时内跟随我使用 MERN 堆栈（MongoDB、ExpressJS、React 和 Node.JS）构建电子商务网站。

演示网站

  • Heroku：https://react-amazona.herokuapp.com

  • Heroku 镜像：https://react-amazona-mirror.herokuapp.com

你会学到的

  • HTML5 和 CSS3：语义元素、CSS 网格、Flexbox

  • React：组件、道具、事件、钩子、路由器、Axios

  • Redux：存储、减速器、操作

  • Node & Express：Web API、正文解析器、文件上传、JWT

  • MongoDB：猫鼬、聚合

  • 开发：ESLint、Babel、Git、Github、

  • 部署：Heroku

  • 观看 React 和 Node 教程

本地运行

1. 克隆仓库

$ git clone [email protected]:basir/amazona.git
$ cd amazona

2. 设置MongoDB

  • 本地 MongoDB

    • 从这里安装

    • 在根文件夹中创建 .env 文件

    • 设置 MONGODB_URL=mongodb://localhost/amazona

  • 阿特拉斯云 MongoDB

    • 在 https://cloud.mongodb.com 创建数据库

    • 在根文件夹中创建 .env 文件

    • 设置 MONGODB_URL=mongodb+srv://your-db-connection

3. 运行后端

$ npm install
$ npm start

4. 运行前端

# open new terminal
$ cd frontend
$ npm install
$ npm start

5. 种子用户和产品

  • 在 Chrome 上运行：http://localhost:5000/api/users/seed

  • 它返回管理员电子邮件和密码

  • 在 chrome 上运行：http://localhost:5000/api/products/seed

  • 它创建了 6 个样品产品

6. 管理员登录

  • 运行http://localhost:3000/signin

  • 输入管理员电子邮件和密码，然后单击登录

支持

  • 问答：https://webacademy.pro/amazona

  • 联系导师：Basir

教训

  1. 本课程简介

    1. 你将建造什么

    2. 你将学到什么

    3. 谁是观众

  2. 安装工具

    1. 代码编辑器

    2. 网页浏览器

    3. VS 代码扩展

  3. 网站模板

    1. 创建亚马逊文件夹

    2. 创建模板文件夹

    3. 创建索引.html

    4. 添加默认 HTML 代码

    5. 链接到 style.css

    6. 创建页眉、正文和页脚

    7. 风格元素

  4. 展示产品

    1. 创建产品分区

    2. 添加产品属性

    3. 添加链接、图像、名称和价格

  5. 创建反应应用程序

    1. npx create-react-app 前端

    2. npm 启动

    3. 删除未使用的文件

    4. 将index.html内容复制到App.js

    5. 将 style.css 内容复制到 index.css

    6. 将类替换为类名

  6. 在 Github 上分享代码

    1. 初始化git仓库

    2. 提交更改

    3. 创建github账户

    4. 在 github 上创建仓库

    5. 将本地仓库连接到 github 仓库

    6. 将更改推送到 github

  7. 创建评级和产品组件

    1. 创建组件/Rating.js

    2. 创建div.评级

    3. 样式 div. rating、跨度和最后跨度

    4. 创建产品组件

    5. 使用评级组件

  8. 构建产品屏幕

    1. 安装react-router-dom

    2. 使用 BrowserRouter 和主屏幕路由

    3. 创建 HomeScreen.js

    4. 在那里添加产品列表代码

    5. 创建 ProductScreen.js

    6. 添加从产品详细信息到 App.js 的新路由

    7. 为产品图片、信息和操作创建 3 栏

  9. 创建 Node.JS 服务器

    1. 在根文件夹中运行 npm init

    2. 更新package.json设置类型：模块

    3. 将 .js 添加到导入中

    4. npm 安装快速

    5. 创建服务器.js

    6. 添加启动命令作为node backend/server.js

    7. 需要快递

    8. 为/返回后端创建路由已准备就绪。

    9. 将 products.js 从前端移动到后端

    10. 为 /api/products 创建路由

    11. 退货产品

    12. 运行 npm 启动

  10. 从后端加载产品

    1. 编辑 HomeScreen.js

    2. 定义产品、装载和错误。

    3. 创建使用效果

    4. 定义 async fetchData 并调用它

    5. 安装 axios

    6. 从/api/products获取数据

    7. 在列表中显示它们

    8. 创建加载组件

    9. 创建消息框组件

    10. 在主屏幕中使用它们

  11. 安装 ESlint 进行代码检查

    1. 安装 VSCode eslint 扩展

    2. npm install -D eslint

    3. 运行 ./node_modules/.bin/eslint --init

    4. 创建./frontend/.env

    5. 添加 SKIP_PREFLIGHT_CHECK=true

  12. 将 Redux 添加到主屏幕

    1. npm install redux 反应 Redux

    2. 创建store.js

    3. initState= {产品:[]}

    4. 减速器 = (状态, 操作) => 开关 LOAD_PRODUCTS: {产品: action.payload}

    5. 导出默认createStore(reducer, initState)

    6. 编辑 HomeScreen.js

    7. 商店名称 = useSelector(state=>state.products)

    8. const 调度 = useDispatch()

    9. useEffect(()=>dispatch({类型：LOAD_PRODUCTS，有效负载：数据})

    10. 将商店添加到index.js

  13. 将 Redux 添加到产品屏幕

    1. 创建产品详细信息常量、操作和减速器

    2. 将reducer添加到store.js

    3. 在 ProductScreen.js 中使用操作

    4. 添加 /api/product/:id 到后端 api

  14. 处理“添加到购物车”按钮

    1. 在 ProductScreen.js 中处理“添加到购物车”

    2. 创建 CartScreen.js

  15. 实施“添加到购物车”操作

    1. 创建 addToCart 常量、操作和化简器

    2. 将reducer添加到store.js

    3. 在 CartScreen.js 中使用操作

    4. 渲染 cartItems.length

  16. 构建购物车屏幕

    1. 为购物车商品和购物车操作创建 2 列

    2. cartItems.length === 0 ?购物车是空的

    3. 显示商品图片、名称、数量和价格

    4. 前往结账按钮

    5. 实施从购物车中删除操作

  17. 实施从购物车删除操作

    1. 创建removeFromCart常量、动作和reducers

    2. 将reducer添加到store.js

    3. 在 CartScreen.js 中使用操作

  18. 在 MongoDB 中创建示例用户

    1. npm 安装猫鼬

    2. 连接到 mongodb

    3. 创建config.js

    4. npm 安装 dotenv

    5. 导出 MONGODB_URL

    6. 创建模型/userModel.js

    7. 创建 userSchema 和 userModel

    8. 创建用户路由

    9. 种子样本数据

  19. 在 MongoDB 中创建示例产品

    1. 创建模型/productModel.js

    2. 创建产品架构和产品模型

    3. 创建产品路线

    4. 种子样本数据

  20. 创建登录后端

    1. 创建/登录 api

    2. 检查电子邮件和密码

    3. 生成令牌

    4. 安装 json 网络令牌

    5. 安装dotenv

    6. 返回令牌和数据

    7. 使用邮递员测试它

  21. 设计登录屏幕

    1. 创建登录屏幕

    2. 渲染电子邮件和密码字段

    3. 创建登录常量、操作和减速器

    4. 根据用户登录更新标题

  22. 实施登录操作

    1. 创建登录常量、操作和减速器

    2. 将reducer添加到store.js

    3. 在 SigninScreen.js 中使用操作

  23. 创建注册屏幕

    1. 为 /api/users/register 创建 API

    2. 将新用户插入数据库

    3. 返回用户信息和token

    4. 创建注册屏幕

    5. 添加字段

    6. 样式字段

    7. 将屏幕添加到 App.js

    8. 创建注册动作和减速器

    9. 检查验证并创建用户

  24. 创建发货屏幕

    1. 创建 CheckoutSteps.js 组件

    2. 创建运输字段

    3. 实施运输常量、行动和减速器

  25. 创建付款屏幕

    1. 创建付款字段

    2. 实施运输常量、行动和减速器

  26. 设计下订单屏幕

    1. 设计订单汇总字段

    2. 设计订单动作

  27. 创建下订单 API

    1. 创建订单 API

    2. 创建订单模型

    3. 创建订单路由器

    4. 创建后订单路线

  28. 实施下订单操作

    1. 处理下单按钮点击

    2. 创建下单常量、操作和减速器

  29. 创建订单屏幕

    1. 为 /api/orders/:id 构建订单 api

    2. 创建 OrderScreen.js

    3. useEffect 中的调度订单详细信息操作

    4. 使用 useSelector 加载数据

    5. 显示数据，如下订单屏幕

    6. 创建订单详细信息常量、操作和减速器

  30. 添加贝宝按钮

    1. 从 paypal 获取客户 ID

    2. 在 .env 文件中设置

    3. 创建路由表单 /api/paypal/clientId

    4. 在 api.js 中创建 getPaypalClientID

    5. 在 OrderScreen.js 中添加 paypal 结账脚本

    6. 显示贝宝按钮

  31. 实施订单支付

    1. 付款后更新订单

    2. 在 api.js 中创建 payOrder

    3. 在 orderRouter.js 中为 /:id/pay 创建路由

    4. 付款订单后重新渲染

  32. 显示订单历史记录

    1. 创建客户订单API

    2. 为 getMyOrders 创建 api

    3. 在个人资料屏幕中显示订单

    4. 款式订单

  33. 显示用户个人资料

    1. 创建用户详细信息 api

    2. 显示用户信息

  34. 更新用户资料

    1. 创建用户更新API

    2. 更新用户信息

  35. 创建管理视图

    1. 创建管理菜单

    2. 在后端创建管理中间件

    3. 在前端创建管理路由

  36. 列出产品

    1. 创建产品列表屏幕

    2. 添加减速器到存储

    3. 在屏幕上显示产品

  37. 创建产品

    1. 构建创建产品API

    2. 构建创建产品按钮

    3. 定义产品创建常量、动作和减速器

    4. 使用产品列表屏幕中的操作

  38. 构建产品编辑屏幕

    1. 创建编辑屏幕

    2. 定义状态

    3. 创建字段

    4. 加载产品详细信息

    5. 添加到路线

  39. 更新产品

    1. 定义更新API

    2. 定义产品更新常数、动作和减速器

    3. 使用产品编辑屏幕中的操作

  40. 上传产品图片

    1. npm 安装 multer

    2. 定义上传路由器

    3. 创建上传文件夹

    4. 处理前端

  41. 删除产品

    1. 在后端创建删除api

    2. 创建删除常量、操作和化简器

    3. 在产品列表屏幕中使用它

  42. 列出订单

    1. 创建订单列表 API

    2. 创建订单列表屏幕

    3. 添加减速器到存储

    4. 在屏幕上显示产品

  43. 删除订单 2. 创建删除订单操作和减速器 3. 将订单删除操作添加到订单列表

  44. 交付订单

    1. 为交付订单创建常量、动作和减速器

    2. 将订单交付操作添加到订单详细信息屏幕

  45. 发布到 Heroku

    1. 创建 git 存储库

    2. 创建 Heroku 帐户

    3. 安装 Heroku CLI

    4. 登录

    5. heroku 应用程序：创建亚马逊

    6. 编辑构建脚本的 package.json

    7. 创建过程文件

    8. 创建mongodb atlas数据库

    9. 在heroku环境变量中设置数据库连接

    10. 提交并推动

  46. 列出用户

    1. 为列表用户构建 api

    2. 创建用户列表屏幕

    3. 创建订单详细信息常量、操作和减速器

  47. 删除用户

    1. 为删除用户构建API

    2. 创建订单详细信息常量、操作和减速器

    3. 在 UserListScreen 中使用操作

  48. 编辑用户

    1. 为更新用户构建 api

    2. 创建编辑屏幕 UI

  49. 实施卖家视图

    1. 添加卖家菜单

    2. 创建卖家路线

    3. 为卖家列出产品

    4. 列出卖家的订单

    5. 将卖家添加到产品列表和详细信息屏幕

  50. 创建卖家页面

    1. 创建卖家页面

    2. 更新产品组件和产品屏幕

    3. 更新产品路线

  51. 添加畅销商品轮播

    1. 安装反应轮播

    2. 为畅销产品实施行动和减少措施

    3. 在主屏幕中对数据使用反应轮播

  52. 强制从一位卖家处订购商品

    1. 更新 addToCart 操作以按订单从一位卖家处购买

  53. 创建搜索框和搜索屏幕

    1. 在 Header.js 中创建搜索栏

    2. 添加样式

    3. 处理提交表单

    4. 编辑解析 url 以获取查询字符串

    5. 更新产品列表 API 以按名称搜索

  54. 添加高级搜索过滤器 1. 按类别过滤 2. 按价格范围过滤 3. 按平均评分过滤

  55. 完成高级搜索 1. 按价格过滤 2. 按评级过滤 3. 按价格、评级等排序

  56. 对产品进行评分和审查 1. 对产品进行评分 2. 创建操作和减速器

  57. 选择 Google 地图上的地址 1. 创建 google 地图凭据 2. 使用 Google Api 密钥更新 .env 文件 3. 创建 api 以将 google api 发送到前端 4. 创建地图屏幕 5. 获取 google api 6. getUserLocation 7. 安装 @react- google-maps/api 8. 在发货屏幕中使用它 9. 将地图应用到结账屏幕

  58. 错误修复：本地运行没有问题

    1. 将卖家信息添加到 data.js

    2. 种子产品数据与管理员信息作为卖家

    3. 修复更新用户的 isSeller 和 isAdmin

    4. 从用户详细信息中删除身份验证

  59. 实施分页

    1. 在后端的产品路由器中添加分页

    2. 将页码应用于前端的操作和化简器

    3. 在搜索屏幕中显示页码

  60. 通过 mailgun 通过电子邮件发送订单收据 1. 创建 mailgun 帐户 2. 添加并验证您的域名到 mailgun 3. 安装 mailgun-js 4. 在 env 文件中设置 api 密钥 5. 在 orderRouter 中更改付款订单 6. 发送电子邮件

  61. 创建仪表板屏幕

    1. 在后台创建图表数据

    2. 构建图表屏幕

  62. 与客户实施实时聊天

    1. 使用socket io创建后端

    2. 创建聊天框组件

    3. 创建支持屏幕

  63. 升级到 React 17、Router 6、Mongoose 6

    1. 后端

    2. 卸载并安装所有软件包

    3. 删除 mongoose connect 中的选项

    4. 将 mailgun 包装在 orderRouter 中的 try catch 中

    5. 前端

    6. 卸载并安装所有软件包

    7. 在搜索框中删除

    8. 全部包起来

    9. 替换为 <Route element={}>

    10. 替换为 <Route element={ }/>

    11. 替换并且也

    12. 更新 PrivateRoute、AdminRoute 和 SellerRoute

    13. 将useNavigate 中的push() 替换为navigate()

    14. 将 props.match.params.id 替换为 const params = useParams();

    15. 将 props.location.search 替换为 const { search } = useLocation();和 URLSearchParams

    16. 将 props.match.path 替换为 const {pathname} = useLocation();

    17. 将 userInfo 放入 ChatBox、SupportScreen 中的 useEffect 中

展开
附加信息
相关应用
为您推荐
相关资讯 全部