chenshenhai / koa2-note

《Koa2进阶学习笔记》已完结🎄🎄🎄

《Koa2进阶学习笔记》已完结

序言

从2017年2月份开始写这本开源电子书，是为了记录自己的学习轨迹和分享技术心得，本开源书的Koa2的基础进阶教程已经完结，更多的Koa.js的高阶学习会在后续新开几本书进行探索。感谢这一年来所有读者的关注！O(∩_∩)O。

本书为Koa.js 2.x 的入门书籍，如果想了解更多 Koa.js 的原理，可阅读 《Koa.js 设计模式-学习笔记》

更多前端技术学习可关注公众号 大海码 DeepSeaCode

关于作者

• 关于作者(我)
• 本书协议 MIT

快速阅读地址

• 个人博客站点阅读 https://chenshenhai.com/koa2-note
• Github Pages 阅读 https://chenshenhai.github.io/koa2-note/

目录

• 1. koa2开始
  • 1.1 快速开始
  • 1.2 async/await使用
  • 1.3 koa2简析结构
  • 1.4 koa中间件开发与使用
• 2. 路由
  • 2.1 原生koa2实现路由
  • 2.2 koa-router中间件
• 3. 请求数据获取
  • 3.1 GET请求数据获取
  • 3.2 POST请求数据获取
  • 3.3 koa-bodyparser中间件
• 4. 静态资源加载
  • 4.1 原生koa2实现静态资源服务器
  • 4.2 koa-static中间件
• 5. cookie/session
  • 5.1 koa2使用cookie
  • 5.2 koa2实现session
• 6. 模板引擎
  • 6.1 koa2加载模板引擎
  • 6.2 ejs模板引擎
• 7. 文件上传
  • 7.1 busboy模块
  • 7.2 上传文件简单实现
  • 7.3 异步上传图片实现
• 8. 数据库mysql
  • 8.1 mysql模块
  • 8.2 async/await封装使用mysql
  • 8.3 项目建表初始化
• 9. JSONP实现
  • 9.1 原生koa2实现JSONP
  • 9.2 koa-jsonp中间件
• 10. 测试
  • 10.1 单元测试
• 11. debug
  • 11.1 开发debug
• 12. 项目框架搭建
  • 12.1 快速启动
  • 12.2 框架设计
  • 12.3 分层操作
  • 12.4 数据库设计
  • 12.5 路由设计
  • 12.6 webpack4环境搭建
  • 12.7 使用react.js
  • 12.8 登录注册功能实现
  • 12.9 session登录态判断处理
• 13. 其他进阶
  • 13.1 import/export使用

前言

• ES6/7 带来的变革

自ES6确定和ES7的async/await开始普及，node.js的发展变得更加迅速，可以预见到JavaScript中令人“头疼”的多层嵌套回调（注意是”多层嵌套回调“）将会使用Promise + async/await的方式逐渐替代（不是完全替代，多层嵌套回调也有其特殊的应用场景）。

• koa2 大势所趋的前景

基于async/await实现中间体系的koa2框架将会是是node.js web开发方向大势所趋的普及框架。基于generator/yield的koa1将会逐渐被koa2替代，毕竟使用co.js来处理generator是一种过渡的方式，虽然有其特定的应用场景，但是用async/await会更加优雅地实现同步写法。

初衷

• 写笔记目的

从学生到工作写了几年的代码，觉得虽然学习新语言，新框架的主要目的是为了解决实际问题，其中更重要的是要每次入门了一门新技术后要及时留下点学习的痕迹，方便以后忘记可以从学习轨迹中迅速上手。

koa2-note's Issues

异步上传图片文件

• 你好,这个同步创建目录的函数，第一步判断目录是否存在，为什么已经存在目录，else中还要再进行递归地调用mkdirsSync这个函数呢？？有点不太懂

function mkdirsSync( dirname ) {
  if (fs.existsSync( dirname )) {
    return true
  } else {
    if (mkdirsSync( path.dirname(dirname)) ) {
      fs.mkdirSync( dirname )
      return true
    }
  }
}

koa-session

请问 koa session 这一块怎么跑起来的，我怎么跑不起来？ 是不是因为里面操作数据库 MySQL 没跑起来，怎么跑MySQL；

