python前后端数据交互_前后端数据交互--使用Mock伪造数据

Mock.js可以模拟服务器响应数据。

在前后端数据交互中，往往会出现前端人员等后端接口的情况，而此时通过Mock.js可以非常方便的模拟后端数据。

Mockjs官网

Mock.js​mockjs.com

详细使用还是建议看官网的示例及文档。

安装

npm install mockjs
//下载后mock.js在dist目录下

或者直接引入在线地址

<scriptsrc="http://mockjs.com/dist/mock.js"></script>;

使用

1.语法

Mock.mock( rurl?, rtype?, template|function( options ) )

三个参数分别是请求的url、请求方式 （get type 等等）、定义返回的数据（数据模板）。

定义返回数据（数据模板）由 3 部分构成：属性名、生成规则、属性值：

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

2.举个栗子

需要如下数据：

代码如下：

http://mockjs是请求地址，请求方式可以省略。

//调用mock方法模拟撰写人、撰写次数、未填报日期、完成率等数据
	Mock.mock(
	'http://mockjs', 
	{
		'userName|1': [
			 "张三","熊大","熊二","光头强","喜羊羊","李四","王五","钢铁侠"
		],  //撰写人
		'logTimes|1-30': 1, // 撰写次数   一个1至30之间的随机数
		'date1|1': [
			"1号","2号","5号","8号","9号"
		],
		'date2|1': [
			"10号","12号","15号","18号"
		],
		'date3|1': [
			"19号","21号","22号","23号"
		],
		'date4|1': [
			"24号","25号","26号","29号"
		],// 未填报日期
		'completionRate|60-99.1-2': 1 //完成率   证书60至90之间，小数位1至2位
	});
	mui.ajax({
		url        : "http://mockjs",    //请求的url地址
		dataType   : "json",   //返回格式为json
		async      : false, //请求是否异步，默认为异步
		data       : {},    //参数值
		type       : "GET",   //请求方式
		success: function(req) {
			// 撰写人
			var userName = JSON.stringify(req.userName);
			document.querySelector(".name").innerHTML= userName.substring(1,userName.length-1);
			// 撰写次数
			document.querySelector(".log-times").innerHTML= JSON.stringify(req.logTimes);
			// 未填报日期
			var date1 = JSON.stringify(req.date1).substring(1,JSON.stringify(req.date1).length-1);
			var date2 = JSON.stringify(req.date2).substring(1,JSON.stringify(req.date2).length-1);
			var date3 = JSON.stringify(req.date3).substring(1,JSON.stringify(req.date3).length-1);
			var date4 = JSON.stringify(req.date4).substring(1,JSON.stringify(req.date4).length-1);
			document.querySelector(".date").innerHTML= date1 + ' ' + date2 + ' ' + date3 + ' ' + date4 + ' ' ;
			// 完成率
			document.querySelector(".completion-rate").innerHTML= JSON.stringify(req.completionRate) + '%';
			
		},

可以看到名字是使用一个数组然后自己定义了几个名字，实际上完全不用这么麻烦，之后看了后面的示例发现@cname就可以生成一个姓名。所以还是要看文档。

例：

mui(document.body).on('tap', '.mui-btn', function(e) {
	mui(this).button('loading');
	Mock.mock(
		'http://mockjs',
		{
			'week|1': {
				"week1":[
					 "03","08","11","15","16","17"
				],
				"week2":[
					 "01","05","10","13","26","27"
				],
				"week3":[
					 "04","08","19","25","26","28"
				]
			}
	});
	mui.ajax("http://mockjs", {
		dataType   : "json",   //返回格式为json
		async      : false, //请求是否异步，默认为异步
		data       : {},    //参数值
		type       : "GET",   //请求方式
		success: function(req) {
			var week = req.week.week1 || req.week.week2 || req.week.week3 ;
			var weekDom = document.getElementsByClassName("week");
			// console.log(week)
			// console.log(weekDom)
			for(var i=0;i<6;i++){
				weekDom[i].innerHTML = week[i]
			}
		},
	});
	setTimeout(function() {
		mui(this).button('reset');
	}.bind(this), 200);
	
});

使用function直接定义数据并返回

//返回1至3个用户信息
Mock.mock('http://test.com', 'get', function() {
    return Mock.mock({
        "user|1-3": [{
            'userName': '@cname',
            'id'|1-100: 1
        }
      ]
    });
});

自定义响应时间

// 4秒后再响应
Mock.setup({ timeout: 4000 });
// 1秒至4秒间响应
Mock.setup({ timeout: '1000-4000' });

Mock常用语法

Mock.mock({

})

在vue项目中使用mock

https://blog.csdn.net/qq_36976569/article/details/89930980​blog.csdn.net