json-server的實踐與自定義配置化

背景

以前作項目都沒有用到mock服務，都是等後端給接口字段或者前端留空位；但新公司的項目須要搭建mock服務，本想把舊項目的json-server搬過來就行了，不過發現添加一個 mock api 步驟過於繁複，mock服務本應簡單爲主，因此決定本身寫一個（本覺得寫個 json 文件就行了...）。

預期設計

按照我對mock服務的理解，只需檢測 restful 風格的 url 返回對應數據就行了，而後簡單看了下文檔示例

一、建立db.json

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}
複製代碼

二、啓動

$ json-server --watch db.json

三、訪問http://localhost:3000/posts/1

{ "id": 1, "title": "json-server", "author": "typicode" }
複製代碼

哇這不是很簡單嗎（爲本身埋坑），接下來只要將數據改形成路由的形式

// db.js
module.expors = {
    '/posts': require('./data/posts.json'),
    '/user/login': require('./data/user/login.json'),
    '/user/logout': require('./data/user/logout.json')
}
複製代碼

目錄結構

mock
|
└───data
|   |
|   └───posts.json
|   └───user
|       |
|       └───login.json
|       └───logout.json
|
└───db.js
└───server.js // 預期經過 node server.js 執行
複製代碼

實踐一

編寫 server.js

const jsonServer = require('json-server')
const server = jsonServer.create()
const middlewares = jsonServer.defaults()

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares)

// 獲取db數據
const db = require('./db.js')

// Use router
server.use(jsonServer.router(db))

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

複製代碼

執行 node server.js 後報錯

/ aren't supported, if you want to tweak default routes, see https://github.com/typicode/json-server/#add-custom-routes 複製代碼

看來是不支持路由風格的db數據，那嘗試將db數據改爲對象嵌套的模式，雖然這不夠直觀看出接口地址，但好歹也只是一個 json 文件

// db.js
module.expors = {
    'posts': require('./data/posts.json'),
    'user': {
        'login': require('./data/user/login.json'),
        'logout': require('./data/user/logout.json')
    }
}
複製代碼

這下能夠運行了，打開http://localhost:3000/user/login，誒怎麼是空對象{}，日誌顯示GET /user/login 404 4.161 ms - 2；打開http://localhost:3000/user，可以顯示 login 和 logout 的數據，看來是當成/user接口了，那 json-server 怎麼返回/user/login的數據？ 不支持路由風格就算了，連這個也不能讀取...

實踐二

看到有個jsonServer.rewriter方法，咱們能夠再次改寫db.js和server.js

// db.js
module.expors = {
    'posts': require('./data/posts.json'),
    'user_login': require('./data/user/login.json'),
    'user_logout': require('./data/user/logout.json')
}
複製代碼

// server.js
... 省略部分代碼

// 須要加在 server.use(router) 前
server.use(jsonServer.rewriter({
  '/user/login': '/user_login',
  '/user/logout': '/user_logout'
}))
// Use router
server.use(jsonServer.router(db))

server.listen(3000, () => {
  console.log('JSON Server is running on 3000')
})
複製代碼

這樣終因而能夠正常運行mock服務了，雖然這有點醜，並且 json-server 自己只支持/posts/:id（根據 item 的指定 id 屬性選取），不支持/posts/:id/xxx這種寫法（須要手動添加jsonServer.rewriter）

完善

當文件愈來愈多的時候，手動添加db.js和jsonServer.rewriter是一種麻煩，因此須要自動根據文件目錄生成db和jsonServer.rewriter，這樣咱們添加 api 只需在合適的路徑添加 json 文件（代碼最後會附上地址）

疑惑

做爲前端使用的mock服務，其實只需解決開發時獲取 get 請求數據的空白，避免先在頁面填充數據致使聯調時須要修改；再一個就是編寫足夠直觀、足夠簡單，在這一點上私覺得 json-server 沒有作得很好（但願是我沒有領悟到 json-server 的使用方法），不能直觀的看出路由接口，不能很好的體現 restful api（須要添加jsonServer.rewriter）。

若是是我編寫一個mock服務的話，我可能會採用koa和koa-router，只需編寫 get 路由接口

// router.js
router.get('/posts', () => require('./data/posts.json'))
router.get('/posts/:id', () => require('./data/posts/id.json'))
router.get('/user/login', () => require('./data/user/login.json'))
router.get('/user/logout', () => require('./data/user/logout.json'))
複製代碼

ps：我知道 json-server 也有server.get方法，但這這樣彷佛與db.json文件衝突了

我會每個接口都寫一個 json 文件，這樣至少看起來很直觀，寫起來也足夠簡單，並且我手動實現 restful 比 json-server 不徹底支持清晰不少；

總結

第一次實踐搭建 json-server，可能用法和理解上不太對，但願有問題能夠指出；我把mock服務封裝到本身的 vue-cli template 上了，能夠經過vue init masongzhi/vue-template-webpack my-project安裝，mock服務在/mock文件夾下。

ps：

相關文章：定製化vue-cli Template/webpack