Django+React如何通过GET请求获取并遍历指定分类商品

完全可以改用GET请求实现分类过滤，这类资源获取场景用GET比POST更符合REST接口语义，前后端对接也更简单。

后端Django REST Framework改造 #

把原有视图的post方法替换为get方法，分类参数从GET查询参数中读取即可，过滤逻辑和原有数据库层查询完全一致，不需要改动ORM部分：

class ProductCategoryView(APIView):
    serializer_class = ProductSerializer
    permission_classes = (permissions.AllowAny, )

    def get(self, request, format=None):
        # 从URL查询参数读取分类值，第二个参数为默认值，不传参时默认返回textbooks分类
        category = request.query_params.get('category', 'textbooks')
        # 原有数据库过滤逻辑保持不变：按创建时间倒序、分类名不区分大小写匹配
        queryset = Product.objects.order_by('-dateCreated').filter(category__iexact=category)
        serializer = ProductSerializer(queryset, many=True)
        return Response(serializer.data)

改造注意点：

• 如果接口固定只返回textbooks分类、不需要前端传参，直接把category变量硬编码为'textbooks'即可，保留查询参数的写法可以让同一个接口复用来获取journals、novels等其他分类商品，灵活度更高
• 建议加一层简单的参数校验：判断传入的category是否在你预设的分类列表内，非法参数直接返回400错误，避免无效查询
• 路由配置和普通GET接口一致，不需要额外修改

React前端对接示例 #

GET请求不需要携带请求体，直接把分类参数拼在URL查询串里即可，以下是两种常用的请求写法：

fetch 写法 #

import { useEffect, useState } from 'react'

function TextbookList() {
  const [products, setProducts] = useState([])

  useEffect(() => {
    const getProducts = async () => {
      try {
        const res = await fetch('你的后端接口地址/products/category/?category=textbooks')
        const data = await res.json()
        setProducts(data)
      } catch (err) {
        console.error('商品拉取失败', err)
      }
    }
    getProducts()
  }, [])

  // 遍历渲染商品
  return (
    <div className="product-wrap">
      {products.map(item => (
        <div className="product-card" key={item.id}>
          <h4>{item.name}</h4>
          <p>价格：¥{item.price}</p>
          {/* 其余商品字段按需渲染 */}
        </div>
      ))}
    </div>
  )
}

axios 写法 #

import { useEffect, useState } from 'react'
import axios from 'axios'

function TextbookList() {
  const [products, setProducts] = useState([])

  useEffect(() => {
    const getProducts = async () => {
      try {
        const res = await axios.get('你的后端接口地址/products/category/', {
          params: { category: 'textbooks' }
        })
        setProducts(res.data)
      } catch (err) {
        console.error('商品拉取失败', err)
      }
    }
    getProducts()
  }, [])

  // 遍历渲染逻辑和上面fetch写法一致
}

后续如果要扩展分页、价格区间筛选、排序等功能，直接在GET查询参数里追加对应字段即可，扩展成本比POST请求低很多。

内容的提问来源于stack exchange，提问作者C-Bizz