如何使用Javascript对Directus集合进行信息增查改及实时更新操作？

1. 编写HTML输入控件 #

你可以根据排行榜需要提交的字段设计表单，示例结构如下：

<!-- 数据提交表单，默认是新增模式，编辑时填充id和对应字段值 -->
<form id="rankForm">
  <input type="hidden" id="entryId" value="">
  <div>
    <label>用户名：</label>
    <input type="text" id="username" required>
  </div>
  <div>
    <label>得分：</label>
    <input type="number" id="score" required>
  </div>
  <button type="submit">提交</button>
</form>

2. 编写JS交互逻辑 #

前置配置 #

先配置你的Directus实例信息，注意生产环境不要硬编码永久令牌，推荐走用户登录流程获取临时访问令牌：

const DIRECTUS_HOST = "你的Directus实例根地址";
const COLLECTION_NAME = "你的排行榜集合名称";
const ACCESS_TOKEN = "你的API访问令牌";

// 你之前已经实现的拉取数据渲染表格的函数，提交成功后调用即可实现实时刷新
async function renderRankTable() {
  // 你原有拉取数据、渲染表格的逻辑
}

实现新增/更新统一提交逻辑 #

监听表单提交事件，根据隐藏域entryId是否有值判断是新增还是更新操作：

document.querySelector("#rankForm").addEventListener("submit", async (e) => {
  e.preventDefault();
  // 取表单字段值
  const entryId = document.querySelector("#entryId").value;
  const postData = {
    username: document.querySelector("#username").value,
    score: Number(document.querySelector("#score").value)
  };

  try {
    let url = `${DIRECTUS_HOST}/items/${COLLECTION_NAME}`;
    let method = "POST";
    // 有id则走更新逻辑
    if (entryId) {
      url += `/${entryId}`;
      method = "PATCH";
    }

    const res = await fetch(url, {
      method: method,
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${ACCESS_TOKEN}`
      },
      body: JSON.stringify(postData)
    });

    if (res.ok) {
      // 提交成功重置表单
      document.querySelector("#rankForm").reset();
      // 重新渲染表格实现实时更新
      await renderRankTable();
    }
  } catch (err) {
    console.error("提交失败：", err);
  }
});

实现编辑填充逻辑 #

给表格每一行加编辑按钮，点击时把当前行数据填充到表单即可进入更新模式：

// 示例：给所有编辑按钮绑定点击事件，你可以结合自己的表格渲染逻辑加这段
document.querySelectorAll(".edit-btn").forEach(btn => {
  btn.addEventListener("click", () => {
    // 取当前行存储的条目数据
    const rowData = btn.dataset;
    document.querySelector("#entryId").value = rowData.id;
    document.querySelector("#username").value = rowData.username;
    document.querySelector("#score").value = rowData.score;
  });
});

注意事项 #

• 操作前先在Directus后台给对应角色开启集合的create、update权限，字段权限也要同步配置
• 可根据需求增加表单校验逻辑，避免提交无效数据
• 建议添加操作成功/失败的用户提示，提升使用体验

内容的提问来源于stack exchange，提问作者Gussie Is a Successful Warlock