koa-router 路由参数与前端路由的结合

栏目: Node.js · 发布时间: 5年前

内容简介:考察下面的示例:启动服务后可看到页面中展示出了从 url 中获取到的 id 参数。

koa-router 定制路由时支持通过冒号形式在 url 中指定参数,该参数会挂载到 context 上然后可通过 context.params.paramName 方便地获取。

考察下面的示例:

var Koa = require("koa");
var Router = require("koa-router");

var app = new Koa();
var router = new Router();

router.get("/user/:id", async function(ctx, next) {
  const userId = ctx.params.id;
  ctx.body = `user id is:${userId}`;
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(3000);

console.log("server started at http:localhost:3000");

启动服务后可看到页面中展示出了从 url 中获取到的 id 参数。

koa-router 路由参数与前端路由的结合

路由参数的获取展示

现在来考虑另一种情况,即路由中支持前端路由的情况。

即把现在的 url 由 /user/:id 的形式扩展成 /user/:id/foo/bar ,这里 /foo/bar 部分可以是任何路由,作为前端处理的路由部分。

为了实现这样的前端路由部分,服务端路由的配置需要借助正则来进行,

- router.get("/user/:id", async function(ctx, next) {
+ router.get(["/user/:id", /\/user\/([\w|\d]+)\/.*/], async function(ctx, next) {
  const userId = ctx.params.id;
  ctx.body = `user id is:${userId}`;
});

这里将路由中 url 由单个字符串变成了数组形式,第一个还是原来的路由,这样正常的通过 /user/1 形式过来的页面能命中该路由。同时添加 /\/user\/([\w|\d]+)\/.*/ 部分,因为正则情况下不再支持路由中通过冒号进行参数的配置,所以这里 /user/ 后跟随的 id 也需要使用正则来替换掉。

但正则匹配下的路由就不能通过 context.params 来访问 url 上的参数了。不过好在可通过在正则中定义匹配组(Capturing Groups)的形式来定义参数,即其中 ([\w|\d]+) 括号包裹的部分,称为一个匹配组,一个匹配组是会自动被挂载到 context.params 上的,只是不像通过冒号定义的参数那样会有一个名字,这种形式的参数按照匹配到的顺序形成一个数组赋值到 context.params ,所以访问第一个匹配组形成的参数可通过 context.params[0] 来获取。

于是上面的代码稍加修正后,就能够正确处理来自命名参数(通过冒号匹配)或正则参数形成的 query 参数了。

- router.get("/user/:id", async function(ctx, next) {
+ router.get(["/user/:id", /\/user\/([\w|\d]+)\/.*/], async function(ctx, next) {
-  const userId = ctx.params.id;
+  const userId = ctx.params.id || ctx.params[0];
  ctx.body = `user id is:${userId}`;
});

最后完整的代码会是这样:

var Koa = require("koa");
var Router = require("koa-router");

var app = new Koa();
var router = new Router();

router.get(["/user/:id", /\/user\/([\w|\d]+)\/.*/], async function(ctx, next) {
  const userId = ctx.params.id || ctx.params[0];
  ctx.body = `user id is:${userId}`;
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(3000);

console.log("server started at http:localhost:3000");

此时访问以下连接进行测试,

均能正确命中页面并成功获取到路由中的参数。

koa-router 路由参数与前端路由的结合

正则路由及路由参数的获取


以上所述就是小编给大家介绍的《koa-router 路由参数与前端路由的结合》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

我看电商

我看电商

黄若 / 电子工业出版社 / 2013-6-1 / 39.00元

本书是作者近30年从事及电子商务管理的总结和分享。 近年来电商行业在中国迅猛发展,2012年网络市场规模达到13,000亿人民币,诞生了淘宝、天猫、京东、、凡客、唯品会……等一大批全新的网络公司,电子商务正在日益深入的影响着越来越多人的生活。同时,这个行业连年亏损,顾客服务良莠不齐,也广为人们所关注。作者从地面到电子商务,从跨国公司高管到管理民营企业,从开创天猫模式到带领上市,被业界称为中国......一起来看看 《我看电商》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

SHA 加密
SHA 加密

SHA 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具