背景
之前做项目都没有用到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.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
文件夹下。