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 用6N±1法求素数 实例教程
Oct 20 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
微信小程序开发探究
Dec 27 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
JavaScrip关于创建常量的知识点
Dec 07 Javascript
Vue代码整洁之去重方法整理
Aug 06 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文本数据库的搜索方法
2006/10/09 PHP
php 获取mysql数据库信息代码
2009/03/12 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
原生JS实现留言板
2020/03/26 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
Python中字符串List按照长度排序
2019/07/01 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
法律专业推荐信范文
2013/11/29 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
撤诉状格式范本
2015/05/19 职场文书