使用 Express 路由器构建路由

摘要：在本教程中，您将学习如何使用 Express 路由器来模块化和组织您的路由逻辑。

Express 路由器通过在单独的文件中定义路由，帮助您组织和模块化 Express 应用程序中的路由。

让我们以使用 Express 路由器的示例为例。

创建 Express 应用程序

步骤 1. 创建一个新的项目目录，例如 express-router-demo

mkdir express-router-demo
cd express-router-demoCode language: JavaScript (javascript)

步骤 2. 通过运行 npm init 命令初始化项目

npm init -yCode language: JavaScript (javascript)

这将在项目目录中创建 package.json 文件。

步骤 3. 在项目目录中创建 .env 文件，并使用 3000 的值定义 PORT 常量

PORT=3000Code language: JavaScript (javascript)

步骤 4. 配置 package.json 文件

...
  "type": "module",
  "scripts": {
    "start": "node --env-file=.env --watch index.js"
  },
...Code language: JavaScript (javascript)

在 package.json 文件中

添加 "type": "module" 条目以使用 ES 模块。
在 scripts 部分添加 "start": "node --env-file=.env --watch index.js" 条目，以便在应用程序启动时监视 index.js 文件并加载 .env 文件。

步骤 5. 安装 express 包

npm install expressCode language: JavaScript (javascript)

步骤 6. 使用以下代码创建 index.js 文件

import express from 'express';

const app = express();
const PORT = process.env.PORT || 3000;

// Todo routes
app.get('/todos', (req, res) => {
  res.send('A list of todo items');
});

app.post('/todos', (req, res) => {
  res.send('Create a new todo item');
});

app.put('/todos/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Update the todo item with id ${id}`);
});

app.delete('/todos/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Delete the todo item with id ${id}`);
});

app.get('/todos/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Get the todo item with id ${id}`);
});

app.listen(PORT, () => {
  console.log(`The server is listening on port ${PORT}.`);
});Code language: JavaScript (javascript)

index.js 启动一个 express 应用程序，并定义了管理 todo 资源的各种路由。此应用程序可以工作，但存在以下潜在问题

单体大小 – 当您添加更多代码时，index.js 会变得很大，这使得导航到不同的部分变得困难。
可维护性 – 维护此文件（例如添加新功能）将变得很困难，因为不会影响代码的其他部分。
缺乏关注点分离 – 在单个文件中混合路由、中间件和应用程序设置违反了关注点分离原则，这使得理解应用程序的不同部分变得更加困难。
可扩展性 – 当应用程序增长时，添加新路由将成为一项挑战，这会导致更长的开发时间。
测试 – 由于所有路由都在同一个文件中，因此很难测试单个路由组，这使得更难确保应用程序正常工作。

使用 Express 路由器

步骤 1. 在项目目录中创建一个名为 routes 的新目录

cd express-router-demo
mkdir routesCode language: JavaScript (javascript)

步骤 2. 在 routes 目录中定义一个名为 todos.js 的新文件

import express from 'express';
const router = express.Router();

router.get('/todos', (req, res) => {
  res.send('A list of todo items');
});

router.post('/todos', (req, res) => {
  res.send('Create a new todo item');
});

router.put('/todos/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Update the todo item with id ${id}`);
});

router.delete('/todos/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Delete the todo item with id ${id}`);
});

router.get('/todos/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Get the todo item with id ${id}`);
});

export default router;Code language: JavaScript (javascript)

它是如何工作的。

首先，从 express 库中导入 express 函数

import express from 'express';Code language: JavaScript (javascript)

其次，创建一个新的 Router 实例

const router = express.Router();Code language: JavaScript (javascript)

此 Router 实例允许您以模块化方式定义和管理路由。

第三，使用 Router 对象为 todo 资源定义 路由

router.get('/', (req, res) => {
  res.send('A list of todo items');
});

router.post('/', (req, res) => {
  res.send('Create a new todo item');
});

router.put('/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Update the todo item with id ${id}`);
});

router.delete('/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Delete the todo item with id ${id}`);
});

router.get('/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Get the todo item with id ${id}`);
});Code language: JavaScript (javascript)

在这些路由中，我们不必显式指定 /todos 或 /todos/:id，而是 / 和 /:id。此功能称为路由前缀。

路由前缀允许您使用公共路径段为路由添加前缀。我们将在 index.js 文件中很快使用路由前缀。

第四，将路由器导出为默认导出

export default router;Code language: JavaScript (javascript)

步骤 3. 修改 index.js 文件如下

import express from 'express';
import todoRoutes from './routes/todos.js';

const app = express();
const PORT = process.env.PORT || 3000;

app.use('/todos', todoRoutes);

app.listen(PORT, () => {
  console.log(`The server is listening on port ${PORT}.`);
});Code language: JavaScript (javascript)

在 index.js 文件中

首先，从 './routes/todos.js' 模块导入 todoRoutes

import todoRoutes from './routes/todos.js';Code language: JavaScript (javascript)

由于我们将 router 对象导出为 /routes/todos.js 模块的默认导出，因此在导入时可以使用任何别名。

在本例中，我们使用 todoRoutes 来使其更清晰。当应用程序增长时，您可能会有更多路由器，例如 userRoutes、noteRoutes 等。

其次，使用 app.use() 方法在 /todos 路径上挂载 todoRoutes

app.use('/todos', todoRoutes);Code language: JavaScript (javascript)

在本例中

/todos 是路径前缀。
todoRoutes 是一个路由器，因此任何对 /todos 的请求都将由 todoRoutes 中定义的相应路由处理程序处理。

路径前缀将为 /routes/todos.js 中定义的所有路由添加 /todos 前缀。

例如，GET /todos/ 将由 router.get('/', ...) 处理，而 GET /todos/:id 将由路由 router.get('/todos/:id', ...) 处理。

通过将路由从 index.js 移到 /routes/todos.js 并使用 Express 路由器，使代码更易于维护和扩展。

下载项目源代码

摘要

使用 Express 路由器将路由组织到单独的模块中，以实现更可扩展和更易于维护的代码库。

本教程是否有帮助？