介绍

本文将研究如何在 Express 项目中处理路由和 HTTP 请求方法。路由处理用户导航到整个应用程序中的各种 URL。HTTP 是Hyper Text Transfer Protocol 的缩写，用于将数据从 Express 服务器传输到 Web 浏览器并提供便利。

您将学习如何定义路线和使用HTTP请求方法GET，POST，PUT和DELETE操纵数据。

先决条件

要完成本教程，了解 Node.js 会有所帮助，但不是必需的。如果您想了解有关 Node.js 的更多信息，请查看如何在 Node.js 中编码系列。

设置您的项目

由于 Express 是一个 Node.js 框架，因此在执行后续步骤之前，请确保您已从 Node.js 安装了Node.js。在终端中运行以下命令：

创建一个以node-express-routing您的项目命名的新目录：

mkdir node-express-routing

切换到新目录：

cd node-express-routing

使用默认值初始化一个新的 Node 项目。这将包含package.json用于访问依赖项的文件：

npm init -y

创建您的入口文件，index.js. 您将在此处处理路由和 HTTP 请求方法：

touch index.js

安装 Express 和nodemon作为依赖项。每当文件更改时，您将使用nodemon来不断地重新启动 Express 项目index.js。

npm install express --save
npm install nodemon --save-dev

package.json使用您首选的文本编辑器打开您的文件并更新您的start脚本以包含nodemon您的index.js文件：

 {
  "name": "node-express-routing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js"
  },
  "keywords": [],
  "author": "Paul Halliday",
  "license": "MIT"
}

这将允许您使用npm start终端中的命令来启动 Express 服务器并更新更改。

既然您已经设置了项目并配置nodemon为在检测到index.js文件更改时刷新，您就可以启动 Express 服务器了。

启动您的 Express 服务器

您将在 Express 服务器中处理集成路由和 HTTP 请求方法的逻辑。您将设置并运行服务器以在浏览器中可视化您的项目。

要启动您的 Express 服务器，需要在您的index.js文件中使用Express并将实例存储到app变量中。然后，声明一个PORT变量并指定地址:3000。

const express = require('express');

const app = express();
const PORT = 3000;

app.use(express.json()); 

app.listen(PORT, () => console.log(`Express server currently running on port ${PORT}`));

其次，追加.listen()到app并插入PORT作为第一个参数，然后一个回调函数。Express 中间件.listen()从PORT变量中的地址创建一个本地浏览器，以可视化您的更改。

还包括express.json()作为app.use(). 这是通过您的 HTTP 请求解析传入的数据。早期版本依赖于body-parser依赖关系，但从那时起 Express 包含了一个用于解析数据的内置中间件。

在终端中运行以下命令以启动项目：

npm start

您的项目已加载到http://localhost:3000. 导航到您的浏览器，并注意以下几点：

这是运行 Express 实例的开始。让我们来定义 HTTP 方法来填充您的浏览器。

定义您的 HTTPGET请求方法

为了查看您的项目，您可以通过GET请求（一种 HTTP 方法）从 Express 服务器发送信息。

在 中index.js，附加.get()到您的app变量，指定匿名路由，并包含访问request和response参数的回调：

 app.get('/', (request, response) => {
  response.send('Hello');
});

该request参数包含有关GET请求的信息，同时response.send()将数据分派到浏览器。其中的数据response.send()可以是字符串、对象或数组。

现在您已经实现了一个GET请求，让我们看看路由和其他 HTTP 方法。

了解路线

GET在您的index.js文件中创建新请求，并定义路由'/accounts'和'/accounts/:id'. accounts用一些模拟数据声明一个数组：

let accounts = [
  {
    "id": 1,
    "username": "paulhal",
    "role": "admin"
  },
  {
    "id": 2,
    "username": "johndoe",
    "role": "guest"
  },
  {
    "id": 3,
    "username": "sarahjane",
    "role": "guest"
  }
];

