<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. HDU 1248寒冰王座-全然背包或记忆化搜索

    寒冰王座 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  2. 飞思卡尔 imx6 GC0308 摄像头驱动配置调试过程

    GC0308摄像头驱动程序使用的是linux v4l2协议,通过i2c信号进行控制.GC0308摄像头.对上电时序要求非常严格,一定要依据datasheet初始化摄像头. 本驱动使用的3.10内核,所 ...

  3. oc74--NSMutableArray

    // // main.m // NSMutableArray ,可变数组 #import <Foundation/Foundation.h> int main(int argc, cons ...

  4. vim插件ctags的安装和使用【转】

    本文转载自:http://blog.csdn.net/g_brightboy/article/details/16830395 [ctags功能]: 为源码的变量/对象.结构体/类.函数/接口.宏等产 ...

  5. ASP.NET 4 and Visual Studio 2010

    https://msdn.microsoft.com/en-us/library/ee532866.aspx The topics in this section provide informatio ...

  6. MarkMonitor 目前最安全的域名注册商，因此，世界500强网站中的22%域名托管于markmonitor公司

    也许你查询某个大型公司域名whios信息时,常常会发现很多这些大型公司的域名都在一家名为MarkMonitor的公司注册,那么markmonitor是家什么样的公司呢? MarkMonitor是一家从 ...

  7. Codeforces--622A--Infinite Sequence（数学）

     Infinite Sequence Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:26214 ...

  8. luogu 3690 【模板】 Link Cut Tree （动态树）

    原来的代码有一些问题. 主要是对于不一定存在的边如何去判断,首先要保证在一个splay里,然后保证彼此之间直接联通且x的右儿子是空的 #include<iostream> #include ...

  9. [Codeforces Round495A] Sonya and Hotels

    [题目链接] https://codeforces.com/contest/1004/problem/A [算法] 直接按题意模拟即可 时间复杂度 :O(NlogN) [代码] #include< ...

  10. bzoj3240 [Noi2013]矩阵游戏——费马小定理+推式子

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3240 n 和 m 太过巨大,不难想到应该用费马小定理什么的来缩小范围: 总之就是推式子啦,看 ...