目录
json-server
basic
- GET
curl -X GET http://localhost:3000/todos
curl -X GET http://localhost:3000/todos/1
- POST
curl -X POST -H "Content-type: application/json" -d '{"todo":"Post ToDo"}' http://localhost:3000/todos
- PATCH
curl -X PATCH -H "Content-type: application/json" -d '{"todo":"Patch ToDo"}' http://localhost:3000/todos/1
- DELETE
curl -X DELETE http://localhost:3000/todos/5
config
- json-server.json
{
"port": 3001,
"routes": "routes.json"
}
- routes.json
{
"/api/*": "/$1",
"/items\\?id=:id": "/todos/:id"
}
advanced
- Filter
curl -X GET http://localhost:3000/posts?title=post-title-1
- Paginate
curl -X GET http://localhost:3000/posts?_page=2
- Sort
curl -X GET http://localhost:3000/posts?_sort=title&_order=desc
- Slice
curl -X GET http://localhost:3000/posts?_start=2&_end=5
faker
curl -X GET http://localhost:3000/employees
小结
简单
快速
RESTful
Easy Mock
Example
- GET
curl -X GET http://www.easy-mock.com/mock/59db1b2647bc3811aa7c4225/example/machines
curl -X GET http://www.easy-mock.com/mock/59db1b2647bc3811aa7c4225/example/machines?machine_state=on
- POST
curl -X POST -H "Content-type: application/json" -d '{"machine_name":"挖掘机A01"}' http://www.easy-mock.com/mock/59db1b2647bc3811aa7c4225/example/machines
- PATCH
curl -X PATCH -H "Content-type: application/json" -d '{"machine_name":"挖掘机Z01"}' http://www.easy-mock.com/mock/59db1b2647bc3811aa7c4225/example/machines/999
- DELETE
curl -X DELETE http://www.easy-mock.com/mock/59db1b2647bc3811aa7c4225/example/machines/999
Mock.js
{
"code": 0,
"result": {
'data|1-10': [{
'id|+1': 100,
machine_name: '@ctitle(3, 20)',
captain_name: '机长@cname(2, 3)',
assets_code: 'AC@integer(10000000, 99999999)',
image_cover_url: '@image("200x200", "#00405d", "#FFF", "测试图片")',
'is_online|1-2': true,
source: '@pick(["bought", "rented", "unknown"])',
machine_state: function({
_req,
Mock
}) {
if (_req.query.machine_state === 'on') {
return 'on'
} else if (_req.query.machine_state === 'off') {
return 'off'
} else {
return Mock.mock('@pick(["on", "off"])')
}
},
height: '@float(1, 100, 1, 2)',
}],
total_count: '@integer(1, 10)',
}
}
小结
在线服务
可视化
快速
dva
basic
- .roadhogrc.mock.js
const mock = {};
require('fs').readdirSync(require('path').join(__dirname + '/src/mock')).forEach(function (file) {
Object.assign(mock, require('./src/mock/' + file));
})
module.exports = mock;
- ./src/mock/machine.js
const Mock = require('mockjs');
const database = Mock.mock({
'data|20': [
{
'id|+1': 100,
machine_name: '@CTITLE(3, 20)',
},
],
}).data;
module.exports = {
['GET /machines'](req, res) {
const pageSize = 10;
const page = 1;
res.status(200).json({
data: database.slice((page - 1) * pageSize, page * pageSize),
total: database.length,
});
},
}
advanced
- .roadhogrc.mock.js
import Mock from 'mockjs';
import mockTemplate from './src/mock';
const mockApi = {};
mockTemplate.forEach((routerObject) => {
if (routerObject.isMock === true) {
mockApi[routerObject.method + ' /mock' + routerObject.router] = (req, res) => {
res.end(JSON.stringify(
Mock.mock({
"XCmdrCode": 0,
'XCmdrResult': routerObject.data,
})
));
};
}
});
export default mockApi;
- .roadhogrc.js
proxy: {
"!/mock/**": {
target: {
host: "sa.zhgcloud.com",
protocol: "https:",
port: 443
},
ignorePath: false,
changeOrigin: true,
secure: false,
bypass: function (req, res, proxyOptions) {
if (req.path.indexOf('/mock') !== 0 && req.headers['x-cmd-request'] === undefined && req.headers['x-requested-with'] === undefined) {
return './public/index.html';
}
},
}
}
- ./src/mock/index.js
export default [
{
method: 'GET',
router: '/machines/:id',
data: {
'data_list|0-10': [{
'id|+1': 1,
machine_name: 'mock GET @CTITLE(2,20)',
}],
},
isMock: true,
},
];
- ./src/utils/request.js
import fetch from 'dva/fetch';
import pathToRegexp from 'path-to-regexp';
import mockTemplate from '../mock';
import request from '../utils/request';
function isMock(method, url) {
let hasMock = false;
mockTemplate.forEach((routerObject) => {
if (routerObject.isMock === true && method === routerObject.method && pathToRegexp(routerObject.router).exec(url.split('?')[0]) !== null) {
hasMock = true;
}
});
return hasMock;
}
const apiFetch = (url, options) => {
const method = options.method !== undefined ? options.method.toUpperCase() : 'GET';
if (isMock(method, url)) {
return fetch(`/mock${url}`, options);
}
return fetch(url, options);
};
小结
非侵入式
部分mock
数据格式校验
