Koa2教程(入门篇)

作者: 简栋梁 | 来源:发表于2019-06-17 16:55 被阅读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这些静态资源请求。也非常的多,有些时候还会访问静态资源路径。

    2、koa-static实现静态资源操作

    相关文章

      网友评论

        本文标题:Koa2教程(入门篇)

        本文链接:https://www.haomeiwen.com/subject/bzijfctx.html