MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Node.js Express 路由参数与查询字符串解析

2023-12-263.0k 阅读

Node.js Express 路由参数与查询字符串解析

在前端开发中,Node.js 搭配 Express 框架是构建服务器端应用的常见选择。路由参数与查询字符串在处理 HTTP 请求并返回相应响应的过程中扮演着至关重要的角色。它们帮助我们创建动态的 URL 并从客户端获取数据,以便服务器做出针对性的响应。接下来,我们将深入探讨 Node.js Express 中的路由参数与查询字符串解析。

路由参数

路由参数是 URL 中动态部分的值。例如,在一个用户详情页面的 URL 中,/users/123,其中 123 就是路由参数,代表特定用户的 ID。在 Express 中,我们可以轻松定义包含路由参数的路由。

  1. 定义路由参数 假设我们正在构建一个简单的博客应用,我们想要通过文章的 ID 来访问特定文章的详情。我们可以这样定义路由:
const express = require('express');
const app = express();

app.get('/articles/:articleId', (req, res) => {
    const articleId = req.params.articleId;
    res.send(`You are viewing article with ID: ${articleId}`);
});

const port = 3000;
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

在上述代码中,/:articleId 定义了一个路由参数。req.params 是一个对象,包含了从 URL 中提取的所有路由参数。当客户端访问 /articles/456 时,req.params.articleId 的值将为 456

  1. 多个路由参数 有时候,我们可能需要在 URL 中包含多个路由参数。例如,在一个电商应用中,产品可能按照类别和产品 ID 来访问,如下所示:
app.get('/products/:category/:productId', (req, res) => {
    const category = req.params.category;
    const productId = req.params.productId;
    res.send(`You are viewing product ${productId} in category ${category}`);
});

现在,如果客户端访问 /products/electronics/789req.params.category 将是 electronicsreq.params.productId 将是 789

  1. 路由参数的命名规则 路由参数的命名可以遵循驼峰命名法、下划线命名法等常见的命名约定。但是,需要注意的是,参数名不能包含特殊字符,并且要具有描述性,以便清晰地表达参数的含义。例如,/:user_id/:userId 都是合理的命名,但 /:user-id 是不允许的,因为 - 在路由参数命名中是无效字符。

  2. 路由参数的类型 默认情况下,从 req.params 中获取的路由参数值都是字符串类型。如果我们需要使用其他类型,比如数字,我们需要进行类型转换。例如:

app.get('/numbers/:number', (req, res) => {
    const num = parseInt(req.params.number);
    if (isNaN(num)) {
        res.status(400).send('Invalid number');
    } else {
        res.send(`The number is: ${num}`);
    }
});

在上述代码中,我们将从 URL 中获取的字符串类型的路由参数转换为数字类型,并进行了有效性检查。

  1. 路由参数与中间件 路由参数可以在中间件中使用。中间件函数可以访问 req.params 对象,对路由参数进行验证、转换或基于参数执行其他操作。例如,我们可以创建一个中间件来验证文章 ID 是否为有效的正整数:
const validateArticleId = (req, res, next) => {
    const articleId = parseInt(req.params.articleId);
    if (isNaN(articleId) || articleId <= 0) {
        return res.status(400).send('Invalid article ID');
    }
    req.validArticleId = articleId;
    next();
};

app.get('/articles/:articleId', validateArticleId, (req, res) => {
    res.send(`You are viewing article with valid ID: ${req.validArticleId}`);
});

在这个例子中,validateArticleId 中间件首先检查 articleId 是否为有效的正整数。如果有效,它将转换后的 ID 存储在 req.validArticleId 中,并调用 next() 将控制权传递给下一个中间件或路由处理函数。

  1. 路由参数的作用域 路由参数的作用域仅限于当前匹配的路由及其后续的中间件和处理函数。这意味着在不同的路由中,相同名称的路由参数是相互独立的。例如:
app.get('/users/:userId', (req, res) => {
    const userId = req.params.userId;
    res.send(`User ID in users route: ${userId}`);
});

app.get('/posts/:userId', (req, res) => {
    const userId = req.params.userId;
    res.send(`User ID in posts route: ${userId}`);
});

在上述代码中,虽然两个路由都使用了 :userId 作为路由参数,但它们之间没有直接关联,各自处理自己路由中的参数值。

  1. 嵌套路由中的路由参数 在 Express 中,我们可以创建嵌套路由。在嵌套路由中,路由参数的传递和使用也有其特定的规则。例如,假设我们有一个博客应用,文章可以有评论,我们可以这样定义嵌套路由:
