iKcamp｜基於Koa2搭建Node.js實戰（含視頻）☞ 解析JSON

視頻地址：https://www.cctalk.com/v/15114923886141

JSON 數據

我顛倒了整個世界，只爲擺正你的倒影。

前面的文章中，咱們已經完成了項目中常見的問題，好比 路由請求、結構分層、視圖渲染、靜態資源等。
那麼，JSON 呢？JSON 格式數據的傳輸，已經深刻到了咱們的碼裏行間，脫離了 JSON 的人想必是痛苦的。那麼，複合吧！

如何設置 JSON 格式

偉大的武術家——李小龍先生——說過這樣一段話：

Empty your mind, Be formless,shapeless like water. 
You put water in a cup, it becomes the cup.
You put water in a bottle, it becomes the bottle. 
You put water in a teapot , it becomes the teapot. 
Water can flow or crash.

翻譯成中文意思就是：

清空你的思想，像水同樣無形。
你將水倒入水杯，水就是水杯的形狀。
你將水倒入瓶子，水就是瓶子的形狀。
你將水倒入茶壺，水就是茶壺的形狀。
你看，水會流動，也會衝擊。

在數據傳輸過程當中，傳輸的資源均可以稱之爲『數據』，而『數據』之因此展現出不一樣的形態，是由於咱們已經設置了它的格式。

傳輸的數據像是『水』同樣，沒有任何的格式和形狀。

咱們的設置像是『器』同樣，賦予它指定的形態。

因此，咱們只須要設置把數據掛載在響應體 body 上，同時告訴客戶端『返回的是 JSON 數據』，客戶端就會按照 JSON 來解析了。代碼以下：

ctx.set("Content-Type", "application/json")
ctx.body = JSON.stringify(json)

提取中間件

咱們把上面的代碼提取成一箇中間件，這樣更方便代碼的維護性和擴展性

增長文件 /middleware/mi-send/index.js：

module.exports = () => {
  function render(json) {
      this.set("Content-Type", "application/json")
      this.body = JSON.stringify(json)
  }
  return async (ctx, next) => {
      ctx.send = render.bind(ctx)
      await next()
  }
}

注意： 目錄不存在，須要本身建立。

代碼中，咱們把 JSON 數據的處理方法掛載在 ctx 對象中，並起名爲 send。當咱們須要返回 JSON 數據給客戶端時候，只須要調用此方法，並把 JSON 對象做爲參數傳入到方法中就好了，用法以下：

ctx.send({
  status: 'success',
  data: 'hello ikcmap'
})

應用中間件

代碼的實現過程和調用方法咱們已經知道了，如今咱們須要把這個中間件應用在項目中。

1. 增長文件 middleware/index.js，用來集中調用全部的中間件：

const miSend = require('./mi-send')
module.exports = (app) => {
  app.use(miSend())
}

1. 修改 app.js，增長中間件的引用

const Koa = require('koa')
const path = require('path')
const bodyParser = require('koa-bodyparser')
const nunjucks = require('koa-nunjucks-2')
const staticFiles = require('koa-static')

const app = new Koa()
const router = require('./router')

const middleware = require('./middleware')

middleware(app)

app.use(staticFiles(path.resolve(__dirname, "./public")))

app.use(nunjucks({
  ext: 'html',
  path: path.join(__dirname, 'views'),
  nunjucksConfig: {
    trimBlocks: true
  }
}));

app.use(bodyParser())
router(app)
app.listen(3000, () => {
  console.log('server is running at http://localhost:3000')
})

中間件遷移

隨着項目的步步完善，將會產生有更多的中間件。咱們把 app.js 中的中間件代碼遷移到 middleware/index.js 中，方便後期維護擴展

1. 修改 app.js

const Koa = require('koa')
const app = new Koa()
const router = require('./router')

const middleware = require('./middleware')

middleware(app)
router(app)
app.listen(3000, () => {
  console.log('server is running at http://localhost:3000')
})

1. 修改 middleware/index.js

const path = require('path')
const bodyParser = require('koa-bodyparser')
const nunjucks = require('koa-nunjucks-2')
const staticFiles = require('koa-static')

const miSend = require('./mi-send')
module.exports = (app) => {
  app.use(staticFiles(path.resolve(__dirname, "../public")))

  app.use(nunjucks({
    ext: 'html',
    path: path.join(__dirname, '../views'),
    nunjucksConfig: {
      trimBlocks: true
    }
  }));

  app.use(bodyParser())
  app.use(miSend())
}

後面咱們還會開發更多的中間件，好比日誌記錄、錯誤處理等，都會放在 middleware/ 目錄下處理。

下一篇：記錄日誌——開發日誌中間件，記錄項目中的各類形式信息

上一篇：iKcamp新課程推出啦～～～～～iKcamp｜基於Koa2搭建Node.js實戰（含視頻）☞ 處理靜態資源

推薦： 翻譯項目Master的自述：

1. 乾貨｜人人都是翻譯項目的Master

2. iKcamp出品微信小程序教學共5章16小節彙總(含視頻)