mock模拟后端数据

最新推荐文章于 2024-05-05 21:19:27 发布
最新推荐文章于 2024-05-05 21:19:27 发布
阅读量833 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26144233/article/details/104005824
版权

在Mock.js官网中https://github.com/nuysoft/Mock/wiki/Getting-Started，下载客户端mock.js文件：

安装

npm install -g bower
bower install --save mockjs

1.正则匹配路径

Mock.mock(RegExp('/Api/EnterpriseQq/Manage/UsageRecord' + '.*'), 'get', function (option) {
	console.log(option);
	//获得?之后的参数
	var querys = option.url.split('?')[1];
	// var keys=[];
	// var values=[];
	var params = querys.split('&');
	var obj = {};
	for (var i = 0; i < params.length; i++) {
		// keys.push(params[i].split('=')[0]);
		// values.push(params[i].split('=')[1]);
		var key = params[i].split('=')[0];
		var value = params[i].split('=')[1];
		obj[key] = value;
	}
	// console.log(keys,values);

	return Mock.mock({
		StatusCode: '0',
		StatusMsg: '操作成功',
		StatusData: {
			ResultCode: 0,
			ResultMsg: '查询成功',
			// 

			//  { field: 'Id', title: '使用记录Id', hide: true }
            // , { field: 'QqNum', title: 'QQ号码', width: '15%', }
            // , { field: 'MerchantName', title: '使用商家', width: '20%', }
            // , { field: 'MemberName', title: '用户名', width: '15%', }
            // , { field: 'StartTime', title: '分配时间', width: '22%', }
            //  , { field: 'EndTime', title: '结束时间', width: '22%', }
            // , { field: 'Remark', title: '备注', width: '14%' }
			ResultData:{
				TotalRecord: 30,
				PageSize:10,
				PageIndex:1,
				'PageResult|0-10': [{
				'Id|+1': 2, //每次id的值加1
				'QqNum': '@integer(200,300)',
				'MerchantName': '@cname',
				'MemberName': '@cname',
				'StartTime':'@date',
				'EndTime':'@date',
				'Remark' :'@string'
				// 'Password': '@integer(20,30)', //20~30的整数
				// 'State': '@integer(0,1)',
				
				// 'MerchantType': '@constellation',
				// 
				// 'Enabled': '@boolean',
				// 'CreatTime': '@date',
				// 'first': '@cfirst',
				// 'data': '@date',
				// '城市': '@city',
				// 'city': '@city(true)',
				// 'married': '@boolean',
				// 'image': '@image(125x125,#f00,sample11)'
				}]
			}
		
		}
	})

})

2.创建自定义mock函数

Mock.mock('http://baidu.com/userlist', {
	StatusCode: '0',
	StatusMsg: '操作成功',

	ResultData: {
		ResultCode: 0,
		ResultMsg: '查询成功',
		'ResultData|1-10': [{
			'id|+1': 2, //每次id的值加1
			"name": '@cname',
			'age': '@integer(20,30)', //20~30的整数
			'first': '@cfirst',
			'data': '@date',
			'城市': '@city',
			'city': '@city(true)', //包含省
			'married': '@boolean',
			'image': '@image(125x125,#f00,sample11)',
			'字': '@cword(2,4)'
		}]
	}
	//	'list|1-10': [{
	//		//					"id": "@id", //身份证号
	//		'id|+1': 2, //每次id的值加1
	//		"name": '@cname',
	//		'age': '@integer(20,30)', //20~30的整数
	//		'first': '@cfirst',
	//		'data': '@date',
	//		'城市': '@city',
	//		'city': '@city(true)', //包含省
	//		'married': '@boolean',
	//		'image': '@image(125x125,#f00,sample11)',
	//		'字': '@cword(2,4)'
	//	}]

})

// Mock.mock('/Api/EnterpriseQq/Manage/Insert', {
// 	StatusCode: '0',
// 	StatusMsg: '操作成功',

// 	ResultData: {
// 		ResultCode: 0,
// 		ResultMsg: '查询成功',
// 		'ResultData|1-10': [{
// 			//					"id": "@id", //身份证号
// 			'id|+1': 2, //每次id的值加1
// 			"name": '@cname',
// 			'age': '@integer(20,30)', //20~30的整数
// 			'first': '@cfirst',
// 			'data': '@date',
// 			'城市': '@city',
// 			'city': '@city(true)',
// 			'married': '@boolean',
// 			'image': '@image(125x125,#f00,sample11)'
// 		}]
// 	}

// })

