使用 json-server 搭建 api mock 服務 (一)

在前端開發過程當中，若是後端接口尚未提供，前端拿不到數據一些交互行爲的代碼可能就無法繼續寫，這時咱們一般本身造一些數據來讓頁面流程走下去，最近項目切換到vue框架開發，發現json-server能很好的解決接口mock的問題

json-server官方地址

安裝

$ npm install json-server -g

啓動json-server
$ json-server --watch db.json

經過官方的例子你能夠發現
json-server實際上是在你訪問接口時，返回db.json裏面的對應的key的值
例如：你訪問 http://localhost:3000/posts/ 返回db.json裏面的json.posts

那麼問題來了
1.若是咱們要模擬的接口很是多，要一個一個的往db.json裏面添加嗎，其餘前端人員也會修改到這個文件，每次合併代碼都要考慮衝突問題，並且這個文件會變得很是龐大，難以維護
2.若是個人接口是http://localhost:3000/a/b，http://localhost:3000/a/b/c 怎麼解決

本文就主要探討下這兩個問題的解決方案：

1，修改package.json裏面的npm run mock 對應的命令爲 json-server mock/index.js
在項目中創建mock文件夾，文件夾下創建index.js（名字隨意）文件，
index.js

module.exports = function () {
  return {
    a: ['接口a的返回數據'],
    b: ['接口b的返回數據']
  }
}

此時啓動npm run mock，訪問http://localhost:3000/a，能夠得到想要的結果
2，在mock文件夾下新建幾個js文件，例如我新建了

└─ mock
   │─ test                  
   │  ├─ a.js
   │  └─ b.js
   └─ test2
      ├─ c.js
      └─ d.js

舉例其中一個a.js

module.exports = {
  url: 'a',
  title: '',
  type: 'GET',
  decs: '',
  query: {
    a: '1'
  },
  res: {
    ret: 1,
    result: [
      {
        a: '2',
        b: '3',
        c: '4'
      }
    ]
  }
}

修改index.js

let Path = require('path')
let glob = require('glob')

// 讀取全部API文件
const apiFiles = glob.sync(Path.resolve(__dirname, './') + '/**/*.js', {
  nodir: true
})
let data = {}
// 輸出全部api文件 i從1開始 跳過index.js
for (let i = 1, l = apiFiles.length; i < l; i++) {
  let api = require(apiFiles[i])
  if (api.url) {
    data[api.url] = api.res
  }
}
module.exports = function () {
  return data
}

而後啓動mock，你會看到控制檯打印

Resources
  http://localhost:8083/a
  http://localhost:8083/b
  http://localhost:8083/c
  http://localhost:8083/d

成功的實現了每一個api分離，添加一個api咱們只須要複製一個js文件，刪除和修改也只是改動咱們本身的文件，不會影響到團隊其餘成員

第二個問題：若是個人api路徑相似 a/b，a/b/c怎麼辦

修改index.js

let Path = require('path')
let glob = require('glob')

const apiFiles = glob.sync(Path.resolve(__dirname, './') + '/**/*.js', {
  nodir: true
})
let data = {}
for (let i = 1, l = apiFiles.length; i < l; i++) {
  let api = require(apiFiles[i])
  if (api.url) {
    data[api.url.replace(/\//g, '_')] = api.res
  }
}
module.exports = function () {
  return data
}

啓動mock服務，咱們會看到

Resources
  http://localhost:8083/a
  http://localhost:8083/a_b
  http://localhost:8083/a_b_c
  http://localhost:8083/a_b_c_d

而後在項目根目錄下添加json-server.json文件

{
    "port": "8888",
    "routes": "./mock/routes.json"
}

在mock文件夾下添加routes.json文件

{
  "/*/*/*/*/*": "/$1_$2_$3_$4_$5",
  "/*/*/*/*": "/$1_$2_$3_$4",
  "/*/*/*": "/$1_$2_$3",
  "/*/*": "/$1_$2"
}

這樣咱們就將每次請求的路徑相似 a/b/c/d/e轉換成了a_b_c_d_e

啓動mock服務，而後訪問路徑localhost:8888/a/b/c/d/e,完美

最後貼一下本文中所用到的文件的目錄結構

└─ mock
│  │─ test             # 文件夾1           
│  │  ├─ a.js          # api1
|  │  └─ b.js          # api2
|  ├─ test2            # 文件夾2
|  │  ├─ c.js          # api3
|  │  └─ d.js          # api4
|  ├─ index.js         # 出口文件
|  └─ routers.json     # 路徑轉換配置文件
├─ json-server.json    # 端口等配置
└─ package.json        # 項目配置

本文系做者搭建mock服務的一點心得，若有關於搭建mock服務的優雅的解決方案，歡迎各路大神與做者溝通交流，歡迎指正本文中的錯誤