前端如何查询Django Rest Framework API的指定模型字段？

嘿，刚完成DRF教程就开始思考实际应用，这很棒！作为后端入门新手，搞不清前端怎么和API对接太正常了——其实本质上和你用浏览器、httpie访问API是一回事，只是前端用代码来发送请求、处理返回的数据而已。我来一步步给你讲清楚：

核心逻辑：前端和API的交互本质 #

你的DRF API会对外暴露一系列HTTP端点（比如/api/snippets/），前端只需要发送对应的HTTP请求（比如GET请求获取数据），API就会返回JSON格式的数据，前端解析这个JSON后，就能轻松提取你需要的language字段。

第一步：确认你的API端点 #

因为你用了ModelViewSet，DRF会自动帮你生成标准的REST端点：

• 获取所有Snippet的列表：GET /api/snippets/
• 获取单个Snippet的详情：GET /api/snippets/{id}/
• （其他POST/PUT/DELETE端点这里暂时用不上）

假设你已经在urls.py里注册了路由：

from rest_framework.routers import DefaultRouter
from . import views

router = DefaultRouter()
router.register(r'snippets', views.SnippetViewSet)
urlpatterns = router.urls

第二步：前端发送请求并提取language字段 #

下面用最常用的JavaScript来演示，不管你用原生JS、Vue、React还是Angular，核心逻辑都是一样的。

示例1：获取所有Snippet并提取每个的language #

用原生JS的fetch API（现代浏览器都支持）：

// 发送GET请求到Snippet列表端点
fetch('/api/snippets/')
  .then(response => {
    // 先检查请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    // 把API返回的响应转换成JSON格式
    return response.json();
  })
  .then(snippetsData => {
    // snippetsData是一个数组，每个元素都是一个Snippet对象
    snippetsData.forEach(snippet => {
      // 直接通过对象属性提取language字段
      const snippetLanguage = snippet.language;
      console.log(`Snippet ${snippet.id}的语言是：${snippetLanguage}`);
      
      // 你可以把这个数据渲染到页面上，比如添加到DOM
      const languageElement = document.createElement('p');
      languageElement.textContent = `代码片段${snippet.id}：${snippetLanguage}`;
      document.body.appendChild(languageElement);
    });
  })
  .catch(error => {
    // 处理请求出错的情况
    console.error('获取数据时出错了：', error);
  });

示例2：只获取指定language的Snippet #

如果你只想拿到语言为python的Snippet，需要先在API端配置过滤功能：

1. 先安装django-filter：pip install django-filter
2. 在settings.py里添加应用：INSTALLED_APPS += ['django_filters']
3. 修改你的SnippetViewSet，添加过滤支持：

from django_filters.rest_framework import DjangoFilterBackend

class SnippetViewSet(viewsets.ModelViewSet):
    queryset = Snippet.objects.all()
    serializer_class = SnippetSerializer
    # 添加过滤后端
    filter_backends = [DjangoFilterBackend]
    # 指定允许按language字段过滤
    filterset_fields = ['language']

之后前端就可以通过URL参数传递过滤条件：

// 只获取language为python的Snippet
fetch('/api/snippets/?language=python')
  .then(response => response.json())
  .then(pythonSnippets => {
    console.log(`找到${pythonSnippets.length}个Python代码片段：`);
    pythonSnippets.forEach(snippet => {
      console.log(`- ${snippet.title}：${snippet.language}`);
    });
  });

示例3：用Axios库简化请求（可选） #

如果觉得原生fetch有点繁琐，很多前端项目会用Axios库，代码更简洁：

// 先引入Axios（可以通过CDN或者npm安装）
// <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios.get('/api/snippets/')
  .then(response => {
    const snippets = response.data;
    snippets.forEach(snippet => {
      console.log(snippet.language);
    });
  })
  .catch(error => {
    console.error(error);
  });

关键总结 #

• 前端和API的交互完全等同于你用httpie做的事：http GET http://localhost:8000/api/snippets/ 就是前端代码里fetch('/api/snippets/')的命令行版本。
• 只要API返回JSON，前端就能通过对象.字段名的方式直接提取language（或者其他任何字段）。
• 如果需要筛选数据，在API端配置过滤后，前端通过URL参数传递筛选条件即可。

内容的提问来源于stack exchange，提问作者aalberti333