app.get('/accounts', (request, response) => {
  response.json(accounts);
});

app.get('/accounts/:id', (request, response) => {
  const accountId = Number(request.params.id);
  const getAccount = accounts.find((account) => account.id === accountId);

  if (!getAccount) {
    response.status(500).send('Account not found.')
  } else {
    response.json(getAccount);
  }
});

如果您导航到http://localhost:3000/accounts您将收到阵列中的所有帐户：

Output
[
  {
    "id": 1,
    "username": "paulhal",
    "role": "admin"
  },
  {
    "id": 2,
    "username": "johndoe",
    "role": "guest"
  },
  {
    "id": 3,
    "username": "sarahjane",
    "role": "guest"
  }
]

您还可以使用/:id端点过滤帐户 ID 。Express 将端点中的 ID/:id视为用户参数的占位符，并匹配该值。

导航到 后http://localhost:3000/accounts/3，您将获得一个与/:id参数匹配的帐户：

Output
{
  "id": 3,
  "username": "sarahjane",
  "role": "guest"
}

设计POST、PUT和DELETEHTTP 请求方法

HTTP方法使用到您的数据提供额外的功能POST，PUT和DELETE请求。该POST请求方法会在您的服务器的新数据，同时PUT更新现有的信息。的DELETE请求方法删除指定的数据。

POST

要在accounts数组中创建新数据，您可以集成一个POST请求方法。

在 中index.js，附加.post()到您的app变量，并将路由'/accounts'作为第一个参数包含在内：

app.post('/accounts', (request, response) => {
  const incomingAccount = request.body;

  accounts.push(incomingAccount);

  response.json(accounts);
})

您会将POST请求中的任何传入数据推送到accounts数组中，并将响应作为 JSON 对象发送。

您的accounts阵列现在拥有一个新用户：

Output
[
  {
    "id": 1,
    "username": "paulhal",
    "role": "admin"
  },
  {
    "id": 2,
    "username": "johndoe",
    "role": "guest"
  },
  {
    "id": 3,
    "username": "sarahjane",
    "role": "guest"
  },
  {
    "id": 4,
    "username": "davesmith",
    "role": "admin"
  }
]

PUT

您可以通过PUT请求编辑和更新特定帐户。

在 中index.js，附加.put()到您的app变量并将路由'/accounts/:id'作为第一个参数包含在内。您将找到输入的帐户 ID，并设置条件以使用新数据进行更新：

app.put('/accounts/:id', (request, response) => {
  const accountId = Number(request.params.id);
  const body = request.body;
  const account = accounts.find((account) => account.id === accountId);
  const index = accounts.indexOf(account);

  if (!account) {
    response.status(500).send('Account not found.');
  } else {
    const updatedAccount = { ...account, ...body };

    accounts[index] = updatedAccount;

    response.send(updatedAccount);
  }
});

您现在可以更新accounts数组中的数据。如果用户更改了他们的"role"：

{
    "role": "guest"
}

请注意，"role"更新到guestfrom adminin http://localhost:3000/accounts/1：

Output
{
  "id": 1,
  "username": "paulhal",
  "role": "guest"
}

DELETE

您可以使用DELETE请求方法删除用户和数据。

在 中index.js，附加.delete()到您的app变量，并'/accounts/:id'作为第一个参数包含在内。您将过滤accounts数组并返回要删除的帐户。

 app.delete('/accounts/:id', (request, response) => {
  const accountId = Number(request.params.id);
  const newAccounts = accounts.filter((account) => account.id != accountId);

  if (!newAccounts) {
    response.status(500).send('Account not found.');
  } else {
    accounts = newAccounts;
    response.send(accounts);
  }
});

如果你发送一个DELETE请求http://localhost:3000/accounts/1，这将删除与该帐户/:id从1accounts阵列。

结论

在 Express 服务器中创建、更新和删除用户和数据时，指定路由和使用 HTTP 请求方法有助于产生额外的性能。