Mock模拟后台接口数据的简单使用

2019-01-12 admin

在项目开发的过程中,有时候会出现后端数据还没出来,而前端需要数据的情况。这时候,如果等着后端人员开发完再进行测试,联调则会拖慢开发进度。这时候,Mock就显示出它的魅力。它可以进行生成随机数据,模拟后端接口数据,从而实现开发时,前后端分离,提高效率。

在使用Mock之前,应该先和后端人员讨论接口文档的基本结构,确认接口文档的内容。在根据确认好的接口文档,使用Mock模拟数据。

最近在vue-cli搭建的项目静态页面已逐渐完善,此时若能有数据模拟渲染,那作为前端新手更能熟悉开发流程。查阅文档和其他小伙伴的文章,开始了模拟数据之旅。

1、安装

npm i mockjs -S

2、引入

在src文件目录下,新建mock.js文件并引入:

const Mock = require('mockjs')

之后,在main.js文件中加载mock.js

require(./mock.js)

3、简单使用

格式: Mock.mock("请求的URL地址",{"数据对象"})

自己的代码:

const Mock = require('mockjs');
const Random = Mock.Random;  // 当需要生成随机数据时使用,更多的随机数据的生成使用参照官网示例

// 示例1
Mock.mock("http://localhost:8080/getData",{
  "code": 1,
  "msg": "请求接口成功",
  "data": [
    {
      "id": 1,
      "name": "英语",
      "createTime": "2019-01-01T21:18:02.000+0000",
      "updateTime": "2019-01-01T21:18:07.000+0000",
      "ordinal": 1
    },
    {
      "id": 2,
      "name": "趣味",
      "createTime": "2019-01-01T21:18:24.000+0000",
      "updateTime": "2019-01-01T21:18:28.000+0000",
      "ordinal": 2
    }
  ]
});

// 示例2
Mock.mock("http://localhost:8080/getBanner",{
    "name":"learn",
    "title": Random.ctitle(),   // 随机生成中文标题
    "describe": "learnEnglish",
    "imgs": [
      "https://m.360buyimg.com/babel/jfs/t1/29191/26/4235/95551/5c2f2996Eba0b025d/c6a2aa923a67f952.jpg",
      "https://img1.360buyimg.com/da/jfs/t1/28807/10/4306/85260/5c30484cE8f828f42/3b36d2a6b80d10eb.jpg",
      "https://img10.360buyimg.com/da/jfs/t18487/241/1444742474/110119/f5bc9082/5acb3af6N2af11d1c.jpg",
      "https://m.360buyimg.com/babel/jfs/t1/22710/5/3081/75342/5c244f9eE54c2699a/74f8c021c36b6366.jpg"
    ]
});

4、进一步使用

参照官方文档,在mock.js文件中引入Mock之后,根据数据模板生成模拟数据:Mock.mock( rurl?, rtype?, template|function( options ))

rurl:可选。表示需要拦截的 URL,可以是 URL 字符串或 URL 正则,如/index.js => /^/index.js$/ rtype:可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。 template:可选。表示数据模板,可以是对象或字符串。例如 { ‘id|1-10’:[{}] }。 function(options):可选。表示用于生成响应数据的函数。options 指向本次请求的 Ajax 选项集,含有 url、type 和 body 三个属性。

① 记录数据模板。当拦截到匹配 url 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。第三点的简单使用采用的就是这种形式。

Mock.mock( rurl, template )

② 记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。

Mock.mock( rurl, function( options ) )

Mock.mock("http://localhost:8080/getNewslist", function(options){
  return options.type
});

③ 记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。

Mock.mock( rurl, rtype, template )

Mock.mock("http://localhost:8080/geNewsinfo", "get", {
  "code": 1,
  "msg": "请求接口成功",
  "data": [
    {
      "id": 1,
      "name": "英语",
      "createTime": "2019-01-01T21:18:02.000+0000",
      "updateTime": "2019-01-01T21:18:07.000+0000",
      "ordinal": 1
    }
  ]
});

④ 记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。

Mock.mock( rurl, rtype, function( options ) )

Mock.mock("http://localhost:8080/getImage", "get", function(options){
  return options.type
});

原文链接:https://segmentfault.com/a/1190000017867736

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50837.html

文章标题:Mock模拟后台接口数据的简单使用

相关文章
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回"undefined":一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
回到顶部