您的位置：首页 > Web前端 > JavaScript

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

2017-12-12 17:00 344 查看

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

这是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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航