koa学习之路二

一、Koa 路由

路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET、POST 等)组成的,涉及到应用如何响应客户端对某个网站节点的访问。

通俗的讲:路由就是根据不同的 URL 地址,加载不同的页面实现不同的功能。

Koa 中的路由和 Express 有所不同,在 Express 中直接引入 Express 就可以配置路由,但是在 Koa 中我们需要安装对应的 koa-router 路由模块来实现。

npm install koa-router --save

我们接着上一节的项目目录来编写,将我们的 app.js 文件改为如下:

//引入 koa模块
var Koa = require(‘koa‘);
var Router = require(‘koa-router‘);

//实例化
var app = new Koa();
var router = new Router();

//配置路由
router.get(‘/‘, async (ctx) => {
    // ctx  上下文 context ,包含了request 和response等信息
    // 返回数据    相当于:原生里面的res.writeHead()  res.end()
    ctx.body = ‘首页‘;
});
router.get(‘/news‘, async (ctx) => {
    ctx.body = "新闻页面";
});

//启动路由
app.use(router.routes());
app.use(router.allowedMethods());
/**
 router.allowedMethods()作用: 这是官方文档的推荐用法,我们可以
 看到 router.allowedMethods()用在了路由匹配 router.routes()之后,所以在当所有
 路由中间件最后调用.此时根据 ctx.status 设置 response 响应头
 可以配置也可以不配置,建议配置,
 */

app.listen(3000);

在上面的代码中我们引入了 koa-router 模块来配置我么们的路由,具体操作如上,我们通过 router.get() 的方式定义了两个路由地址 "/" 和 "/news",在调用路由的页面分别返回不同的内容 ,最终结果如下:

当我们在本地启动项目后,在端口 3000 后输入 "/",表示的依旧是该页面,当我们在端口后输入 "/news" 时结果如下:

可以看出不同的路由能够显示不同的内容,说明我们的路由已经配置好了。

但是在实际应用中我们会看到浏览器的 url 地址是这样的 http://localhost:3000/news?id=1&title=aaa

那我们在后台改如何接收到 ? 后面的传值呢,如下代码:

//引入 koa模块
var Koa = require(‘koa‘);
var Router = require(‘koa-router‘);

//实例化
var app = new Koa();
var router = new Router();

//配置路由
router.get(‘/‘, async (ctx) => {
    // ctx  上下文 context ,包含了request 和response等信息
    // 返回数据    相当于:原生里面的res.writeHead()  res.end()
    ctx.body = ‘首页‘;
});
router.get(‘/news‘, async (ctx) => {
    /**
     在 koa2 中 GET 传值通过 request 接收,但是接收的方法有两种:query 和 querystring。
     query:返回的是格式化好的参数对象。
     querystring:返回的是请求字符串。
     */

    //从ctx中读取get传值
    console.log(ctx.url);   // /news?id=1&title=aaa
    console.log(ctx.query);  // { id: ‘1‘, title: ‘aaa‘ } 获取的是对象   用的最多的方式      ******推荐
    console.log(ctx.querystring);  // id=1&title=aaa      获取的是一个字符串

    //ctx里面的request里面获取get传值
    console.log(ctx.request.url);   // /news?id=1&title=aaa
    console.log(ctx.request.query);   // { id: ‘1‘, title: ‘aaa‘ } 对象
    console.log(ctx.request.querystring);   // id=1&title=aaa
    ctx.body = "新闻页面";
});

//启动路由
app.use(router.routes());
app.use(router.allowedMethods());
/**
 router.allowedMethods()作用: 这是官方文档的推荐用法,我们可以
 看到 router.allowedMethods()用在了路由匹配 router.routes()之后,所以在当所有
 路由中间件最后调用.此时根据 ctx.status 设置 response 响应头
 可以配置也可以不配置,建议配置,
 */

app.listen(3000);

