Koa基础入门

最新推荐文章于 2024-07-03 16:58:10 发布

lianghaihsia

最新推荐文章于 2024-07-03 16:58:10 发布

阅读量670

点赞数

分类专栏： koa 文章标签： koa

本文链接：https://blog.csdn.net/lianghaihsia/article/details/84345172

版权

koa 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：本文档为个人学习技术胖前辈录制的koa教程所作笔记，未尽详细。查看详细内容可关注以下内容：

技术胖前辈的个人博客 www.jspang.com

挑战全栈 Koa2免费视频教程 http://www.jspang.com/post/koa2.html

第一节：了解Koa及安装环境

Koa2是现在最流行的基于Node.js平台的web开发框架，特点：体积小、扩展性强

（1）安装Node ,安装完成后可用以下命令查看是否完成安装。

查看node版本

node -v

查看安装位置

where node

（2）搭建环境

新建文件夹 koa2，并初始化。初始化完成生成packge.json文件，配置项目的配置项

npm init -y   //-y 默认配置

（3）安装koa

npm install --save koa   // --save 安装到生产环境，--save-dev 安装到开发环境

（4）index.js——第一个Koa程序

const Koa = require('koa');
const app = new Koa();

app.use(async(ctx)=>{
    ctx.body ="hello world"
})

//设置监听端口
app.listen(3333);

console.log("[server] start listening at port 3000");

（5）运行程序

node index.js

第二节 async和await

在学习async之前，有必要了解一下promise。在ES6中引入了Promise，在Promise出现之前，为了顺序执行任务，需要嵌套回调。而Promise将队列事件以一种直观的方式链接在一起，但是还是用到了回调。

readFile(file1)
  .then((file1-data) => { /* do something */ })
  .then((previous-promise-data) => { /* do the next thing */ })
  .catch( /* handle errors */ )

async和await关键字基于promise和generator做了简单的封装。本质上，允许我们使用await关键字“暂停“一个函数。

另外一个好处，是可以使用promise不能使用的try和catch;

async function test(){
    const v1 = await getSomething();
    const v2 = await testAsync();
    console.log(v1,v2);
 }

aync异步函数返回一个Pormise对象，而且await必须在async中，否则会造成阻塞，引发崩溃。await不仅接受promise返回对象，也可以接受普通返回值。

function getSomething(){
    return "get something";
}
async function testAsync(){
    return 'Hello Async'
}

async function test(){
    const v1 = await getSomething();
    const v2 = await testAsync();
    console.log(v1,v2);
}

第三节： GET请求的接收

获取请求中的参数，主要有以下两种方法

request.query 返回格式化好的参数对象
request.querystring 返回字符串

const Koa = require('koa');
const app = new Koa();

app.use(async(ctx)=>{
    // 得到请求地址
    let url = ctx.url;
    let request = ctx.request;

    // query返回格式化好的参数对象
    // queryString 返回为字符串
    let req_query = request.query;
    let req_querystr = request.querystring;

    //koa没有用request也可以接受get请求，可从上下文中直接获取request请求
    let ctx_query = ctx.query ;
    let ctx_queryStr = ctx.queryString;
    ctx.body = {
        url,
        req_query,
        req_querystr,
        ctx_query,
        ctx_queryStr
    }
});

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

第四节： post请求的接收

由于koa没有原生的POST请求接口，所以需要自己去写。

获取POST请求的步骤：

解析上下文ctx中的原生node.js对象req;
将POST表单数据解析成query string 字符串
将字符串转换成JSON格式。

ctx.request 和 ctx.req的区别

ctx.request是Koa2中context经过封装的请求对象
ctx.req: 是context提供的node.js原生HTTP请求对象。

ctx.method 获取当前请求方式


app.use(async(ctx)=>{
    if(ctx.url ==='/' && ctx.method ==='GET'){
        //显示表单页面
        let html = `
                    <h1>hapang</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 = await parsePostData(ctx);
        ctx.body = postData;
    }else{
        ctx.body = '404'
    }
});

function parsePostData(ctx){
    return new Promise((resolve,reject)=>{
        try{
            let postdata = "";
            ctx.req.addListener('data',(data)=>{
                postdata += data;
            });
            ctx.req.on('end',function(){
                postdata = parseQueryStr(postdata)
                resolve(postdata);
            })
        }catch(error){
            reject(error);
        }
    });
}

function parseQueryStr(queryStr){
    let queryData = {};
    let queryStrList = queryStr.split('&');
    console.log(queryStrList);
    console.log(queryStrList.entries());
    // entries 返回带索引的数组
    for( let [index,queryStr] of queryStrList.entries() ){
        let itemList = queryStr.split('=');
        console.log(itemList);
        queryData[itemList[0]] = decodeURIComponent(itemList[1]);
    } 

    return queryData

}

第五节： koa-bodyparser中间件

一般常用的场景，都会有造好的轮子。Koa把造好的轮子称为中间件。

koa-bodyparser可以把koa的ctx中formData解析到ctx.request.bodyz中。

（1）安装

npm install --save koa-bodyparser@3   // @3  版本三，

（2）引入

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

（3）使用

app.use(bodyparser());

这个时候，我们就可以直接用ctx.request.body获取post请求参数。

第六节 Koa原生路由实现

提前说明，此章节中的方法并没有真正实现跳转，而是通过文件的读取进行网页的展示。实现方法是通过fs文件读取，根据路由的路径读取该页面，再进行渲染。

const Koa = require('koa');
const app = new Koa();
// 实现流存储
const fs = require("fs");


async function route(url){
    let page = '404.html';
    switch(url){
        case '/' : 
            page='index.html';
            break;
        case 'index' : 
            page='index.html';
            break;
        case '/todo' : 
            page='todo.html';
            break;
        case  '/404' :
            page = '404.html';
        default:
            break;
    }
    let html = await render(page);
    console.log(html);
    return html;
}

async function render(page){
    // 读写流操作很容易造成卡死，需要做异步处理
    return new Promise((resolve,reject)=>{
        let pageUrl = `./page/${page}`;
        fs.readFile(pageUrl,"binary",(err,data)=>{
            if(err){
                // 阻止
                reject(err);
            }else{
                resolve(data);
            }
        })
    })
}

// koa2原生路由
// 并不是跳转，而是将html内容读出来，放到ctx.body中
app.use(async(ctx)=>{
    let url = ctx.request.url;
    let html = await route(url);
    ctx.body = html;
})
app.listen(3000);

第七节： Koa-router 中间件