json-server的实践与自定义配置化

背景

之前做项目都没有用到mock服务,都是等后端给接口字段或者前端留空位;但新公司的项目需要搭建mock服务,本想把旧项目的json-server搬过来就好了,不过发现添加一个 mock api 步骤过于繁复,mock服务本应简单为主,所以决定自己写一个(本以为写个 json 文件就好了…)。

预期设计

按照我对mock服务的理解,只需检测 restful 风格的 url 返回对应数据就好了,然后简单看了下文档示例

1、创建db.json

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

2、启动

$ json-server –watch db.json

3、访问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.jsserver.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.jsjsonServer.rewriter是一种麻烦,所以需要自动根据文件目录生成dbjsonServer.rewriter,这样我们添加 api 只需在合适的路径添加 json 文件(代码最后会附上地址)

疑惑

作为前端使用的mock服务,其实只需解决开发时获取 get 请求数据的空白,避免先在页面填充数据导致联调时需要修改;再一个就是编写足够直观、足够简单,在这一点上私以为 json-server 没有做得很好(希望是我没有领悟到 json-server 的使用方法),不能直观的看出路由接口,不能很好的体现 restful api(需要添加jsonServer.rewriter)。

如果是我编写一个mock服务的话,我可能会采用koakoa-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:之后会发一篇自定义 template 的文章

  • 1
    点赞
  • 2
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页

打赏

天驱依然在

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者