基於Express與React製作的pwa小電商
項目介紹
- 此項目有2部分組成，前端倉庫地址爲 https://github.com/yehuozhili/shop100frontend ，後端倉庫地址爲 https://github.com/yehuozhili/shop100backend 。
- 前後端都由我一個人完成，無設計稿，圖片自己網上找的，使用rem適配，css寫的有點亂，後端測試部分未寫完。
- 寫這個主要也是自己學習用，因爲我自己在裏面也手寫了很多功能，下面項目特色會展示出來。
- 項目最後部署我是使用https發揮pwa威力，不然在http下pwa沒有多少意義。部署後感覺第一次訪問網站有點墨跡，跟一開始本地跑速度差的有點多，還有很大優化空間。不過後續訪問會有serviceworker執行緩存就會快很多了。
- 這裏還要感謝下教我技術的老師，特別是張仁陽老師和姜文老師，我的react和張仁陽老師學的，基礎部分和姜文老師學的，本來我連個手寫promise都搞不懂到底怎麼回事，以爲自己可能不適合搞這個，後來一次公開課聽了姜文老師那節promise給我很大的信心。
項目特色
- 手寫的虛擬化列表組件，在歷史記錄和首頁處使用了這組件
- 登錄註冊，地址功能，收藏功能，購物車小動畫，加載頁面動畫等，爲了方便改造，註冊完可以直接登錄。
- 搜索帶自動補全功能，雖然我感覺我這實現沒寫好。
- pwa安裝應用
- pwa離線緩存
- 手寫分片上傳，後來沒有采用，但是前後端代碼都保留着。
- 自定義hook解決安卓機鍵盤遮擋
線上體驗地址
https://www.yehuozhili.xyz:5677/#/
項目使用
- 下載前後端項目後進行npm install安裝，命令在package.json裏都有。
- 後端需要建立.env文件，照着.env.example配置一些信息。
- 前端src下有個env.tsx文件，寫了後端地址。
- 另外如果不使用https,html上的一個http轉https的meta標籤可以去了，serviceworker也可以不用。將其剝離出去就行。
- 我部署項目使用的是docker,後端項目基於pm2鏡像製作，前端項目基於nginx製作。https是申請的免費證書。自簽名證書瀏覽器不認的。
項目結構
- 前端主要使用react,redux,thunk完成主要邏輯，pwa部分靠workbox。
- 目錄結構：
|─api ------- 後端請求
├─assets ------- 資源文件
│ ├─images
│ └─style ----- 公用樣式
├─components ---- 公用組件
│ ├─CityPicker
│ ├─hooks ---- 自定義鉤子
│ ├─Loader
│ ├─Nav
│ ├─Search
│ ├─Tabs
│ ├─Upload
│ └─Virtualize
├─routes ---- 路由組件
│ ├─Cart
│ ├─Home
│ │ └─components
│ │ ├─HomeHeader
│ │ ├─HomeProduct
│ │ └─HomeSlider
│ ├─Login
│ ├─ProductDetail
│ ├─Profile
│ │ └─component
│ │ └─ProfileCollection
│ ├─ProfileCollection
│ ├─ProfileEdit
│ ├─ProfileForget
│ ├─ProfileHistory
│ ├─ProfilePackage
│ ├─ProfileReceive
│ ├─ProfileReceiveAdd
│ ├─Register
│ ├─Search
│ └─Settle
│ └─components
│ └─AddressSelect
├─store
│ ├─actions ----派發action
│ └─reducers ----reducer邏輯
├─typings ------ 聲明文件
└─utils -----公用函數
- 後端主要使用express完成。
- 目錄結構：
├─controllers ---控制器
├─exceptions --- 錯誤處理
├─middlewares ----中間件
├─models ----模型
├─public ---靜態資源
│ ├─detail
│ ├─images
│ │ └─uploads --上傳目錄
│ ├─products
│ └─sliders
└─utils --- 通用邏輯
需要改造點
- 1、登錄註冊部分未驗證郵箱。
- 2、首頁圖片太大太多以及邏輯太多，需要精簡，加快首頁渲染時間。
- 3、支付後面邏輯未寫。
- 4、包裹查詢邏輯未寫。