koa2学习

搭建环境

新建一个文件夹如koa2文件夹

1
2
3
cd koa2
npm init -y
npm install --save koa

在文件夹新建一个app.js,输入以下代码

1
2
3
4
5
6
7
const Koa = require('koa')
connst app = new Koa()
app.use( async ( ctx ) => {
ctx.body = 'hello koa2'
})
app.listen(3000)
console.log('[demo] start-quick is starting at port 3000')

然后在命令行输入

1
node app.js

或者执行npm start,npm start命令会让npm执行定义在package.json文件中的start对应命令:

1
2
3
"scripts": {
"start": "node app.js"
}

Get请求的接收

query和querystring区别

在koa2中GET请求通过request接收,但是接受的方法有两种:query和querystring。
1.query:返回的是格式化好的参数对象。
2.querystring:返回的是请求字符串。
看如下例子的输出结果
demo01.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
let url =ctx.url;
let request =ctx.request;
let req_query = request.query;
let req_querystring = request.querystring;
ctx.body={
url,
req_query,
req_querystring
}
});
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
});

编写好后,在终端中使用node demo1.js启动服务。启动一切正常可在浏览器中使用http://127.0.0.1:3000?user=wutao&age=18 来进行访问。我们在网页中可以得到一串JSON字符串.

1
{"url":"/?user=wutao&age=18","req_query":{"user":"wutao","age":"18"},"req_querystring":"user=wutao&age=18"}

直接从ctx中获取Get请求

demo02.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
let url =ctx.url;
//从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
}
});
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
});

编写好后,在终端中使用node demo1.js启动服务。启动一切正常可在浏览器中使用http://127.0.0.1:3000?user=wutao&age=18 来进行访问。我们在网页中可以得到一串JSON字符串.

post请求接收

获取Post请求的步骤:

1.解析上下文ctx中的原生nodex.js对象req。
2.将POST表单数据解析成query string-字符串.(例如:user=wutao&age=18)
3.将字符串转换成JSON格式。

ctx.method 得到请求类型

demo03.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const Koa = require('koa');
const app = new Koa();
app.use(async(ctx) => {
//当请求时GET请求时,显示表单让用户填写
if(ctx.url === '/' && ctx.method === 'GET'){
let html =`
<h1>Koa2 request post demo</h1>
<form method="POST" action="/">
<p>userName</p>
<input name="userName" /> <br/>
<p>age</p>
<input name="age" /> <br/>
<p>webSite</p>
<input name='webSite' /><br/>
<button type="submit">submit</button>
</form>
`;
ctx.body = html;
}else if(ctx.url === '/' && ctx.method === 'POST'){
ctx.body = '接受数据了'
}else{
//其它请求显示404页面
ctx.body='<h1>404!</h1>';
}
} )
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
})

解析Node原生POST参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function parsePostData(ctx){
return new Promise((resolve,reject)=>{
try{
let postdata="";
ctx.req.on('data',(data)=>{
postdata += data
})
ctx.req.addListener("end",function(){
resolve(postdata);
})
}catch(error){
reject(error);
}
})
}

然后在上demo03.js接收POST请求的处理方法里,修改代码如下。

1
2
3
4
else if(ctx.url==='/' && ctx.method==='POST'){
let pastData=await parsePostData(ctx);
ctx.body=pastData;
}

POST字符串解析JSON对象

上面得到的post参数是一个字符串,接下来将这个字符串封装成json对象

1
2
3
4
5
6
7
8
9
10
function parseQueryStr(queryStr){
let queryData={};
let queryStrList = queryStr.split('&');
for( let [index,queryStr] of queryStrList.entries() ){
let itemList = queryStr.split('=');
console.log(itemList);
queryData[itemList[0]] = decodeURIComponent(itemList[1]);
}
return queryData
}

将demo03.js的 parsePostData做些修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function parsePostData(ctx){
return new Promise((resolve,reject)=>{
try{
let postdata="";
ctx.req.on('data',(data)=>{
postdata += data
})
ctx.req.addListener("end",function(){
let parseData = parseQueryStr( postdata )
resolve(parseData);
})
}catch(error){
reject(error);
}
});
}

koa-bodyparser中间件

koa-bodyparser中间件可以把koa2上下文的formData数据解析到ctx.request.body中。

安装中间价

1
npm install --save koa-bodyparser@3

引入

安装完成后,需要在代码中引入并使用。我们在代码顶部用require进行引入。

1
const bodyParser = require('koa-bodyparser');

然后进行使用,如果不使用是没办法调用的,使用代码如下。

1
app.use(bodyParser());

