mock.js模拟数据实现前后端分离


Posted in Javascript onJuly 24, 2019

众所周知,在日常开发中,前后端分离是最常见的开发模式,前端完成页面渲染,后端提供接口数据。

但是起初项目刚开始,后端还没有写好接口数据,前端要构建页面,还得考虑结构以及后期真实数据的问题。

所以前后端统一接口数据和格式是必要的。

而当统一好接口数据和格式后,前端就可以通过mock.js来模拟对应格式的数据,以此来完成页面的搭建,当后端完成接口和数据后,因为前期数据格式都是规范好的,所以只要去除掉mock.js那部分即可,而不需要再更改界面。

那么说了这么多,mock.js到底是什么?

根据官网简单的解释来说,就是:拦截ajax请求,模拟返回自定义格式的数据,实现前后端分离。

说的这么厉害,那么我们来看看具体用法。

这次先看看在原生中怎么使用,下次介绍在vue中的使用。

普通不涉及框架的项目中安装mock.js推荐使用bower安装:

npm install bower -g
bower install mockjs --save

具体使用:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>mock js-demo1</title>
</head>
 
<body>
 
</body>
 
</html>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/ajax.js"></script>
<script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script>
<script>
  Mock.mock('http://api.com', {
    'users|5': [ {
      'name': '@cname', //中文名称
      'age|1-100': 100, //100以内随机整数
      'birthday': '@date("yyyy-MM-dd")', //日期
      'city': '@city(true)' //中国城市
    }]
  });
  // //JQuery方式
  $.ajax({
    url: 'http://api.com',
    dataType: 'json'
  }).done(function (data, status, xhr) {
    console.log(
      JSON.stringify(data, null, 4)
    )
  });
  //原生ajax方式
  function ajax(method, url, params, isAsync) {
    //创建对象
    xhr = new XMLHttpRequest();
    //设置请求参数
    xhr.open(method, url, isAsync);
    //回调函数
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      }
    }
    //发送请求
    xhr.send();
  }
  ajax('get','http://api.com','', true);
</script>

这里我引入了通过bower下载的mock.js,然后给mockjs给定一个请求地址(如果有可以给定真实地址,没有可以写个假地址,只要和ajax请求地址一致即可),然后在mock的第二个参数中定义了数据格式,是个随机五位的数组对象,包括姓名、年龄、生日、地址

然后通过ajax正常请求地址,然后返回值就会收到mock.js的拦截,而返回我们自定义格式的数据,而不是后端数据

这样在项目初期,后端没有数据的情况下,我们就可以通过模拟数据完成页面功能的开发。

当后端数据完成后,我们只要删除mock.js部分即可(如果前期接口地址是假的,改一下接口地址即可)

这里推荐把mock.js部分抽离到公共的文件中,引入即可,这样后期可维护性强,只要不引入mock部分即可,而不用来回删代码。

返回数据效果:

mock.js模拟数据实现前后端分离

具体的请求格式官网写的很清楚,这里就不做赘述了。

附上官网的地址:

mock.js官网

好了,这次就介绍到这里,大家去试试吧。

如有问题,请指出,接受批评。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript游戏之优化篇
Nov 08 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
vue+mock.js实现前后端分离
Jul 24 #Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 #Javascript
Vue封装的组件全局注册并引用
Jul 24 #Javascript
vue子路由跳转实现tab选项卡
Jul 24 #Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 #Javascript
Vue.js路由实现选项卡简单实例
Jul 24 #Javascript
vue滚动tab跟随切换效果
Jun 29 #Javascript
You might like
玩转虚拟域名◎+ .
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
php zend解密软件绿色版测试可用
2008/04/14 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
php实现简单四则运算器
2020/11/29 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
python实现用户答题功能
2018/01/17 Python
python requests post多层字典的方法
2018/12/27 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
python中eval与int的区别浅析
2019/08/11 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
企业行政文员岗位职责
2013/12/03 职场文书
生日宴会答谢词
2014/01/09 职场文书
国庆节演讲稿
2014/05/27 职场文书
尊师重教演讲稿
2014/09/04 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
Java内存模型之happens-before概念详解
2021/06/13 Java/Android