<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. Alcatel OmniSwitch 重置密码

    OmniSwitch 6250重置密码 Press s to STOP AT MINIBOOT... [Miniboot]->cd "network" value = 0 = ...

  2. 对数据html文本 的处理

    对数据html文本 的处理  : 提取文字.图片.分句 ''' SELECT * FROM Info_Roles WHERE Flag=1 LIMIT 2; select top y * from 表 ...

  3. mysql 常用查询语句记录

    SELECT DISTINCT CONCAT('User: ''',USER,'''@''',HOST,''';') AS QUERY FROM mysql.user; GRANT USAGE ON ...

  4. poj 2104 K-th Number（主席树，详细有用）

    poj 2104 K-th Number(主席树) 主席树就是持久化的线段树,添加的时候,每更新了一个节点的线段树都被保存下来了. 查询区间[L,R]操作的时候,只需要用第R棵树减去第L-1棵树就是区 ...

  5. SQL server用到的SQL语句备份下

    这是触发器用于关联条件的 -------------1-------------- set ANSI_NULLS ONset QUOTED_IDENTIFIER ONgo ALTER trigger ...

  6. VS2010 使用TeeChart绘图控件 - 之一 - 控件和类的导入

    vs2010的用法和vc6有很大的不同,特别是在一些函数调用那里,当然.控件导入也是很不一样的 安装好控件后就可以在工程里加入teechart控件了 加入方法有如下几种: 1.添加Teechart控件 ...

  7. P2120 [ZJOI2007]仓库建设 斜率优化dp

    好题,这题是我理解的第一道斜率优化dp,自然要写一发题解.首先我们要写出普通的表达式,然后先用前缀和优化.然后呢?我们观察发现,x[i]是递增,而我们发现的斜率也是需要是递增的,然后就维护一个单调递增 ...

  8. 洛谷 p1625

    高精度 我以为这题必有高论,怎么想也想不出来,没想到竟是如此粗鄙做法. 我们写一个高精度模拟一下,然后枚举约数看是否能约分,由于我不会高精度除法,就抄了一发 其实这种两项之比和项数有关的数列是不能推通 ...

  9. MVC web api 返回JSON的几种方式，Newtonsoft.Json序列化日期时间去T的几种方式。

    原文链接:https://www.muhanxue.com/essays/2015/01/8623699.html MVC web api 返回JSON的几种方式 1.在WebApiConfig的Re ...

  10. codevs3370 选学霸（背包dp，并查集）

    3372 选学霸  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master     题目描述 Description 老师想从N名学生中选M人当学霸,但有K对人实力相 ...