const articlesRouter = express.Router();
const commentsRouter = express.Router();

commentsRouter.get('/:commentId', (req, res) => {
    const commentId = req.params.commentId;
    res.send(`You are viewing comment with ID: ${commentId}`);
});

articlesRouter.get('/:articleId/comments', (req, res) => {
    const articleId = req.params.articleId;
    res.send(`Comments for article ${articleId}`);
});

articlesRouter.use('/:articleId/comments', commentsRouter);

app.use('/articles', articlesRouter);

在这个例子中,commentsRouter 嵌套在 articlesRouter 中。当客户端访问 /articles/123/comments/456 时,articlesRouter 中的 :articleId123commentsRouter 中的 :commentId456。这样,我们可以方便地根据文章 ID 获取其相关的评论,并根据评论 ID 查看特定评论的详情。

  1. 路由参数与 RESTful 架构 路由参数在 RESTful 架构中起着关键作用。RESTful 架构提倡使用不同的 HTTP 方法(GET、POST、PUT、DELETE 等)对资源进行操作,而路由参数用于标识特定的资源。例如,使用 GET 方法获取特定用户的信息:
app.get('/users/:userId', (req, res) => {
    const userId = req.params.userId;
    // 从数据库中获取用户信息
    const user = { id: userId, name: 'John Doe' };
    res.json(user);
});

app.put('/users/:userId', (req, res) => {
    const userId = req.params.userId;
    // 根据请求体中的数据更新用户信息
    res.send(`User ${userId} updated`);
});

app.delete('/users/:userId', (req, res) => {
    const userId = req.params.userId;
    // 从数据库中删除用户
    res.send(`User ${userId} deleted`);
});

通过这种方式,我们可以通过路由参数明确指定要操作的资源,遵循 RESTful 架构的原则,使 API 更加清晰和易于维护。

查询字符串

查询字符串是 URL 中 ? 后面的部分,用于向服务器传递额外的参数。例如,/search?query=javascript&page=1,其中 query=javascriptpage=1 就是查询字符串参数。

  1. 解析查询字符串 在 Express 中,我们可以通过 req.query 对象来访问查询字符串参数。下面是一个简单的示例:
app.get('/search', (req, res) => {
    const query = req.query.query;
    const page = req.query.page;
    res.send(`Searching for ${query} on page ${page}`);
});

当客户端访问 /search?query=nodejs&page=2 时,req.query.query 将是 nodejsreq.query.page 将是 2req.query 是一个普通的 JavaScript 对象,其中属性名是查询字符串参数名,属性值是对应的参数值。

  1. 多个查询字符串参数 一个 URL 可以包含多个查询字符串参数,它们之间用 & 分隔。例如:
app.get('/products', (req, res) => {
    const category = req.query.category;
    const price = req.query.price;
    const sort = req.query.sort;
    res.send(`Filtering products by category: ${category}, price: ${price}, sort: ${sort}`);
});

如果客户端访问 /products?category=electronics&price=100&sort=ascreq.query.category 将是 electronicsreq.query.price 将是 100req.query.sort 将是 asc

  1. 查询字符串参数的类型 与路由参数类似,从 req.query 中获取的参数值默认都是字符串类型。如果需要使用其他类型,我们需要进行类型转换。例如,如果 price 参数应该是数字类型:
app.get('/products', (req, res) => {
    const category = req.query.category;
    const price = parseFloat(req.query.price);
    const sort = req.query.sort;
    if (isNaN(price)) {
        res.status(400).send('Invalid price');
    } else {
        res.send(`Filtering products by category: ${category}, price: ${price}, sort: ${sort}`);
    }
});

在这个例子中,我们将 price 参数从字符串转换为数字,并进行了有效性检查。

  1. 查询字符串与数组 有时候,我们可能需要传递多个相同名称的查询字符串参数,这些参数会被解析为数组。例如,在一个多标签搜索的场景中:
app.get('/search', (req, res) => {
    const tags = req.query.tag;
    res.send(`Searching with tags: ${tags.join(', ')}`);
});

如果客户端访问 /search?tag=javascript&tag=nodejs&tag=expressreq.query.tag 将是一个数组 ['javascript', 'nodejs', 'express']

  1. 查询字符串与对象 除了简单的键值对和数组,查询字符串也可以表示复杂的对象结构。例如,假设我们有一个配置对象,我们可以这样传递:
