摘要：可以有很多，每一個(gè)會注冊一個(gè)中間件，這個(gè)中間件是具體做事情的。每個(gè)中間件是依次執(zhí)行的。一個(gè)經(jīng)典的洋蔥圖可以解釋這一切。不過，由于是第一次用這貨寫項(xiàng)目，時(shí)間緊，偽任務(wù)重，看了文檔后發(fā)現(xiàn)，原來還有一個(gè)中間件列表的鏈接，里面有各種開源的中間件。

學(xué)了一段時(shí)間的 js 了，突然想實(shí)踐一下。正好公司有個(gè)小的項(xiàng)目要做，就順手拿 Koa2 來做了。真是不做不知道，做了想不到。踩了一堆新手坑。

在知道 Koa2 之前，我也了解過 Express，可惜并沒有實(shí)戰(zhàn)用過。后來大家都說 Koa 是一個(gè)比 Express 更牛X的東西，于是在好（作）奇（死）心作祟下，直接去用 Koa2 了。后來證明的確是作死，原本用 PHP 一天就能寫完東西，愣是讓我搞了三天。

最近 Node.js V8 發(fā)布了，原生支持 async 和 await 調(diào)用了，所以直接把 Node.js 升級了一下。

根據(jù) Koa2 的教程，安裝很簡單，我是使用的 yarn 的（還真是比 npm 快）。

yarn add koa

默認(rèn)就裝了 Koa 2.2。然后裝完了，其實(shí)我是一臉懵逼的，文檔上說這樣用。

const Koa = require("koa")
const app = new Koa()
 
// response 
app.use(ctx => {
  ctx.body = "Hello Koa"
})
 
app.listen(3000)

我照著代碼寫了下來，的確成功了。可是，難不成我要把所有的邏輯寫在 app.use 里？

我感覺我受到了驚嚇，嚇得我趕緊往下看文檔。原來 Koa2 是一個(gè)中間件模型。app.use 可以有很多，每一個(gè) app.use 會注冊一個(gè)中間件，這個(gè)中間件是具體做事情的。每個(gè)中間件是依次執(zhí)行的。一個(gè)經(jīng)典的洋蔥圖可以解釋這一切。

那么，上面的實(shí)例就可以改造成這樣。

app.use(async (ctx, next) => {
  await next()
  ctx.body = "Hello Koa"
})

按照上面的洋蔥頭，以心為單位，next的兩側(cè)的語句分別在洋蔥的左側(cè)和右側(cè)進(jìn)行執(zhí)行，頗像 Laravel 的中間件。

就這樣，我知道了，所有的操作不必寫在同一個(gè) app.use 里。可是，下一個(gè)問題來了，我要把所有的邏輯都寫再一個(gè)文件里？說好的 MVC 呢？沒有 MVC 也叫做框架？Are you kidding me?（好吧后來發(fā)現(xiàn)原來 Koa2 并不是一個(gè)裝置做網(wǎng)站的框架）

既然沒有 MVC，那就自己動手豐衣足食吧。

首先要處理的就是路由的問題。不過，由于是第一次用這貨寫項(xiàng)目，時(shí)間緊，（偽）任務(wù)重，看了文檔后發(fā)現(xiàn)，原來還有一個(gè)中間件列表的鏈接，里面有各種開源的中間件。我想你們一定隔著屏幕都能聽到我發(fā)出杠鈴般的笑聲了。有一個(gè)中間件非常棒，叫做 koa-router。這貨是這么用的。

var Koa = require("koa")
var Router = require("koa-router")
 
var app = new Koa()
var router = new Router()
 
router.get("/", function (ctx, next) {
  // ctx.router available
});
 
app.use(router.routes())

雖然是把邏輯和 app.use 分開了，但是，好像還是沒有解決剛才的問題。說好的 MVC 也沒有出現(xiàn)。于是我再去找了找，居然沒有 Controller 的中間件。我一下就懵逼了，玩脫了？還有一天啊我的寶貝兒。經(jīng)過我半秒鐘的慎重思考，我還是用 koa-router 自己實(shí)現(xiàn)一個(gè)控制器吧。

