Ext JS 筆記：異步函數(async/await) 解決偶發性錯誤
# 問題說明
前陣子看到同事 A 與老闆不斷爭執一個內部系統的其中一個問題，一問才知道這個問題已經卡了好幾個月還無解。
問題之所以困難是因為它是偶發性的，可能今天突然正常，沒幾天後又死當且發生機率在每個人的電腦也不一樣，日誌上卡這個 Task 卡了好幾個月，問題描述也只能掛著各種臆測造成死當的工作流程以及錯誤訊息
很難觸發問題，也很難去解決問題，打開 console 看也始終只能看到 Uncaught TypeError: Cannot read property 'xxx' of undefined 錯誤，但是卻不知道是哪裡的 xxx 會是 undefined。
# 解決方法
more...
Django + React 電商專案實戰 [19] - 用戶頭貼更換/上傳功能
# 後端
在 UserProfile 模型中加入 avatar 欄位
建立 API 讓用戶能上傳/更新頭像
設定 Django 的 MEDIA_URL 讓圖片可存取
確保未登入用戶無法上傳頭像
# model(新增用戶頭貼欄位)
透過擴展 User 模型(資料表) 加入 avatar 欄位，這樣可以不影響現有的 User 模型(資料表)，而是額外增加一個 UserProfile 模型(資料表)來存放用戶的頭像圖片
在 Django ORM 物件關聯映射（Object-Relational Mapping）中，在 UserProfile 模型(資料表)內這樣定義：
class Us
more...Django + React 電商專案實戰 [18] - 使用 Nginx 作為 reverse proxy 並部署至私人 Linux（非 PaaS）流程
# Tech Stack
Linux(Ubuntu 20.04+) 主機：本專案不使用雲端 PaaS 服務(Heroku、Azure、GCP)，而是自行架設 Linux 主機進行多個專案的維護
systemd：管理多個系統服務
SSH：遠端連線管理，如 OpenSSH）
Nginx：Web Server，反向代理
uWSGI：Django WSGI 伺服器，Django 與 Web Service 之間的接口
網路上部署教學非常多，但 95%都是教怎麼透過第三方部署平台例如 Heroku,Azure,GCP...等，但我就是想架在自己架設的 Ubuntu 主機上阿!而關於各式部署方法及各自
more...Django + React 電商專案實戰 [17] - Hash Route
# 為何需要 Hash Route？
解決 React Router 在部署到伺服器上時，重新整理會出現 404 的問題。因為 React Router 是使用 navigate 在內部進行頁面的切換，而這個功能是由瀏覽器提供的，所以當我們重新整理時，瀏覽器會向伺服器發送請求，但是伺服器並沒有這個路由，所以會出現 404 的問題。
也就是目前的狀況是，儘管能在網站內透過點擊連結進行頁面切換，但是一旦重新整理頁面或是透過直接輸入網址的方式進入網站，就會出現錯誤：
// App.js
import { HashRouter, Routes, Route &a
more...Django + React 電商專案實戰 [16] - 整合前端(React)與後端(Django)
# 流程
首先將 frontend 資料夾直接移動至 backend 資料夾內，因為最終是用後端的 Django 來 serve 前端的 React，所以目前整個專案的檔案結構應該會變成如下所示：
# 前端 bundle
首先要讓前端程式不再處於開發模式，而是將其打包(bundle)成靜態檔，直接讓後端的 Django 讀取
❯ cd frontend
...
❯ npm run build
基本上成功後就能看到以下回傳：
> frontend@0.1.0 build
> react-scripts build
Creating an optimized production
more...Django + React 電商專案實戰 [15] - 產品輪播圖
# 後端
# view(篩選+排序高評分產品)
gte: greater than or equal to，只抓取評分 >= 4 的產品
排序方式為 rating 由高到低，只取前 5 個產品
# product_views.py
@api_view(['GET'])
def getTopProducts(request):
products = Product.objects.filter(rating__gte=4).order_by('-rating')[:5]
serializer = P
more...
Django + React 電商專案實戰 [14] - 分頁功能
# 後端
由於我們並不是使用 Django template 來渲染前端頁面，所以並不能單純的用 Django 的 Paginator 來分頁
@api_view(['GET'])
def getProducts(request):
query = request.query_params.get('keyword')
# print("query:", query)
if query is None:
query = ''
products &
more...Django + React 電商專案實戰 [13] - 產品評論功能(含星數計算)
# 後端
需要一個 Review 的 endpoint 來處理產品評論的新增邏輯
需要客製化 Product 的 serializer 在產品的 JSON 格式中加入該產品的評論
先回顧一下 Review 的 model，每個評論都有一個 product 來指向該評論的產品，並有一個 user 來指向該評論的使用者，並有一個 rating 來表示評分，comment 來表示評論內容，createdAt 來表示評論的時間。
class Review(models.Model):
product = models.ForeignKey(Product,on_delete&#x
more...Django + React 電商專案實戰 [12] - 搜尋產品功能
# 前端
整體搜尋功能架構：
SearchBar - 前端搜尋欄位，捕捉使用者輸入。
HomePage - 用 useLocation 取得網址中的關鍵字，透過 useEffect 監聽關鍵字的變化，再透過 dispatch 來發送請求
productActions - 與後端 API 溝通，發送帶有 keyword 參數的請求
後端 product_views - 根據傳入的關鍵字查詢資料庫，返回符合條件的商品清單
# Search Bar Component(搜尋欄)
判斷若搜尋表單沒有 keyword，就停留在當前頁面 window.location.pathname
/
more...