app.get('/config', (req, res) => {
    const config = req.query;
    res.send(`Config: ${JSON.stringify(config)}`);
});

如果客户端访问 /config?server=localhost&port=3000&protocol=httpreq.query 将是一个对象 { server: 'localhost', port: '3000', protocol: 'http' }

  1. 查询字符串与路由参数的结合使用 在实际应用中,路由参数和查询字符串常常结合使用。例如,在一个博客应用中,我们可以通过文章 ID 获取文章详情,并通过查询字符串传递额外的参数,如是否需要获取相关文章:
app.get('/articles/:articleId', (req, res) => {
    const articleId = req.params.articleId;
    const related = req.query.related === 'true';
    res.send(`Article ${articleId}, related: ${related}`);
});

当客户端访问 /articles/123?related=true 时,req.params.articleId123req.query.relatedtrue(经过类型转换后)。

  1. 处理复杂的查询字符串 有时候,查询字符串可能非常复杂,包含多层嵌套的对象或数组。在这种情况下,我们可以使用第三方库,如 qs 来更好地解析和处理查询字符串。qs 库提供了更强大的解析功能,能够处理复杂的结构。首先,安装 qs 库:
npm install qs

然后,在 Express 应用中使用它:

const qs = require('qs');
app.get('/complex', (req, res) => {
    const parsed = qs.parse(req._parsedUrl.query);
    res.send(`Parsed query: ${JSON.stringify(parsed)}`);
});

假设客户端访问 /complex?user[0][name]=John&user[0][age]=30&user[1][name]=Jane&user[1][age]=25qs.parse 方法将能够正确解析这个复杂的查询字符串,返回一个包含嵌套对象和数组的 JavaScript 对象。

  1. 安全性考虑 在处理查询字符串时,需要注意安全性。查询字符串中的参数值可能来自不可信的客户端,因此我们应该进行适当的验证和过滤,以防止 SQL 注入、XSS(跨站脚本攻击)等安全漏洞。例如,如果查询字符串参数用于构建 SQL 查询,我们应该使用参数化查询而不是直接拼接字符串。对于可能包含 HTML 或 JavaScript 代码的参数,我们应该进行转义或过滤,以确保不会在页面上执行恶意脚本。

  2. 查询字符串与 SEO 查询字符串在搜索引擎优化(SEO)中也有一定的影响。搜索引擎通常会对 URL 中的查询字符串进行分析,但过长或复杂的查询字符串可能会被搜索引擎视为不友好。因此,在设计 URL 时,我们应该尽量保持查询字符串简洁明了,避免使用过多无意义的参数。同时,对于一些重要的参数,可以考虑将其转换为路由参数,以提高 URL 的可读性和 SEO 友好性。例如,将 /search?query=javascript 改为 /search/javascript,这样的 URL 不仅更简洁,也更容易被搜索引擎理解和索引。

  3. 查询字符串的编码与解码 查询字符串中的特殊字符需要进行编码,以确保 URL 的正确性。在 JavaScript 中,我们可以使用 encodeURIComponent 方法对字符串进行编码,使用 decodeURIComponent 方法进行解码。Express 在解析查询字符串时会自动对其进行解码,但在某些情况下,我们可能需要手动进行编码和解码操作。例如,如果我们要构建一个包含特殊字符的查询字符串参数,我们需要先对其进行编码:

const specialChar = '!@#$%^&*()_+-=[]{}|;:\'",./<>?';
const encodedChar = encodeURIComponent(specialChar);
const url = `/example?param=${encodedChar}`;
console.log(url);

当服务器接收到这样的 URL 并解析查询字符串后,如果需要再次使用这个参数值并在其他地方构建 URL,可能需要对其进行解码:

app.get('/example', (req, res) => {
    const param = req.query.param;
    const decodedParam = decodeURIComponent(param);
    res.send(`Decoded param: ${decodedParam}`);
});

通过正确的编码和解码操作,可以确保查询字符串在传输和处理过程中的准确性和安全性。

  1. 查询字符串与缓存 查询字符串的变化会影响缓存策略。如果一个页面的内容根据查询字符串参数而变化,那么在设置缓存时需要特别小心。例如,如果一个搜索结果页面根据 querypage 参数返回不同的内容,简单地对整个页面进行缓存可能会导致返回错误的结果。在这种情况下,我们可以根据查询字符串参数来设置不同的缓存键,或者使用更细粒度的缓存策略,如仅缓存不依赖于查询字符串的部分内容。一些缓存中间件,如 express - cache - response,可以帮助我们更灵活地处理基于查询字符串的缓存。例如:
