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 相关文章推荐
js 日期转换成中文格式的函数
Jul 07 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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
php在字符串中查找另一个字符串
2008/11/19 PHP
php 日期时间处理函数小结
2009/12/18 PHP
Destoon实现多表查询示例
2014/08/21 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
JavaScript学习笔记(十)
2010/01/17 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
python返回昨天日期的方法
2015/05/13 Python
有趣的python小程序分享
2017/12/05 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
python如何写try语句
2020/07/14 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
J2EE面试题
2016/03/14 面试题
技校学生个人职业生涯规划范文
2014/03/03 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
2014年人事科工作总结
2014/11/19 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
实施意见格式范本
2015/06/05 职场文书
python requests模块的使用示例
2021/04/07 Python
python开发制作好看的时钟效果
2022/05/02 Python