<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. Linux经常使用命令002之搜索命令locate、whereis、which、find、grep

    Linux经常使用命令002之搜索命令locate.whereis.which.find.grep -20150811 经常使用搜索命令 -------文件搜索命令---------- -->l ...

  2. 修改select默认样式

    http://www.qkzone.com/code/2015-11-26/1.html

  3. P2657 [SCOI2009]windy数 数位dp

    数位dp之前完全没接触过,所以NOIP之前搞一下.数位dp就是一种dp,emm……用来求解区间[L,R]内满足某个性质的数的个数,且这个性质与数的大小无关. 在这道题中,dp[i][j]代表考虑了i位 ...

  4. App上架流程 & 上架被拒10大原因

    上架前预热 先登陆自己的开发者账号(自己提前注册好 iOS 开发者账号,这里假设你已经拥有了一个 iOS 开发者账号),进入这个页面:https://developer.apple.com/accou ...

  5. Paratroopers(最小割模型)

    http://poj.org/problem?id=3308 题意:一个m*n的网格,有L位火星空降兵降落在网格中,地球卫士为了能同时消灭他们,在网格的行或列安装了一个枪支,每行或每列的枪支都能消灭这 ...

  6. Gym - 102059D 2018-2019 XIX Open Cup, Grand Prix of Korea D. Dumae 贪心+堆

    题面 题意:有3e5个人排成一列,然后Li,Ri表示每个人可以站在[Li,Ri]中的一个,然后M(1e6)个限制条件,某个人一定要在某个人前面,求一种合法方案,无解输出-1 题解:首先可以想到对于限制 ...

  7. idea ssm项目移包报错问题

    写完代码之后发现包结构太乱了  想要规划一下  结果报错 这里面的包路径都可以点进去,还是报找不到com.lf.company.entity.Business 后来发现是 在移动前和移动后都存在这个m ...

  8. 题解报告：hdu 1279 验证角谷猜想

    Problem Description 数论中有许多猜想尚未解决,其中有一个被称为“角谷猜想”的问题,该问题在五.六十年代的美国多个著名高校中曾风行一时,这个问题是这样描述的:任何一个大于一的自然数, ...

  9. ACM_蛋糕小王子铁头娃

    Problem Description: 铁头娃制作了很多蛋糕,想分给他的小伙伴们,他的小伙伴很喜欢铁头娃做的蛋糕,每个人都想分到最多蛋糕 铁头娃想到了一个头铁主意:先给小伙伴们从1到N编号,在1-N ...

  10. Leetcode03---Longest Substring Without Repeating Characters

    Description: Given a string, find the length of the longest substring without repeating characters. ...