mockjs模拟数据

使用MockJS创建模拟数据

最新推荐文章于 2025-07-28 10:29:52 发布

原创最新推荐文章于 2025-07-28 10:29:52 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

frontEnd 专栏收录该内容

12 篇文章

订阅专栏

本文将介绍如何利用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>