使用 Fastify 和 React 构建全栈 JavaScript 应用程序

阅读时长 18 分钟读完

在现代 web 开发中,构建全栈 JavaScript 应用程序变得越来越流行。一个简单而强大的方式是通过使用 Fastify 和 React 结合构建这样的应用程序。

Fastify 是一个快速、低开销和易于扩展的 web 框架,而 React 是一个流行的前端框架,它使得开发复杂的用户界面变得容易。结合使用它们,您可以构建具有高性能、可扩展性和可维护性的全栈 JavaScript 应用程序。

在本文中,我们将详细介绍如何使用 Fastify 和 React 构建全栈 JavaScript 应用程序,并提供实用的示例代码。

准备工作

在开始之前,您需要安装以下工具:

  • Node.js:8.0 或更高版本
  • NPM 或者 Yarn:包管理器
  • Fastify:web 框架
  • React:前端框架

您可以在终端中通过如下命令安装 Fastify 和 React:

或者

构建 Back-end

首先,我们将构建后端部分,也就是一个简单的 RESTful API。我们将使用 Fastify 来搭建这个 API。

Hello World API

让我们从构建一个简单的 API 开始。在您的项目目录下,创建一个名为 index.js 的文件,并输入如下代码:

-- -------------------- ---- -------
----- ------- - --------------------
---------------- ----- --------- ------ -- -
  ------ - ------ ------- -
--
-------------------- --- -- -
  -- ----- -
    ----------------
    ---------------
  -
  ------------------- ------- -- ---- ------
--

我们创建了一个 Fastify 实例,并使用 fastify.get 方法创建了一个路由来响应 GET 请求。当访问根路径时,返回一个 JSON 对象,其中包含一个 hello 字段和 world 值。

我们通过在 fastify.listen 方法中指定端口和回调函数来启动服务器。现在,运行以下命令开始服务器:

访问 http://localhost:3000,你应该能在浏览器中看到以下内容:

处理请求和响应

现在,让我们扩展这个 API,添加一个 POST 路由处理请求和响应。继续在 index.js 文件中添加如下代码:

-- -------------------- ---- -------
----------------- ----- --------- ------ -- -
  ----- - ---- - - ------------
  -- ------- -
    ------ ------------------------
      ------ ----- -- ---------
    --
  -
  ------ - -------- ------- --------- -
--

我们使用 fastify.post 方法创建了一个处理 POST 请求的路由。我们从请求体中获取名为 name 的值。如果 name 值不存在,则返回一个状态码为 400 的错误响应。

否则,我们返回一个 JSON 对象,其中包含一个 message 字段和值为 Hello, ${name}! 的字符串。

运行服务器,并使用 CURL 或 Postman 进行测试:

您应该能够在浏览器中看到以下响应:

服务器渲染界面

Fastify 还提供了一个功能强大的插件来处理服务器端渲染。我们可以使用这个插件来渲染我们的应用程序的初始 HTML。

首先,让我们使用 React 来构建一个简单的页面。在项目中创建名为 App.js 的文件,并输入如下代码:

-- -------------------- ---- -------
------ ----- ---- -------

-------- ---------- -
  ------ -
    ------
      ------
        ----------------------------
      -------
      ------
        ------------------------
        ----- ------------- -----------
          -------
            ----
            ------ ----------- ----------- --
          --------
          ------- ----------------- --------------
        -------
      -------
    -------
  -
-

------ ------- ---

我们定义了一个名为 App 的无状态组件,该组件将渲染一个带有标题、消息和表单的 HTML 页面。在表单中,我们将发出一个 POST 请求,从而使 Fastify 调用我们之前定义的 POST 路由。

现在,我们需要在服务器端使用 React 渲染这个页面。在我们的 index.js 文件中添加如下代码:

-- -------------------- ---- -------
------ ----- ---- -------
------ - -------------- - ---- ------------------
------ --- ---- -------

------------------------------------------- -
  ----- ----------
--

-------------------- ----- --------- ------ -- -
  ----- ------- - -------- -- -- -----
  ----- ----- - --- -----
  ----- ---- - ------------------- ------------- ----------------- ---
  ----------------------------------
--

---------------- ----- --------- ------ -- -
  ------ - ------ ------- -
--

----------------- ----- --------- ------ -- -
  ----- - ---- - - ------------
  -- ------- -
    ------ ------------------------
      ------ ----- -- ---------
    --
  -
  ----- ------- - ------- ---------
  ----- ----- - ----------
  ----- ---- - ------------------- ------------- ----------------- ---
  ----------------------------------