我们在 router.get("/news", ) 的路由中可以通过 ctx. 来获取我们想要的 get 传值,ctx 打印出来会有很多内容,在这里我们选了三个, url,query,querystring,另外在 ctx.request 中同样包含这三个内容,输出结果是一样的。我们建议 get 传值的方式是 ctx.query 的形式。我们来看一下结果:

我们在浏览器中输入如上地址,然后回车,我们看一下编辑器的控制台输出日志:

通过以上方法我们就能获取到我们想要的 get 传值数据了。

还有一种情况我们看到的并不是上面的情况,而是 http://localhost:3000/news/123

如果是上面的情况,我们需要在后台这样配置: router(‘/news/123‘, async () => {}) ,这样显然是可行的,但是如果 /news/ 后面跟的 123 可能是别的内容,那我们还需要再写一个随之对应的路由,这样显然是不可取的,这时候我们就需要引入动态路由了,如下:

//引入 koa模块
var Koa = require(‘koa‘);
var Router = require(‘koa-router‘);

//实例化
var app = new Koa();
var router = new Router();

//配置路由
router.get(‘/‘, async (ctx) => {
    // ctx  上下文 context ,包含了request 和response等信息
    // 返回数据    相当于:原生里面的res.writeHead()  res.end()
    ctx.body = ‘首页‘;
});
router.get(‘/news/:id‘, async (ctx) => {
    /**
     获取动态路由传参
     */

    //从ctx中读取get传值
    console.log(ctx.url);   // /news/123
    console.log(ctx.params);  // { id: ‘123‘ }
    ctx.body = "新闻页面";
});

//启动路由
app.use(router.routes());
app.use(router.allowedMethods());
/**
 router.allowedMethods()作用: 这是官方文档的推荐用法,我们可以
 看到 router.allowedMethods()用在了路由匹配 router.routes()之后,所以在当所有
 路由中间件最后调用.此时根据 ctx.status 设置 response 响应头
 可以配置也可以不配置,建议配置,
 */

app.listen(3000);

我们将之前的 router.get(‘/news‘, ) 改为 router.get(‘/news/:id‘, ) 的形式,然后通过 ctx.params 就能获取到我们想要的 get 传参,结果如下:

我们在浏览器中输入如上地址,然后回车,我们看一下编辑器的控制台输出日志:

通过以上方法我们就能获取到我们想要的 get 传值数据了。

原文地址:https://www.cnblogs.com/chao202426/p/11743585.html

时间: 2024-11-10 15:18:06

koa学习之路二的相关文章

java痛苦学习之路[二] ---JSONObject使用

一.Strut2必须引入的包 要使程序可以运行必须引入JSON-lib包,JSON-lib包同时依赖于以下的JAR包: 1.commons-lang.jar 2.commons-beanutils.jar 3.commons-collections.jar 4.commons-logging.jar 5.ezmorph.jar 6.json-lib-2.2.2-jdk15.jar 当然除了这些包,strut2基础包也得引入 struts2-core-2.1.6.jar freemarker-2.

zigbee学习之路(二):点亮LED

一.前言 今天,我来教大家如何点亮led,这也是学习开发板最基础的步骤了. 二.原理分析 cc2530芯片跟虽然是51的内核,但是它跟51单片机还是有区别的,51单片机不需要对IO口进行配置,而cc2530芯片却需要对IO口进行配置,才能对它进行赋值,需要配置的寄存器有PXSEL,PXDIR,PXINP,x可以代表任意IO口,如P1SEL. 下面介绍PXSEL的功能: 下面介绍PXDIR的功能: 下面介绍PXINP的功能: 通过配置以上寄存器的,就可以控制IO口德输入输出状态,是否做为普通IO口

Android开发学习之路-二维码学习

