了解ExpressJS路由(学习如何使用Express Router)

介绍

Express 是一个流行的 node.js 网络框架。在其功能中，它为路由提供了一个包装器。Express Router 有助于创建路由处理程序。在本教程中，您将学习如何使用 Express Router。

让我们开始吧。

为您的应用程序创建一个新目录。运行命令在刚刚创建的目录中初始化 npm。

npm init -y

您需要的唯一依赖项是 express，因此请继续安装它。

npm install --save express

最后，您的 package.json 文件应如下所示。

#package.json

{
  "name": "express-router",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.2"
  }
}

现在创建一个名为 index.js 的新文件，这将是您在package.json中所述的入口文件。

现在，您只需要这样的基本设置：

#index.js

const express = require('express')

const app = express()

app.listen(3000, () => {
  console.log(`Server running at port 3000`)
})

基本路由

首先创建一些基本路线，如下所示。

#index.js

...

const router = express.Router() // 1

router.get('/', (req, res) => {  // 2
  res.send('This is the homepage!')
})

router.post('/contact', (req, res) => {  // 3
  res.send('This is the contact page with a POST request')
})

app.use('/', router)  // 4

...

创建 Express Router 的一个实例。该实例被设置为一个名为路由器的变量。每当您要创建路线时，都会使用此变量。
为 GET 方法定义到应用程序根的新路由。它附加到 Express Router 类的实例。
为 POST 方法定义了到应用程序联系页面的新路由。它附加到 Express Router 类的实例。
这会安装一些用于处理路由的中间件。在这里，您告诉您的应用程序，您希望对与 path 对应的应用程序发出的每个请求使用路由器（它是 Express 路由器的实例）'/'。如果您未能在此中间件上挂载路径，则会针对对应用程序发出的每个请求执行该路径。

假设您有下面的代码。

app.use('/user', router)

这将匹配以下所有内容：/user/profile、user/profile/edit、user/dashboard/article/view等。

路由方法

在上面的代码中，您将路由方法附加到 Express Router 的实例。route 方法派生自 HTTP 方法之一，并像您一样附加到 Express Router 的实例。

Express 支持以下与 HTTP 方法对应的路由方法：get , post , put , head , delete , options , trace , copy , lock , mkcol , move , purge , unlock , report , mkactivity , checkout , merge , m-search ,通知、订阅、取消订阅、补丁和搜索.

有一种路由方法 app.all()不是从任何 HTTP 方法派生的。为所有请求方法的指定路径处的函数加载此路由方法。

假设您的应用程序中有以下代码。

app.all('/books', (req, res) => {
  res.send('This accesses the book section')
})

当您使用 GET、POST、PUT 或任何 HTTP 请求方法时，将对“/books”的请求执行此操作。

路线路径

路由路径用于定义可以发出请求的端点。它通过请求方法的组合来实现。在 Express 中，路由路径可以是字符串模式或正则表达式。

以下是您可以添加到index.js文件中的示例。

#index.js

router.get('/about', (req, res) => {
  res.send('This route path will match to /about')
})

router.get('/profile.txt', (req, res) => {
  res.send('This route will match to /profile.txt')
})

让我们看看使用字符串模式的路由路径。

router.get('/ab+xy', (req, res) => { // 1
  res.send('ab+xy')
})

router.get('/ab(xy)?z', (req, res) => { // 2
  res.send('/ab(xy)?z')
})

该路由将匹配abxy、abbxy、abbbxy等。
该路线将匹配/ abz和/ abxyz。

路由参数

这些用于捕获在 URL 中某个位置指定的值。它们被称为 URL 段。捕获的值在req.params对象中可用，使用路径中指定的路由参数的名称作为值的键。

这是一个例子。

如果您的应用程序中有类似的路由路径： /users/:userId/articles/:articleId

请求的 URL 将如下所示：http://localhost:3000/users/19/articles/104

在 req.params 中，将提供以下内容： { "userId": "19", "bookId": "104" }

继续并使用上面的路由路径在您的应用程序中创建一个新路由。

router.get('/users/:userId/articles/:articleId', (req, res) => {
  res.send(req.params)})

启动服务器并将浏览器指向http://localhost:3000/users/19/articles/104。您将看到req.params浏览器中显示的对象。

路由参数的名称必须由单词字符 ([A-Za-z0-9_])组成。

让我们更进一步！

假设您想要一个名为的路由路径/users/:name，其中用户的名称被传递到 URL 中，应用程序将名称与字符串一起显示。您认为如何实现？

来吧，先自己尝试一下。

这是路线的样子。

router.get('/users/:name', (req, res) => {
  res.send(`Welcome, ${req.params.name}!`)})

当您访问http://localhost:3000/users/vivian时，您应该会看到Welcome, vivian ！显示在浏览器中。

登录路径

让我们看看如何在 Express 中创建登录路由。您的登录路由需要在单个路由路径上执行两个操作。这些动作将通过使用的路由方法来区分。这是它的外观。

router.get('/login', (req, res) => {
  res.send('This is should lead to the login form')
})

router.post('/login', (req, res) => {
  res.send('This is used in processing the form')
})

完成此操作后，您的商店表单应该有一个操作，其值是使用 HTTP POST 方法定义的路由。这是它的外观。

<form action="/login" method="POST">
  </form>

单击表单的提交按钮时，将调用指定的路由器。上述两种路由路径之间的区别在于 HTTP POST。这是应用程序如何确定负责处理通过表单传递的数据的方式。

可以体验到的另一个方面是编辑和更新资源。

app.route()

app.route()可用于为特定路由路径创建路由处理程序链。

使用登录路由的示例，这是您将如何使用app.route().

app.route('/login')
  .get((res, req) => {
    res.send('This is should lead to the login form')
  })

  .post((res, req) => {
    res.send('This is used in processing the form')
  })

您可以添加比我们上面更多的路由处理程序。