首頁>編程相關>其他源碼
下載

亞馬遜電子商務網站

亞馬遜

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

  • 輸入管理員電子郵件和密碼，然後按一下登入

支援

  • Q&A：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 中

展開
附加信息
相關應用
爲您推薦
相關資訊 全部