在现代 web 开发中,构建全栈 JavaScript 应用程序变得越来越流行。一个简单而强大的方式是通过使用 Fastify 和 React 结合构建这样的应用程序。
Fastify 是一个快速、低开销和易于扩展的 web 框架,而 React 是一个流行的前端框架,它使得开发复杂的用户界面变得容易。结合使用它们,您可以构建具有高性能、可扩展性和可维护性的全栈 JavaScript 应用程序。
在本文中,我们将详细介绍如何使用 Fastify 和 React 构建全栈 JavaScript 应用程序,并提供实用的示例代码。
准备工作
在开始之前,您需要安装以下工具:
- Node.js:8.0 或更高版本
- NPM 或者 Yarn:包管理器
- Fastify:web 框架
- React:前端框架
您可以在终端中通过如下命令安装 Fastify 和 React:
npm install fastify react
或者
yarn add fastify react
构建 Back-end
首先,我们将构建后端部分,也就是一个简单的 RESTful API。我们将使用 Fastify 来搭建这个 API。
Hello World API
让我们从构建一个简单的 API 开始。在您的项目目录下,创建一个名为 index.js
的文件,并输入如下代码:
-- -------------------- ---- ------- ----- ------- - -------------------- ---------------- ----- --------- ------ -- - ------ - ------ ------- - -- -------------------- --- -- - -- ----- - ---------------- --------------- - ------------------- ------- -- ---- ------ --
我们创建了一个 Fastify 实例,并使用 fastify.get
方法创建了一个路由来响应 GET 请求。当访问根路径时,返回一个 JSON 对象,其中包含一个 hello
字段和 world
值。
我们通过在 fastify.listen
方法中指定端口和回调函数来启动服务器。现在,运行以下命令开始服务器:
node index.js
访问 http://localhost:3000
,你应该能在浏览器中看到以下内容:
{ "hello": "world" }
处理请求和响应
现在,让我们扩展这个 API,添加一个 POST 路由处理请求和响应。继续在 index.js
文件中添加如下代码:
-- -------------------- ---- ------- ----------------- ----- --------- ------ -- - ----- - ---- - - ------------ -- ------- - ------ ------------------------ ------ ----- -- --------- -- - ------ - -------- ------- --------- - --
我们使用 fastify.post
方法创建了一个处理 POST 请求的路由。我们从请求体中获取名为 name
的值。如果 name
值不存在,则返回一个状态码为 400 的错误响应。
否则,我们返回一个 JSON 对象,其中包含一个 message
字段和值为 Hello, ${name}!
的字符串。
运行服务器,并使用 CURL 或 Postman 进行测试:
curl --header "Content-Type: application/json" \ --request POST \ --data '{"name": "world"}' \ http://localhost:3000
您应该能够在浏览器中看到以下响应:
{ "message": "Hello, world!" }
服务器渲染界面
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:
npm install mongodb mongoose
或者
yarn add 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 来启动我们的应用程序。首先,安装必需的依赖项:
npm install babel-loader @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server html-webpack-plugin
或者
yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server html-webpack-plugin
然后,创建一个名为 webpack.config.js
的文件,并输入以下内容:
-- -------------------- ---- ------- ----- ---- - --------------- ----- ----------------- - ------------------------------- -------------- - - ------ ----------------- ------- - ----- ----------------------- -------- --------- ------------ -- ------- - ------ - - ----- -------------- -------- --------------- ---- - ------- --------------- -------- - -------- --------------------- ----------------------- -- -- -- -- -- ---------- - ----- ----- ------------ -------------------- --------- -- -------- - --- ------------------- --------- ---------------------- --------- -------------- -- - -
我们定义了一个名为 webpack.config.js
的文件,并使用 Babel 和 webpack 的模块配置,以及一个名为 HtmlWebPackPlugin
的插件来生成我们的 HTML 页面。Webpack 还通过 devServer
对象配置一个开发服务器。
现在,让我们在项目文件夹中创建一个名为 public/index.html
的文件,并添加以下内容:
-- -------------------- ---- ------- --------- ----- ------ ------ --------- ----------- ------- ------ ---- ---------------- ------- -------
我们定义了与之前相同的 HTML 骨架,包括 root 元素。
接着让我们创建一个名为 src/index.js
的文件,并在其中添加以下代码:
import React from 'react' import ReactDOM from 'react-dom' import App from './App' ReactDOM.render(<App />, document.getElementById('root'))
我们使用 ReactDOM
来将 App
组件渲染到 root
元素中。
现在,我们可以运行以下命令来编译和启动我们的应用程序:
npx webpack-dev-server --mode development
应用程序应该会在 http://localhost:8080
上启动,并显示一个包含表单和消息的界面。
获取和显示用户数据
现在,我们扩展我们的 React 前端,以便获取和显示用户数据。
首先,让我们创建一个名为 src/UserList.js
的文件,并在其中添加如下内容:
-- -------------------- ---- ------- ------ ------ - --------- --------- - ---- ------- -------- ---------- - ----- ------- --------- - ------------ ------------ -- - ----- -------- ------------ - ----- -------- - ----- --------------- ----- ---- - ----- --------------- -------------- - ------------ -- --- ------ - ---- --------------- -- - --- ------------------------------- --- ----- - - ------ ------- --------
我们使用 React Hooks 中的 useState
和 useEffect
函数来处理组件的状态。
在 useEffect
函数中,我们使用 fetch
API 发出一个 GET 请求,从服务器获取用户数据。当服务器响应时,我们将数据更新到组件的状态中。
我们返回一个包含用户列表的 HTML 列表。我们使用 map
函数遍历用户数据,并为每个用户创建一个带有唯一 ID 的列表项。
现在,我们需要更新 App
组件,以使其呈现 UserList
组件和表单。在 src/App.js
文件中,使用以下代码替换该组件的完整代码:
-- -------------------- ---- ------- ------ ------ - -------- - ---- ------- ------ -------- ---- ------------ -------- ----- - ----- --------- ----------- - ------------ ----- -------- ------------------- - ---------------------- ----- ---- - -------------------------------- ----- -------- - ----- ---------- - ------- ------- -------- - --------------- ------------------ -- ----- ---------------- ---- -- -- ----- ---- - ----- --------------- ------------------------ - ------ - ----- --------- ----------- ----- ------------------------ ------- ---- ------ ----------- ----------- -------- -- -------- ------- ----------------- -------------- ------- -------- -- ----------------- --- -- -------------- --------- -- ------ - - ------ ------- ---
我们将表单和消息保留为以前的状态,并添加了一个标题 Users
和一个 UserList
组件。
所有东西都已准备就绪!现在,您可以运行以下命令来构建并启动应用程序:
npx webpack-dev-server --mode development
您现在应该能够在 http://localhost:8080
上访问您的应用程序,并能够使用表单向服务器发送数据并获取用户数据。完美!
结论
在本文中,我们深入探讨了如何使用 Fastify 和 React 构建全栈 JavaScript 应用程序。我们详细介绍了如何构建后端 API 和前端界面,并将它们结合起来,以创建一整个应用程序。
我们介绍了很多例子和实际的代码,使得学习和理解变得更加容易。我们希望您学到了有价值的东西,并能够开始构建和开发自己的应用程序。
如果您需要更深入的指导或支持,请查阅 Fastify 和 React 官方文档。感谢您的阅读!
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67510cee050cf9039c19a8b6