//
//Mock.mock('/Api/Point/UserCenter/GetPoint', {
//	'list|1-10': [{
//		//					"id": "@id", //身份证号
//		'id|+1': 2, //每次id的值加1
//		"name": '@cname',
//		'age': '@integer(20,30)', //20~30的整数
//		'first': '@cfirst',
//		'data': '@date',
//		'城市': '@city',
//		'city': '@city(true)',
//		'married': '@boolean',
//		'image': '@image(125x125,#f00,sample11)'
//	}]
//
//})
// Mock.mock(RegExp('/api/getGoodsListById'+'.*'), 'get', function(option) {
// 	console.log(option)
// /Api/EnterpriseQq/Manage/List
Mock.mock(RegExp('/Api/EnterpriseQq/Manage/List' + '.*'), 'get', function (option) {
	console.log(option);
	//获得?之后的参数
	var querys = option.url.split('?')[1];
	// var keys=[];
	// var values=[];
	var params = querys.split('&');
	var obj = {};
	for (var i = 0; i < params.length; i++) {
		// keys.push(params[i].split('=')[0]);
		// values.push(params[i].split('=')[1]);
		var key = params[i].split('=')[0];
		var value = params[i].split('=')[1];
		obj[key] = value;
	}
	// console.log(keys,values);


	return Mock.mock({
		StatusCode: '0',
		StatusMsg: '操作成功',
		StatusData: {
			ResultCode: 0,
			ResultMsg: '查询成功',
			// 
			ResultData:{
				TotalRecord: 30,
				PageSize:10,
				PageIndex:1,
				'PageResult|0-10': [{
				'Id|+1': 2, //每次id的值加1
				'QqNum': '@integer(200,300)',
				'Password': '@integer(20,30)', //20~30的整数
				'State': '@integer(0,1)',
				'MerchantName': '@cname',
				'MerchantType': '@constellation',
				'MemberName': '@cname',
				'Enabled': '@boolean',
				'CreatTime': '@date',
				'first': '@cfirst',
				'data': '@date',
				'城市': '@city',
				'city': '@city(true)',
				'married': '@boolean',
				'image': '@image(125x125,#f00,sample11)'
				}]
			}
			
		}

	})


})

//创建自定义mock函数
var random = Mock.Random;
random.extend({
	//自定义函数名字:处理函数，不要写成箭头函数，因为内部有this
	constellation: function (date) {
		//定义数组
	var  constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
		//随机返回数组中的数组
		return this.pick(constellations)
	}
})

// 
// Mock.mock('/Api/MerchantAuth/Manage/MerchantTypeList', {
// 	StatusCode: '0',
// 	StatusMsg: '操作成功',
// 	StatusData: {

// 		ResultCode: 0,
// 		ResultMsg: '查询成功',
// 		'ResultData|3-5':
// 			[{
// 				'Id|+1': 2, //每次id的值加1
// 				'Name': '@cname'
// 			}]

		
// 	}

// })



//模拟post请求,外层的Mock只负责拦截接口和方法的定义
Mock.mock('/api/addGoods', 'post', function (option) {
	//请求相关的参数
	//	console.log(option)
	//模拟假数据需要重新写Mock
	return Mock.mock({
		StatusCode: '0',
		StatusMsg: '操作成功',
		ResultData: {
			ResultCode: 0,
			ResultMsg: '查询成功',
			'ResultData|1-10': [{
				//					"id": "@id", //身份证号
				status: 200,
				message: '@cword(4,9)'
			}]
		}
	})
})

//修改操作
Mock.mock(RegExp('/Api/EnterpriseQq/Manage/Update' + '.*'), 'post', function (option) {
	//请求相关的参数
	//	console.log(option)
	//模拟假数据需要重新写Mock
	// debugger
	console.log(option, 'update');
	return Mock.mock({
		StatusCode: '0',
		StatusMsg: '操作成功',
		StatusData: {
			ResultCode: 0,
			ResultMsg: '更新成功',
			'ResultData': ''
		}

	})

})
// /Api/EnterpriseQq/Manage/Insert
// 添加成功
Mock.mock(RegExp('/Api/EnterpriseQq/Manage/Insert' + '.*'), 'post', function (option) {
	//请求相关的参数
	console.log(option, 'insert');
	//模拟假数据需要重新写Mock
	// debugger
	return Mock.mock({
		StatusCode: '0',
		StatusMsg: '操作成功',
		StatusData: {
			ResultCode: 0,
			ResultMsg: '添加成功',
			'ResultData': ''
		}

	})

})