const cacheResponse = require('express - cache - response');
const cache = cacheResponse({
    statusCodes: [200],
    expiration: 60 * 1000 // 1 minute
});

app.get('/search', cache, (req, res) => {
    const query = req.query.query;
    const page = req.query.page;
    // 执行搜索逻辑并返回结果
    res.send(`Searching for ${query} on page ${page}`);
});

在这个例子中,cacheResponse 中间件会根据请求的 URL(包括查询字符串)来缓存响应。如果相同的查询字符串再次出现,将直接从缓存中返回响应,提高了响应速度。

  1. 查询字符串与跨域请求 在处理跨域请求时,查询字符串参数也需要正确处理。一些浏览器在跨域请求时可能会对查询字符串的长度或内容有限制。此外,如果查询字符串中包含敏感信息,如认证令牌,需要确保在跨域传输过程中的安全性。通常,可以通过设置合适的 CORS(跨域资源共享)头来允许跨域请求,并对查询字符串进行加密或其他安全处理。例如,在 Express 中设置 CORS 头:
const cors = require('cors');
app.use(cors({
    origin: 'http://example.com',
    methods: ['GET', 'POST'],
    allowedHeaders: ['Content - Type', 'Authorization']
}));

这样,来自 http://example.com 的跨域请求可以访问服务器,并且在请求中包含的查询字符串参数可以被正确处理。同时,对于包含敏感信息的查询字符串,建议使用 HTTPS 协议进行传输,以防止数据被窃取或篡改。

  1. 查询字符串的优化 为了提高应用的性能和用户体验,对查询字符串进行优化是很有必要的。首先,减少不必要的查询字符串参数,只传递真正需要的数据。这不仅可以减少 URL 的长度,还可以降低服务器处理请求的开销。其次,对查询字符串参数进行合理的排序,有助于提高缓存命中率和服务器端的处理效率。例如,将经常变化的参数放在后面,因为缓存通常是基于整个 URL 的,如果前面的参数不变,缓存就更有可能命中。另外,对于一些默认值的参数,可以在服务器端进行处理,而不是在 URL 中显式传递。例如,如果搜索结果默认按相关性排序,不需要在每次请求的查询字符串中都包含 sort=relevance,而是在服务器端代码中设置默认值。

  2. 查询字符串与 Web 应用架构 查询字符串在 Web 应用架构中扮演着连接客户端和服务器端的重要角色。它允许客户端向服务器传递各种动态参数,服务器根据这些参数返回相应的内容。在单页应用(SPA)中,查询字符串常常用于导航和传递状态信息。例如,在一个使用 React Router 的 SPA 中,查询字符串可以用于传递搜索关键词、筛选条件等信息。同时,服务器端需要能够正确解析和处理这些查询字符串,以提供准确的响应。在微服务架构中,不同的服务之间传递数据时,查询字符串也可能作为一种轻量级的数据传递方式。例如,一个产品服务可能接收来自前端或其他服务的查询字符串参数,以获取特定产品的详细信息或执行过滤操作。

  3. 查询字符串与移动应用开发 在移动应用开发中,无论是原生应用还是混合应用,与服务器进行交互时也经常会使用查询字符串。例如,一个电商移动应用在请求产品列表时,可能会通过查询字符串传递参数,如分类、价格范围、排序方式等。移动应用开发者需要注意 URL 的长度限制,特别是在一些老版本的移动设备或网络环境下。此外,由于移动应用的网络环境可能不稳定,对查询字符串参数的处理需要更加健壮,以防止因网络问题导致请求失败或数据丢失。同时,为了提高用户体验,移动应用可以根据用户的操作自动生成合理的查询字符串,减少用户手动输入的负担。例如,在一个地图应用中,用户在地图上进行缩放和移动操作时,应用可以自动将地图的中心坐标、缩放级别等信息作为查询字符串参数发送给服务器,以获取相应区域的地图数据。

通过深入理解和合理使用路由参数与查询字符串,我们能够构建更加灵活、高效和安全的 Node.js Express 应用,满足不同场景下的业务需求。无论是处理简单的页面请求,还是构建复杂的 RESTful API,路由参数和查询字符串都是不可或缺的重要组成部分。在实际开发中,我们需要根据具体的需求和场景,精心设计 URL 结构,正确解析和处理这些参数,以提供优质的用户体验和可靠的服务。