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