在网站开发中，表单是一个非常重要的组件，它可以让用户提交数据、注册账号、订阅信息等等。然而，传统的表单开发需要在后端编写代码，这样会增加开发成本和复杂度。而使用 Headless CMS，我们可以轻松地实现自定义的网站表单。
什么是 Headless CMS？
Headless CMS 是一种新型的内容管理系统，它将内容和展示分离，只提供 API 接口。这意味着我们可以使用任何前端框架（如 React、Vue、Angular）来构建我们的网站，并通过 API 接口来获取数据。
Headless CMS 的优点在于：
- 灵活性：我们可以根据自己的需求自由定制网站，而不受 CMS 的限制。
- 可维护性：由于内容和展示分离，我们可以更轻松地维护网站。
- 可扩展性：我们可以轻松地添加新的功能和页面，而不必担心后端的复杂性。
现在，我们来看一下如何使用 Headless CMS 实现自定义网站表单。我们将使用 Strapi 作为我们的 Headless CMS，并使用 React 构建我们的表单。
步骤一：创建 Strapi 应用程序
首先，我们需要创建一个 Strapi 应用程序。我们可以使用 Strapi CLI 快速创建一个新的应用程序：
npm install strapi@alpha -g strapi new my-app
步骤二：创建表单模型
接下来，我们需要创建一个表单模型。我们可以使用 Strapi 的管理界面来创建模型。
- 打开 Strapi 管理界面（默认地址为
http://localhost:1337/admin）。 - 点击左侧菜单栏中的“插件”。
- 点击“Content-Types Builder”插件。
- 点击“Create new collection type”按钮。
- 输入“form”作为模型名称，并点击“Continue”按钮。
- 在“Attributes”选项卡中，添加表单的各个字段（如姓名、邮箱、电话号码等）。
- 点击“Save”按钮保存模型。
步骤三：创建表单页面
接下来，我们需要创建一个表单页面。我们将使用 React 来创建我们的页面。我们可以使用 Create React App 快速创建一个新的 React 应用程序：
npx create-react-app my-form cd my-form npm start
然后，我们需要安装 @apollo/client 和 graphql 来连接 Strapi API：
npm install @apollo/client graphql
接下来，我们需要创建一个 Form 组件来展示我们的表单。我们可以使用 useMutation hook 来提交表单数据：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------ --- - ---- -----------------
----- ----------- - ----
-------- ------------------ ----------------- -
----------------- ------- -
---- -
--
-
-
-
--
-------- ------ -
----- ------ -------- - -------------
----- ------- --------- - -------------
----- ------- --------- - -------------
----- ------------ - -------------------------
----- ------------ - ------- -- -
-----------------------
------------
---------- -
------ -
----- -
-----
------
------
--
--
--
---------- -- -
----------- --------- ----------------
---
--
------ -
----- ------------------------
-------
-----
------ ----------- ------------ ------------- -- ------------------------ --
--------
-------
------
------ ------------ ------------- ------------- -- ------------------------- --
--------
-------
------
------ ---------- ------------- ------------- -- ------------------------- --
--------
------- -----------------------------
-------
--
-
------ ------- -----在上面的代码中，我们首先定义了一个 CREATE_FORM mutation，它将表单数据提交到 Strapi API。然后，我们使用 useMutation hook 来创建一个 createForm 函数。
最后，我们在 handleSubmit 函数中使用 createForm 函数来提交表单数据。当表单提交成功时，我们将弹出一个提示框。
步骤四：将表单数据保存到 Strapi
最后，我们需要将表单数据保存到 Strapi。为此，我们需要创建一个新的路由来处理表单提交请求。我们可以使用 Strapi 的路由和控制器来创建我们的路由。
- 打开 Strapi 管理界面。
- 点击左侧菜单栏中的“插件”。
- 点击“Content-Types Builder”插件。
- 点击“form”模型。
- 在“API”选项卡中，勾选“Enable create endpoint”选项，并点击“Save”按钮保存设置。
- 打开 Strapi 项目的根目录，并编辑
./api/form/controllers/form.js文件。 - 在
module.exports中添加一个新的create函数来处理表单提交请求：
-- -------------------- ---- -------
---- --------
---
- ---- --- ------------- -- -- --------- ------ ---------- ---------
--
-------------- - -
----- ----------- -
----- - ----- ------ ----- - - -----------------
----- ---- - ----- -----------------------------
-----
------
------
---
------ -----
--
--在上面的代码中，我们首先从请求体中获取表单数据。然后，我们使用 strapi.services.form.create 函数将表单数据保存到 Strapi 中。最后，我们将表单数据返回给客户端。
步骤五：测试我们的表单
现在，我们已经完成了所有的代码编写工作。我们可以启动我们的 Strapi 应用程序和 React 应用程序，并测试我们的表单。
首先，我们需要启动 Strapi 应用程序：
cd my-app strapi develop
然后，我们需要启动 React 应用程序：
cd my-form npm start
现在，我们可以在浏览器中访问 http://localhost:3000 来测试我们的表单。
结论
在本文中，我们介绍了使用 Headless CMS 实现自定义网站表单的方法。我们使用 Strapi 作为我们的 Headless CMS，并使用 React 构建我们的表单。通过使用 Headless CMS，我们可以轻松地实现自定义的网站表单，并且可以使用任何前端框架来构建我们的网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6777784dc1c5215e3cb7ad3e