如何通过自定义操作将FlutterFlow连接到Django API？

Django API（通常基于Django REST Framework）遵循REST规范，自定义操作本质就是封装对应的HTTP请求，和Firebase/Supabase的操作逻辑核心一致，只是换成和Django API的交互。以下是针对部署在AWS EC2上的Django API的CRUD操作实现示例：

基础配置 #

先定义API的基础地址和认证信息（根据你的Django API认证方式调整）：

// 替换成你的EC2上Django API的访问地址
const DJANGO_API_BASE = "http://your-ec2-public-url/api";
// DRF Token认证：从用户登录接口获取的token
const AUTH_TOKEN = "your-user-authentication-token";
// 请求头配置，根据认证方式调整
const requestHeaders = {
  "Content-Type": "application/json",
  "Authorization": `Token ${AUTH_TOKEN}`
};

1. 读取数据（GET） #

获取资源列表或单条详情：

// 获取资源列表（示例：文章列表）
async function fetchResourceList(resourcePath) {
  try {
    const res = await fetch(`${DJANGO_API_BASE}/${resourcePath}/`, {
      method: "GET",
      headers: requestHeaders
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    return await res.json();
  } catch (err) {
    console.error("读取列表失败:", err);
    throw err;
  }
}

// 获取单条资源详情（示例：ID为1的文章）
async function fetchResourceDetail(resourcePath, resourceId) {
  try {
    const res = await fetch(`${DJANGO_API_BASE}/${resourcePath}/${resourceId}/`, {
      method: "GET",
      headers: requestHeaders
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    return await res.json();
  } catch (err) {
    console.error("读取详情失败:", err);
    throw err;
  }
}

// 调用示例
// fetchResourceList("articles")
// fetchResourceDetail("articles", 1)

2. 创建数据（POST） #

提交新资源到API：

async function createResource(resourcePath, resourceData) {
  try {
    const res = await fetch(`${DJANGO_API_BASE}/${resourcePath}/`, {
      method: "POST",
      headers: requestHeaders,
      body: JSON.stringify(resourceData) // 数据需匹配Django序列化器字段
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    return await res.json();
  } catch (err) {
    console.error("创建资源失败:", err);
    throw err;
  }
}

// 调用示例：创建新文章
// createResource("articles", { title: "新文章标题", content: "文章内容..." })

3. 更新数据（PUT/PATCH） #

• PUT：全量更新资源（需传递所有必填字段）
• PATCH：部分更新资源（仅传递需要修改的字段）

// 全量更新
async function updateResource(resourcePath, resourceId, updatedData) {
  try {
    const res = await fetch(`${DJANGO_API_BASE}/${resourcePath}/${resourceId}/`, {
      method: "PUT",
      headers: requestHeaders,
      body: JSON.stringify(updatedData)
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    return await res.json();
  } catch (err) {
    console.error("更新资源失败:", err);
    throw err;
  }
}

// 部分更新
async function patchResource(resourcePath, resourceId, partialData) {
  try {
    const res = await fetch(`${DJANGO_API_BASE}/${resourcePath}/${resourceId}/`, {
      method: "PATCH",
      headers: requestHeaders,
      body: JSON.stringify(partialData)
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    return await res.json();
  } catch (err) {
    console.error("部分更新失败:", err);
    throw err;
  }
}

// 调用示例
// updateResource("articles", 1, { title: "修改后的标题", content: "修改后的内容..." })
// patchResource("articles", 1, { title: "仅修改标题" })

4. 删除数据（DELETE） #

删除指定资源：

async function deleteResource(resourcePath, resourceId) {
  try {
    const res = await fetch(`${DJANGO_API_BASE}/${resourcePath}/${resourceId}/`, {
      method: "DELETE",
      headers: requestHeaders
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    return res.ok;
  } catch (err) {
    console.error("删除资源失败:", err);
    throw err;
  }
}

// 调用示例：删除ID为1的文章
// deleteResource("articles", 1)

关键注意事项 #

• 认证适配：如果你的Django API用Session认证，需在请求中添加credentials: 'include'；用JWT则把请求头的Authorization改成Bearer ${JWT_TOKEN}。
• 跨域处理：前端发起请求时若出现跨域错误，需在Django端安装并配置django-cors-headers，允许你的前端域名访问。
• 字段校验：请求体的字段必须和Django序列化器（Serializer）定义的字段完全匹配，否则会返回400参数错误。
• 错误捕获：务必处理HTTP异常状态码，比如401（未授权）、404（资源不存在），避免操作失败无反馈。

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