-
koa2 进阶学习笔记
-
1.1 快速开始
-
1.2 async/await使用
-
1.3 koa2简析结构
-
1.4 koa中间件开发与使用
-
2.1 原生koa2实现路由
-
2.2 koa-router中间件
-
3.1 GET请求数据获取
-
3.2 POST请求数据获取
-
3.3 koa-bodyparser中间件
-
4.1 原生koa2实现静态资源服务器
-
4.2 koa-static中间件
-
5.1 koa2使用cookie
-
5.2 koa2实现session
-
6.1 koa2加载模板引擎
-
6.2 ejs模板引擎
-
7.1 busboy模块
-
7.2 上传文件简单实现
-
7.3 异步上传图片实现
-
8.1 mysql模块
-
8.2 async/await封装使用mysql
-
8.3 项目建表初始化
-
9.1 原生koa2实现JSONP
-
9.2 koa-jsonp中间件
-
10.1 单元测试
-
11.1 开发debug
-
12.1 快速启动
-
12.2 框架设计
-
12.3 分层操作
-
12.4 数据库设计
-
12.5 路由设计
-
12.6 webpack4环境搭建
-
12.7 使用react.js
-
12.8 登录注册功能实现
-
12.9 session登录态判断处理
-
13.1 import/export使用
-
1.1 快速开始
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
}
copy
举个例子
源码在 /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')
})
copy
启动例子
node post.js
copy