koa-router路由参数和前端路由的结合详解


Posted in Javascript onMay 19, 2019

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");

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

  • http://localhost:3000/user/1
  • http://localhost:3000/user/2/foo
  • http://localhost:3000/user/3/foo/bar

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

koa-router路由参数和前端路由的结合详解

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 #Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 #Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 #Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 #Javascript
vue+高德地图写地图选址组件的方法
May 18 #Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 #Javascript
js实现图片推拉门效果代码实例
May 18 #Javascript
You might like
php+oracle 分页类
2006/10/09 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
PHP实现微信提现功能
2018/09/30 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
Python实现简单的可逆加密程序实例
2015/03/05 Python
python中退出多层循环的方法
2018/11/27 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
个人收入证明范本
2014/01/12 职场文书
省文明单位申报材料
2014/05/08 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
打架检讨书范文
2015/01/27 职场文书
杭白菊导游词
2015/02/10 职场文书
农业项目投资意向书
2015/05/09 职场文书
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
python脚本框架webpy模板赋值实现
2021/11/20 Python
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技
Nginx配置之禁止指定IP访问
2022/05/02 Servers