Koa 学习总结

前言

Koa是基于Node.js的下一代web框架，由Express团队打造，特点：优雅、简洁、灵活、体积小。几乎所有功能都需要通过中间件实现。

准备

  1. 检查Node版本，至少在7.6.0以上，因为Koa采用很多Es7的语法，比如async/await，
  2. 创建项目、安装依赖
mkdir study_koa

cd study_koa

npm init -y

npm install koa

一、基本用法

  1. 创建一个应用程序 新建app.js
const Koa = require('koa');

const app = new Koa();

app.use(async ctx => {
    // ctx.body 即服务端响应的数据
    ctx.body = 'Hello Koa';
})

// 监听端口、启动程序
app.listen(3000, err => {
    if (err) throw err;
    console.log('runing...');
})
  1. 启动
node app.js
  1. 访问 127.0.0.1:3000 会看到页面显示Hello Koa

即便没有给ctx.body 设置响应数据，或访问不存在的路由，页面也会显示Not Found，这是koa底层做了处理，不像原生Node或Express一样页面会一直处于响应状态。

二、Context

Koa将Node的request 和 response对象都封装到了context中，每次请求都会创建一个ctx，并且在中间件中作为接收器使用。

以下是刚才访问时的ctx对象

let ctx = {
    // 请求
    request: {
        method: 'GET',
        url: '/',
        // request header
        header: {
            host: '127.0.0.1:3030',
            connection: 'keep-alive',
            'cache-control': 'max-age=0',
            'upgrade-insecure-requests': '1',
            'user-agent': 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36',
            accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
            'accept-encoding': 'gzip, deflate, br',
            'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8',
            cookie: 'connect.sid=s%3AnQtQApNcQ55RmpjnkmQvWNTrdjYhZnlh.1FQUbVqpwpdRj8N6wjv8nOarf8hyzIpcxXN2LPYXGy0'
        }
    },
    // 响应
    response: {
         status: 200, 
         message: 'ok', 
         header: { 
            'content-type': 'text/plain; charset=utf-8',
            'content-length': '9'
        }
    },
    app: { 
        subdomainOffset: 2, 
        proxy: false, 
        env: 'development' 
    },
    originalUrl: '/',
    // 原生Node的request对象
    req: '<original node req>',
    // 原生Node的reponse对象
    res: '<original node res>',
    socket: '<original node socket>'
}
剖析ctx
  1. 区分request、response、req、res
  • requset 　　　ctx的请求对象
  • response 　　 ctx的响应对象
  • req 　　　　　Node的请求对象
  • res 　　　　　Node的响应对象
注意：绕过Koa的response是不被处理的，避免使用Node的属性和方法，比如：
res.statusCode
res.writeHead()
res.write()
res.end()

即便使用ctx.res.write()也不会得到预期结果，比如：ctx.res.write('hello')，结果是hellook，会把message的值拼接上。

  1. ctx.state
    推荐的命名空间，用于通过中间件传递信息到你的前端视图。比如每个页面都要用到用户信息，那就可以挂载在ctx.state。类似于添加全局属性。
ctx.state.userInfo = {
    name: 'Jack',
    age: 18
}
  1. ctx.app
    应用程序实例引用

有关cookie和session单独介绍用法。

三、路由

Koa中的路由和Express不同，Express是把路由集成在Express中，Koa则需要通过kao-router模块使用。

  1. 安装：
npm i koa-router
  1. 使用
const Koa = require('koa');
// 直接调用的方式
const router = require('koa-router')();
// 或 单独创建router的实例
const Router = require('koa-router');
const router = new Router();

router.get('/', async ctx => {
    ctx.body = 'Hello Router';
})

// 启动路由
app.use(router.routes()).use(router.allowedMethods())
// 以上为官方推荐方式，allowedMethods用在routes之后，作用是根据ctx.status设置response header.

app.listen(3000, err => {
    if (err) throw err;
    console.log('runing...');
});

四、中间件

Koa最大的特色和最优的设计就是中间件，就是在匹配路由之前和匹配路由之后执行函数。
使用app.use()加载中间件。每个中间件接收两个参数，ctx对象和next函数，通过调用next将执行权交给下一个中间件。

中间件分为：

  • 应用级中间件
  • 路由级中间件
  • 错误处理中间件
  • 第三方中间件
  1. 应用级中间件
const Koa = require('koa');
const Router = require('koa-router');

const app = new Koa();
const router = new Router();

// 应用级中间件
app.use(async (ctx, next) => {
    await next();
})

router.get('/', async ctx => {
    ctx.body = 'hello koa';
})

// 启动路由
app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, err => {
    if (err) throw err;
    console.log('runing...')
})

任何路由都会先经过应用级中间件，当执行完成next后再去匹配相应的路由。

  1. 路由中间件
