mockjs模拟数据

使用MockJS创建模拟数据
本文将介绍如何利用MockJS生成模拟数据,帮助开发者在没有真实API的情况下进行前端开发和测试。我们将探讨MockJS的基本用法,包括定义数据模板、模拟HTTP请求以及自定义拦截规则。
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
	  <p>{{ foo }}</p>
	  <button @click ="getFun">getFun</button>
	  <button @click ="postFun">postFun</button>

	  {{user.name}}
	  {{user.id}}
	 
	  <div v-for="item in fakeData">
		  {{item.id}}
		  <img :src="item.img" alt="">
	  </div>
	</div>
	<script src="./js/mock.js"></script>
	<script src="./js/vue.js"></script>
	<script src="./js/axios.js"></script>
	<script>
		Mock.mock('/get', function(options) {
			console.log("-----------------------");
			return Mock.mock({
				"user": {
					'name': '@cname',
					'id|+1': 88
				}
			});
		})
		Mock.mock('/post', function(options) {
			console.log("-----------------------");
			console.log(JSON.parse(options.body).firstName);
			return Mock.mock({
				"user": {
					'name': '@cname',
					'id|+1': 88
				}
			});
		})
		
		// Mock.setup({ timeout: 1000 });

		new Vue({
			el: '#app',
			data: {
				foo: "ddd",
				fakeData: '',
				user: ''
			},
			created: function (){
				this.getFake()
			},
			methods: {
		        getFake: function(){
					this.fakeData = Mock.mock({
			    		// 属性 list 的值是一个数组,其中含有 1 到 10 个元素
					    'list|1-10': [{
					        // 属性 id 是一个自增数,起始值为 1,每次增 1
					        'id|+1': 1,
					        'guid': '@guid',
					        'foo': 'Hello',
					        // 属性 name 产生数量在最小最大之间min-max
					        'age|1-5': '*',
					        'email': '@email',
					        'cname': '@cname',
					        //整数1-10之间,小数1-10位
					        "number|1-10.1-10": 1,
					        "boolean|1-2": true,
					        "obj|2-3": {
							    "310000": "上海市",
							    "320000": "江苏省",
							    "330000": "浙江省",
							    "340000": "安徽省"
							},
							"array|1-10": [
							    "AMD",
							    "CMD",
							    "UMD"
							],
							'fun': function() {
							    return this.name
							},
							'regexp': /\d{5,10}/,
							//Absolute Path 
							"absolutePath": "@foo /@foo",
							'date': '@date("yyyy-MM-dd")',
							'datetime': '@datetime("y-MM-dd HH:mm:ss")',
							//image( size, background, foreground, format, text )
							'img': "@dataImage('200x100', 'Hello Mock.js!')",
							'color': '@color',
							'rgba': '@rgba()',
							'text': '@paragraph(1, 3)',
							'sentence': '@sentence(3, 5)',
							'cparagraph': '@cparagraph(1, 3)'
					    }]
					}).list
				},
				getFun: function(){
					axios.get('/get')
					.then( (response)=>{
						console.log(response.data);
						this.user = response.data.user
					})
					.catch( (error) => {
						console.log(error);
					});
				},
				postFun: function(){
					axios.post('/post',{
						firstName: 'Fred',
    					lastName: 'Flintstone'
					})
					.then( (response)=>{
						console.log(response.data);
					})
					.catch( (error) => {
						console.log(error);
					});
				}
		    }
		})
	</script>
</body>
</html>
使用Mock.js可以方便地模拟数据。在Vue-cli项目中,可以通过引入相关模块和配置来使用Mock.js模拟数据。首先,在项目的main.js文件中引入mockserver.js模块,并让其执行一遍。这样可以确保Mock.js的相关配置得到正确的加载和初始化。然后,在需要使用模拟数据的地方,可以使用Mock.mock()方法来模拟接口的返回数据。例如,可以在一个接口请求的地方使用Mock.mock()来模拟轮播图的数据,通过传入一个对象来定义模拟数据结构。这样,在开发过程中就可以使用模拟数据来进行测试和调试,而无需依赖真实的后端接口。Mock.js还提供了丰富的数据生成规则和语法,可以根据需求来生成各种类型的模拟数据。使用Mock.js模拟数据可以提高开发效率,减少对后端接口的依赖,并且可以模拟各种不同的场景和数据情况,以便更好地测试和调试前端代码。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [使用mockjs模拟数据](https://blog.youkuaiyun.com/guhanfengdu/article/details/126021744)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [详解在vue-cli项目下简单使用mockjs模拟数据](https://download.youkuaiyun.com/download/weixin_38748769/12950790)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值