json-server结合mock.js 模拟后端数据
2019-01-31 本文已影响75人
该帐号已被查封_才怪
一、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
三、使用 Zan Proxy 的mock数据
image.pngZan 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系统谷歌浏览器会 提示“ 您的连接不是私密连接”
image.png
此时,是因为你没有安装证书或者证书安装步骤不正确,正确的步骤是 image.png image.png image.png
当时我也是参考了 使用Charles代理工具导致电脑无法正常访问网站(您的连接不是私密连接)
四、推荐扩展资料
json-server 支持过滤数据、排序、分隔、检索等功能,可以看官方文档或下面的资料
1、 用JSON-server模拟REST API
2、 介绍两大神器!——使用json-server和faker.js模拟REST API