router.get('/user', async (ctx, next) => {
    console.log(111)
    await next();
})

router.get('/user', async (ctx, next) => {
    console.log(222)
    await next();
})

router.get('/user', async ctx => {
    console.log(333)
    ctx.body = 'Hello'
})  

// 依次打印
111
222
333

路由匹配过程中，对于相同路由会从上往下依次执行中间件，直到最后一个没有next参数的中间件为止。

  1. 错误处理中间件
app.use(async (ctx, next)=> {
    await next();
    if(ctx.status === 404){
        ctx.body="404页面"
    }
});

路由在匹配成功并执行完相应的操作后还会再次进入应用级中间件执行 next 之后的逻辑。所以对于404、500等错误可以在最外层的（第一个）应用级中间件的next之后做相应的处理。
如果只有一个应用级中间件的话，顺序就无所谓所有路由中间件之前和之后了。

  1. 第三方中间件
    类似于koa-router、koa-bodyparser等就是第三方中间件。

  2. 中间件的合成
    koa-compose 模块可以将多个中间件合成为一个。

const compose = require('koa-compose')
const first = asycn (ctx, next) => {
    await next();
}
const second = async ctx => {
    ctx.body = 'Hello';
}

const middle = compose([first, second]);
app.use(middle);
  1. 中间件的执行顺序
    多个中间件会形成堆栈结构，按先进后出顺序执行
app.use(async (ctx, next) => {
    console.log('1中间件第1次执行')
    await next();
    console.log('7中间件第7次执行')
})

app.use(async (ctx, next) => {
    console.log('2中间件第2次执行');
    await next();
    console.log('6中间件第6次执行')
})

router.get('/user', async (ctx, next) => {
    console.log('3中间件第3次执行')
    await next()
    console.log('5中间件第5次执行')
})

router.get('/user', (ctx, next) => {
    console.log('4中间件第4次执行')
    ctx.body = 'Hello Koa';
})
// 1中间件第1次执行
// 2中间件第2次执行
// 3中间件第3次执行
// 4中间件第4次执行
// 5中间件第5次执行
// 6中间件第6次执行
// 7中间件第7次执行

由此可以看出中间件的执行顺序是先进后出的方式。类似于洋葱图。

洋葱图

五、获取请求数据

  1. GET 传值

  • Koa 中 GET传值通过request接收，有两种方式： query 和 querystring

    query：返回的是参数对象。 {name: 'jack', age: 12}
    querystring：返回的是请求字符串。 name=jack&age=12

  • query和querystring可以从request中获取，也可以直接从ctx中获取。

let request = ctx.request;
let query = request.query;
let querystring = request.querystring;

// 直接ctx获取
ctx.query
ctx.querystring
  1. POST 传值
    通过post传递的值我们可以通过原生Node封装，也可以通过第三方模块接收。
  • 自定义封装
const querystring = require('querystring');

module.exports = ctx => {
    return new Promise((resolve, reject) => {
        try {
            let data = '';

            // ctx.req实际上就是原生node中的req
            ctx.req.on('data', (chunk) => {
                data += chunk;
            })

            ctx.req.on('end', () => {
                data = querystring.parse(data);
                resolve(data);
            })
        } 
        catch(err) {
            reject(err);
        }
    })
}
  • 使用koa-bodyparser模块
const bodyParser = require('koa-bodyparser');
app.use(bodyParser());

// 获取
ctx.request.body

六、处理静态资源

对于诸如js、css、img等静态资源采用koa-static中间件处理。

npm i koa-static
配置:

比如静态目录为static：

// 静态资源配置
// app.use(require('koa-static')('static'))

// or
// app.use(require('koa-static')('./static'))

// or
// app.use(require('koa-static')(__dirname + '/static'))

// or 使用path.join() 的时候，static前面的/可加可不加，该方法会内部会做处理
app.use(require('koa-static')(path.join(__dirname, 'static')));

在模板中即可访问：

<link rel="stylesheet" href="/css/header.css">
<img src="/image/account.eb695dc.png"/>

七、模板引擎

koa生态的模板引擎挺多的，比如ejs、art-template等。

1. koa-ejs
npm i koa-ejs

const render = require('koa-ejs');
  • 配置
render(app, {
    // views 视图根目录
    root: path.join(__dirname, 'views'),
    layout: 'template',     // 公用文件 若要禁用，设置为false即可
    viewExt: 'html',        // 扩展名
    cache: false,           // 缓存 default true
    debug: false            // 如果开启debug模式，则会在终端实时打印信息 default false
});
  • 使用
/**
 * 参数1： 模板名
 * 参数2： 数据（可选）
 */
await ctx.render(templateName, data);
2. art-template
npm install --save art-template
npm install --save koa-art-template
  • 配置
const render = require('koa-art-template');

