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

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

當(dāng)然可能還是有寫的比較好的吧，只是我沒找到。不管怎樣吧，我只能親自上了，就當(dāng)是學(xué)習(xí)了。

現(xiàn)在把搭建過程介紹下，看能不能方便下入門的同學(xué)。

官方的介紹，是很簡(jiǎn)單的。

$ npm install koa

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

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

app.listen(3000)

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

cd koa2

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

npm install koa --save

然后在文件下根目錄下創(chuàng)建程序入口文件：index.js，并把官網(wǎng)介紹那段代碼貼進(jìn)去。之后在命令行中執(zhí)行

node index.js

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

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

Koa本質(zhì)上是調(diào)用一系列的中間件，來處理對(duì)應(yīng)的請(qǐng)求，并決定是否傳遞到下一個(gè)中間件去處理。我們來寫一個(gè)最簡(jiǎn)單的中間件試試。

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

// 改成如下

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

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

所以，接口的本質(zhì)，就是判斷不同的請(qǐng)求鏈接，干不同的事情，返回相應(yīng)的結(jié)果。那么我們得需要一個(gè)路由中間件來處理分發(fā)請(qǐng)求。開源的時(shí)代，當(dāng)然是拿來主義了。github搜下koa-router，成功找到。根據(jù)它的介紹，我們先在項(xiàng)目根目錄執(zhí)行

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)

重新執(zhí)行 node index.js。我們可以看到訪問 /, /user，/async，都能得到相應(yīng)的結(jié)果了。

除了那個(gè)post的方法，壓根得不到自己post的數(shù)據(jù)。

因?yàn)閗oa是很純粹的，你提交的數(shù)據(jù)，它并不會(huì)幫你處理。所以這里我們又必須引用一個(gè)中間件來處理提交的數(shù)據(jù)--bodyparser。把上面那兩行注釋代碼解注，就能處理請(qǐng)求數(shù)據(jù)了。記得要先

npm install koa-bodyparser --save

另外關(guān)于async/await不明白的同學(xué)，可以先去看下阮老師的介紹，點(diǎn)擊傳送門。

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

先看改造后的目錄結(jié)構(gòu)，不想截圖，大家將就看看：

-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: "相學(xué)長(zhǎng)",
      sex: "man",
      age: "999"
    }
  }
}

再重新執(zhí)行 node index.js。訪問相應(yīng)路由，應(yīng)該能得到對(duì)應(yīng)的結(jié)果了。

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

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

package.json scripts部分 修改為：

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

然后命令行執(zhí)行：

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", // 項(xiàng)目入口文件
    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，有興趣的同學(xué)可以自己去看看
  "dev": "gulp",
  "lint": "eslint .",
  "fix": "eslint --fix ."
},

到這里，我想應(yīng)該能讓一部分同學(xué)上手了。

但這只是初步的搭建了下koa。真的想投入使用，根據(jù)業(yè)務(wù)需求，可能還需要安裝數(shù)據(jù)庫驅(qū)動(dòng)等中間件。對(duì)于復(fù)雜業(yè)務(wù)場(chǎng)景的server，還需要更加合理的設(shè)計(jì)controller，service，在這里就不多闡述了。

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

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

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