一個簡單mock-server 解決方案

json-server-router

json-server-router 的做用是提供一個簡明的方式構建出擁有任意的路由的 mock server

json-server-router 要解決的問題

在使用 json-server 時你寫了以下文件(db.json) 也就表明你獲得了四個 mock 接口
/update ,/retrieve, /create ,/delete
可是實際的需求中接口路由確定不能這麼簡單你須要的多是 /aaa/bbb/ccc/update這樣的形式,雖然json-server能夠配置rewrite能夠解決部分問題，可是這並不簡單，接下來咱們來看一下json-server-router的方式

// db.json
{
  "update": { "code": 200, "message": "succeed", "data": true },
  "retrieve": { "code": 200, "message": "succeed", "data": true },
  "create": { "code": 200, "message": "succeed", "data": true },
  "delete": { "code": 200, "message": "succeed", "data": true }
}

json-server-router 使用方式

json-server-router 的實現理念是根據目錄結構，構建出想要的接口形式
假設咱們的目標接口爲 /aaa/bbb/ccc/update
那麼咱們只需構件出以下的目錄結構

當遇到名稱爲 index 的文件路徑拼接的時候會忽略index，當碰見鍵值爲 index路徑拼接一樣也會忽略index

- aaa
  - bbb
    + ccc.json   // 在ccc.json中添加 update
or 

- aaa
  - bbb
    - ccc
      +index.json // 在index.json中添加update

路由生成示意大概下面這個樣子,mock爲 mock 文件的根目錄

mock/books/index.json
-mock
 + index.json    ------>   /xxx
 + book.json     ------>   /book/xxx
 - foo
   + index.json  ------>  /foo/xxx
   + bar.json    ------>  /foo/bar/xxx

假設/books/index.json內容以下

將對應生成四個接口 /books/ /books/retrieve /books/create /books/delete

{
  "index": { "code": 200, "message": "succeed", "data": true }, // /books/
  "retrieve": { "code": 200, "message": "succeed", "data": true },// /books/retrieve
  "create": { "code": 200, "message": "succeed", "data": true },// /books/create
  "delete": { "code": 200, "message": "succeed", "data": true }// /books/delete
}

安裝&使用

當前全局安裝以後你會獲得一個叫jsr的全局命令,根據前面的介紹這時候其實你只需構件出一個包含mock files 的根目錄就足夠了

$ npm install json-server-router -g
$ jsr --root mock

命令參數

jsr [options]

Options Required:
  --root, -r  Paths to mock files parent dir          [string] [required]

Options:
  --config           Path to JSON config file  [string] [default:jsr.config.js]
  --port, -p         Set port                    [number] [default: 3000]
  --host                                [string] [default: "local ip"]
  --static           Set static files directory(same as json-server) [string] [default: "public"]
  --watch, -w        Watch file(s)             [boolean] [default: false]
  --open, -o         open                      [boolean] [default: false]
  --middlewares, -m  Paths to middleware files TODO               [array]
  --help, -h         Show help                                  [boolean]
  --version, -v      Show version number                        [boolean]

Examples:
  jsr --root mock
  jsr --root mock --port 3000

參數說明

• config 設置配置文件默認配置文件的地址是當前目錄的下的jsr.config.js
• static 靜態資源的地址跟json-server是一致的，須要注意的是若是 static路徑存在的話json-server-router會自動建立一個包含全部路由的index.html，若是static目錄不存在，不會自動建立目錄生成index.html
• watch 監控文件變化自動從新加載

jsr.config.js simple

module.exports = {
  root: 'mock',
  port: 3000,
}

GET

json-server-router其底層依賴json-server所構建，因此在不出意外的狀況下同時也擁有json-server的全部GET請求相關功能

當使用json-server 咱們能夠經過構建路由/get/users?_page=7&_limit=10進行分頁查詢可是query的關鍵詞必須是指定的
在json-server-router中能夠再jsr.config.js中自定義queryMap字段來修改關鍵詞的名字，配置好了以後就能夠經過/get/users?page=7&len=10進行分頁查詢

//jsr.config.js
{
  queryMap: [['_page', 'page'], ['_limit', 'len']]

}

POST PUT DELETE

關於非GET請求你不須要定義mock files，json-server-router對全部非GET請求進行統一處理無論其路由是什麼一致經過handler函數處理

你能夠經過重寫jsr.config.js中的handler 函數自定義其處理結果

//jsr.config.js
 {
 /**
   * 處理全部非GET請求
   * 當query fial 有值的時候認爲請求設置爲失敗狀態
   */
  handler (req, res, next) {
    const { ip, originalUrl, body } = req
    const isFail = !!req.query.fail
    res.json({
      code: isFail ? 500 : 200,
      message: isFail ? 'failed' : 'succeed',
      cookie: req.get('cookie'),
      ip,
      url: originalUrl,
      body: body
    })
  }
 }

tips

• 當jsr運行起來以後在命令窗口鍵入rs會從新加載
• 當static路徑存在的時候，路由/jsr 會返回全部路由信息，當static路徑不存在的時候路由/會返回全部路由信息

戰鬥人員能夠做爲json-server中間件引用

能夠參考cli/server.js

const jsonServer = require("json-server")
const server = jsonServer.create()
const middlewares = jsonServer.defaults() // { static: 'public' }
const JsonServerRouter = require("json-server-router")

/**
 * @prop {string} root mock文件根目錄默認爲 'mock'
 * @prop {number} port 端口號跟json-server 一致 默認爲 3000
 * @prop {string} publicPath 生成默認首頁的地址，跟json-server 配置一致 默認'public',若是修改路徑的話那麼json-server 對應的配置也要改
 * @prop {bool} open 是否用瀏覽器打開 默認 true
 */

const router = new JsonServerRouter({
  root: "mock",
  port: 3000,
  publicPath: "public"
})

server.use(middlewares)

server.use(router.routes())
server.use(router.rewrite())

server.listen(3000, () => {
  console.log("JSON Server is running")
})