5.5k5 分鐘

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

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

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

# 目標 解決原本圖片路徑只有純文字的情況: # 後端 # 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
13k12 分鐘

# 產品管理列表前端頁面 建立一個新的頁面,用來管理產品,包含新增、編輯、刪除、查看產品的功能 import 先前寫好的 listProduct 的 Action 調用 ProductList 的 state,取得所有產品 用 map 迭代遍歷 products 陣列,並顯於產品列表上加上新增、刪除按鈕 // ProductListPage.js import { listProducts } from "../actions/productActions"; ... const Product
8441 分鐘

# 為何需要額外創建一個元件檢查權限? 如果多個頁面都需要檢查是否為管理員,最好在路由層面進行控制,避免每個頁面都重複寫檢查邏輯,導致程式碼難以維護。 # 創建高階元件(HOC)檢查權限 先多創建一個高階元件 AdminRoute.js,這個元件會檢查是否為管理員,如果是管理員就顯示該頁面,否則導向首頁。 // ../components/AdminRoute.js const AdminRoute = ({ children }) => { const navigate
18k16 分鐘

# 取得 Admin Token 由於在 user_views.py 中,使用 IsAdminUser 來限制只有 Admin 才能取得 User 資料,所以需要先登入 Admin 帳號,取得 Admin 使用者 Token,才能透過 Postman 取得 User 資料。 @api_view(['GET']) # 取所有 User @permission_classes([IsAdminUser]) # 只有Admin才能 access def getUsers(request): users = User.objects.all() seriali