在现代Web应用中，表单是不可或缺的部分，而今天我们将要讨论使用Headless CMS来实现表单的正确姿势。Headless CMS是一种不包含视觉呈现层的CMS系统，可以通过通过API提供内容的方式供前端应用程序调用。Headless CMS的设计使得它可以与任何技术栈进行集成，旨在提供更好的内容管理解决方案。在本文中，我们将介绍如何使用Headless CMS的API与Web应用程序实现一个联系表单的示例.
步骤1：选择一个Headless CMS
在选择 Headless CMS 时，您需要考虑以下事项：
- 它能否包含您想要的表单功能？
- 其API是否易于调用？
- 它是否集成了明确的文档，以使您可以快速开始使用？
以Strapi为例，它是一个开源，可自托管的Headless CMS平台。它包含强大的API和可自定义的管理界面，因此我们在本文中将使用Strapi来演示实现表单功能的步骤。
步骤2：创建Contact表单
我们将使用Strapi来创建一个通用的联系表单。在Strapi中，您可以轻松创建内容类型，然后将其公开为API。以下是如何创建一个名为 Contacts 的内容类型：
首先在Strapi管理员界面中打开 Content-Types Builder 页面。
点击 “Add New Content Type” 按钮，输入名称为 Contacts 。
定义Contacts的字段。在这里，我们将创建以下字段：
- name - 字符串类型
- email - 字符串类型，必须是电子邮件格式
- message - 文本类型
点击 “Save” 按钮保存 Contacts 类型。
完成以上步骤后，您可以通过Strapi中定义的API使用Contacts类型，并可允许用户通过该API POST 数据（即提交表单数据）。
步骤3：使用API调用
我们将使用JavaScript和Axios来调用Contacts的API。以下是一个包含表单的简单HTML页面：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------
-------
------
----- ------------------
------ ------------------------
------ ----------- --------- --------------------
------ --------------------------
------ ------------ ---------- ---------------------
------ ------------------------------
--------- ------------ -------------- ----------------------------
------ ------------- ---------------
-------
------- ---------------------------------------------------------
--------
----- ---- - ----------------------------------------
------------------------------- - -- -
-------------------
----- -------- - --- ---------------
------------------------------------------------ ---------
-------------- -- ----------------------
------------ -- --------------------
---
---------
-------
-------在上面的代码中，我们使用了Axios库来快速、简便地调用API。当用户提交表单时，我们捕捉事件并使用 FormData 收集表单数据，然后使用Axios提交表单数据到Strapi的API，其中：
http://<YOUR-STRAPI-HOST>/contacts是Contacts类型的API终端点。axios.post()方法是执行POST请求的Axios的函数。
这样， 至此，Headless CMS实现表单的正确姿势的示例已经完成。
总结
使用Headless CMS与Web应用程序集成非常有用，它让我们集中精力于前端开发而无需考虑内容管理系统。本文演示了如何使用Strapi来创建一个基本的联系表单，在Strapi中定义类型和字段，然后利用它提供的API实现表单的提交。但是，Headless CMS理所当然的还有很多其他的场景和应用，掌握Headless CMS是一项非常重要的技能，也是前端开发的一部分。
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/65b4d477add4f0e0ffdaff65) ，转载请注明来源 [https://www.javascriptcn.com/post/65b4d477add4f0e0ffdaff65](https://www.javascriptcn.com/post/65b4d477add4f0e0ffdaff65)