在前端开发中，我们经常需要使用路由来管理单页应用中的不同页面之间的跳转。虽然现在有很多成熟的前端框架可以方便地处理路由问题，但是如果你想要在纯净的 Node.js 环境下实现服务端路由，那么 universal-node-router 这个 npm 包会是一个不错的选择。
universal-node-router 是一个基于 Express 或 Koa 的 Node.js 通用路由库，它通过编写简单的路由配置文件，可以让我们在 Node.js 的服务端和客户端同时使用同一套路由，从而实现更好的代码复用和开发效率。
在本篇文章中，我们将介绍如何使用 universal-node-router。我们会先简单介绍 universal-node-router 的基本概念和使用方法，然后通过一个基本的示例来演示如何配置和使用这个库。
安装
先从 npm 库中安装 universal-node-router：
--- - ---------------------
基本概念
路由配置文件
universal-node-router 中最重要的概念之一就是路由配置文件。路由配置文件是一个类似于 JSON 的对象，它包含了所有的路由信息，比如 URL 和对应的组件、中间件等。我们可以将路由配置文件放在一个单独的文件夹中，并通过下面的代码将其加载到代码中：
----- - ----------- - - --------------------------------- ----- ------- - ---------------------------------------
URL 和参数
路由配置文件中的每个路由都由一个 URL 和相关联的组件组成。URL 可以是一个普通的字符串，也可以是一个带参数的 URL。
在 universal-node-router 中，我们可以通过在 URL 中使用冒号（:）来定义参数，比如：
- ------------- ------- ------------------- --------- -
在这个例子中，如果用户访问 URL "/posts/123"，那么对应的组件是 "Post"，而参数 "id" 的值则为 "123"。
我们也可以在路由配置文件中定义多个参数，如下所示：
- ---------------------------- ---------------- -
在这个例子中，如果用户访问 URL "/api/v1/users/123"，那么对应的组件是 "api_controller"，而参数 "version" 的值为 "v1"，"object" 的值为 "users"，"id" 的值为 "123"。
组件和中间件
对于每个 URL，我们需要定义对应的组件或中间件。组件是一个 Node.js 模块，它会在客户端或服务端被加载和执行。如果一个 URL 对应多个组件，那么所有这些组件都会加载和执行。
- -------- ------------------- --------- ------------------- ------------------ -
在这个例子中，如果用户访问 URL "/home"，那么对应的组件是 "HomeController"。如果用户访问 URL "/about"，那么对应的组件是 "AboutController" 和 "OtherController"。
中间件是一个函数，它可以在处理请求之前或之后执行，以处理一些额外的逻辑，比如验证用户权限、记录日志等。一个 URL 可以包含多个中间件。
-
-------- -
-------------- -------------------
------------ ----------------
-
-在这个例子中，如果用户访问 URL "/home"，首先会先执行 "authMiddleware" 中间件，然后再加载并执行 "HomeController" 组件。
示例代码
我们来看一个基本的使用示例。本示例将创建一个简单的 web 应用程序，用于展示学生列表和单个学生的详细信息。我们将使用 universal-node-router 来处理路由和数据，Express 来搭建 web 服务器。
安装依赖
首先安装需要的依赖包：
--- - ------- --------------------- --- ------
目录结构
在项目的根目录下创建一个名为 "routers" 的文件夹，用于存放路由配置文件。创建一个名为 "views" 的文件夹，用于存放 HTML 模板文件。在根目录下创建一个名为 "server.js" 的文件，用于编写服务器的启动和路由相关代码。
-- ------- --- -------- --- ----------- --- ---------- -- ----- --- ---------- --- ----------- --- ------------ -- ---------
HTML 模板
在 "views" 文件夹下创建一个名为 "layout.ejs" 的文件，作为所有页面的公共模板。
--------- -----
------
------
----- ----------------
---------- ----- ----------
-------
------
------- ----- -------
--- ---- --
-------
-------在 "views" 文件夹下创建一个名为 "students.ejs" 的文件，作为学生列表页面的模板。
----
-- ---------------------------------- - --
----
-- ------------------- ---------- ------- ------------ ------
-----
-- --- --
-----在 "views" 文件夹下创建一个名为 "student.ejs" 的文件，作为学生详细信息页面的模板。
------- ------------ ------- ------ ------------- ------
路由配置文件
在 "routers" 文件夹下创建一个名为 "index.js" 的文件，用于定义路由配置。
-------------- - -
---- -
------------ ---------------------
--
---------------- -
------------ --------------------
-
--在 "routers" 文件夹下创建一个名为 "students.js" 的文件，用于定义学生列表页面的控制器。
----- -------- - ----------------------------
-------------- - -
----- -------- ---- -
----- ---- - -
------ -----------
--------- --------
--
---------------------- ------
-
--在 "routers" 文件夹下创建一个名为 "student.js" 的文件，用于定义学生详细信息页面的控制器。
----- -------- - ----------------------------
-------------- - -
----- -------- ---- -
----- ------- - --------------- -- ---- --- -------------------------
-- ---------- -
----------------------------- --- ---------
-------
-
----- ---- - -
------ -------------
-------- -------
--
--------------------- ------
-
--服务器代码
在 "server.js" 中加载路由配置文件并创建 web 服务器。
----- --- - ---------------
----- ------- - -------------------
----- - ----------- - - ---------------------------------
----- --- - ----------
-- ------
----------------------------------
-- --------
----- ------- - -------------------------
-- ----
---------------------------------- -- -
----- ------ - ---------------
-- ------------------ -
----- ---------- - -----------------------------------------
----------------- -- ------------- -------------------------- -- --------
- ---- -
------------------ - ------------------- -- ------------------ -- -
------ ---------------------------------------
---
-------------- -----------------------
-
---
-- -----------
------------- -------- -------
----------------- ----------------
-- -----
----- ---- - ---------------- -- -----
---------------- -- -- -
------------------- ------- -- ---- -----------
---运行应用程序
在命令行中运行以下命令启动应用程序：
---- ---------
启动成功后，在浏览器中访问 "http://localhost:3000"，应该可以看到学生列表页面了。点击每个学生的链接即可查看详细信息。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671d630d0927023822c15