这个月装逼有点少了,为什么呢,因为去考软件射鸡师了,快到儿童节了,赶紧写篇博纪念一下逝去的青春,唔,请忽略这句话. 二维码其实有很多种,但是我们常见的微信使用的是一种叫做QRCode的二维码,像下面这样的,可以放心的扫,这只是我的博客主页链接啦: 关于QR码编码的二维码,我们要知道几个特点: 1. 扫描时可以从各个角度去扫,也就是旋转多少度都没关系,不信吗?下次去肯德基买单试试咯. 2. 二维码有容错率,容错率越大,生成的二维码也就越复杂,但是越不容易出错,并且,当二维码被遮挡的时候也越容易扫描

Python学习之路二

今天主要学习了列表,python的列表真的事太强大了,由于内容比较多,今天就先简单的介绍一下新学的几个成员函数吧. 首先我们要了解list是一种序列类型,其构造方式有四种形式: (1)空列表 [] (2)直接添加元素 [a] [a,b,c] (3)使用列表解析 [x for x in iterable] (4)使用构造函数 list() or list(iterable) 成员函数: append() 在末尾添加一个元素 extend() 以列表的形式在末尾添加 insert() 两个参数,第一

react.js学习之路二

看react.js对我来说真的不是难不难的问题,问题是我的思路太难转变了,真是坑死我了,react里面的坑也很多.算了,这些抱怨没啥用,记录一下今天学习的内容. 今天看了to-do-list经典示例 总结起来可以概括为 1.首先划分组件:父组件--子组件 2.显示数据:创建初始数据,并将数据显示到页面上 3.创建函数:①:添加函数,输入框中输入数据,显示到页面上 ②:删除函数,点击删除按钮,将该条数据删除 代码有很多,一会给一个链接,自己看就行,没必要我重新复制 其中踩过的坑: 1. 首先就是版

linux学习之路二 ------登陆篇

上一篇中讲了如何搭建虚拟机学习平台,在这篇中将介绍如何登陆Linux系统和修改超级用户密码 1.打开虚拟机后,进入界面,需要让我们输入账号密码,在前面安装的时候我们设置过.如图 2.输入账号密码,输入密码的时候是不显示的,所以不要认为没有输入.如图 3.验证成功之后,出现[[email protected] ~]$ ,则说明登陆成功,Linux系统有超级用户和普通用户之分,超级用户也就是root用户了,如我们的就是普通用户, 普通用户[[email protected] ~]$中$就是代表了普通

学习之路二:关于集合和数组内在联系的深入了解

前一阵子有幸看到了abatei大牛的泛型系列文章,学习了两周左右,大概学会了50%左右,说实话挺难的,有兴趣的朋友可以去看看! http://www.cnblogs.com/abatei/archive/2008/02/20/1075760.html ,讲的真不错,很赞的文章! 在此记录下我的学习感受,欢迎拍砖! 文章主要讲的是关于List<T>和数组之间的联系! 1.集合和数组 数组:大家都知道数组必须指定大小,而且大小一但指定就不能更改了,也就是说数组不能动态的增加容量,那么对于一些需要动

vue学习之路二 初步接触vue-router

今天把vue-router继续下去: 还是跟这个外国网友的学习教程走的.想想也是挺那啥的:国内的东西没有找到相对比较满意是教程反倒是朋友介绍的国外的教程好一点--不多扯上地址:https://scotch.io/courses/build-an-online-shop-with-vue/introduction(或许是有的,但是我真的没有找到--) 目前是这个配置:router文件夹:如其名:是对路由 的一个配置:  类似小程序的app.json里面配置上所有页面的路径. components这

springcloud学习之路: (二) springcloud打jar包并批量运行

springcloud中内置了tomcat所以打包的时候是直接把tomcat打入jar包 之后就可以做到, 单独的服务, 独立的jar包, 独立运行的效果了. 一.打jar包 1. 在pom.xml文件中<build>标签中可以新增<finalName>标签自定义jar包名称 2. 点击idea操作界面右侧的"maven" 3. 对每个子工程分别打包, 父工程不需要打包 4. 打包成功 5. target文件夹下可以找到生成的jar包 6. 重复以上步骤生成其他