8.1创建数据库会话代码片段里提示connection.release is not a function

看了下官方的实例,此处是connection.end().
下面连接池部分是用的connection.release().
不知道是不是只有我有这个问题.
: )

关于接口访问为啥请求两次?

系列文章写得真好，不过在服务器上面运行demo project时出现问题

我把demo/project里面的代码放在服务上面跑，配置完成后，执行

npm run start_server

出现如下错误

module.js:472
    throw err;
    ^

Error: Cannot find module './../models/user-info'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/data/koa2-note/demo/project/server/services/user-info.js:6:19)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/data/koa2-note/demo/project/server/controllers/user-info.js:1:87)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)

只是单纯的感谢。

教程循序渐进，非常有帮助，夸张点说1天就入门（零基础除外），你在留下学习痕迹的同时，让我们结合官方文档学习的时候，更快捷的上手koa2，一堆话化作一句感激吧～～～！
顺祝: @chenshenhai 及大家春节愉快。

koa-router跟着你路径还是爆404

Session 管理会话的时候如何设置cookie有效时长

Add the middleware like this, use maxAge to set the time, but don't work.
The cookie didn't be invalid.
Why?

app.use(session({
  maxAge:5000
}))

koa-router路由demo 无法走通

// 子路由2
let page = new Router()
page.get('/404', async ( ctx )=>{
  ctx.body = '404 page!'
}).get('/helloworld', async ( ctx )=>{
  ctx.body = 'helloworld page!'
})

该部分代码走不进去

note/ mysql/async.md

你好，如果不封装sql成同步会有什么问题吗？

koajs-design-note 和 koa2-note的内容好像变成一样的了。

koajs-design-note 和 koa2-note 的内容好像变成一样的了。我记得之前看koa2-note 的内容不是这样的。

文档能不能先介绍如何热更新。

没有热更新，每次都要反复的关闭，启动。

npm run init_sql error

Unnecessary code

koa2-note/demo/static-use-middleware/index.js

Line 16 in fab3aa6

ctx.body = 'hello world'

It would return hello world all the time.

使用busboy处理文件上传失败

环境：
koa2.3.0;
node7.10.0;
busboy:0.2.14;

问题：
我按照“文件上传”里的"上传文件简单实现"方式想实现koa2下处理文件上传。
busboy监听的file,field,error都没有跑进去，只能跑到finish里。代码都是按照文档例子敲的。这是怎么会回事啊

async/await封装使用mysql 中错误处理的问题

https://github.com/ChenShenhai/koa2-note/blob/master/note/mysql/async.md

下面的代码中，如果创建连接失败，应该是 reject( err ) 吧？