// 配置模板引擎
render(app, {
    root: path.join(__dirname, 'views'), // 视图目录
    extname: '.html',
    debug: process.env.NODE_ENV !== 'production'
});

使用方式和ejs一样。

性能上相比，art-template比ejs快很多，开发中用的最多的还是art-template。

八、cookie 和 session

http是无状态、无连接的。不会对之前发生过的请求和相应状态进行管理。也就是说，无法根据之前的状态进行本次的请求处理。

比如访问淘宝首页并登录账号后，当再打开淘宝其他页面时，因为每一次的访问都是独立的，服务器并不知道你已经登录，所以还是不能下单或者加购物车之类的操作。

cookie
  1. cookie简单介绍

cookie是客户端第一次访问服务器的时候，服务器在下行HTTP报文时通过响应头的set-cookie字段给浏览器分配的一个具有特殊标识的文本信息，此后当客户端再次访问同一域名时，便会将该字段通过请求头携带到服务器。注意： 第一次访问服务器是不可能携带cookie的。

缺陷： 1、cookie的数据存放在客户端，不安全，容易被（CSRF）跨站请求伪造。攻击者可以借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。2、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

  1. Koa中使用cookie
  • 设置cookie
ctx.cookies.get(name, [options])

通过 options 获取 cookie name:

signed 所请求的cookie应该被签名

  • 设置cookie
ctx.cookies.set(name, value, [options])

通过 options 设置 cookie name 的 value:

  • maxAge： 有效期（一个数字表示从 Date.now() 得到的毫秒数）
  • signed： cookie 签名值
  • expires： cookie 过期的 Date
  • path： cookie作用域（指定了主机下的哪些路径可以接受Cookie）, 默认是 /
  • domain： cookie作用域 （指定了哪些主机可以接受Cookie。如果不指定，默认为当前文档的主机<不包含子域名>;如果指定了Domain，则一般包含子域名。
    ）
  • secure： 安全 cookie。即标记为 Secure 的Cookie只可以通过被HTTPS协议加密过的请求发送给服务端。
  • httpOnly： 只可让服务器通过http请求访问cookie,不可通过js的document.cookieAPI访问，可以避免XSS攻击。 默认是 true。
  • SameSite： 允许服务器要求某个cookie在跨站请求时不会被发送，从而可以阻止跨站请求伪造攻击（CSRF）。可选值：
    1. None：浏览器会在同站请求、跨站请求下继续发送cookies，不区分大小写。
    2. Strict： 浏览器将只在访问相同站点时发送cookie。
    3. Lax： 在新版本浏览器中，为默认选项。大多数情况不发送第三方 Cookie，只有当用户从外部站点导航到URL时才会发送，包括链接（a标签）、预加载（link）、get表单。
  • overwrite： 一个布尔值，表示是否覆盖以前设置的同名的 cookie (默认是 false). 如果是 true, 在同一个请求中设置相同名称的所有 Cookie（不管路径或域）是否在设置此Cookie 时从 Set-Cookie 标头中过滤掉。
设置中文cookie

通过buffer转成base64存进去，取出来是再转回中文。

// 转base64
Buffer.from('张三').toString('base64');

// 转回中文
Buffer.from(buf, 'base64').toString();
session
  1. seeion简单介绍

session是另一种记录客户状态的机制，不同的是cookie保存在客户端浏览器中，而session保存在服务器上。

前面说过，cookie 是存放在客户端，不是很安全，用户可以自己手动把cookie种在客户端以欺骗服务器。而session是存储在服务端的，所以对于较重要的数据存储在session。

缺点： session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能。

  1. session 的工作机制

当浏览器第一次请求服务器时，服务器端会创建一个session对象，生成一个类似于key-value的键值对， 然后将key(cookie)下发到客户端，当客户端再访问时，携带key(cookie)，找到对应的session(value)。 生产中用户的信息都保存在session中。

  1. koa-session 的使用
npm install koa-session

const Koa = require('koa');
const session = require('koa-session');

const app = new Koa();

app.keys = ['some secret hurr'];
 
const CONFIG = {
  key: 'koa:sess',      // 返给浏览器 cookie 的key 默认是 'kao:sess'
  maxAge: 86400000,     // cookie的过期时间 maxAge in ms (default is 1 days)
  autoCommit: true,     // (boolean) 自动给客户端下发cookie 并设置session
  overwrite: true,      // 是否可以覆盖之前同名的cookie    (默认default true)
  httpOnly: true,       // cookie是否只有服务器端可以访问 httpOnly or not (default true)
  signed: true,         // 签名默认true
  rolling: false,       // 在每次响应时强制设置session标识符cookie，到期时被重置设置过期倒计时。（默认为false）
  renew: false,         // 当session快过期时更新session，这样就可以始终保持用户登录 默认是false
};

