使用 React 和 Express 构建高效的全栈应用

阅读时长 9 分钟读完

在前端开发领域中,React 是目前最受欢迎的 JavaScript 库之一,而 Express 则是 node.js 平台上最流行的 Web 应用程序框架之一。本文将介绍如何使用 React 和 Express 一起构建高效的全栈应用,包括前后端的配置和交互、路由和数据库的处理等方面。此外,我们还将提供示例代码以供读者参考。

环境搭建

在开始构建全栈应用之前,我们需要准备好开发环境。首先,安装最新版本的 Node.js 和 npm 。其次,安装 React 和 Express 以及其他需要用到的依赖项。您可以使用以下命令完成这个过程:

现在,我们已经准备好开始构建全栈应用了!

前端实现

项目搭建

我们可以使用 create-react-app 工具来初始化 React 项目。在命令行中输入以下命令:

该工具会自动创建一个基础的 React 应用程序,并将其运行在 http://localhost:3000 上。

页面设计

为了使我们的前端页面具有美观和交互性,我们需要使用 React。在 src 目录中新建一个名为 App.js 的组件,并使用以下代码:

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

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

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

我们还需要设置路由,在 src 目录中新建一个名为 Routes.js 的文件,并使用以下代码:

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

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

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

在该代码中,我们定义了三个组件:Home、About 和 Contact,并通过路由将它们绑定在了不同的 URL 上。我们需要在 src/components 目录中新建这三个组件,并在相应的文件中定义它们的功能。

数据交互

为了与后端交互,我们需要使用 axios 库来实现 HTTP 请求。在 src/components/Home.js 文件中,我们可以使用以下代码来从后端获取数据:

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

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

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

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

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

在该代码中,我们使用了 componentDidMount 生命周期函数来在组件加载时获取数据,并且将其存储在组件状态中。然后,在渲染页面时,我们使用 map 方法将数据列表映射成一个 li 元素数组,并将其渲染到页面上。

后端实现

项目搭建

我们可以使用 Express 应用程序生成器来初始化 Express 项目。在命令行中输入以下命令:

在该代码中,-e 参数表示我们要使用 EJS 作为模板引擎来渲染页面。完成后,我们需要启动服务器,在命令行中输入以下命令:

该工具会启动 Express 服务器并将其运行在 http://localhost:3000 上。

数据库处理

在本文中,我们使用 MongoDB 作为后端数据库。我们首先需要安装 MongoDB 并启动它。然后,我们需要使用 mongoose 库来连接和操作数据库。

在根目录中新建一个名为 db.js 的文件,并使用以下代码:

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

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

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

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

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

在该代码中,我们使用 mongoose.connect 方法连接到数据库,并在遇到错误时输出错误信息。

数据路由

我们在后端也需要设置路由。在 routes 目录中新建一个名为 data.js 的文件,并使用以下代码:

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

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

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

在该代码中,我们从数据库中查找所有数据,并将结果以 JSON 格式返回给客户端。我们需要在 models 目录中创建一个名为 data.js 的文件来定义数据模型。

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

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

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

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

在该代码中,我们使用 mongoose.Schema 创建了一个名为 DataSchema 的数据模型,并将其导出。

综合实现

最后,我们需要将前后端连接起来。我们可以使用 CORS 中间件来解决跨域问题。在后端的 app.js 中,我们需要添加以下代码:

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

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

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

在该代码中,我们使用 cors() 方法来配置 CORS 中间件,并将前端的请求路由到后端的 dataRouter 上。

完成以上步骤后,我们就成功地将 React 和 Express 结合起来,构建了一个高效的全栈应用。

总结

本文介绍了如何使用 React 和 Express 一起构建高效的全栈应用。我们从环境搭建开始,介绍了前端实现和后端实现的各个方面,包括页面设计、数据交互、数据库处理和路由设置等。通过本文的学习,读者可以掌握构建全栈应用的基本流程和技术要点。代码示例请参见GitHub

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

纠错
反馈