摘要：于是翻遍與各大網站，都沒找到一個好用的輕一點的腳手架，也找不到一個清晰些的搭建介紹。現在把搭建過程介紹下，看能不能方便下入門的同學。創建一個文件夾，命名。記得先裝好以上版本一路回車，根據提示輸入信息。但這只是初步的搭建了下。

前幾天想寫個小爬蟲程序，準備后端就用koa2。于是翻遍github與各大網站，都沒找到一個好用的、輕一點的koa2腳手架，也找不到一個清晰些的搭建介紹。github上的腳手架要么是1.x版的koa，要么一堆復雜的依賴。

當然可能還是有寫的比較好的吧，只是我沒找到。不管怎樣吧，我只能親自上了，就當是學習了。

現在把搭建過程介紹下，看能不能方便下入門的同學。

官方的介紹，是很簡單的。

$ npm install koa

const Koa = require("koa")
const app = new Koa()

// response
app.use(ctx => {
  ctx.body = "Hello Koa"
})

app.listen(3000)

好，那我們就先從這開始。創建一個文件夾，命名koa2。（記得先裝好node v7.6.0 以上版本）

cd koa2

npm init // 一路回車，根據提示輸入信息。

npm install koa --save

然后在文件下根目錄下創建程序入口文件：index.js，并把官網介紹那段代碼貼進去。之后在命令行中執行

node index.js

打開瀏覽器，訪問 http://localhost:3000/ ，可以看到頁面輸出了 hello world。

很好，第一步已經踏出去了。相信到這里大部分小白都沒問題，之后就開始懵逼了。就這個玩意，我該怎么寫接口？怎么連接數據庫？

Koa本質上是調用一系列的中間件，來處理對應的請求，并決定是否傳遞到下一個中間件去處理。我們來寫一個最簡單的中間件試試。

// 剛才index.js 中的這段代碼，我們改寫一下。
app.use(ctx => {
  ctx.body = "Hello Koa"
})

// 改成如下

app.use(ctx => {
  ctx.body = `您的網址路徑為:${ctx.request.url}`
})

這段代碼中，app.use 的 function 就是最簡單的一個中間件，接受了請求，讀出請求路徑，并返回到客戶端。重新執行下node index.js，打開瀏覽器，輸入http://localhost:3000/hhhhh，頁面輸出了您的網址路徑為:hhhhh。

所以，接口的本質，就是判斷不同的請求鏈接，干不同的事情，返回相應的結果。那么我們得需要一個路由中間件來處理分發請求。開源的時代，當然是拿來主義了。github搜下koa-router，成功找到。根據它的介紹，我們先在項目根目錄執行

npm install koa-router --save

然后把index.js文件再改造下。變成如下：

const Koa = require("koa")
const Router = require("koa-router")
const app = new Koa()
const router = new Router()

// 先注釋了，后面再解釋
// const bodyParser = require("koa-bodyparser")
// app.use(bodyParser())

router.get("/", ctx => {
  ctx.body = `這是主頁`
})

router.get("/user", ctx => {
  ctx.body = `這是user頁`
})

router.get("/post", ctx => {
  ctx.body = ctx.request.body
})

router.get("/async", async ctx => {
  const sleep = async (ms) => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(true)
      }, ms)
    })
  }
  await sleep(1000)
  ctx.body = `這是異步處理頁`
})

app
  .use(router.routes())
  .use(router.allowedMethods())

app.listen(3000)

重新執行 node index.js。我們可以看到訪問 /, /user，/async，都能得到相應的結果了。

除了那個post的方法，壓根得不到自己post的數據。

因為koa是很純粹的，你提交的數據，它并不會幫你處理。所以這里我們又必須引用一個中間件來處理提交的數據--bodyparser。把上面那兩行注釋代碼解注，就能處理請求數據了。記得要先

npm install koa-bodyparser --save

另外關于async/await不明白的同學，可以先去看下阮老師的介紹，點擊傳送門。

不過我們不能把所有的接口都寫在這一個文件呀，所以我們得改造下。理一下思路，路由的配置文件應該多帶帶一份，接口的方法應該按業務模塊分成一個個controller。說干就干！

先看改造后的目錄結構，不想截圖，大家將就看看：

-koa2
  -node_modules
  -controller
    user.js
  -index.js
  -router.js
  -package.json

再來看文件變成怎么樣了。

// index.js

const Koa = require("koa")
const app = new Koa()
const router = require("./router")
const bodyParser = require("koa-bodyparser")

app.use(bodyParser())

app
  .use(router.routes())
  .use(router.allowedMethods())

app.listen(3000)

// router.js

const Router = require("koa-router")
const router = new Router()
const user = require("./controller/user")

router.post("/user/login", user.login)
router.get("/user/profile", user.profile)

module.exports = router

// controller/user.js

const sleep = async (ms) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(true)
    }, ms)
  })
}
module.exports = {
  login (ctx) {
    ctx.body = {
      username: ctx.request.body.username
    }
  },
  async profile (ctx) {
    await sleep(1000)
    ctx.body = {
      username: "相學長",
      sex: "man",
      age: "999"
    }
  }
}

再重新執行 node index.js。訪問相應路由，應該能得到對應的結果了。

好，到此為止，我們的server已經大致完成了，但是我們發現一個很煩的問題就是，每次修改代碼都得重新node index.js，這也太煩了。我希望的是，每次更新代碼都能重新執行，并且幫我執行ESlint。其他前端項目webpack那一套，不是webpack配置工程師的話，自己挪過來又改不來。

這里我介紹個簡單的方案，nodemon + gulp。具體呢就不一步步來了，這種東西，不用太了解，能run起來滿足自己需求就好。如果不需要eslint的話，只要安裝nodemon就好。

package.json scripts部分 修改為：

"scripts": {
  "nodemon": "nodemon index.js"
}

然后命令行執行：

npm install nodemon --save-dev

npm run nodemon

如果有eslint的需求的話，就稍微麻煩些了，eslint的init我就不貼教程了，我貼上我的gulp配置文件：

// gulpfile.js
const gulp = require("gulp")
const lint = require("gulp-eslint")
const nodemon = require("gulp-nodemon")

function lintFiles (files) {
  return gulp.src(files)
    .pipe(lint())
    .pipe(lint.format())
    // .pipe(lint.failAfterError())
}

gulp.task("eslint", () => lintFiles(["**/*.js", "!node_modules/**"]))

gulp.task("eslint_nodemon", ["eslint"], () => {
  return nodemon({
    script: "./app/server.js", // 項目入口文件
    tasks (changedFiles) {
      lintFiles(changedFiles)
      return []
    },
    ignore: ["build/**", "dist/**", ".git", "node_modules/**"]
  })
})

gulp.task("default", ["eslint_nodemon"])

// package.json scripts
"scripts": {
  "start": "pm2 start index.js --watch", // 這里用pm2 作為線上run，有興趣的同學可以自己去看看
  "dev": "gulp",
  "lint": "eslint .",
  "fix": "eslint --fix ."
},

到這里，我想應該能讓一部分同學上手了。

但這只是初步的搭建了下koa。真的想投入使用，根據業務需求，可能還需要安裝數據庫驅動等中間件。對于復雜業務場景的server，還需要更加合理的設計controller，service，在這里就不多闡述了。

如果這篇文章，能夠幫助到一些同學，下次有空再寫寫這方面相關的。

ps: 文章介紹的所有代碼都傳了一份到github，有需要的同學請自行去看。

地址：https://github.com/wuomzfx/koa2