在前端开发中，我们经常需要构建各种不同类型的网站，其中，投票和问答系统是比较常见的两种类型。然而，在构建这些系统时，我们往往需要处理大量的数据，并需要使用到后端技术。这时，Headless CMS 可以帮助我们简化开发流程，并使得前端开发人员在构建这些系统时可以更加专注于业务逻辑。
本文将介绍如何使用 Headless CMS 构建在线投票和问答系统，我们可以使用 Strapi 作为我们的 Headless CMS，同时使用 React 和 Redux 作为我们的前端框架。
Headless CMS 简介
Headless CMS 将内容管理系统从前端分离了出来，前端和后端不再需要通过模板来相互通信，从而使得前端开发人员在开发过程中有更大的自由度。
Headless CMS 提供了一种结构化的内容管理方法，将内容存储在一个中心位置，前端可以通过 API 来获取数据，并将其展示到用户面前。这种方式比传统的 CMS 有更高的灵活性，同时也使得内容更容易扩展和重用。
常见的 Headless CMS 包括 Strapi、Contentful、Prismic 等。
使用 Strapi 构建投票和问答系统
项目准备
在开始构建项目之前，我们需要准备一下环境：
- Node.js 环境
- React 和 Redux 开发环境
- Strapi
我们可以使用 create-react-app 来初始化我们的项目，并且使用 yarn 或者 npm 来管理我们的依赖。在构建这个项目时，请确保你已经了解了 React 和 Redux 的基本知识。
Strapi 管理后台
在使用 Strapi 之前，我们需要先创建一个新的 Strapi 项目。可以在 Strapi 官网下载并安装 Strapi。
安装完成后，我们可以进入 Strapi 管理后台来创建我们的数据结构：
在管理后台中，我们可以创建 Collection Types、单独的字段以及关系。
投票系统
我们可以使用 Strapi 来管理投票系统中的题目和答案。在 Strapi 中创建一个 Question Collection Type，然后将其关联到一个 Answer Collection Type。在 Question 中创建一个字段用于存储问题标题和一个 relation 字段，用于关联到对应的 Answer。在 Answer 中创建一个字段用于存储答案和一个字段用于存储每个选项的投票计数。
创建完毕后，我们可以使用 Strapi 提供的 RESTful API 来获取问题和答案的数据。我们可以在前端中使用 fetch 或者 axios 等库来完成这个过程。
问答系统
在 Strapi 中创建一个 Question Collection Type，包括一个字段来存储问题和一个字段来存储答案，然后在 Answer Collection Type 中创建一个字段来存储答案和一个字段来存储问题的 ID（作为 relation）。
通过这种方式，我们可以使用 Strapi 来管理我们的问答系统，并使用 API 来获取问题和答案的数据。
前端实现
在前端实现中，我们可以使用 React 和 Redux 来构建投票和问答系统。
投票系统
我们可以构建一个简单的投票系统，用于显示问题和选项，同时允许用户对问题进行投票。
首先，我们可以创建一个 QuestionDetail 组件，用于显示一个问题和对应的选项。
-------- ---------------- -------- -- -
------ -
-----
-------------------------
--------------------------- -- -
---- ----------------
------- ----------- -- --------------------------
-------------
---------
------------ ---------------------
------
---
------
--
-在这个组件中，我们使用 map 函数来循环遍历每个答案，并生成一个可以点击的按钮，同时显示每个选项的投票数量。
然后，我们可以创建一个 VotePage 页面，用于显示所有问题，并包含一个 QuestionDetail 组件。同时，在 componentDidMount 生命周期中，我们可以请求 Strapi API 来获取数据，然后将其存储到 Redux Store 中：
----- -------- ------- --------------- -
------------------- -
--------------------------------------
-
-------- -
------ -
-----
-------- ---------
---------------------------------- -- -
--------------- ----------------- ------------------- --
---
------
--
-
-
-------- ---------------------- -
------ -
---------- ---------------
--
-
------ ------- -----------------------------------在这里，我们从 Redux Store 中获取了所有的问题，然后使用 map 函数循环遍历每个问题，生成 QuestionDetail 组件。
现在，我们需要设置一些 reducer 和 action 来处理数据，完成投票过程。
问答系统
对于问答系统，我们可以使用一个页面组件和一个列表组件来实现。在页面组件中，我们可以显示问题和包含一个 AnswerList 组件。在 AnswerList 组件中，我们可以显示所有回答，然后提供一个表单来创建新的回答。
----- ------------ ------- --------------- -
------------------- -
---------------------------------------------------------------
-
-------- -
-- ---------------------- -
------ ----------------------
-
------ -
-----
-----------------------------------
----------- ------------------------------------- --
----------- ------------------------------ --
------
--
-
-
-------- ---------------------- --------- -
------ -
--------- ----------------------------------------
--
-
------ ------- ---------------------------------------
-------- ------------ ------- -- -
------ -
-----
--------------- --- - -- ------- ------- -----------
------------------- -- -
---- ----------------
----------------------
------
---
------
--
-
-------- ----------------- -
-------- ------------------- -
-----------------------
----- ---------- - --------------------------
-- ------------- -
-------
-
-----------------------------------------
------------------------- - ---
-
------ -
----- ------------------------
-----
------ --------------------- ---------------
--------- ----------- --
------
------- -----------------------------
-------
--
-在这里，我们使用了 fetchQuestion action 来请求 Strapi API 并获取所有回答数据。在 AnswerList 组件中，我们使用 map 函数循环遍历所有回答并生成一个列表。在 AnswerForm 组件中，我们保存了新回答的内容并提供一个表单来输入。
同样的，我们还需要处理 reducer 和 action，来实现问答系统。
结论
使用 Headless CMS 可以使得前端开发人员更加专注于业务逻辑，同时可以减少我们在开发中需要处理的数据和数据库操作。在本文中，我们介绍了如何使用 Strapi 和 React 来构建在线投票和问答系统，并提供了示例代码来帮助读者更好地理解技术实现细节。
我相信，通过使用 Headless CMS，我们可以更加轻松地构建各种不同类型的网站，并减少对于后端技术的依赖。在未来，Headless CMS 将会在前端开发中扮演越来越重要的角色，这也将使得前端开发更加高效，便捷与灵活。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6709fb22d91dce0dc87d80e5