<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. ubuntu 网络监控 nethogs

    ***网络监控ubuntu自带的 netstat -an 查看当前网络状况 sudo netstat -anp 查看当前网络状况带对应进程号 traceroute 追踪路由 ***我比较喜欢用Neth ...

  2. Shell细小问题汇总

    Shell细小问题汇总 本文原文出处: http://blog.csdn.net/bluishglc/article/details/44276607 严禁不论什么形式的转载,否则将托付CSDN官方维 ...

  3. Windows 如何在右键中添加“在此处打开CMD窗口”选项

    将以下代码保存为XXX.reg,然后双击导入注册表 Windows Registry Editor Version 5.00   [HKEY_CLASSES_ROOT\Directory\shell\ ...

  4. Django搭建简单的站点

    1.首先.新建一个项目(project), 名称为 mysite django-admin startproject mysite(假设 django-admin 不行,请用 django-admin ...

  5. iOS网络高级编程：iPhone和iPad的企业应用开发之错误处理

    本章内容 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWluZ2h1YXdlbmthbmc=/font/5a6L5L2T/fontsize/400/fi ...

  6. FourCC

    https://en.wikipedia.org/wiki/FourCC A FourCC (literally, four-character code) is a sequence of four ...

  7. （C语言版）链表（三）——实现双向链表创建、删除、插入、释放内存等简单操作

    上午写了下单向循环链表的程序,今天下午我把双向链表的程序写完了.其实双向链表和单向链表也是有很多相似的地方的,听名字可以猜到,每个节点都包含两个指针,一个指针指向上一个节点,一个指针指向下一个节点.这 ...

  8. tiny4412学习(四)之移植linux-设备树（1）设备树基础知识及GPIO中断【转】

    本文转载自:http://blog.csdn.net/fengyuwuzu0519/article/details/74177978 版权声明:本文为博主原创文章,转载请注明http://blog.c ...

  9. StackExchange.Redis 使用资料

    在StackExchange.Redis中最重要的对象是ConnectionMultiplexer类, 它存在于StackExchange.redis命名空间中.这个类隐藏了Redis服务的操作细节, ...

  10. ORA-00907: 缺失右括号问题或com.alibaba.druid.sql.parser.ParserException: TODO :IDENTIFIER的原因

    以上只是说明错误的原因的一种.