demo04.js代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const Koa  = require('koa');
const app = new Koa();
const bodyParser = require('koa-bodyparser');
app.use(bodyParser());
app.use(async(ctx)=>{
if(ctx.url==='/' && ctx.method==='GET'){
//显示表单页面
let html=`
<h1>wutao Koa2 request POST</h1>
<form method="POST" action="/">
<p>userName</p>
<input name="userName" /><br/>
<p>age</p>
<input name="age" /><br/>
<p>website</p>
<input name="webSite" /><br/>
<button type="submit">submit</button>
</form>
`;
ctx.body=html;
}else if(ctx.url==='/' && ctx.method==='POST'){
let postData= ctx.request.body;
ctx.body=postData;
}else{
ctx.body='<h1>404!</h1>';
}
});
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
});

Koa-router中间件

安装koa-router中间件

1
npm install --save koa-router

demo案例

demo05.js

1
2
3
4
5
6
7
8
9
10
11
12
13
const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
router.get('/', function (ctx, next) {
ctx.body="Hello wutao";
});
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(3000,()=>{
console.log('starting at port 3000');
});

多页面配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
router.get('/', function (ctx, next) {
ctx.body="Hello wutao";
})
.get('/todo',(ctx,next)=>{
ctx.body="Todo page"
});
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(3000,()=>{
console.log('starting at port 3000');
});

koa2使用cookie

1.ctx.cookies.get(name,[optins]):读取上下文请求中的cookie。
2.ctx.cookies.set(name,value,[options]):在上下文中写入cookie

写入Cookie操作

demo06.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const Koa  = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
if(ctx.url=== '/index'){
ctx.cookies.set(
'MyName','wutao'
);
ctx.body = 'cookie is ok';
}else{
ctx.body = 'hello world'
}
});
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
})

写好后预览,打开F12可以在Application中找到Cookies选项。就可以找到我们写入的name和value了。

Cookie选项

domain:写入cookie所在的域名
path:写入cookie所在的路径
maxAge:Cookie最大有效时长
expires:cookie失效时间
httpOnly:是否只用http请求中获得
overwirte:是否允许重写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const Koa  = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
if(ctx.url=== '/index'){
ctx.cookies.set(
'MyName','wutao',{
domain:'127.0.0.1', // 写cookie所在的域名
path:'/index', // 写cookie所在的路径
maxAge:1000*60*60*24, // cookie有效时长
expires:new Date('2018-12-31'), // cookie失效时间
httpOnly:false, // 是否只用于http请求中获取
overwrite:false // 是否允许重写
}
);
ctx.body = 'cookie is ok';
}else{
ctx.body = 'hello world'
}
});
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
})

读取Cookie:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const Koa  = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
if(ctx.url=== '/index'){
ctx.cookies.set(
'MyName','wutao',{
domain:'127.0.0.1', // 写cookie所在的域名
path:'/index', // 写cookie所在的路径
maxAge:1000*60*60*24, // cookie有效时长
expires:new Date('2018-12-31'), // cookie失效时间
httpOnly:false, // 是否只用于http请求中获取
overwrite:false // 是否允许重写
}
);
ctx.body = 'cookie is ok';
}else{
if( ctx.cookies.get('MyName')){
ctx.body = ctx.cookies.get('MyName');
}else{
ctx.body = 'Cookie is none';
}
}
});
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
})

Koa2的模板(ejs)

安装中间件

1
2
npm install --save koa-views
npm install --save ejs

编写ejs

新建一个view的文件夹,并在它下面新建index.ejs文件。
views/index.ejs

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>http://wutao.com/wp-admin/post.php?post=2760&action=edit#
</head>
<body>
<h1><%= title %></h1>
<p>EJS Welcome to <%= title %></p>
</body>
</html>

编写koa文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const Koa = require('koa')
const views = require('koa-views')
const path = require('path')
const app = new Koa()
// 加载模板引擎
app.use(views(path.join(__dirname, './view'), {
extension: 'ejs'
}))
app.use( async ( ctx ) => {
let title = 'hello koa2'
await ctx.render('index', {
title
})
})
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
})

koa-static静态资源中间件

安装koa-static

1
npm install --save koa-static

新建static文件夹 然后在static文件中放入图片,css和js文件

demlo06.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const Koa = require('koa')
const path = require('path')
const static = require('koa-static')
const app = new Koa()
const staticPath = './static'
app.use(static(
path.join( __dirname, staticPath)
))
app.use( async ( ctx ) => {
ctx.body = 'hello world'
})
app.listen(3000, () => {
console.log('[demo] static-use-middleware is starting at port 3000')
})

-------------本文结束感谢您的阅读-------------
undefined