哈哈,怎么说,这应该是我的第一个随笔了,毕竟前端之路上一直在学习并且各位大神们的经验,虽然也有不少的坑,但是总是收获比较多,所以我也想把一些收获记录下来,有需要的可以参考参考.

网上看了不少大神很多例子很好,但是介绍模糊,看了不知道具体做法,所以我会介绍的详细一点.

今天是主要分享一下mock.js 的插件,我觉得很不哦错,实用性很强,它可以在后端数据没写好的情况下,模拟真实数据,拦截ajax请求并作出迅速的反馈

mock.js官网上有下载,不过注意下载完以后只需要提取一个有用的js文件就行

然后在html的页面导入就好

使用前最好看看官网,官网提供了两种模拟数据用法:DTD和DPD,各有优势,个人感觉DPD容易理解些,当然DTD的用法也需要了解,有的地方用会更方便

接下来是我做的小例子

 var data = Mock.mock({
message: {
name: '@cname',
sex: '@string("男女",1)',
birthday: '@datetime',
hometown: '@county(true)',
age:'@natural(1,100)',
usepassword: '@string(6,10)',
email: '@email',
boker: '@url',
'phone|1': /^1[0-9]{10}$/
}
});
console.log(data);

以上是一些我们经常要用到的属性,我主要用了DPD的方法,手机号方面貌似没有提供占位符的直接用法,所以用DTD的正则匹配会方便一点

这是在chrome的控制台输出的结果:

接下来就是如何拦截ajax请求并且返回相应的数据,其实很简单不难,在原来的基础上加入请求url

<script type="text/javascript">
$(function(){
Mock.mock('http://localhost/manager/Fans.php',{
message: {
name: '@cname',
sex: '@string("男女",1)',
birthday: '@datetime',
hometown: '@county(true)',
age:'@natural(1,100)',
usepassword: '@string(6,10)',
email: '@email',
boker: '@url',
'phone|1': /^1[0-9]{10}$/
}
});
$.ajax({
type:"post",
url:"http://localhost/manager/Fans.php",
async:true,
success:function(data){
// console.log(data);
var idata=$.parseJSON(data);
console.log(idata);
}
});
})
</script>

其中注意一点,就是回调函数里拿到的数据是字符串,根据我们调用的方便要转成json的格式

转到控制台看一下结果

 嘿嘿,我的分享到此结束,希望大神们多多指导

mock.js的真实数据模拟的更多相关文章

  1. Mock.js 虚拟接口 数据模拟

    Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 大概记录下使用过程, 详细使用可以参 ...

  2. 使用RAP2和Mock.JS实现Web API接口的数据模拟和测试

    最近一直在思考如何对Web API的其接口数据进行独立开发的问题,随着Web API的越来越广泛应用,很多开发也要求前端后端分离,例如统一的Web API接口后,Winform团队.Web前端团队.微 ...

  3. 使用mock.js进行数据模拟

    mock.js的文档真的是无力吐槽,只说明API怎么使用,完全不说明mock.js这个工具怎么用到项目里面,最有意思的是google的大部分文章复制官网的API,不管是react还是Vue都是下面的流 ...

  4. Mock.js数据模拟

    数据来源方式: 为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试.大部分情况下,前后端需要同时进行开发.因此便需要moc ...

  5. mock.js

    mock.js http://mockjs.com/ https://github.com/nuysoft/Mock/wiki 为了完成angularjs的karma测试,看到这个好东东,这货能拦截a ...

  6. mock.js 使用教程

    mock.js 数据模板 #查看模板生成的数据 var data = Mock.mock({ //list|1-10 数组元素个数随机范围, id|+2 属性值递增, age|20-30数值随机范围 ...

  7. dva框架使用mock.js模拟数据 + fetch请求数据

    what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...

  8. 【mock.js】后端不来过夜半,闲敲mock落灯花 ——南宋·赵师秀

      mock的由来[假]   赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正值产品上线的紧张时期,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了,  赵师秀非常生气 ...

  9. vue-cli+mock.js+axios模拟前后台数据交互

    最近工作不是很忙,自己做了一个vue的移动端的小项目,涉及到后台数据的时候,网上查阅了一些资料,因为是自己写的项目没有后台只能自己模拟数据,刚开始就自己写了一些静态数据后来觉得尽量模拟真实的比较好些, ...

随机推荐

  1. selenium+testN自动化测试框架搭建

    自动化测试框架搭建 1 Java环境的搭建 1.1访问oracle的官网下载最新版本的jdk http://www.oracle.com/technetwork/java/javase/downloa ...

  2. 【Tesseract】Tesseract API在VS 2013中的配置以及调用

    想要在VS中使用Tesseract库,必须使用经过相对应的VS版本编译过的dll以及lib.比如在VS 2013中,就必须使用在VS 2013中编译过的Tesseract库. 这里我给出经过VS 20 ...

  3. [转载] Java并发编程:Callable、Future和FutureTask

    转载自http://www.cnblogs.com/dolphin0520/p/3949310.html 在前面的文章中我们讲述了创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Run ...

  4. php中向前台js中传送一个二维数组

    在php中向前台js中传送一个二维数组,并在前台js接收获取其中值的全过程方法: (1),方法说明:现在后台将数组发送到前台 echo json_encode($result); 然后再在js页面中的 ...

  5. mybatis中sql语句的批量插入

    <!-- 收件箱插入收件信息 -->    <insert id="insertReceiveemail">           <!-- 生成一条U ...

  6. Ambari概览

    文章作者:luxianghao 文章来源:http://www.cnblogs.com/luxianghao/p/7886195.html  转载请注明,谢谢合作. 免责声明:文章内容仅代表个人观点, ...

  7. Vue自定义指令获取DOM元素

    我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...

  8. mysql 5.7.13 安装配置方法图文教程(linux) (转)

    http://www.jb51.net/article/87160.htm ************************************************ linux环境Mysql ...

  9. Web登录敲门砖之sql注入

    声明:文本原创,转载请说明出处,若因本文而产生任何违法违纪行为将与本人无关.在百度.博客园.oschina.github .SegmentFault.上面都关于sql注入的文章和工具.看过很多sql注 ...

  10. Dom模型

    1.dom之对象分类 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...