pool.getConnection(function(err, connection) {
      if (err) {
        // 这里我觉得应该是 reject( err )，而不是 resolve。
        resolve( err )
      } else {
        // ...

断点调试会跳过的问题

在webstorm中，ansyc/await的函数在断点调试会跳过，有解决方案么？

异步上传图片

• 你好,这个同步创建目录的函数，第一步判断目录路径是否存在，为什么已经存在目录路径，else中还要再进行递归地调用mkdirsSync这个函数呢？？有点不太懂

function mkdirsSync( dirname ) {
  if (fs.existsSync( dirname )) {
    return true
  } else {
    if (mkdirsSync( path.dirname(dirname)) ) {
      fs.mkdirSync( dirname )
      return true
    }
  }
}

• fs.existsSync判断传入的路径名是否存在,如果不存在，为什么把目录名传进入进行判断，创建目录文件夹？

十分感谢

是一个学习node及koa的好地方，再次感谢分享

静态文件无法加载字体文件

我在 mime中加了ttf 和 woff 的mime。
'ttf': 'application/octet-stream', 'woff': 'font/x-woff', 'woff2': 'application/font-woff2',

但是在浏览器中一直抱异常。

grids.html:1 Failed to decode downloaded font: http://127.0.0.1:3300/fonts/fontawesome-webfont.woff grids.html:1 OTS parsing error: incorrect file size in WOFF header grids.html:1 Failed to decode downloaded font: http://127.0.0.1:3300/fonts/fontawesome-webfont.ttf grids.html:1 OTS parsing error: incorrect entrySelector for table directory
请问这个怎么解决?

问下作者文档怎么生成的，我需要去看些什么资料

问下作者文档怎么生成的，我需要去看些什么资料

upload方法监听不到file上传方法

`
Request Headers:
Accept: /
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 1243
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary0nc6DwwRlVIQdGiJ
Cookie: captcha_token=408f7903a848baed9d5878f16cb73844;
USER_SID=lCyHKbOwfu6Kle9RdT37AUW3mAHzp-BR
Host: localhost:8000
Origin: http://localhost:8000
Referer: http://localhost:8000/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like
Gecko) Chrome/67.0.3396.99 Safari/537.36
X-Requested-With: XMLHttpRequest

Request payload

------WebKitFormBoundary0nc6DwwRlVIQdGiJ
Content-Disposition: form-data; name="file"; filename="[email protected]"
Content-Type: image/png

------WebKitFormBoundary0nc6DwwRlVIQdGiJ--
`
文件上传前端上传的数据是这样的

服务端用的koa2，上传方法是你的uploadFile方法，但是在调用的时候

// 解析请求文件事件
busboy.on('file', )这个方法并不会触发，我暂时还不知道如何解决，能否给予帮助，谢谢

图片上传之后，’/upload.json‘ 在这个路由下刷新，会重新上传一次，这个问题怎么解决

�我感觉是没有把文件流清空，请问这个怎么解决

/project/dist文件夹丢失

异步上传图片实现，选择图片后没有上传成功

异步上传图片的实现，选择图片后，现象： 上传进度0%，图片没有上传成功

Miss end tag for li

koa2-note/demo/static-server/util/dir.js

Line 21 in fab3aa6

html = `${html}<li><a href="${url === '/' ? '' : url}/${item}">${item}</a>`

So is README.md

关于npm run dev 的问题需要咨询

大神，按照你的demo，在package中有如下代码
"dev": "npm run dev_server & npm run dev_static",
"dev_server": "nodemon --harmony ./server/app",
"dev_static": "webpack --watch --config ./static/build/webpack.dev.config.js",
但是我执行npm run dev 总是能启动项目，但是不能启动webpack watch，如果交换了dev_server和dev_static的位置，又只能启动webpack watch不能启动项目！求大神指导

是否还在更新中？

请问一下：
1，这个教程是否还在为最新版本的koa做同步更新呢？
2，ejs模版引擎的教程是否可以加入layout布局的讲解？
3，数据库操作时是否可以加入Sequelize的ORM的相关教程？
4，如何设置自己的域名，而非采用localhost的方式运行呢？

开发debug

按照你的文档，执行命令后并没有出现chrome调试的链接，是跟系统有关么，我的是windows，64位，默认谷歌浏览器

req.pipe(busboy) : - )

koa2-note/demo/upload/util/upload.js

Line 90 in fab3aa6

req.pipe(busboy)

这行怎么理解 ，有什么作用

session保存在数据库中每次登录就创建一个session

session缺少一个定时清理功能

Inappropriate encoding

koa2-note/demo/project/init/util/get-sql-content-map.js

Line 13 in fab3aa6

let content = fs.readFileSync( path, 'binary' )

Use 'utf8' instead of 'binary' to avoid garbled characters when inserting Chinese character into database here.

连接mysql数据库报错：ER_NOT_SUPPORTED_AUTH_MODE

背景

我已经安装好了mysql(MAC)并配置了全局变量，使用idea内置的mysql连接工具测试连接成功。

使用命令行工具测试连接成功

连接代码

let store = new MysqlSession({ 
    user: 'root',
    password: '12345678',
    database: 'test',
    host: '127.0.0.1',
    port: 3306,
    insecureAuth: true
})

错误信息

(node:2837) UnhandledPromiseRejectionWarning: Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client
    at Handshake.Sequence._packetToError (/Users/stevenlee/github/test/koa2-note/demo/mysql/node_modules/mysql/lib/protocol/sequences/Sequence.js:52:14)
    at Handshake.ErrorPacket (/Users/stevenlee/github/test/koa2-note/demo/mysql/node_modules/mysql/lib/protocol/sequences/Handshake.js:130:18)
    at Protocol._parsePacket (/Users/stevenlee/github/test/koa2-note/demo/mysql/node_modules/mysql/lib/protocol/Protocol.js:279:23)
    at Parser.write (/Users/stevenlee/github/test/koa2-note/demo/mysql/node_modules/mysql/lib/protocol/Parser.js:76:12)
    at Protocol.write (/Users/stevenlee/github/test/koa2-note/demo/mysql/node_modules/mysql/lib/protocol/Protocol.js:39:16)
    at Socket.<anonymous> (/Users/stevenlee/github/test/koa2-note/demo/mysql/node_modules/mysql/lib/Connection.js:103:28)
    at emitOne (events.js:116:13)
    at Socket.emit (events.js:211:7)
    at addChunk (_stream_readable.js:263:12)
    at readableAddChunk (_stream_readable.js:250:11)
    --------------------

在session、mysql两个模块下连接mysql都遇到了这个问题，使用的node包分别为koa-mysql-session与mysql.

注：我只修改了数据库连接的配置信息。

上网查了好久都没解决，如果哪位大神有什么好的思路，跪求分享，不胜感激:ambulance:

关于补充RESTFULL

你好，后期会不会有 restful api 的架构，包括一些验证 ，如 koa-jwt 等 。静静等待

请问控制器和router是怎么分离配合的？

使用session存入mysql数据库时程序没有报错，也能生成sessionid，但是mysql数据库就是没有值

使用session存入mysql数据库时程序没有报错，也能生成sessionid，但是mysql数据库就是没有值。这是什么原因导致的呢。

建议用gitbook来写

可以尝试gitbook
阅读性会提升很多

webpack-2.2.0-rc.3

npm 安装webpack-2.2.0-rc3不上，安装了4.18.0， npm run dev ，没有问题，但是看不到页面，如何升级？

图片异步上传后，后面的代码执行不了promise

 // 上传文件事件

        result = await uploadFile( ctx, {
            fileType: 'album',
            path: serverFilePath
        })
        console.log(result)
     
        async  function a() {
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve(1)
                },1000)
            })
        }

        let b =  await a()
        console.log(b)

