Koa2教程(入门篇)

目录
一、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这些静态资源请求。也非常的多,有些时候还会访问静态资源路径。

2、koa-static实现静态资源操作
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342