<html>
<head>
<title>测试</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<script src="http://mockjs.com/dist/mock.js"></script>
</head>
<body>
<ul id="page-contents-body">
<li>1</li>
<a id="goCollect" dataId="5">收藏本版</a>
</ul>

</body>

<script>
$(document).ready(function() {
//
var template = {
// 属性 results 的值是一个数组，其中含有 1 到 47个元素
'results|1-47':[{
'num':'@integer(0,45)',
'sent':'@sentence',
//属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
}

//Mock.mock( rurl, rtype, template )
//记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
//rurl可选。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。
//rtype可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
//template可选。表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
//
//
//
//根据数据模板生成模拟数据。 mock/data自己模拟的一个url接口随便定义的,下面的请求路径和这个保持一致
//template//将数据模板导入
Mock.mock("mock/data", template)
$.ajax({
url:"mock/data",
dataType:"json" ,
success : function( data ) {
console.log(data.results)
}
})
/* .done(function(data, status, jqXHR) {
$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body')
$.each(data.results, function(i, item){
$('<p>').text(item.num).appendTo('body')
$('<p>').text(item.sent).appendTo('body')
})
})*/

var template = {
'title': 'Syntax Demo',

'string1|1-10': '★',
'string2|3': 'value',

'number1|+1': 100,
'number2|1-100': 100,
'number3|1-100.1-10': 1,
'number4|123.1-10': 1,
'number5|123.3': 1,
'number6|123.10': 1.123,

'boolean1|1': true,
'boolean2|1-2': true,

'object1|2-4': {
'110000': '北京市',
'120000': '天津市',
'130000': '河北省',
'140000': '山西省'
},
'object2|2': {
'310000': '上海市',
'320000': '江苏省',
'330000': '浙江省',
'340000': '安徽省'
},

'array1|1': ['AMD', 'CMD', 'KMD', 'UMD'],
'array2|1-10': ['Mock.js'],
'array3|3': ['Mock.js'],

'function': function() {
return this.title
}
}
var data = Mock.mock(template)

$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
})
/* var page_contents_body = $('#page-contents-body').html();

requestFillServerData( 'mock/getmockdata',{ }, response, wrap, 'post', homePostsCallback, { 'content': filterTags, 'create_time': createTimeFormat } );*/

//Mock.valid( template, data )
//校验真实数据 data 是否与数据模板 template 匹配。
</script>
</html>

Mock随机生成数据模拟后台接口的更多相关文章

  1. vue-cli3 本地数据模拟后台接口

    vue-cli3 本地数据模拟后台接口 原理: 将本地的json数据在前端模拟为后台接口,然后调用接口,完成前端操作.在后台接通后可以直接在api配置文件中修改路径,完成前后台对接. 配置: 1.文件 ...

  2. vue从mock数据过渡到使用后台接口

    说明: 最近在搭建一个前端使用vue-element-admin,后端使用springBoot的项目. 由于vue-element-admin使用的是mock的模拟数据跑起来的项目,所以在开发过程中难 ...

  3. Swagger结合mustache模板生成后台接口代码、以及前后台建模代码

    之前项目中使用的的thrift来建模,维护前后台模型以及rest接口,前台使用的是angular2: 但是使用thrift只能生成建模,后台的rest接口的Controller文件还是需要手动去写,一 ...

  4. python接口自动化中，注册接口随机生成手机号码

    如大家所知在注册接口中,手机号参数需要的是未注册的手机号,而在测试用例中,你写入的手机号不一定是未注册的.所以这时需要对注册接口中传入的手机号做处理.下面我就分享一个课程里面学到的一个处理手机号的py ...

  5. mock数据（模拟后台数据）

    mock数据(模拟后台数据) - Emily恩 - 博客园 https://www.cnblogs.com/enboke/p/vue.html Mock.js http://mockjs.com/ 前 ...

  6. 前后端通信中使用Ajax与后台接口api交互(以登录功能为例)

    一.查阅开发文档 首先,要做这个功能前,我们必须先查阅后台接口文档,了解使用登录接口时,需要提交哪些参数,并且接口使用返回的数据. 这里我使用了一个返回json格式数据的登录接口为例,讲解怎么使用Aj ...

  7. fetch 代替 XMLHttpRequest (json-server 模拟后台接口)

    一.fetch 是 XMLHttpRequest 的替代方案.说白了就是除了 ajax 获取后台数据之外也可以用fetch 来获取. 二.fetch 的支持性还不是很好.挂载于BOM中可以通过浏览器直 ...

  8. 结对作业——随机生成四则运算（Core 第7组）

    结对作业 ——随机生成四则运算(core第7组) 吕佳玲 PB16060145 涂涵越 PB16060282 GITHUB地址 https://github.com/hytu99/homework_2 ...

  9. Java定时器Timer,TimerTask每隔一段时间随机生成数字

    1:java.util.Timer类是一种工具,线程用其安排以后在后台线程中执行的任务.可安排任务执行一次,或者定期重复执行. 2:TimerTask类是由 Timer 安排为一次执行或重复执行的任务 ...

随机推荐

  1. 【Android】自己定义圆形ImageView(圆形头像 可指定大小)

    近期在仿手Q的UI,这里面常常要用到的就是圆形头像,看到 在android中画圆形图片的几种办法 这篇文章,了解了制作这样的头像的原理.只是里面提供的方法另一个不足的地方就是不能依据实际需求改变图片的 ...

  2. C/C++异常处理机制

    1.C语言异常处理   1.1 异常终止   标准C库提供了abort()和exit()两个函数,它们可以强行终止程序的运行,其声明处于<stdlib.h>头文件中.这两个函数本身不能检测 ...

  3. JOS 不能进入lab2 问题的解决

    JOS 不能进入lab2 问题的解决 这个鸟问题折腾了我好久! lab2是须要 kern/pmap.c的! 可是这里没有 首先要git checkout -b lab2 origin/lab2 (仅仅 ...

  4. Cocos2d-x教程(34)－三维物体OBB碰撞检測算法

    欢迎增加Cocos2d-x 交流群:193411763 个中心点.1个旋转矩阵和3个1/2边长(注:一个旋转矩阵包括了三个旋转轴,若是二维的OBB包围盒则是一个中心点,两个旋转轴,两个1/2边长). ...

  5. [Elasticsearch] 集群的工作原理 - 第一部分

    本文翻译自Elasticsearch官方指南的life inside a cluster一章. ES就是为高可用和可扩展而生的. 扩展能够通过购置性能更强的server(垂直扩展或者向上扩展,Vert ...

  6. Android应用程序无法读写USB设备的解决方法

    假设android系统中的API或者apk无法读写usb设备.可能是没有加入读写usb的权限,须要依照例如以下方法进行设置: 1. 在android.hardware.usb.host.xml文件里加 ...

  7. css高级：font-size

    body{ font:62.5%/1.6em "Lucida Grande",Verdana,Geneva,Helvetica,Arial,sansserif; }//font-s ...

  8. 【bzoj1207】[HNOI2004]打鼹鼠

    看了数据范围,想想这不暴力可以过??   DP   #include<algorithm> #include<iostream> #include<cstdlib> ...

  9. Jboss 7配置日志

    1. Jboss7配置日志理论知识介绍 Jboss 7日志能够在XML配置文件和日志管理属性文件内配置.默认日志配置在configuration文件夹的logging.properties文件内. 通 ...

  10. 01-S3C2440学习入门概念+环境搭建【转】

    本文转载自:http://blog.csdn.net/fengyuwuzu0519/article/details/54754812 一.心得: 这两年学过很多东西,有点杂,总感觉不够踏实,于是准备写 ...