如上面的代码，图片上传完后可以拿到result,但是执行下面的内容却跑不下去，请问是什么原因

异步上传图片的fileType设置为album或者common是什么鬼

异步上传图片的fileType设置为album或者common是什么鬼 @chenshenhai

mysql release() should be end()

then throw an error

大神，这里的data，没有看明白，麻烦讲解下

服务端渲染

这个笔记非常受用， 对我来说是一个教程，里面有 react 服务端渲染的部分，

希望能出一份 vue 服务端渲染的小demo

getUserInfoByUserName( userName ) 查库时没有加where判断

koa2-note/demo/project/server/models/user-info.js

第八节 ./util/get-sql-map.js

function getSqlMap () {
  let basePath = __dirname
  basePath = basePath.replace(/\\/g, '\/')

  let pathArr = basePath.split('\/')
  pathArr = pathArr.splice( 0, pathArr.length - 1 )
  basePath = pathArr.join('/') + '/sql/'

  let fileList = walkFile( basePath, 'sql' )
  return fileList
}

没看懂，难道不是path.join就能直接解决

webpack2有打算升级webpack4么？

正在学习此教程，感觉很不错，想问下webpack2有计划升级到webpack4么？

static-server的例子中，读取文件内容的编码不能写死为binary哦

在 /demo/static-server/util/file.js 里面有这样的一段代码 ：

let content = fs.readFileSync(filePath, 'binary' )

其实，这里需要对文件类型进行判断的，因为中文使用 binary 读取出来会是乱码的。个人觉得只有是图片、视频等才有必要使用 binary 读取。其他的用 utf8 便可。

webpack打包一直出错

我就是把您的项目下载下来，利用快速启动npm run start_static进行打包，这是第一次出的问题

在网上查是需要开启presets: ['es2015', 'react']，但是看您的项目里给注释掉了，

我给取消了注释，然后又报了类似的错误，但是位置不同了

请问这个问题出在哪里呢？我的node版本是7.10.0，npm版本是4.5.0

关于await/async 放到浏览器中无法运行啊。

请问readme中的lowpoly风格logo是怎么制作的？

过来学习koa，结果被logo吸引了，之前也看过很多lowpoly风格的图，感觉你这个做的特别好，所以想求一下制作方法或者链接，谢谢~