模拟数据----------mock.js----------faker.js

最新推荐文章于 2024-08-13 17:03:54 发布

Bright2017

最新推荐文章于 2024-08-13 17:03:54 发布

阅读量3.1k

点赞数 2

分类专栏：网页中用到过的效果 Json

本文链接：https://blog.csdn.net/Bright2017/article/details/78783648

版权

网页中用到过的效果同时被 2 个专栏收录

138 篇文章 0 订阅

订阅专栏

Json

6 篇文章 0 订阅

订阅专栏

一般前后台分离时需要前台自己去模拟数据，不过需要提前和后台商量好数据格式。一条一条自己去写就太原始了，虽然我一直是这么做的，哈哈哈

这是Mock.js官网：http://highsea90.com/t/mock/

这是Faker.js官网：https://github.com/Marak/faker.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Mock数据</title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="http://mockjs.com/dist/mock.js"></script>
	</head>
	<body>
		<div>
		    <h1 id="mockjs">mockjs</h1>
		</div>
		
		<script type="text/javascript">
			//调用mock方法模拟数据
		    Mock.mock(
		        'http://mockjs', {
		            "userName" : '@name',     //模拟名称
		            "age|1-100":100,          //模拟年龄(1-100)
		            "color"    : "@color",    //模拟色值
		            "date"     : "@date('yyyy-MM-dd')",  //模拟时间
		            "url"      : "@url()",     //模拟url
		            "content"  : "@cparagraph()", //模拟文本
		            'list|1-10': [{'id|+2': 1 , 'age|20-30': 100}],
				    'email': '@email',
				    'friends|3': [{name: '@name'}],
				    'price|10-20.2-5': 11,
				    'cost|10-20.3': 11,
				    'test|3.2-5': 52,
				    'yourname|2-4': 'alice-',
				    'title': '@title',
		            // 链接
		            'url': '@url("http")',
		            // 邮箱
		            'email': '@email',
		            // 时间
		            'date': '@date("yyyy-MM-dd HH:mm:ss")',
		            'date2': '@dateTime',
		            // 汉字
		            'ctitle': '@ctitle(8)',
		            // 汉字姓名
		            'canme': '@cname()',
		            // 地址
		            'cadd': '@province' + '@city' + '@county',
		            // 手机号
		            'phone': /^1[385][1-9]\d{8}/
		        }
		    );
		    //ajax请求
		    $("#mockjs").click(function(){
		        $.ajax({
		            url        : "http://mockjs",    //请求的url地址
		            dataType   : "json",   //返回格式为json
		            async      : true, //请求是否异步，默认为异步，这也是ajax重要特性
		            data       : {},    //参数值
		            type       : "GET",   //请求方式
		            beforeSend : function() {
		                //请求前的处理
		            },
		            success: function(req) {
		                //请求成功时处理
		                console.log("打印数据",req);
		            },
		            complete: function() {
		                //请求完成的处理
		            },
		            error: function() {
		                //请求出错处理
		            }
		        });
		    });
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Fader.js模拟数据</title>
	</head>
	<body>
		<div class="demo">faker.js模拟数据，打开控制台看输出。</div>		
		
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/Faker/3.1.0/faker.min.js"></script>
		<script type="text/javascript">
			$(function(){
			    faker.locale = "zh_CN";//设置数据是中文类型
			    var randomName = faker.name.findName();
			    var randomEmail = faker.internet.email();
			    var randomCard = faker.helpers.createCard();
			    var randomwebsite=faker.internet.url();
			    var randomaddress=faker.address.streetAddress() + 					faker.address.city() + faker.address.country();
			    var randombio=faker.lorem.sentences();
			    var randomimage=faker.image.avatar();
			    console.log(randomName);
			    console.log(randomEmail);
			    console.log(randomCard);
			    console.log(randomwebsite);
			    console.log(randomaddress);
			    console.log(randombio);
			    console.log(randomimage);
			});
		</script>
	</body>
</html>

演示地址：http://www.bright2017.top/test1/test1-09/

借鉴博客：https://www.cnblogs.com/mr-yuan/p/7954947.html