一、Koa 路由
路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET、POST 等) 组成的,涉及到应用如何响应客户端对某个网站节点的访问。
通俗的讲:路由就是根据不同的 URL 地址,加载不同的页面实现不同的功能。
Koa 中的路由和
Express
有所不同,在Express
中直接引入Express
就可以配置路由,但是在 Koa 中我们需要安装对应的koa-router
路由模块来实现。
npm install --save koa-router
/**
https://www.npmjs.com/package/koa-router
1.安装模块
2.看文档使用
*/
//引入 koa模块
var Koa=require('koa');
var router = require('koa-router')(); /*引入是实例化路由** 推荐*/
//实例化
var app=new Koa();
router.get('/',async (ctx)=>{
ctx.body="首页";
})
router.get('/news',async (ctx)=>{
ctx.body="新闻列表页面";
})
router.get('/newscontent',async (ctx)=>{
ctx.body="新闻详情";
})
app.use(router.routes()); /*启动路由*/
app.use(router.allowedMethods());
/*
* router.allowedMethods()作用: 这是官方文档的推荐用法,我们可以
看到 router.allowedMethods()用在了路由匹配 router.routes()之后,所以在当所有
路由中间件最后调用.此时根据 ctx.status 设置 response 响应头*/
app.listen(3002);
二、GET请求数据获取
如果依靠ctx.request.url去手动处理路由,将会写很多处理代码,这时候就需要对应的路由的中间件对路由进行控制,这里介绍一个比较好用的路由中间件koa-router
安装koa-router中间件
# koa2 对应的版本是 7.x
npm install --save koa-router@7
快速使用koa-router
在 koa2 中 GET 传值通过 request 接收,但是接收的方法有两种:query 和 querystring。
- query:返回的是格式化好的参数对象。
- querystring:返回的是请求字符串。
在koa中,获取GET请求数据源头是koa中request对象中的query方法或querystring方法,query返回是格式化好的参数对象,querystring返回的是请求字符串,由于ctx对request的API有直接引用的方式,所以获取GET请求数据有两个途径。
-
一种是从上下文中直接获取 请求对象ctx.query,返回如 { a:1, b:2 } 请求字符串 ctx.querystring,返回如 a=1&b=2
-
一种是从上下文的request对象中获取 请求对象ctx.request.query,返回如 { a:1, b:2 } 请求字符串 ctx.request.querystring,返回如 a=1&b=2
/**
https://www.npmjs.com/package/koa-router
1.安装模块
2.看文档使用
*/
//引入 koa模块
var Koa=require('koa');
var router = require('koa-router')(); /*引入是实例化路由** 推荐*/
//实例化
var app=new Koa();
router.get('/',async (ctx)=>{
ctx.body="首页";
})
router.get('/news',async (ctx)=>{
ctx.body="新闻列表页面";
})
//获取get传值
//http://localhost:3002/newscontent?aid=123
router.get('/newscontent',async (ctx)=>{
/*在 koa2 中 GET 传值通过 request 接收,但是接收的方法有两种:query 和 querystring。
query:返回的是格式化好的参数对象。
querystring:返回的是请求字符串。*/
//从ctx中读取get传值
console.log(ctx.query); //{ aid: '123' } 获取的是对象 用的最多的方式 ******推荐
console.log(ctx.querystring); //aid=123&name=zhangsan 获取的是一个字符串
console.log(ctx.url); //获取url地址
//ctx里面的request里面获取get传值
console.log(ctx.request.url);
console.log(ctx.request.query); //{ aid: '123', name: 'zhangsan' } 对象
console.log(ctx.request.querystring); //aid=123&name=zhangsan
onst router = new Router(); router.get('/', function (ctx, next) {
ctx.body="Hello koa";
})
//从 request 中获取 GET 请求
let request =ctx.request;
let req_query = request.query;
let req_querystring = request.querystring; //从上下文中直接获取
let ctx_query = ctx.query;
let ctx_querystring =ctx.querystring;
ctx.body={
url,
req_query,
req_querystring,
ctx_query,
ctx_querystring
}
//ctx.body="新闻详情";
})
app.use(router.routes()); /*启动路由*/
app.use(router.allowedMethods());
/*
* router.allowedMethods()作用: 这是官方文档的推荐用法,我们可以
看到 router.allowedMethods()用在了路由匹配 router.routes()之后,所以在当所有
路由中间件最后调用.此时根据 ctx.status 设置 response 响应头*/
app.listen(3002);
执行程序
node get.js
执行后程序后,用chrome访问 http://localhost:3000/page/user?a=1&b=2 会出现以下情况
三、POST请求参数获取
原理
对于POST请求的处理,koa2没有封装获取参数的方法,需要通过解析上下文context中的原生node.js请求对象req,将POST表单数据解析成query string(例如:a=1&b=2&c=3
),再将query string 解析成JSON格式(例如:{"a":"1", "b":"2", "c":"3"}
)
注意:ctx.request是context经过封装的请求对象,ctx.req是context提供的node.js原生HTTP请求对象,同理ctx.response是context经过封装的响应对象,ctx.res是context提供的node.js原生HTTP请求对象。
具体koa2 API文档可见 https://github.com/koajs/koa/blob/master/docs/api/context.md#ctxreq
解析出POST请求上下文中的表单数据
demo源码
https://github.com/ChenShenhai/koa2-note/blob/master/demo/request/post.js
// 解析上下文里node原生请求的POST参数
function parsePostData( ctx ) {
return new Promise((resolve, reject) => {
try {
let postdata = "";
ctx.req.addListener('data', (data) => {
postdata += data
})
ctx.req.addListener("end",function(){
let parseData = parseQueryStr( postdata )
resolve( parseData )
})
} catch ( err ) {
reject(err)
}
})
}
// 将POST请求参数字符串解析成JSON
function parseQueryStr( queryStr ) {
let queryData = {}
let queryStrList = queryStr.split('&')
console.log( queryStrList )
for ( let [ index, queryStr ] of queryStrList.entries() ) {
let itemList = queryStr.split('=')
queryData[ itemList[0] ] = decodeURIComponent(itemList[1])
}
return queryData
}
举个例子
源码在 /demos/request/post.js中
例子代码
const Koa = require('koa')
const app = new Koa()
app.use( async ( ctx ) => {
if ( ctx.url === '/' && ctx.method === 'GET' ) {
// 当GET请求时候返回表单页面
let html = `
<h1>koa2 request post demo</h1>
<form method="POST" action="/">
<p>userName</p>
<input name="userName" /><br/>
<p>nickName</p>
<input name="nickName" /><br/>
<p>email</p>
<input name="email" /><br/>
<button type="submit">submit</button>
</form>
`
ctx.body = html
} else if ( ctx.url === '/' && ctx.method === 'POST' ) {
// 当POST请求的时候,解析POST表单里的数据,并显示出来
let postData = await parsePostData( ctx )
ctx.body = postData
} else {
// 其他请求显示404
ctx.body = '<h1>404!!! o(╯□╰)o</h1>'
}
})
// 解析上下文里node原生请求的POST参数
function parsePostData( ctx ) {
return new Promise((resolve, reject) => {
try {
let postdata = "";
ctx.req.addListener('data', (data) => {
postdata += data
})
ctx.req.addListener("end",function(){
let parseData = parseQueryStr( postdata )
resolve( parseData )
})
} catch ( err ) {
reject(err)
}
})
}
// 将POST请求参数字符串解析成JSON
function parseQueryStr( queryStr ) {
let queryData = {}
let queryStrList = queryStr.split('&')
console.log( queryStrList )
for ( let [ index, queryStr ] of queryStrList.entries() ) {
let itemList = queryStr.split('=')
queryData[ itemList[0] ] = decodeURIComponent(itemList[1])
}
return queryData
}
app.listen(3000, () => {
console.log('[demo] request post is starting at port 3000')
})
启动例子
node post.js
访问页面
提交表单发起POST请求结果显示
四、koa-bodyparser中间件
原理
对于POST请求的处理,koa-bodyparser中间件可以把koa2上下文的formData数据解析到ctx.request.body中
安装koa2版本的koa-bodyparser@3中间件
npm install --save koa-bodyparser@3
举个例子
例子代码
demo源码
https://github.com/ChenShenhai/koa2-note/blob/master/demo/request/post-middleware.js
const Koa = require('koa')
const app = new Koa()
const bodyParser = require('koa-bodyparser')
// 使用ctx.body解析中间件
app.use(bodyParser())
app.use( async ( ctx ) => {
if ( ctx.url === '/' && ctx.method === 'GET' ) {
// 当GET请求时候返回表单页面
let html = `
<h1>koa2 request post demo</h1>
<form method="POST" action="/">
<p>userName</p>
<input name="userName" /><br/>
<p>nickName</p>
<input name="nickName" /><br/>
<p>email</p>
<input name="email" /><br/>
<button type="submit">submit</button>
</form>
`
ctx.body = html
} else if ( ctx.url === '/' && ctx.method === 'POST' ) {
// 当POST请求的时候,中间件koa-bodyparser解析POST表单里的数据,并显示出来
let postData = ctx.request.body
ctx.body = postData
} else {
// 其他请求显示404
ctx.body = '<h1>404!!! o(╯□╰)o</h1>'
}
})
app.listen(3000, () => {
console.log('[demo] request post is starting at port 3000')
})
启动例子
node post-middleware.js