You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Django模板中调用REST API 微服务架构下前端接口实现问询

Django模板在微服务架构下调用REST API的实现方案

微服务架构下Django不再直接对接业务数据库,所有业务数据都需要从对应微服务的REST接口获取,通常有两种实现方案,适配不同的业务场景:

方案1:后端代理请求(推荐,安全性更高)

该方案和你之前单体架构的开发习惯差异最小,由Django视图层先请求微服务接口拿到数据,再渲染到模板中,不会暴露API地址、鉴权凭证到前端,适合需要权限校验、接口不对外公开的场景。
实现步骤:

  • 先在Django项目中安装HTTP请求库,比如requests:
    pip install requests
    
  • 在视图函数中发起接口请求,处理异常后把数据传递给模板,示例代码:
    # views.py
    import requests
    from django.shortcuts import render
    from django.http import HttpResponseServerError
    
    def product_list(request):
        # 替换为实际的微服务接口地址
        api_url = "http://product-service/api/v1/products/"
        try:
            # 接口需要鉴权时,可在headers中添加token等参数
            response = requests.get(api_url, timeout=5)
            response.raise_for_status()
            product_data = response.json()
        except requests.exceptions.RequestException as e:
            # 可根据业务需求自定义错误处理逻辑
            return HttpResponseServerError("商品服务暂时不可用")
        
        # 数据传递给模板的逻辑和单体开发完全一致
        return render(request, "product_list.html", {"products": product_data})
    
  • 模板层直接渲染数据即可,和单体架构下的用法没有区别:
    <!-- product_list.html -->
    <ul>
    {% for product in products %}
      <li>{{ product.name }} - ¥{{ product.price }}</li>
    {% endfor %}
    </ul>
    

方案2:前端直接异步请求

适合需要动态刷新、不刷新页面更新内容的交互类场景,由前端JS直接调用微服务接口,拿到数据后渲染页面。
实现步骤:

  • 提前在微服务侧配置CORS跨域规则,允许Django服务的域名访问,否则浏览器会拦截请求。
  • 模板中用原生Fetch、Axios等工具发起请求,原生Fetch示例:
    <!-- product_list.html -->
    <ul id="product-container"></ul>
    
    <script>
    fetch("http://product-service/api/v1/products/", {
      headers: {
        // 接口需要鉴权时可添加Authorization字段
        "Authorization": "Bearer 你的鉴权token"
      }
    })
    .then(res => res.json())
    .then(products => {
      const container = document.getElementById("product-container");
      products.forEach(product => {
        const li = document.createElement("li");
        li.textContent = `${product.name} - ¥${product.price}`;
        container.appendChild(li);
      })
    })
    .catch(err => {
      console.error("请求失败:", err);
      document.getElementById("product-container").textContent = "商品加载失败";
    })
    </script>
    

选型建议

  • 敏感数据、需要权限校验的接口优先选后端代理方案,避免鉴权凭证泄露、跨域配置等问题
  • 交互性强、需要局部刷新的页面场景可以选前端直接请求方案
  • 如果需要调用的接口数量较多,建议在Django层封装统一的API请求工具类,统一处理超时、鉴权、错误重试等逻辑,减少重复代码

内容的提问来源于stack exchange,提问作者imran_44

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.30 00:06:03