--

-------------------- --- -- -
  -- ----- -
    ----------------
    ---------------
  -
  ------------------- ------- -- ---- ------
--

我们导入了 renderToString 方法,并使用 Fastify 的 fastify-static 插件来指定服务器的根目录。然后,我们定义了一个 GET 路由,该路由将状态传递给我们的 React 组件,以便渲染页面。

我们添加了 reply.type('text/html').send(html) 以告诉 Fastify 返回 HTML 内容。

接着,我们更新了 POST 路由以返回一个 message 和一个 title。我们重新使用了 renderToString 方法来渲染用于响应的 HTML 内容。

现在,运行服务器,并访问 http://localhost:3000/page,你应该能够在浏览器中看到一个包含标题、消息和表单的页面。

数据库交互

在现实世界的应用程序中,数据库交互是常见的。Fastify 集成了多个现代 SQL 和 NoSQL 数据库,因此它是一个很好的选择来构建具有可扩展性的数据应用。

例如,让我们连接一个 MongoDB 数据库,并使用 Mongoose 来查询数据。首先,我们需要安装 MongoDB 和 Mongoose:

或者

然后,我们需要在 index.js 中添加以下代码:

-- -------------------- ---- -------
----- -------- - -------------------

--------------------------------------------------- -
  ---------------- -----
--
-------------------------------- ------

----- ---- - ---------------------- -
  ----- -------
--

---------------------- ----- --------- ------ -- -
  ----- - ---- - - ------------
  -- ------- -
    ------ ------------------------
      ------ ----- -- ---------
    --
  -
  ----- ---- - --- ------ ---- --
  ----- -----------
  ------ ----
--

--------------------- ----- --------- ------ -- -
  ----- ----- - ----- -----------
  ------ -----
--

在这个例子中,我们使用 mongoose.connect 方法连接到本地 MongoDB 数据库。然后,我们定义了一个名为 User 的 Mongoose 模型,并创建用于 POST 和 GET 请求的路由。

当我们发出 POST 请求时,我们检查请求体是否提供了一个名字。如果是,则创建一个新的用户对象,并使用 save 方法将其保存到数据库中。然后,我们返回该用户对象。

当我们发出 GET 请求时,我们使用 User 模型的 find 方法查询数据库中的所有用户。

现在,运行服务器,访问 http://localhost:3000/users,你将能够查看所有用户的 JSON 列表。如果访问 http://localhost:3000/users 并提供一个名字,则会创建一个新用户并将其添加到数据库中。

构建 Front-end

现在,让我们添加一个 React 前端来与我们的后端 API 交互。

Hello World 界面

首先,让我们创建一个简单的界面来测试我们的 API。我们可以在项目中创建一个名为 index.html 的文件,并输入如下内容:

-- -------------------- ---- -------
--------- -----
------
  ------
    --------- -----------
  -------
  ------
    ---- ----------------
    ------- ------------------------------
  -------
-------

我们为我们的应用程序创建了基本的 HTML 骨架。我们将在 root 元素中呈现 React 组件。我们也导入了一个名为 bundle.js 的脚本文件,该文件将是我们构建的 JavaScript 应用程序的打包文件。

现在,让我们创建一个名为 src/App.js 的文件,并在其中添加如下内容:

-- -------------------- ---- -------
------ ------ - -------- - ---- -------

-------- ----- -
  ----- --------- ----------- - ------------

  ----- -------- ------------------- -
    ----------------------
    ----- ---- - --------------------------------
    ----- -------- - ----- ---------- -
      ------- -------
      -------- -
        --------------- ------------------
      --
      ----- ---------------- ---- --
    --
    ----- ---- - ----- ---------------
    ------------------------
  -

  ------ -
    -----
      --------- -----------
      ----- ------------------------
        -------
          ----
          ------ ----------- ----------- -------- --
        --------
        ------- ----------------- --------------
      -------
      -------- -- -----------------
    ------
  -
-

------ ------- ---

我们定义了一个名为 App 的无状态组件,并使用 React Hooks 中的 useState 函数来处理组件中的状态。

handleSubmit 函数中,我们阻止表单的默认提交行为,并发出一个 POST 请求将提供的名字发送到我们的 API。当服务器响应时,我们使用 setMessage 函数更新组件的状态。

我们返回一个包含标题、表单和消息的 HTML 页面,其中消息是通过使用条件渲染(可以在 React 中使用逻辑运算符进行操作)来呈现出来的。