以上配置选项常用的就是key、maxAge、httpOver。

renew应用：比如我们登录账号写一篇博客，写了一半cookie过期了，当我们提交的时候就会退出登录，体验很不好，而且写好的博客丢失。

九、重定向

301和302重定向状态码区别。302为临时重定向，301永久重定向。Koa中默认为302。详细信息查看这篇博客 301和302重定向介绍

字符串 “back” 是特别提供Referrer支持的，当Referrer不存在时，使用 alt 或“/”。

ctx.redirect('back');
ctx.redirect('back', '/login');
ctx.redirect('/login');

要更改 “302” 的默认状态，只需在该调用之前或之后分配状态。要变更主体请在此调用之后:

ctx.status = 301;
ctx.redirect('/cart');
ctx.body = 'Redirecting to shopping cart';

十、跨域请求

解决跨域的方式有很多种，个人认为最好的方案是在服务器端设置支持跨域。

原生设置方式：

下面详细说明在koa2中设置具体的请求头信息：

app.use(async (ctx, next) => {
    // 允许所有域名请求
    ctx.set("Access-Control-Allow-Origin", "*")
    //  只允许 http://localhost:8080 域名的请求
    // ctx.set("Access-Control-Allow-Origin", "http://localhost:8080");

    // 设置允许的跨域请求方式
    ctx.set("Access-Control-Allow-Methods", "OPTIONS, GET, PUT, POST, DELETE")

    // 字段是必需的。值一个逗号分隔的字符串，表示服务器所支持的所有头信息字段.
    ctx.set("Access-Control-Allow-Headers", "x-requested-with, accept, origin, content-type")

    // 服务器收到请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，即可做出响应。

    // Content-Type表示具体请求中的媒体类型信息
    ctx.set("Content-Type", "application/json;charset=utf-8")

    // 该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。 当设置成允许请求携带凭证cookie时，需要保证"Access-Control-Allow-Origin"是服务器有的域名，而不能是"*";
    ctx.set("Access-Control-Allow-Credentials", true);

    // 该字段可选，用来指定本次预检请求的有效期，单位为秒。
    // 当请求方法是PUT或DELETE等特殊方法或者Content-Type字段的类型是application/json时，服务器会提前发送一次请求进行验证
    // 下面的的设置只本次验证的有效时间，即在该时间段内服务端可以不用进行验证
    ctx.set("Access-Control-Max-Age", 300);

    /*
    CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：
        Cache-Control、
        Content-Language、
        Content-Type、
        Expires、
        Last-Modified、
        Pragma。
    */
    // 需要获取其他字段时，使用Access-Control-Expose-Headers，
    // getResponseHeader('myData')可以返回我们所需的值
    ctx.set("Access-Control-Expose-Headers", "myData")

    await next()
})
使用中间件方式

在koa2中，解决跨域请求还可使用中间件koa2-cors

  1. 安装：
npm i koa2-cors -S
  1. 注册中间件
const cors = require('koa2-cors')
app.use(cors())

十一、node发送邮件

node 发送邮件可以使用nodemailer三方模块。

安装：

npm i nodemailer


const nodemailer = require("nodemailer")

async function main() {
  let transporter = nodemailer.createTransport({
    host: "smtp.qq.com",
    port: 465,
    secure: true, // true for 465, false for other ports
    auth: {
      user: 'test@qq.com', 
      pass: 'akphfubplzqdbdfh'
    }
  })

  let info = await transporter.sendMail({
    from: 'test@qq.com', // sender address
    to: "bar@qq.com", // 接收地址 多个邮箱使用 ','分割
    subject: "Hello 老胖", // 邮件主题
    text: "胖子蹲啊胖子蹲胖子蹲完瘦子蹲", // plain text body
    // html: "<b>嗯好</b>" // html body
  })

  console.log("Message sent: %s", info.messageId)
  console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info))
}

main().catch(console.error)

使用说明：

  1. 创建transporter配置信息
    在node_modules>nodemailer>lib>well_known>services.json中查看对应的配置信息。配置发件邮箱相应的host、port及secure。

  2. 获取发件箱密码（类似于授权，获取key），以qq邮箱为例
    qq邮箱>设置>账户>POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务，点击开启获取pass

    授权.png

  3. 配置user和pass

    1. user即发件地址
    2. pass就是刚才授权获取的密码

  1. sendMail配置信息

    1. from 发件地址
    2. to 收件地址 如果多个收件地址，用 ,分割即可
    3. subject 邮件主题
    4. text 文件内容
    5. html html内容

    注意：text和html只能配置一个

更多详细配置信息及功能参照官网

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,185评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,445评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,684评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,564评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,681评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,874评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,025评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,761评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,217评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,351评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,988评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2赞 349

推荐阅读更多精彩内容