使用json-server來模擬REST API

在前端開發中，若是後端接口尚未提供，前端拿不到數據，可能就無法繼續寫一些交互行爲的代碼。這一問題可經過json-server來很好地解決。本文主要講如何將json-server和webpack進行整合，基於vue-webpack-boilerplate。

json-server官方地址

使用

1.可全局安裝json-server，也可針對項目安裝。這裏是全局安裝json-server。
npm install json-server -g

2.安裝完成後，能夠在任一目錄下創建一個 xxx.json 文件。這裏是在src的同級目錄新建文件夾mock，在該文件夾內新增文件db.json，文件內容格式以下：

{
activitys: [
  {
    'id': 1,
    'url': '/static/actimg1.jpg',
    'desc': '讓讀書點燃夢想',
    'place': '地點：濱江星耀城',
    'time': '2017-5-10'
  },
  {
    'id': 2,
    'url': '/static/actimg1.jpg',
    'desc': '讓讀書點燃夢想',
    'place': '地點：濱江星耀城',
    'time': '2017-5-10'
  }
],
blogs: [
  {
    'id': 1,
    'avatarUrl': '/static/bloglistimg1.jpg',
    'name': '張三',
    'grade': '資深前端工程師',
    'slogan': '學習、分享，共同進步，只有堅持才能得到最後的成功'
  },
  {
    'id': 2,
    'avatarUrl': '/static/bloglistimg1.jpg',
    'name': '張三',
    'grade': '資深前端工程師',
    'slogan': '學習、分享，共同進步，只有堅持才能得到最後的成功'
  }
]
}

3.爲了便於以後接入後臺 API，因此須要進行代理。在config/index.js文件內增長proxyTable（即圖中紅線框出來的部分）。圖中將全部以/api開頭的請求委託給http://localhost:3000 ，即請求/api/activitys/1至關因而請求http://localhost:3000/activitys/1。該參數配置詳解見這裏

4.在package.json的scripts內新增兩行命令。

"mock": "json-server mock/db.json "
"mockdev": "npm run mock | npm run dev"

可用npm run mock開啓json-server服務。成功開啓見下圖：

也可以使用npm run mockdev直接運行mock和dev命令。

5.在其餘頁面可經過/api/XXX/獲取數據。

存在的問題

如果要模擬的接口很是多，都往db.json裏面添加的話，會致使這個文件變得很是龐大，難以維護。並且其餘前端人員也會修改到這個文件，每次合併代碼都要考慮衝突問題。

解決方案

每一個人各自創建本身模塊的數據文件，最終經過代碼將多個數據文件合併爲一個文件。

1.在mock/下新建server.js，該文件用於將各數據文件內的數據合併後統一輸出。內容以下：

const fs = require('fs')
const path = require('path')
const MOCK_DIR = path.resolve(__dirname, 'test')

const walk = dir => {
  let results = []
  let list = fs.readdirSync(dir)
  list.forEach(function (file) {
    file = dir + '/' + file
    let stat = fs.statSync(file)
    if (stat && stat.isDirectory()) {
      results = results.concat(walk(file))//若file是文件夾，則遍歷獲取該文件夾下文件內數據。
    } else if (path.extname(file) === '.js') {
      results.push(file)
    }
  })
  return results
}
const files = walk(MOCK_DIR)
let db = {}
files.forEach(function (file) {
  Object.assign(db, require(file))
})
module.exports = function () {
  return db
}

2.在mock/下新增test文件夾，各前端人員可自行在test/下新增數據文件(xx.js)和文件夾。數據文件格式以下:

module.exports = {
  activitys: [
    {
      'id': 1,
      'url': '/static/actimg1.jpg',
      'desc': '讓讀書點燃夢想',
      'place': '地點：濱江星耀城',
      'time': '2017-5-10'
    },
    {
      'id': 2,
      'url': '/static/actimg1.jpg',
      'desc': '讓讀書點燃夢想',
      'place': '地點：濱江星耀城',
      'time': '2017-5-10'
    }
  ],
  works: [
    {
      'id': 1,
      'imgUrl': '/static/workslistimg1.jpg',
      'iconUrl': '/static/workslisticon1.jpg',
      'desc': '仿京東購物車Vue.js'
    },
    {
      'id': 2,
      'imgUrl': '/static/workslistimg1.jpg',
      'iconUrl': '/static/workslisticon1.jpg',
      'desc': '仿京東購物車Vue.js'
    }
  ] 
}

3.修改package.json裏面的mock命令。--m mock/post-to-get.js表示添加運行中間件。

"mock": "json-server mock/server.js --m mock/post-to-get.js",

---

上面代碼中的post-to-get.js文件用於將post請求轉爲get請求。該文件內容以下:

module.exports = (req, res, next) => {
  req.method = 'GET'
  next()
}

---

修改完成後，最終的文件結構以下：