现在,我们需要使用 Babel 和 webpack 来启动我们的应用程序。首先,安装必需的依赖项:

或者

然后,创建一个名为 webpack.config.js 的文件,并输入以下内容:

-- -------------------- ---- -------
----- ---- - ---------------
----- ----------------- - -------------------------------

-------------- - -
  ------ -----------------
  ------- -
    ----- ----------------------- --------
    --------- ------------
  --
  ------- -
    ------ -
      -
        ----- --------------
        -------- ---------------
        ---- -
          ------- ---------------
          -------- -
            -------- --------------------- -----------------------
          --
        --
      --
    --
  --
  ---------- -
    ----- -----
    ------------ -------------------- ---------
  --
  -------- -
    --- -------------------
      --------- ----------------------
      --------- --------------
    --
  -
-

我们定义了一个名为 webpack.config.js 的文件,并使用 Babel 和 webpack 的模块配置,以及一个名为 HtmlWebPackPlugin 的插件来生成我们的 HTML 页面。Webpack 还通过 devServer 对象配置一个开发服务器。

现在,让我们在项目文件夹中创建一个名为 public/index.html 的文件,并添加以下内容:

-- -------------------- ---- -------
--------- -----
------
  ------
    --------- -----------
  -------
  ------
    ---- ----------------
  -------
-------

我们定义了与之前相同的 HTML 骨架,包括 root 元素。

接着让我们创建一个名为 src/index.js 的文件,并在其中添加以下代码:

我们使用 ReactDOM 来将 App 组件渲染到 root 元素中。

现在,我们可以运行以下命令来编译和启动我们的应用程序:

应用程序应该会在 http://localhost:8080 上启动,并显示一个包含表单和消息的界面。

获取和显示用户数据

现在,我们扩展我们的 React 前端,以便获取和显示用户数据。

首先,让我们创建一个名为 src/UserList.js 的文件,并在其中添加如下内容:

-- -------------------- ---- -------
------ ------ - --------- --------- - ---- -------

-------- ---------- -
  ----- ------- --------- - ------------

  ------------ -- -
    ----- -------- ------------ -
      ----- -------- - ----- ---------------
      ----- ---- - ----- ---------------
      --------------
    -

    ------------
  -- ---

  ------ -
    ----
      --------------- -- -
        --- -------------------------------
      ---
    -----
  -
-

------ ------- --------

我们使用 React Hooks 中的 useStateuseEffect 函数来处理组件的状态。

useEffect 函数中,我们使用 fetch API 发出一个 GET 请求,从服务器获取用户数据。当服务器响应时,我们将数据更新到组件的状态中。

我们返回一个包含用户列表的 HTML 列表。我们使用 map 函数遍历用户数据,并为每个用户创建一个带有唯一 ID 的列表项。

现在,我们需要更新 App 组件,以使其呈现 UserList 组件和表单。在 src/App.js 文件中,使用以下代码替换该组件的完整代码:

-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ -------- ---- ------------

-------- ----- -
  ----- --------- ----------- - ------------

  ----- -------- ------------------- -
    ----------------------
    ----- ---- - --------------------------------
    ----- -------- - ----- ---------- -
      ------- -------
      -------- -
        --------------- ------------------
      --
      ----- ---------------- ---- --
    --
    ----- ---- - ----- ---------------
    ------------------------
  -

  ------ -
    -----
      --------- -----------
      ----- ------------------------
        -------
          ----
          ------ ----------- ----------- -------- --
        --------
        ------- ----------------- --------------
      -------
      -------- -- -----------------
      --- --
      --------------
      --------- --
    ------
  -
-

------ ------- ---

我们将表单和消息保留为以前的状态,并添加了一个标题 Users 和一个 UserList 组件。

所有东西都已准备就绪!现在,您可以运行以下命令来构建并启动应用程序:

您现在应该能够在 http://localhost:8080 上访问您的应用程序,并能够使用表单向服务器发送数据并获取用户数据。完美!

结论

在本文中,我们深入探讨了如何使用 Fastify 和 React 构建全栈 JavaScript 应用程序。我们详细介绍了如何构建后端 API 和前端界面,并将它们结合起来,以创建一整个应用程序。

我们介绍了很多例子和实际的代码,使得学习和理解变得更加容易。我们希望您学到了有价值的东西,并能够开始构建和开发自己的应用程序。

如果您需要更深入的指导或支持,请查阅 Fastify 和 React 官方文档。感谢您的阅读!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67510cee050cf9039c19a8b6

纠错
反馈