随着前端技术的快速发展，越来越多的 Web 应用开始采用前后端分离的架构。在这种架构下，前端只负责显示和交互逻辑，而后端则负责处理业务逻辑和数据存储。
为了提高开发效率和代码复用性，越来越多的 Web 应用开始采用 Headless CMS（无头 CMS）作为数据存储和管理系统。Headless CMS 是一种仅提供数据接口而不提供模板和渲染的 CMS 系统。通过使用 Headless CMS，可以使前端开发人员专注于前端开发，而不需要关注后端业务逻辑和数据存储相关的问题。
在本文中，我们将介绍如何使用 Node.js 和 Headless CMS 构建 Web 应用，并提供详细的学习和指导意义。
准备工作
在开始构建 Web 应用之前，我们需要准备一些必要的工具和环境。具体如下：
Node.js 和 npm：我们需要在本地安装 Node.js 和 npm，用于在本地运行和管理我们的项目。
Headless CMS：我们需要选择一款适合的 Headless CMS，比如 Strapi、Contentful、Prismic 等。在本文中，我们选择使用 Strapi 作为示例。
Web 框架：我们需要选择一款适合的 Web 框架，比如 Express、Koa、Hapi 等。在本文中，我们选择使用 Express 作为示例。
步骤一：创建项目
首先，我们需要在本地创建一个 Node.js 项目。可以通过执行以下命令来创建一个基本的 Express 项目：
$ mkdir my-project $ cd my-project $ npm init -y $ npm install express --save
然后，我们需要在项目根目录下创建一个 index.js 文件，并添加以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ------------ ----- ---- -- - --------------- -------- -- ---------------- -- -- - ------------------- -- ------- -- ----------------------- --
通过执行以下命令，可以启动这个 Web 服务：
$ node index.js
在浏览器访问 http://localhost:3000，就可以看到输出了 Hello World!。
步骤二：连接到 Headless CMS
接下来，我们需要连接到 Headless CMS，并获取我们需要的数据。
在本文中，我们选择使用 Strapi 作为示例 Headless CMS。首先，我们需要在 Strapi 官网上注册一个账号，并在 Strapi 管理界面中创建一个新的项目。
然后，我们需要创建一个 posts 数据模型，并添加一些测试数据。我们可以在 Strapi 管理界面的左侧菜单中选择 Content Type Builder，并创建一个 posts 数据模型，包括 title 和 content 两个字段。接下来，我们可以在 posts 数据模型的管理页面中添加一些测试数据，用于后续测试。
接下来，我们需要使用 axios 调用 Strapi 提供的数据接口，并获取我们需要的数据。可以通过执行以下命令来安装 axios：
$ npm install axios --save
然后，在 index.js 文件中添加以下代码：
-- -------------------- ---- -------
----- ----- - ----------------
----- ------- - -----------------------
----------------- ----- ----- ---- -- -
--- -
----- -------- - ----- -----------------------------
----- ----- - -------------
---------------
- ----- ------- -
--------------------
------------------------------- ---- --------
-
--通过执行以下命令，可以重新启动 Web 服务：
$ node index.js
在浏览器访问 http://localhost:3000/posts，就可以看到输出了我们从 Strapi 获取的所有 posts 数据。
步骤三：渲染页面
最后，我们需要将获取到的数据渲染到页面中。为了提高开发效率和代码复用性，我们可以使用模板引擎来渲染页面。在本文中，我们选择使用 EJS 作为示例模板引擎。可以通过执行以下命令来安装 EJS：
$ npm install ejs --save
然后，在 views 文件夹中创建一个名为 posts.ejs 的文件，并添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------------
-------
------
--------------
-- -------------------- -- - --
-----
------- ---------- -------
------ ------------ ------
------
-- -- --
-------
-------接下来，我们需要在 index.js 文件中渲染这个模板，并将数据传递给模板。可以通过以下代码来实现：
-- -------------------- ---- -------
------------- -------- ------
----------------- ----- ----- ---- -- -
--- -
----- -------- - ----- -----------------------------
----- ----- - -------------
------------------- - ----- --
- ----- ------- -
--------------------
------------------------------- ---- --------
-
--通过执行以下命令，可以重新启动 Web 服务：
$ node index.js
在浏览器访问 http://localhost:3000/posts，就可以看到以模板形式渲染出了从 Strapi 获取的所有 posts 数据。
总结
通过使用 Node.js 和 Headless CMS，我们可以轻松地构建出一个前后端分离的 Web 应用。使用 Headless CMS 可以让前端开发人员专注于前端开发，而不需要关注后端业务逻辑和数据存储相关的问题。使用 Node.js 和 Express 可以让我们快速构建出 Web 服务，并使用模板引擎将数据渲染到页面中。
代码示例：
index.js 文件：
-- -------------------- ---- -------
----- ------- - ------------------
----- ----- - ----------------
----- --- - ---------
----- ------- - -----------------------
------------- -------- ------
------------ ----- ---- -- -
--------------- --------
--
----------------- ----- ----- ---- -- -
--- -
----- -------- - ----- -----------------------------
----- ----- - -------------
------------------- - ----- --
- ----- ------- -
--------------------
------------------------------- ---- --------
-
--
---------------- -- -- -
------------------- -- ------- -- -----------------------
--views/posts.ejs 文件：
-- -------------------- ---- -------
--------- -----
------
------
--------------------
-------
------
--------------
-- -------------------- -- - --
-----
------- ---------- -------
------ ------------ ------
------
-- -- --
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e73f87f6b2d6eab32c6a6b