一、json-server相关
1、全局安装json-server
npm install -g json-server
2、在cmder所激活的目录下新建一个文件 jsonserver.json
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": " 该账户已被查封"
}
],
"comments": {
"data": [
{
"log_date": "2018-01-25",
"sum_user_ticket": 10,
"sum_team_ticket": 20,
},
{
"log_date": "2018-01-26",
"sum_user_ticket": 19,
"sum_team_ticket": 50,
}
],
"errmsg": "",
"errno": "0"
},
"profile": {
"name": " 该账户已被查封"
}
}
3、执行json-server --watch jsonserver.json 即可打开相应的网址，看到对应的数据；
注意：这里有个坑，就是如果只是请求这些数据时（也就是要这些数据时）应该使用get请求方式而不是post等请求方式，否则这里面的数据会做相应变化，因为json-server支持这些请求方式且会做相应处理；
二、 mock.js相关
1、安装mock.js
npm install mockjs
2、创建mock.js 文件
mock.js 文件 我弄了两种生成数据的方式，一种是根据模版生成模拟数据，另一种是利用js 循环加Mock.Random 随机生成数据：
var Mock = require('mockjs');
// console.log(Mock);
// Mock.setup({
// timeout: '1200-1600' // 设置响应时间 毫秒
// });
let Random = Mock.Random;
let template = {
'title': 'Syntax Demo',
'string1|1-10': '★',
'string2|3': 'value',
'number2|1-100': 100,
'number4|123.1-10': 1,
'boolean2|1-2': true,
'object2|2': {
'310000': '上海市',
'320000': '江苏省',
'330000': '浙江省',
'340000': '安徽省'
},
'array1|1': ['AMD', 'CMD', 'KMD', 'UMD'],
'array2|1-10': ['Mock.js'],
'array3|3': ['Mock.js'],
'function': function () {
return this.title
},
'errmsg': "json-server或mock.js错误",
'errno': "0",
};
var templateed = Mock.mock(template); // 根据模版生成 模拟数据
module.exports = function () {
var res = {
nottemplate: {
data: [],
errmsg: "json-server或mock.js错误",
errno: "0"
},
template: templateed,
};
var imagesArray = [1, 2, 3].map(x => Random.image('200x100', Random.color(), Random.word(2, 6)));
for (var i = 0; i < 5; i++) {
res.nottemplate.data.push({
id: i,
title: Random.cword(8, 20), // 随机生成中文汉字
desc: Random.cparagraph(0, 10).substr(0, 40),// 随机生成一段中文文本
tag: Random.cword(2, 6),
views: Random.integer(100, 5000), // 整数
images: imagesArray.slice(0, Random.integer(1, 3)), // 1-3 个图片地址数组
date: Random.date(),
float: Random.float(60, 100),// 小数
integer: Random.integer(60, 100),//整数
range: Random.range(60, 65),// 从60到100的数值
image: Random.image('200x100', '#396'),// 图片大小、图片颜色,
color: Random.color(),
county: Random.county(true), //县
log_date: Random.date(),
sum_team: Random.integer(1, 100),
add_team_sum: Random.integer(1, 100),
team_avg_people: Random.float(1, 100),
active_team_sum: Random.integer(1, 100),
team_avg_active_people: Random.float(1, 100),
})
}
return res
}
3、执行 json-server --watch mock.js -p 3001
提示下，这里我使用了-p 指定了端口3001，因为之前json-server 默认使用3000端口 ，为了避免冲突及报错 所以换了个端口；
其实除了mock.js，还有强大的国外的 faker.js 及 mountebank (mountebank还支持https、tcp、smtp等协议)
faker.js
var faker = require('faker')
function generateCustomers () {
var customers = []
for (var id = 0; id < 50; id++) {
var firstName = faker.name.firstName()
var lastName = faker.name.firstName()
var phoneNumber = faker.phone.phoneNumberFormat()
customers.push({
"id": id,
"first_name": firstName,
"last_name": lastName,
"phone": phoneNumber
})
}
return { "customers": customers }
}
// 如果你要用json-server的话，就需要export这个生成fake data的function
module.exports = generateCustomers
三、使用 Zan Proxy 的mock数据
Zan Proxy 的mock数据没有json-server和mock.js强大，具体我就不介绍了 ，可见官方文档， https://youzan.github.io/zan-proxy/book/
另外值得一提的是，这里有个坑，就是安装证书后https://youzan.github.io/zan-proxy/book/quick-start/cert.html 使用SwitchyOmega
做代理时， windows系统谷歌浏览器会 提示“ 您的连接不是私密连接”
此时，是因为你没有安装证书或者证书安装步骤不正确，正确的步骤是
当时我也是参考了 使用Charles代理工具导致电脑无法正常访问网站（您的连接不是私密连接）
四、YApi
去哪儿前端出品的
1、使用 YApi 管理 API 文档，测试， mock
2、https://github.com/ymfe/yapi
3、https://yapi.baidu.com/
四、推荐扩展资料
json-server 支持过滤数据、排序、分隔、检索等功能，可以看官方文档或下面的资料
1、 用JSON-server模拟REST API
2、 介绍两大神器！——使用json-server和faker.js模拟REST API