如何在11ty中以JSON格式向Directus无头CMS提交数据

方法一：客户端用Fetch API提交JSON数据 #

直接在静态页面里写JavaScript，拦截表单提交事件，把表单数据转成JSON格式后通过Fetch发送给Directus API：

// 假设你的表单ID是directus-form
document.getElementById('directus-form').addEventListener('submit', async (e) => {
  e.preventDefault(); // 阻止默认表单提交（默认是form-data格式）
  
  // 收集表单数据并转为JSON对象
  const formData = new FormData(e.target);
  const payload = Object.fromEntries(formData.entries());
  
  try {
    const response = await fetch('https://your-directus-instance.com/items/your-collection', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 如果需要认证，添加Directus的API Token
        // 'Authorization': 'Bearer YOUR_DIRECTUS_TOKEN'
      },
      body: JSON.stringify(payload)
    });
    
    if (response.ok) {
      alert('数据提交成功');
      e.target.reset(); // 重置表单
    } else {
      const error = await response.json();
      console.error('提交失败:', error);
      alert(`提交失败: ${error.message}`);
    }
  } catch (err) {
    console.error('请求错误:', err);
    alert('网络错误，请稍后重试');
  }
});

注意：如果Directus集合需要认证，客户端提交时要确保token的安全性——要么给集合开公共创建权限，要么用Directus的临时令牌功能，避免暴露长期有效token。

方法二：在11ty构建阶段提交数据（服务器端） #

如果数据是在11ty构建时生成的（比如从本地文件/其他数据源获取），可以直接在Node.js环境里提交，不需要等到客户端：

1. 先安装依赖（比如node-fetch）：

npm install node-fetch

2. 在11ty配置文件（.eleventy.js）里添加构建钩子：

const fetch = require('node-fetch');
require('dotenv').config(); // 加载环境变量

module.exports = function(eleventyConfig) {
  // 在构建前提交数据
  eleventyConfig.on('eleventy.beforeBuild', async () => {
    // 模拟要提交的数据（可以从本地文件/11ty数据源读取）
    const payload = {
      title: '来自11ty的测试数据',
      content: '这是通过构建脚本提交的JSON数据'
    };
    
    try {
      const response = await fetch('https://your-directus-instance.com/items/your-collection', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${process.env.DIRECTUS_TOKEN}` // 从环境变量读取令牌
        },
        body: JSON.stringify(payload)
      });
      
      if (response.ok) {
        console.log('构建时数据提交成功');
      } else {
        const error = await response.json();
        console.error('构建时提交失败:', error);
      }
    } catch (err) {
      console.error('构建时请求错误:', err);
    }
  });
};

建议把Directus的token存在.env环境变量文件里，不要硬编码到代码中：

# .env文件
DIRECTUS_TOKEN=your-token-here

方法三：用托管平台Serverless函数转发请求（可选） #

如果担心客户端暴露token，可以用Netlify/Vercel等平台的Serverless函数作为中间层，客户端把数据发给函数，函数再转发给Directus API并带上token：

比如Netlify函数示例（netlify/functions/submit-to-directus.js）：

const fetch = require('node-fetch');

exports.handler = async (event) => {
  if (event.httpMethod !== 'POST') {
    return { statusCode: 405, body: 'Method Not Allowed' };
  }
  
  const payload = JSON.parse(event.body);
  
  try {
    const response = await fetch('https://your-directus-instance.com/items/your-collection', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.DIRECTUS_TOKEN}`
      },
      body: JSON.stringify(payload)
    });
    
    const data = await response.json();
    return { statusCode: response.status, body: JSON.stringify(data) };
  } catch (err) {
    return { statusCode: 500, body: JSON.stringify({ error: '服务器错误' }) };
  }
};

客户端只需要把请求发给这个函数：

// 客户端Fetch请求
const response = await fetch('/.netlify/functions/submit-to-directus', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(payload)
});

内容的提问来源于stack exchange，提问作者Juan José Ruiz Muñoz