Koa2教程（入门篇）

2019-06-17 本文已影响0人简栋梁

目录
一、get请求接收的实现
二、原生post请求接收的实现
三、原生路由的实现
四、使用cookie
五、html模板
六、操作静态资源

系列教程
Koa2教程（初识篇）
Koa2教程（常用中间件篇）

一、get请求接收的实现

//ctx、ctx.request都具备相同的query、querystring
//query：返回的是格式化好的参数对象
//querystring：返回的是请求字符串
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');
});

二、原生post请求接收的实现

1、获取Post请求的步骤：

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

2、ctx.request和ctx.req的区别

（1）ctx.request:是Koa2中context经过封装的请求对象，它用起来更直观和简单。
（2）ctx.req:是context提供的node.js原生HTTP请求对象。这个虽然不那么直观，但是可以得到更多的内容，适合我们深度编程。

3、ctx.method 得到请求类型

Koa2中提供了ctx.method属性，可以轻松的得到请求的类型，然后根据请求类型编写不同的相应方法，这在工作中非常常用。我们先来作个小例子，根据请求类型获得不同的页面内容。GET请求时得到表单填写页面，POST请求时，得到POST处理页面。

4、表单post请求实现

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</h1>
            <form method="POST" action="/">
                <p>userName</p>
                <input name="userName" /><br/>
                <p>age</p>
                <input name="age" /><br/>
                <button type="submit">submit</button>
            </form>
        `;
        ctx.body=html;
    }
    //post提交表单信息
    else if(ctx.url==='/' && ctx.method==='POST'){
        let pastData=await parsePostData(ctx);
        ctx.body=pastData;
    }
    else{
        ctx.body='<h1>404!</h1>';
    }
 
});

//监听ctx.req变化，获取post请求内容
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);
        }
    });
}

//解析post请求内容（字符串），转化成对象
function parseQueryStr(queryStr){
    let queryData={};
    let queryStrList = queryStr.split('&');
    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] server is starting at port 3000');
});

5、koa-bodyparser实现post请求

三、原生路由的实现

1、在根目录下，新建页面文件夹

pages
├──index.html
├──koa.html
└──404.html

2、基本代码

const Koa = require('koa');
const fs = require('fs');
const app = new Koa();
 
// 根据需求,读取相应的页面,并返回
function render(page){
    return new Promise((resolve, reject)=>{
        let pageUrl = `./pages/${page}`;
        //生成二进制流
        fs.readFile(pageUrl, "binary", (err, data)=>{
            if(err){
                reject(err);
            }else{
                resolve(data);
            }
        })
    })
}

// 识别url,判断所请求的页面
async function route(url){
    let page = '404.html';
    switch(url){
        case '/':
            page ='index.html';
            break;
        case '/index':
            page ='index.html';
            break;
        case '/koa':
            page = 'koa.html';
            break;
        default:
            break; 
    }
    let html = await render(page);
    return html;
}

app.use(async(ctx)=>{
    let url = ctx.request.url;
    let html = await route(url);
    ctx.body=html;
})

app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
});

3、koa-router实现路由

四、使用cookie

1、api

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

2、cookie配置对象选项

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

3、代码实现

const Koa  = require('koa');
const app = new Koa();
 
app.use(async(ctx)=>{
    if(ctx.url=== '/'){
        ctx.cookies.set(
            'name','tony',{
                domain:'127.0.0.1',
                path:'/',
                maxAge:1000*60*60*24,
                expires:new Date('2019-6-18'),
                httpOnly:false,
                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');
});

五、html模板

1、好处

使用html模板，将html从js中分离出去，有助于项目开发和管理。而且，html模板在koa2中，必须通过中间件来实现。

2、koa-views + ejs实现html模板

六、操作静态资源

1、静态资源在开发中的地位

静态资源环境在服务端是十分常用的一种服务，在后台开发中不仅有需要代码处理的业务逻辑请求，也会有很多的静态资源请求。比如请求js，css，jpg，png这些静态资源请求。也非常的多，有些时候还会访问静态资源路径。