const fs = require("fs")

function addRoutes(router, routes) {
  for (let route in routes) {
    switch (route.method) {
      case: "post":
        router.post(route.uri, route.fn)
        console.log(`Register post url: ${route.uri}`)
        break
      case: "get":
        router.get(route.uri, route.fn)
        console.log(`Register get url: ${route.uri}`)
        break
      default: 
        console.log(`Invalid url: ${route}`)
    }
  }
}

function addControllers(router) {
  let files = fs.readdirSync(__dirname + "/controllers")

  let controllerFiles = files.filter(f => {
    return f.endsWith(".js")
  })

  for (let controllerFile in controllerFiles) {
    console.log(`process controller: ${controllerFile}...`)
    let routes = require(__dirname + "/controllers")
    addRoutes(router, routes)
  }
}

module.exports = () => {
  let router = require("koa-router")()
  addControllers(router)
  return router.routes()
}

我通過在 controllers 文件夾中，創(chuàng)建若干 js 文件來作為 Controller 來使用。這里稍微參考了下 廖雪峰的文章。

然后，我們只需要在 controllers 文件夾中添加合適的文件就可以了。例如我們添加一個(gè)文件叫做 chart.js ，然后這樣寫代碼。

let hello = async (ctx, next) => {
  ctx.body = "Hello the fucking world!"
}

module.exports = [
  {
    method: "get",
    uri: "hello",
    fn: hello,
  }
]

最后再在 app.js 注冊中間件即可。

除此之外，我們還需要能夠處理 ctx 里的內(nèi)容，因?yàn)樗锩娲鎯Φ氖窃嫉膬?nèi)容。還是由于時(shí)間緊，任（填）務(wù)（坑）重（急），我用了 koa-bodyparser。

const bodyParser = require("koa-bodyparser")

app.use(bodyParser())

這里要提醒的是，這貨一定要放在處理路由中間件的前面。

MVC 的 C 已經(jīng)解決了，接下來就要解決 M 的問題了。這里我用的是 Sequelize。這個(gè) ORM 和大多數(shù)的 ORM 都差不多，所以在這里這次沒有踩到什么坑。我在根目錄下新建了一個(gè) config.js 的配置文件，然后新建了 model.js 用來定義模型。

const Sequelize = require("sequelize")
const config = require("./config").databases

...

module.exports = {
  //models
}

視圖，我是使用了一個(gè)中間件叫做 koa-view。由于它使用的是 Nunjucks 模板引擎，對于寫 PHP 的我相對熟悉一點(diǎn)。

const view = require("koa-view")

const app = Koa()

app.use(view(__dirname + "/views"))

//controller

let Hello = (ctx, next) => {
  ctx.render("hello", datas)
}

只要在 "views" 文件夾中定義相對應(yīng)的 html 文件即可。

這次的嘗試，終于在我的修修補(bǔ)補(bǔ)中，搞出了一個(gè)簡陋的 MVC 模型。趕在了 deadline 前完成，真是一波三折啊。學(xué)習(xí)新技術(shù)，就是這樣，要實(shí)踐嘛= =下面給出我的項(xiàng)目目錄作參考

koa2/
|
+- controllers/
|  |
|  +- chart.js
|  ...
|
+- static/
|  |
|  +- js/
|     ...
|  |
|  +- style/
|     |
|     +- img
|     ...
|
+- views/
|  |
|  +- game.html
|  ...
|
+- app.js
|
+- config.js
|
+- controller.js
|
+- model.js
|
+- package.json
|
+- yarn.lock
|
+- node_modules/

菜鳥作品，如有錯(cuò)誤請指正，不勝感激。

如果你喜歡我的文章，那就請我喝杯奶茶吧~