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 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
javascript模拟命名空间
Apr 17 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
详解Vue 全局变量,局部变量
Apr 17 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
Win下如何安装PHP的APC拓展
2013/08/07 PHP
yii2安装详细流程
2018/05/23 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
flexigrid 参数说明
2010/11/23 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
教师群众路线心得体会
2014/11/04 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
goland 清除所有的默认设置操作
2021/04/28 Golang
用Python爬取某乎手机APP数据
2021/06/15 Python