Keep Flourishing

# 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 主機上阿!而關於各式部署方法及各自

# 為何需要 Hash Route？ 解決 React Router 在部署到伺服器上時，重新整理會出現 404 的問題。因為 React Router 是使用 navigate 在內部進行頁面的切換，而這個功能是由瀏覽器提供的，所以當我們重新整理時，瀏覽器會向伺服器發送請求，但是伺服器並沒有這個路由，所以會出現 404 的問題。 也就是目前的狀況是，儘管能在網站內透過點擊連結進行頁面切換，但是一旦重新整理頁面或是透過直接輸入網址的方式進入網站，就會出現錯誤： // App.js import { HashRouter, Routes, Route &a

# 流程 首先將 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

# 後端 # 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

# 後端 由於我們並不是使用 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 &

# 後端 需要一個 Review 的 endpoint 來處理產品評論的新增邏輯 需要客製化 Product 的 serializer 在產品的 JSON 格式中加入該產品的評論 先回顧一下 Review 的 model，每個評論都有一個 product 來指向該評論的產品，並有一個 user 來指向該評論的使用者，並有一個 rating 來表示評分，comment 來表示評論內容，createdAt 來表示評論的時間。 class Review(models.Model): product = models.ForeignKey(Product,on_delete&#x

# 前端 整體搜尋功能架構： SearchBar - 前端搜尋欄位，捕捉使用者輸入。 HomePage - 用 useLocation 取得網址中的關鍵字，透過 useEffect 監聽關鍵字的變化，再透過 dispatch 來發送請求 productActions - 與後端 API 溝通，發送帶有 keyword 參數的請求 後端 product_views - 根據傳入的關鍵字查詢資料庫，返回符合條件的商品清單 # Search Bar Component(搜尋欄) 判斷若搜尋表單沒有 keyword，就停留在當前頁面 window.location.pathname /

# 後端 # views 將 isDelivered 更新為 True 的同時，也要取得現在時間，更新 deliveredAt 欄位 # order_views.py # 更新訂單運送狀態為：已運送 @api_view(['PUT']) @permission_classes([IsAdminUser]) def updateOrderToDelivered(request, pk): order = Order.objects.get(id=pk) order.isDelivered = True # 取得現在時間

# 後端 # views # order_views.py # 取得所有訂單 @api_view(['GET']) @permission_classes([IsAdminUser]) def adminGetAllOrders(request): orders = Order.objects.all() serializer = OrderSerializer(orders, many=True) return Response(serializer.data) # urls # order_urls.py path(&

# 目標 解決原本圖片路徑只有純文字的情況： # 後端 # views 要得知是「哪一個產品」需要更新圖片，所以需傳入 product_id 用 request.FILES.get('image') 取得上傳的圖片檔案 先不用規範 permission_classes，這樣前端才不用在 config 額外取 token @api_view(['POST']) def uploadImage(request): data = request.data product_id = data['product_id