本文将介绍如何使用 Fastify 和 React 实现一个全栈应用。Fastify 是一个快速的 Web 框架，适用于构建高性能的 HTTP 服务。React 是一个流行的前端框架，适合构建复杂的用户界面。使用 Fastify 和 React 可以实现完整的前后端分离的应用程序。
前置条件
在开始之前，您需要对以下技术进行基本的了解：
- JavaScript
- Node.js
- npm
- React
后端部分
首先，我们需要创建后端部分，也称为服务器端。使用 Fastify 框架可以使我们的服务端代码更加简单和高效。
安装 Fastify
要使用 Fastify，我们需要首先安装它。在命令行中，使用以下命令：
npm install fastify
创建 HTTP 服务
在编写 HTTP 服务代码之前，让我们首先创建一个新的 Node.js 文件。
HTTP 服务的代码需要导入 Fastify 框架并初始化 Fastify 对象。
-- -------------------- ---- ------- ----- ------- - -------------------- ---------------- --------- ------ -- - ------------ ------ ------- -- -- -------------------- ----- -------- -- - -- ----- ----- --- ------------------- --------- -- ------------ --
示例代码解释：
- 在第一行中，我们导入了 Fastify。
- 在第二行中，我们创建了一个名为 fastify 的常量，它是 Fastify 的实例化对象。
- 在第四行中，我们定义了一个 GET 路由，当客户端访问时，将返回一个 JSON 对象，包含 "hello" 属性和 "world" 的值。
- 在第七行中，我们调用 fastify.listen() 方法，启动 HTTP 服务器。第一个参数为端口号，第二个参数是一个回调函数，用于在服务器启动时执行。
你可以在浏览器中访问 http://localhost:3000/ 检查 HTTP 服务是否可以响应请求。
处理请求和响应
我们可以使用 Fastify 来做与请求和响应相关的工作。下面是一些示例代码：
fastify.get('/greet/:name', (request, reply) => {
const name = request.params.name
reply.send(`Hello, ${name}!`)
})示例代码解释：
- 在第一行中，我们定义了一个 GET 路由，用于访问 /greet/:name URL。
- 获取路由参数的值，可以使用 request.params 对象。在这个例子中，:name 用于获取 name 参数的值。
- 在第三行中，我们使用 reply.send() 方法，响应请求。在这个例子中，返回字符串 "Hello, ${name}!"。
处理 POST 请求
以下是处理 POST 请求的示例代码：
fastify.post('/login', (request, reply) => {
const { username, password } = request.body
if (username === 'admin' && password === 'password') {
reply.send('ok')
} else {
reply.status(401).send('invalid username or password')
}
})示例代码解释：
- 在上面的代码中，我们定义了一个 POST 路由，用于 /login URL。
- 在第二行中，我们使用解构语法从 request.body 对象中获取 username 和 password 的值。
- 在第三行中，我们检查用户名和密码是否正确。如果正确，我们使用 reply.send() 方法返回字符串 "ok"。
- 如果用户名或密码不正确，我们使用 reply.status() 方法设置 HTTP 响应状态码，并使用 reply.send() 方法返回一个 JSON 对象，包含 "invalid username or password" 的值。
到目前为止，我们已经完成了 HTTP 服务器的代码。下面我们继续前端部分的内容。
前端部分
现在，我们将创建一个名为 "client" 的新目录，并在其中创建一个名为 "src" 的新目录。
在 src 目录中，创建一个名为 App.js 的 React 组件。
-- -------------------- ---- -------
------ ----- ---- -------
-------- ----- -
------ -
---- ----------------
---------- -----------
------
-
-
------ ------- ----示例代码解释：
- 在第一行中，我们导入了 React。
- 然后，我们定义了一个名为 App 的函数组件。在这个组件中，返回一个 div 元素和 h1 元素。
- 在最后一行中，我们导出了 App 组件。
现在我们需要使用 create-react-app 工具为前端部分创建一个新项目。在命令行中，使用以下命令：
npx create-react-app client
运行上面的命令后，创建一个名为 "client" 的新目录。在命令行中进入该目录，并使用以下命令安装依赖项：
npm install axios
说明：Axios 是一个流行的 HTTP 客户端，用于在浏览器中发起 HTTP 请求。在这个项目中，我们将使用它与我们的后端服务进行通信。
连接后端与前端
接下来，我们需要将前端代码与后端服务连接起来。创建一个名为 api.js 的新文件：
-- -------------------- ---- ------- ------ ----- ---- ------- ----- --- - -------------- -------- ------------------------ ------------- ------- -- ------ ----- ----- - ---- -- ------------------------- ------ ----- ----- - ----------- -- ------------------ ------------
示例代码解释：
- 在第一行中，我们导入 axios 模块。
- 在第三行中，我们创建了一个名为 API 的 Axios 实例。我们将在应用程序中使用它与后端服务通信。
- 在第五行中，我们定义了一个名为 greet 的函数，用于向 /greet/:name URL 发送 GET 请求。这个函数接受一个名为 "name" 的参数，并将其附加到 URL 中。
- 在第七行中，我们定义了一个名为 login 的函数，用于向 /login URL 发送 POST 请求。这个函数接受一个名为 "credentials" 的参数，包含用户名和密码。
现在我们已经连接了前端和后端。在 App.js 组件中，我们可以使用 useState 钩子来处理表单数据。下面是示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - ------ ----- - ---- -------
-------- ----- -
----- ------ -------- - ------------
----- ------------- --------------- - ---------- --------- --- --------- -- --
----- --------- ----------- - ------------
----- ---------------- - ----- -- ---------------------------
----- ----------------- - ----- -- ----------------
---------------
-------------------- ------------------
--
----- ----------------- - ----- -- -
----------------------
------------------
-------------- -- --------------------------
------------ -- --------------------------------
-
----- ----------------- - ----- -- -
----------------------
-----------
-------------- -- --------------------------
------------ -- --------------------------------
-
------ -
---- ----------------
---------- -----------
----- -----------------------------
------ ----------- ------------ --------------------------- --
------- ----------------------------
-------
----- -----------------------------
------ ----------- --------------- ---------------------------- ---------------------------- --
------ --------------- --------------- ---------------------------- ---------------------------- --
------- ------------- ---------------
-------
----------------
------
-
-
------ ------- ----示例代码解释：
- 首先，我们使用 useState 钩子来定义三个状态变量。分别是 name、credentials 和 message。
- 在上面的代码中，我们定义了三个函数分别处理不同的表单。每个表单都使用 onSubmit 属性指定表单提交事件的处理程序。
- 在第 15 行中，我们监听输入框的值的变化，并在组件中保存它。这个函数会在输入框改变时自动更新 state 变量。
- 在第 19 行中，我们定义了另一个用于改变 state 变量的函数。将事件对象中的值与 state 变量合并，以更新 state 变量。
- 在第 25 行中，我们定义了处理登录表单提交事件的函数。它使用 login 函数向服务器发送 POST 请求，并且在成功或失败的情况下打印服务器的回应。
- 在第 31 行中，我们定义了一个处理 greet 表单的函数。该函数调用 greet 函数向服务器发送 GET 请求，并将结果存储在 message 变量中。
- 最后，在第 39 行中，我们在组件中渲染了一个 p 元素，用于显示服务器的消息。
总结
到此为止，我们已经介绍了使用 Fastify 和 React 实现全栈应用的技术。在本文中，我们创建了一个简单的 React 应用程序，并使用 Axios 框架连接服务器。
虽然这个示例项目的示例很简单，但是它涵盖了重要的前后端交互知识，可以帮助您更深入了解全栈应用的实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a387fc48841e9894fe31a4