Koa快速入门教程（一）

    Koa有v1.0与v2.0两个版本，随着node对async和await的支持，Koa2的正式发布，本文Koa均指Koa2

    如果你还不熟悉async函数可查阅阮大的

    这是一篇从零开始的简易教程，话不多说，先来快速开始：hello world！

    Koa 依赖 node v7.6.0 或 ES2015及更高版本和 async 方法支持，你可以使用自己喜欢的版本管理器快速安装支持的 node 版本

    如果你的版本号小于v7.6.0,请自行升级。如使用nvm

    在确认好环境后，我们就可以新建一个项目，在里面自由操练了

    1. $ mkdir KoaTutorial && cd KoaTutorial
    3. $ npm i koa --save

    1.2 必修的 hello world 应用:

    1. const Koa = require('koa');
    2. const app = new Koa();
    4. app.use(async ctx => {
    5.   ctx.body = 'Hello World';
    6. });
    8. app.listen(3000);

    打开浏览器，访问 ，你会看到那可爱的Hello World。就是这么简单的几行代码，我们就起了一个HTTP服务，

    来来看看这个hello world程序，其中前两行和后一行是架设一个 HTTP 服务。中间的则是对用户访问的处理。ctx则是Koa所提供的Context对象(上下文)，ctx.body=则是ctx.response.body=的alias(别名)，这是响应体设置的API。

    Koa Context 将 node 的 request 和 response 对象封装到单个对象中，为编写 Web 应用程序和 API 提供了许多有用的方法。上例的ctx.body = ''即是发送给用户内容，它是ctx.response.body的简写(更多请查阅官网)。ctx.response代表 HTTP Response。ctx.request代表 HTTP Request。

    二、路由(URL处理)

    2.1 手动实现简易路由

    1. const Koa = require('koa');
    2. const app = new Koa();
    4. app.use(async ctx => {
    5.   let _html = '404 NotFound'
    6.   switch (ctx.url) {
    7.     case '/':
    8.       _html = '<h1>Index</h1>';
    9.       break;
    10.     case '/adout':
    11.       _html = '<h1>About</h1>';
    12.       break;
    13.     case '/hello':
    14.       _html = '<h1>world</h1>';
    15.       break;
    16.     default:
    17.       break;
    18.   }
    19.   ctx.body = _html;
    20. });
    22. app.listen(3000);

    运行这段代码，访问: koa-router

    下载并引入koa-router

    1. npm i koa-router --save

    运行这个 demo，我们将看到与上栗一样的效果。在这儿我们使用到了第三方中间件。

    三、中间件

    Koa 的最大特色，也是最重要的一个设计，就是中间件（middleware）Koa 应用程序是一个包含一组中间件函数的对象，它是按照类似堆栈的方式组织和执行的。Koa中使用app.use()用来加载中间件，基本上Koa 所有的功能都是通过中间件实现的。每个中间件默认接受两个参数，第一个参数是 Context 对象，第二个参数是next函数。只要调用next函数，就可以把执行权转交给下一个中间件。

    下图为经典的Koa洋葱模型


    我们来运行Koa官网这个小例子：

    1. const Koa = require('koa');
    2. const app = new Koa();
    4. // x-response-time
    6. app.use(async (ctx, next) => {
    7.   await next();
    8.   const ms = Date.now() - start;
    9.   ctx.set('X-Response-Time', `${ms}ms`);
    10. });
    12. // logger
    14. app.use(async (ctx, next) => {
    15.   const start = Date.now();
    16.   await next();
    17.   const ms = Date.now() - start;
    18.   console.log(`${ctx.method} ${ctx.url} - ${ms}`);
    19. });
    21. // response
    23. app.use(async ctx => {
    24.   ctx.body = 'Hello World';
    25. });
    27. app.listen(3000);

    上面的执行顺序就是：请求 ==> x-response-time中间件 ==> logger中间件 ==> 响应中间件 ==> logger中间件 ==> response-time中间件 ==> 响应。 通过这个顺序我们可以发现这是个栈结构以”先进后出”（first-in-last-out）的顺序执行。Koa已经有了很多好用的中间件()你需要的常用功能基本上都有人实现了

    在实际开发中，返回给用户的网页往往都写成模板文件。 Koa 先读取模板文件，然后将这个模板返回给用户，这事我们就需要使用模板引擎了，关于Koa的模版引擎，我们只需要安装koa模板使用中间件koa-views 然后在下载你喜欢的模板引擎()便可以愉快的使用了。如安装使用ejs

    1. # 安装koa模板使用中间件
    2. $ npm i --save koa-views
    4. # 安装ejs模板引擎
    5. $ npm i --save ejs
    1. const Koa = require('koa')
    2. const views = require('koa-views')
    3. const path = require('path')
    4. const app = new Koa()
    6. // 加载模板引擎
    7. app.use(views(path.join(__dirname, './view'), {
    8.     extension: 'ejs'
    9. }))
    11. app.use(async (ctx) => {
    12.     let title = 'Koa2'
    13.     await ctx.render('index', {
    14.         title,
    15.     })
    16. })
    18. app.listen(3000)

    ./view/index.ejs 模板

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title><%= title %></title>
    5. </head>
    6. <body>
    7.     <h1><%= title %></h1>
    9. </body>
    10. </html>

    打开

    五、静态资源服务器

    网站一般都提供静态资源（图片、字体、样式表、脚本……），我们可以自己实现一个静态资源服务器，但这没必要，koa-static模块封装了这部分功能。

    1. const path = require('path')
    2. const static = require('koa-static')
    4. const app = new Koa()
    6. // 静态资源目录对于相对入口文件index.js的路径
    7. const staticPath = './static'
    9. app.use(static(
    10.   path.join(__dirname, staticPath)
    11. ))
    14. app.use(async (ctx) => {
    15.   ctx.body = 'hello world'
    16. })
    18. app.listen(3000)

    我们访问 将返回app.css 的内容，访问http://localhost:3000/koa2.png我们将看见返回下图

    koa2

    前文我们主要都在处理数据的响应，这儿我们来了解下Koa获取请求数据，主要为GET和POST方式。

    在koa中，获取GET请求数据源头是koa中request对象中的query方法或querystring方法，query返回是格式化好的参数对象，querystring返回的是请求字符串。

    • 请求对象ctx.query(或ctx.request.query)，返回如 { a:1, b:2 }
    • 请求字符串 ctx.querystring(或ctx.request.querystring)，返回如 a=1&b=2
    1. const Koa = require('koa')
    2. const app = new Koa()
    4. app.use( async ( ctx ) => {
    5.   const url = ctx.url
    6.   const query = ctx.query
    7.   const querystring = ctx.querystring
    9.   ctx.body = {
    10.     url,
    11.     query,
    12.     querystring
    13.   }
    14. })
    16. app.listen(3000)

    运行程序并访问

    1. {"url":"/?page=2&limit=10","query":{"page":"2","limit":"10"},"querystring":"page=2&limit=10"}

    对了，在这儿推荐个插件：JSONView，用了它你将得到格式化json数据，如下：

    1. {
    2.   url: "/?page=2&limit=10",
    3.   query: {
    4.     page: "2",
    5.     limit: "10"
    6.   },
    7.   querystring: "page=2&limit=10"
    8. }

    更多Koa Request API 请查看

    6.2 POST请求数据获取

    对于POST请求的处理，koa2没有封装获取参数的方法，需要通过自己解析上下文context中的原生node.js请求对象req，将POST表单数据解析成querystring（例如：a=1&b=2&c=3），再将querystring 解析成JSON格式（例如：{"a":"1", "b":"2", "c":"3"}），我们来直接使用koa-bodyparser 模块从 POST 请求的数据体里面提取键值对。

    运行程序，填写并提交表单，请求结果为：

    1. {
    2.   name: "ogilhinn",
    3.   age: "120",
    4.   email: "ogilhinn@gmail.com"
    5. }

    参考链接