///删除操作 Api/EnterpriseQq/Manage/Delete
Mock.mock(RegExp('Api/EnterpriseQq/Manage/Delete' + '.*'), 'get', function (option) {
	//请求相关的参数
	console.log(option, 'delete');
	//模拟假数据需要重新写Mock
	// debugger
	return Mock.mock({
		StatusCode: '0',
		StatusMsg: '操作成功',
		StatusData: {
			ResultCode: 0,
			ResultMsg: '删除成功',
			'ResultData': ''
		}

	})

})
// /Api/EnterpriseQq/Manage/SwitchEnabled
Mock.mock(RegExp('/Api/EnterpriseQq/Manage/SwitchEnabled' + '.*'), 'get', function (option) {
	//请求相关的参数
	console.log(option, 'switch');
	//模拟假数据需要重新写Mock
	// debugger
	return Mock.mock({
		StatusCode: '0',
		StatusMsg: '操作成功',
		StatusData: {
			ResultCode: 0,
			ResultMsg: '切换成功',
			'ResultData': ''
		}

	})

})
qq_26144233
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Mockjs前端开发数据模拟测试及深度解析
小青蛙的博客
12-09 4358
在项目开发接口联调的过程中，前端开发人员经常需要等待后端提供好数据接口后才能动手联调，所以为了提升开发效率，mockjs这个第三方库诞生了，这个库主要是为了满足前端开发获取接口数据，渲染页面，功能开发，可以不经过mysql、redis等数据库就可以直接联调，所以极大的提高了我们前端开发攻城狮的开发效率； 记得之前的博客我介绍过json-server这款前端数据服务第三方库，json-serv...
mock注意事项
qq_39704803的博客
08-06 794
一、mock过滤的参数必定在mock中定义过规则，如 .... for (let i = 0; i &lt; count; i++) { List.push(Mock.mock({ id: '@increment', telephone: '13866668888', // 帐号 idCard: Random.id(), // 身份证 userName: R...
lazy-mock ，一个生成后端模拟数据的懒人工具
weixin_33972649的博客
06-30 178
lazy-mock   lazy-mock 是基于koa2构建的，使用lowdb持久化数据到JSON文件。只需要简单的配置就可以实现和json-server差不多的功能，但是比json-server更加灵活，后期可配置性更强，完全可以模拟真实后端业务逻辑。   lazy-mock默认包含了jwt实现的登录与登出，实现了基于RBAC模型的通用权限控制逻辑。具...
Vue中使用mock模拟后端数据
最新发布
2301_76662406的博客
05-05 1297
在开发的时候，由于页面中的数据来自后端，后端接口又处于开发中，阻碍了前端开发，为了解决这个问题，需求下来后，前后端先约定好数据结构后，在按照约定好的数据结构进行开发，这样前端只需一个本地服务，模拟返回约定好的数据结构。这个数据模板语法的含义是：以初始值 10 作为基准，在每次被调用时递增 15。换句话说，每次调用该模板语法生成的数据，sellingPrice 属性的值会比上一次增加 15。
mock模拟后端数据基本使用方法
jolinoy的博客
03-18 1248
项目目录： 此项目中安装了router和vuex两个插件。 并且需要安装mockjs插件，如下图： 通过：vue add mockjs 命令安装。 安装之后将以下代码放入AboutViews.vue里面： AboutViews.vue代码如下： <template> <div class="about"> <h1>This is an about page</h1> </div> </template>
浅谈Mock测试
Don‘t
08-24 1756
Mock框架的选择 在整个java生态圈中，支持mock的开源框架还是比较多的，比如常用的Mockito、PowerMock、EasyMock和JMockit等开源框架。这些框架在mock方面都具有比较强大的功能与比较广泛的使用量。但是这些框架都具有一个相同的缺点，那就是需要或多或少的编码工作来mock所需要的接口返回数据。 在设计mock框架的时候，我们考虑到尽量让写单元测试的人员或研发人员...
测试必知必会的Mock数据方法
欢迎关注【微信公众号】测试开发Guide，从功能测试进阶测试开发
07-18 2607
大家好，我是洋子。在文章《接口测试（3）-构造测试数据》我提到了构造测试数据的方法，但这篇文章当中都是构造真实的测试数据。然而在实际测试过程中，我们难免会遇到业务场景非常复杂，上下游调用链路复杂或者是某个依赖模块不稳定等，导致无法构造真实测试数据的情况这个时候想要进行测试，就需要先去进行Mock数据，然后再进行接下来的测试。...
back-mock:用于模拟后端API接口
07-04
这个一个模拟后端api数据交互的模块。 ##安装 npm install back-mock ##使用 新建一个文件(假如命名为mock.js)。在里面写入如下代码。 var mockServer = require("back-mock"); var path = require("path"); mock...
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
11-30
使用mockjs可以事先模拟数据，前提是和后端约定好了数据接口，怎样的数据。使用mock就可以生成你要的数据了，从而实现开发时前后端分离。 其主要功能是： 基于数据模板生成模拟数据。 基于HTML模板生成模拟数据。 ...
wallabag-mock:模拟 wallabab 后端
07-03
wallabag-mock是一个专为wallabag应用开发设计的模拟后端工具，它的主要目标是为前端开发者提供一个本地环境，以便在没有真实后端服务的情况下进行功能测试和开发。通过这个工具，你可以快速搭建一个模拟的wallabag...
模拟mock.zip
05-29
2. **配置Mock规则**：根据项目需求，编写Mock规则，定义模拟的API接口及其响应数据。 3. **启动Mock服务**：运行Mock库，启动Mock服务器。 4. **测试代码**：在前端代码中，设置请求的URL指向Mock服务器，进行测试...
Mock的用法规则
❤的博客
05-26 3974
Mock的用法规则 属性值是字符串 String ‘name|min-max’: string //通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。 var string = Mock.mock({ 'string|1-10':'哈' }) console.log(JSON.stringify(string)) //结果随机生成1~10个哈 {"string":"哈哈哈哈"} ‘name|count’: string //通过重复 string 生成一个
mock大法好
weixin_33997389的博客
07-17 1694
mock大法好 mock是一个模拟数据生成器，旨在帮助前端独立于后端进行开发，帮助编写单元测试。mock有如下功能 根据数据模板生成模板数据 模拟ajax请求，生成请求数据 基于html模板生成模拟数据 下载安装 npm install mockjs //使用mock var Mock = require('mockjs'); va...
mock.js 使用
fly_vip的博客
12-09 369
1、先下载依赖 2、再main.js中引入（4中的index 文件） require('./mock/index.js') 3、准备好你的数据，注意，格式一定要和接口格式一样， 4、再src下创建mock文件，分别创建index.js 和user.js ， index.js （文件名称随意，一定要再main.js中引入，主要用mock拦截接口，并返回数据） import Mo...
理解mockjs并且怎么去使用mockjs
weixin_46419373的博客
11-24 724
今天发现个好的东西 参考链接：https://github.com/nuysoft/Mock/wiki （mockjs的详细讲解） 一. 什么是mockjs? 生成随机数据，拦截 Ajax 请求 二. 为什么要使用mockjs? 在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口， 1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查 2.使用json-server模拟，但不能随机生成所需数据 3.使用mockjs模拟后端接口，可随机生成所需数据，.
mock语法
xie_bro的博客
12-19 1633
mock语法 一. 数据模板组成： 属性名 name|生成规则rule:属性值value 'name|rule':value 注： 1.属性名与生成规则之前用竖线 | 分隔 2.生成规则的含义 需要依赖属性值的类型才能确定 3.属性值value中可以含有@占位符 二. 生成规则 1.'name|min-max': value 2.'name|count': value 3.'name|min-max.dmin-dmax': value 4.'name|min-max.dcount': value 5.
mock.js的使用
caimaomaocai的博客
10-08 412
  1.一个简单的例子： Mock.mock('http://123.com',{ 'name|3':'fei',//这个定义数据的模板形式下面会介绍 'age|20-30':25, }) $.ajax({ url:'http://123.com', dataType:'json', success:function(e){ conso...
Mock.js 学习笔记
多啦的博客
03-27 3205
简介 Mock.js 是一款前端开发中拦截 Ajax 请求在生成随机相应的工具，可以用来模拟服务器响应，优点是简单方便、无侵入性，基本覆盖常用的接口数据类型 安装 npm install mockjs -D 文件结构（以Vue-cli中为例） 创建具体业务的 mock 文件 import Mock from 'mockjs'; import {USER_API} fro...
Mock.js + RAP 使用介绍
热门推荐
MasonChen的专栏
09-03 1万+
Mock.js + RAP 使用介绍问题前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景： 1、前端开发依赖于后端接口数据，需要与后端接口联调才能获得数据展示，从而拖慢了开发进度； 2、没有一个很好的结构化接口文档管理工具，能够对项目中所用到的接口进行管理。如一个请求的地址、有几个参数、参数名称及类型含义等等。同时支持项目、历史版本的切换。 什么是Mock Mock = 生成模拟数据 M
前端模拟后端接口返回数据
03-25
如果你想模拟或者测试一个前端页面在没有后台服务的情况下，可以使用一些模拟数据生成工具来模拟后端接口返回数据。以下是几个常用的工具： 1. Mock.js：Mock.js 是一个生成随机数据的 JavaScript 库，可以轻松地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值