在现代 Web 开发中，单页应用程序（SPA）越来越受欢迎，因为它们可以带来更好的用户体验和更高的性能。但是，在开发 SPA 时，路由和状态管理是两个很重要的问题。Node.js 是一种运行 JavaScript 代码的服务器端技术，本文将介绍如何利用 Node.js 来实现 SPA 的路由和状态管理。
路由
路由是 SPA 中的核心，它负责将 URL 映射到对应的页面或组件。SPA 的路由通常是通过客户端实现的，因为服务端不会为每个 URL 提供一个 HTML 页面。在客户端的实现中，浏览器的 History API 及其 pushState 和 replaceState 方法是实现路由的关键。
在 Node.js 中，可以使用 Express.js 来实现路由。Express.js 是非常流行的 Node.js Web 框架，它提供了强大的路由功能和极简的 API。接下来，我们将看到如何使用 Express.js 来实现基本的路由功能。
安装 Express.js
在开始之前，你需要先安装 Node.js 和 npm。安装后，通过以下命令安装 Express.js：
--- ------- ------ -------
创建路由
创建一个简单的 Express.js 应用程序并对其进行路由是非常简单的。以下是一个示例应用程序：
----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - ---------------- --------- --- ----------------- ----- ---- -- - --------------- ------- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
在这个示例应用程序中，我们定义了两个路由规则：一个是根路径 /，另一个是 /about。我们使用 app.get 方法来定义 GET 请求的处理程序。当请求的路径匹配到了某个路由规则时，对应的处理程序将被执行。在这个示例中，我们只是简单地发送一些字符串作为响应。
路由参数
路由参数是将动态的值传递给路由的一种方式。例如，我们可能希望动态地将用户 ID 作为 URL 的一部分，例如 /user/:id。在 Express.js 中，可以使用冒号 : 来定义路由参数。以下是一个示例：
-------------------- ----- ---- -- - ----- -- - -------------- -------------- --- -------- ---
在这个示例中，我们定义了一个路由参数 :id，当用户访问 /user/123 时，路由参数将被设置为 123。我们可以通过 req.params.id 来访问该参数的值。
路由中间件
路由中间件是一种介于请求和响应处理程序之间的功能。它们可以在请求到达目标处理程序之前或之后对请求进行修改。在 Express.js 中，路由中间件通常是通过 app.use 方法定义的。
以下是一个示例：
------------- ---- ----- -- - -------------------------- ------- --- ------------ ----- ---- -- - ---------------- --------- ---
在这个示例中，我们定义了一个路由中间件函数，它在请求到达根路由处理程序之前输出一条日志消息。在执行完中间件函数后，调用了 next 函数，让请求继续访问根路由处理程序。
状态管理
SPA 通常会有一些全局的状态，例如选项卡之间的状态、用户登录状态等。当用户访问新页面或操作页面中的元素时，这些状态通常需要在页面之间进行传递和更新。在 Node.js 和 Express.js 中，有许多方法可以实现状态管理，例如：
- 后端存储
- Cookie
- LocalStorage/SessionStorage
- URL 查询字符串
- 浏览器的 History API
以下是一些常见的状态管理方法的介绍。
后端存储
在服务器端存储状态是一种可以通过 Node.js 实现的状态管理方法。这种方法可以使用数据库、文件系统、内存缓存等方式来存储状态。当用户访问页面时，服务器会检查用户的身份（例如，通过 Cookie 或请求头）并返回相应状态。这种方法的缺点是需要频繁地与服务器进行通信，因此可能会影响应用程序的性能。
Cookie
Cookie 是一小段由服务器发送到客户端的数据，客户端会在接下来的请求中自动发送该数据。在 Express.js 中，可以使用 res.cookie 方法来设置 Cookie，并使用 req.cookies 来访问 Cookie 数据。
以下是一个示例：
----- ------- - ------------------- ----- ------------ - ------------------------- ----- --- - ---------- ------------------------ ------------ ----- ---- -- - ----- ----- - ----------------- - --------------------------- - - - -- ------------------- ------- ------------- ---- ------- ---- ---- -------- --------- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
在这个示例中，我们使用了 cookie-parser 中间件来解析 Cookie 数据。当用户访问应用程序的根路径时，我们检查请求中是否存在名为 count 的 Cookie。如果存在，我们将其值加 1，并更新 Cookie。如果不存在，我们将其值设置为 1，并设置新 Cookie。
LocalStorage/SessionStorage
LocalStorage/SessionStorage 是浏览器提供的一种存储数据的 API。LocalStorage/SessionStorage 可以储存字符串类型的数据，并且存储在客户端本地。LocalStorage/SessionStorage 可以通过 JavaScript 访问，是一种非常方便和易于使用的状态管理方式。在 SPA 中，我们通常使用它来存储一些本地应用程序状态。
以下是一个示例：
----- --- - -------- ----- ----- - ----- ----- ------- ------------------------- ------- ----- -------------- - -------------------------- ---------------------------- -- ----- ----- ------ -----------------------------
在这个示例中，我们使用 localStorage API 设置了一个名为 state 的本地状态，然后再次使用 localStorage API 将其检索出来。我们可以使用 localStorage.removeItem 方法删除存储的状态。
URL 查询字符串
URL 查询字符串是一种将数据嵌入到 URL 中的方法。在 Express.js 中，可以使用 req.query 来访问查询字符串参数。
以下是一个示例：
------------------------------------
在这个示例中，我们传递了两个查询字符串参数：name 和 age。我们可以使用 req.query.name 和 req.query.age 来访问它们的值。
浏览器的 History API
浏览器的 History API 是实现前端路由最常用的方法之一。它可以通过 JavaScript 修改浏览器的历史记录，并在不刷新页面的情况下更改 URL。在 SPA 中，我们可以使用浏览器的 History API 来实现路由和状态管理。
以下是一个示例：
------------------------------- --------- -------- ---------- ----------------------------------- ----- -- - ------------------------- -- ------ -------- ------------------------------ -- ------- ---
在这个示例中，我们使用 window.history.pushState 方法将一个新的页面状态添加到浏览器的历史记录中。我们还添加了一个 popstate 事件侦听器，当用户点击浏览器的“后退”按钮时，它会被触发并提供有关历史记录中最新状态的信息。使用这种方法，我们可以轻松地实现前端路由和状态管理。
结论
在本文中，我们介绍了如何使用 Node.js 和 Express.js 实现单页应用程序的路由和状态管理。我们学习了如何在 Express.js 中实现路由、路由参数和路由中间件，并学习了一些常见的状态管理方法，包括后端存储、Cookie、LocalStorage/SessionStorage、URL 查询字符串和浏览器的 History API。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672237fd2e7021665e0adb29