Koa2入坑(二)

基本中间件的使用

修改app.js添加代码如下：

app.use(async (ctx, next)=>{
    // next 参数的作用是将处理的控制权转交给下一个中间件
    await next()
    console.log(ctx.request.url+'=='+ctx.url);
    ctx.response.type = 'text/html';
    ctx.response.body = '<h1>Hello World</h1>';
    // ctx.body =  '<h1>Hello World</h1>' 和ctx.response.body效果一致
  });

每收到一个 http 请求，Koa 都会调用通过 app.use() 注册的 async 函数，同时为该函数传入 ctx 和 next 两个参数。通过使用其他中间件可以处理相应的逻辑，最后执行相应。

测试以下中间件的执行顺序：
修改app.js代码如下：

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

app.use(async (ctx, next) => {
    console.log('中间件1 start')
    await next();
    console.log('中间件1 end')
  });

  app.use(async (ctx, next) => {
    console.log('中间件2 start')
    await next();
    console.log('中间件2 end')
  });

  app.use(async (ctx, next) => {
    console.log('中间件3 start')
    await next();
    console.log('中间件3 end')
  });

  app.use(async (ctx, next) => {
    console.log('中间件4 start')
    await next();
    console.log('中间件4 end')
  });

app.listen(3000,()=>{
    console.log('server is running at http://127.0.0.1:3000');
});

执行结果：

中间件1 start
中间件2 start
中间件3 start
中间件4 start
中间件4 end
中间件3 end
中间件2 end
中间件1 end

浏览器中显示：请求地址: /，响应时间：1ms

由以上执行过程我们不难看出中间件的执行顺序，流程是一层层的打开，然后一层层的闭合，像是剥洋葱一样，前人给总结了一个很好听的名字 —— 洋葱模型。

---

路由的使用

（一）手动路由,修改app.js

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

app.use(async (ctx,next)=>{
    if(ctx.request.path === '/'){
        ctx.body = 'index page';
    }else{
        await next();
    }
});

app.use(async (ctx,next)=>{
    if(ctx.request.path === '/home'){
        ctx.body = 'home page';
    }else{
        await next();
    }
});

app.use(async (ctx,next)=>{
    if(ctx.request.path === '/info'){
        ctx.body = 'info page';
    }else{
        ctx.body = '404 page';
    }
});

app.listen('3000',()=>{
    console.log('server is running at http://127.0.0.1:3000')
});

启动服务：

$ node app.js

在浏览器中分别访问http://localhost:3000/、http://localhost:3000/home、http://localhost:3000/info、http://localhost:3000/my 就能看到相应的页面了。

输入http://localhost:3000/my可以看到404的结果

（二） koa-router
1、安装koa-router

npm i koa-router --save

2、使用koa-router修改路由

const koa = require('koa');
const router = require('koa-router')();
const app = new koa();

router.get('/',async (ctx, next)=>{
    ctx.body = 'index page';
});

router.get('/home',async (ctx, next)=>{
    ctx.body = 'home page';
});

router.get('/info',async (ctx, next)=>{
    ctx.body = 'info page';
});

// app.use(router.routes());
app.use(router.routes(), router.allowedMethods());

app.listen('3000',()=>{
    console.log('server is running at http://127.0.0.1:3000');
});

在浏览器中分别访问http://localhost:3000/、http://localhost:3000/home、http://localhost:3000/info查看相应的页面。

3、使用koa-router分离路由
目录结构如下：

 | routers
    |index.js

index.js:

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

router.get('/',async (ctx, next)=>{
    ctx.body = 'index page';
});

router.get('/home',async (ctx, next)=>{
    ctx.body = 'home page';
});

router.get('/info',async (ctx, next)=>{
    ctx.body = 'info page';
});

router.get('/info/:name',async (ctx, next)=>{
    let name = ctx.params.name || ctx.query.name ||  ctx.request.body.name;
    console.log(JSON.stringify(ctx.params));
    console.log(JSON.stringify(ctx.request.query));
    console.log(JSON.stringify(ctx.query));
    console.log(JSON.stringify(ctx.request.body));
    ctx.body = `hello ${name}`;
});

module.exports = router;

修改app.js如下：

const koa = require('koa');
const router = require('./routers');
const app = new koa();

// app.use(router.routes());
app.use(router.routes(), router.allowedMethods());

app.listen('3000',()=>{
    console.log('server is running at http://127.0.0.1:3000');
});

---

处理post请求koa-bodyparser的使用

1、安装koa-bodyparser

npm i koa-bodyparser --save

目录结构：

 | routers
    |index.js
    |user.js

2、修改app.js,user.js

const koa = require('koa');
const bodyParser = require('koa-bodyparser');
const router = require('koa-router')();
const user = require('./routers/user');
const app = new koa();

app.use(bodyParser());

router.use('/user',user.routes(), user.allowedMethods());
app.use(router.routes(), router.allowedMethods());

app.listen('3000',()=>{
    console.log('server is running at http://127.0.0.1:3000');
});

user.js:

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

// 设置路由前缀
// router.prefix('/user');

router.get('/', function (ctx, next) {
  ctx.body = 'this a users response!';
});


router.get('/postData',async (ctx,next)=>{
    ctx.body = 
    `
    <form action="http://127.0.0.1:3000/user/register" method="post">
        <input name="name" type="text" placeholder="请输入用户名：zw"/> 
        <br/>
        <input name="password" type="text" placeholder="请输入密码：123456"/>
        <br/> 
        <button>提交</button>
      </form>
    `
});

router.post('/register', async (ctx, next)=>{
    console.log(JSON.stringify(ctx.request.body));
    let body = ctx.request.body;
    ctx.body = body;
});

module.exports = router;

3、运行服务

node app.js

提交后打印：

{"name":"zw","password":"123"}

需要的可以clone项目，切换到不同分支 即可，项目地址
https://github.com/MisterZhouZhou/Koa2-learnDayByDay