在过去的几年中，前端开发已经从简单的 HTML，CSS 和 JavaScript 网页开发到了包括移动应用、桌面应用和复杂的 Web 应用。Fastify 是一个快速和低开销的 Web 框架，它被设计用于构建高效的 Node.js 应用程序。WordPress REST API 是 WordPress 提供的一种 API，允许第三方应用程序访问 WordPress 数据。这篇文章将介绍如何使用 Fastify 和 WordPress REST API 创建一个简单的网站。
准备工作
在开始之前，需要安装以下工具：
- Node.js
- WordPress 网站
安装 Fastify
首先，我们需要安装和配置 Fastify。可以通过以下命令安装：
--- ------- -------
安装完成后，我们可以创建一个新的 Fastify 应用程序。在应用程序目录下，创建一个 app.js 文件，并添加以下代码：
----- ------- - -------------------- ---------------- --------- ------ -- - ------------ ------ ------- -- -- -------------------- ----- -------- -- - -- ----- ----- --- ------------------- --------- -- ------------ --
在上面的代码中，我们创建了一个 Fastify 应用程序，监听 3000 端口。当我们访问 localhost:3000 时，会返回一个 JSON 对象 { "hello": "world" }。
使用 WordPress REST API
现在我们来看看如何使用 WordPress REST API。WordPress REST API 允许我们获取和修改 WordPress 网站的数据。我们可以使用 API 获取文章、页面、分类和标签等信息。首先，我们需要获取 WordPress REST API 的 URL。在 WordPress 管理页面上，转到“设置”的“固定链接”选项卡，在“常规类别”下，您可以找到 WordPress REST API 的 URL。
我们可以使用 axios 来使用 WordPress REST API。在应用程序目录下，通过以下命令安装：
--- ------- -----
在 app.js 文件中，我们将添加以下代码，以从 WordPress REST API 获取文章。
----- ----- - ---------------- --------------------- ----- --------- ------ -- - ----- -------- - ----- ---------------------------------------------------- ----- ----- - ------------- ----------------- --
上述代码会将 WordPress 的文章列表作为 JSON 响应发送给客户端。您可以在 https://example.com/wp-json/wp/v2/ 下找到更多可用的 WordPress REST API 路径。
创建网站
现在我们已经准备好了使用 Fastify 和 WordPress REST API 来创建网站。我们将使用前面创建的代码作为基础，并添加样式和模板引擎来创建一个完整的网站。我们将使用 Pug 作为模板引擎，可以通过以下命令安装：
--- ------- ---
使用 Pug，我们可以从 Fastify 应用程序中引用 Pug 模板。在应用程序目录下，创建一个名为 views 的目录，并在该目录中创建一个名为 layout.pug 的文件。此文件将成为我们的默认布局：
----
----
----- -- --------- ----
----
------
-- -- --------- ----
----
----- -------在上面的代码中，我们定义了我们的标头、主体和内容块。现在，我们可以在 Fastify 应用程序中使用 Pug 模板来设置我们的路由。在 app.js 文件中，我们将添加以下代码：
------------------------------------------ -
------- -
---- --------------
-
--
---------------- ----- --------- ------ -- -
----- -------- - ----- ----------------------------------------------------
----- ----- - -------------
------------------------------ - ----- --
--在上面的代码中，使用 Pug 模板引擎从 app.js 文件中引用布局文件。我们将在 views 目录中创建一个名为 index.pug 的文件（类似于 WordPress 的 index.php 文件），它将引用我们之前从 WordPress REST API 获取的文章数据。
------- ------
----- -------
--
---- ---- -- -----
--- -------------------在上面的代码中，我们扩展了我们的布局，并在内容块中循环显示所有文章的标题。
结论
通过使用 Fastify 和 WordPress REST API，我们已经创建一个简单的网站。我们使用 Fastify 构建了一个 Web 应用程序，使用 WordPress REST API 获取了 WordPress 网站上的数据，并使用 Pug 模板引擎和布局创建了我们的网站页面。这是对创建更复杂的 Web 应用程序的优秀起点。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66ff7e611b0bf82c71caaf53