了解ExpressJS路由

最新推荐文章于 2024-06-16 16:02:29 发布

cunjie3951

最新推荐文章于 2024-06-16 16:02:29 发布

阅读量222

点赞数

文章标签： java vue python nodejs servlet ViewUI

介绍

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

让我们开始吧。

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

npm init -y

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

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

假设您有下面的代码。

app.use('/user', router)

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

路线方法

在上面的代码中，您将路由方法附加到Express Router的实例。路由方法是从一种HTTP方法派生的，并且像您所做的那样附加到Express Router的实例。

Express支持以下与HTTP方法相对应的路由方法： get ， post ， put ， head ， delete ， options ， trace ， copy ， lock ， mkcol ， move ， purge ， unlock ， report ， 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段。使用在路径中指定的route参数的名称作为值的键，可以在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')
  })

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