**一.mock解决的问题**

  开发时,后端还没完成数据输出,前端只好写静态模拟数据。数据太长了,将数据写在js文件里,完成后挨个改url。某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。特殊的格式,例如IP,随机数,图片,地址,需要去收集

**二、mock优点**

  

  1、前后端分离

  让前端工程师独立于后端进行开发。

  2、增加单元测试的真实性

  通过随机数据,模拟各种场景。

  3、开发无侵入

  不需要修改原有代码,就可以拦截Ajax请求,返回模拟的响应数据。

  4、用法简单

  符合直觉的接口。

  5、数据类型丰富

  支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

  6、方便扩展

  支持支持扩展更多数据类型,支持自定义函数和正则。

  7、在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成 之后,只需要改变url地址即可。

**三、mock的基本使用**

  

  1、安装mockJS

​      cnpm install mockjs -S

    2、使用mockJS(mock/index.js)

​      import Mock from "mock";

​      3、官方文档

​      https://github.com/nuysoft/Mock/wiki/Syntax-Specification

​      4、Mock.mock

​      Mock.mock([rurl],[rtype],[template|function(options)])

​     这里的参数都是可选:

​        rurl(可选)。

​        表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 /shoopList

​       rtype(可选)。

​       表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

​       template(可选)。

​       表示数据模板,可以是对象或字符串。例如 { ‘data|1-10’:[{}] }

​       function(options)(可选)。

​       表示用于生成响应数据的函数。

​       options:指向本次请求的 Ajax 选项集

   

​    5、模拟数据接口

  

[![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0);)

```
//定义数据
const data = Mock.mock({
"data|20": [{
"goodsId|+1": 1,
"goodsName": "@ctitle(10)",
"goodsTel": /^1(5|3|7|8)[0-9]{9}$/,
"goodsAddress": "@county(true)",
"goodsLogo": "@Image('200x100', 'EasyMock')",
}]
}) //模拟数据接口 Mock.mock(/\/shoopList/,"post",function(options){
console.log(options);
return data })
``` /*   输出的options的值为     url:"请求的地址"     type:"请求的类型"     body:post提交的数据 */ ``` ``` [![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0);)   6、在main.js中引入mock/index.js    import "../src/utils/mock";   7、例子 [![复制代码](https://common.cnblogs.com/images/copycode.gif)](javascript:void(0);) ```
// apis/shop.js const Mock = require("mockjs");
let data = Mock.mock({
"data|50":[
{
"shopId|+1": 1,
"shopName": "@ctitle(10)",
"shopTel": /^1(5|3|7|8)[0-9]{9}$/,
"shopAddress": "@county(true)",
"shopStar|1-5": "★",
"salesVolume|30-1000": 30,
"shopLogo": "@Image('100x40','#c33', '#ffffff','小北鼻')",
"food|7":[
{
"foodName":"@cname(5)",
"foodPic":"@Image('100x40','#c33', '#ffffff','小可爱')",
"foodPrice|1-100":20,
}
]
}
]
}) let dataList = data.data; function currentPage(page,limit){ var arr = dataList.filter((item,index)=>{ return index<(page*limit) && index>=(page-1)*limit
})
return arr;
} const getShopPage = (config)=>{
let {page,limit} = pathParams(config.url.split("?")[1]); return {
data:currentPage(page,limit),
page:Math.ceil(dataList.length/limit)
}; } const modifyShop = (config)=>{
let obj = pathParams(config.body);
let page = obj.page;
delete obj.page;
dataList[obj.shopId-1] = {...dataList[obj.shopId],...obj};
console.log(dataList[obj.shopId])
return currentPage(page,8) ;
} export default {
getShopPage,
modifyShop
}
``` import Api from "../api/shop"; import Mock from "mockjs" //分页 Mock.mock(/\/getShopPage/,"get",Api.getShopPage) //修改数据 Mock.mock(/\/ModifyShop/,"post",Api.modifyShop)

mock基本使用的更多相关文章

  1. Pramp mock interview (4th practice): Matrix Spiral Print

    March 16, 2016 Problem statement:Given a 2D array (matrix) named M, print all items of M in a spiral ...

  2. Google C++单元测试框架GoogleTest---Google Mock简介--概念及基础语法

    就在昨天终于做了gtest的分享,我的预研工作终于结束了,感觉离我辞职的日子不远了,毕竟是专注java二百年啊,要告别实习啦.. 这篇是GoogleMock的简介文档,会在后边附带一个自己的例子. 一 ...

  3. Pramp - mock interview experience

    Pramp - mock interview experience   February 23, 2016 Read the article today from hackerRank blog on ...

  4. Spring Mock

    今天看别人的测试代码,发现有  MockMvc.MockHttpServletRequest.MockHttpServletResponse ,不知道是干啥的,百度下下才知道  Mock这个东东. 下 ...

  5. Python mock

    在测试过程中,为了更好地展开单元测试,mock一些数据跟对象在所难免,下面讲一下python的mock的简单用法. 关于python mock,网上有很多资料,这里不会讲的特别深,但一定会是实用为主, ...

  6. ABP中单元测试的技巧:Mock和数据驱动

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:虽然ABP为大家提供了测试的脚手架了,不过有些小技巧还是需要自己探索的. ASP.NE ...

  7. [转] 前后端分离开发模式的 mock 平台预研

    引入 mock(模拟): 是在项目测试中,对项目外部或不容易获取的对象/接口,用一个虚拟的对象/接口来模拟,以便测试. 背景 前后端分离 前后端仅仅通过异步接口(AJAX/JSONP)来编程 前后端都 ...

  8. What's the difference between a stub and mock?

    I believe the biggest distinction is that a stub you have already written with predetermined behavio ...

  9. Nova PhoneGap框架 第六章 使用Mock

    在我们的框架中引入了一个很重要的设计,那就是使用Mock. 这里的mock是指cordova.mock.js文件,它模拟了PhoneGap(Cordova)的API,从而可以在浏览器中运行测试我们的程 ...

  10. mock.js

    mock.js http://mockjs.com/ https://github.com/nuysoft/Mock/wiki 为了完成angularjs的karma测试,看到这个好东东,这货能拦截a ...

随机推荐

  1. 【Excel】读取固定长文本

    '******************************************************************************* ' 固定長形式テキストファイルを読み込 ...

  2. Docker-常用命令(7)

    ## List Docker CLI commandsdockerdocker container --help ## Display Docker version and infodocker -- ...

  3. Android的Base64的坑

    Base64.encodeToString加密后一直和Apache的对不上,多了换行符,最后使用了NO_WRAP就好了 Base64.encodeToString(src, Base64.URL_SA ...

  4. js判断PC端还是移动端

    function goPAGE() { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobi ...

  5. 关于Vue懒加载问题

    有关Vue懒加载其实并不是想象的那么难和复杂: 首先引入 import  VueLazyLoad from 'vue-lazyload'; 其次是使用 Vue.use(VueLazyLoad,{ er ...

  6. 剑指offer——python【第21题】栈的压入、弹出序列

    题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压 ...

  7. python语法_注释

    #加需要注释的内容,#号后面的单行注释 #这一段注释 左右各三个注释单引号或者双引号 中间的内容为注释,可以包含多行 '''这一段注释''' """这一段注释" ...

  8. C#类型转换、进制转换

    string转byte[]: byte[] byteArray = System.Text.Encoding.Default.GetBytes ( str ); byte[]转string: stri ...

  9. Luogu 1177 - 【模板】快速排序 - [快速排序][归并排序][无旋Treap]

    题目链接:https://www.luogu.org/problemnew/show/P1177 题意:输入 $n$ 以及后续 $n$ 个整数,让你将这 $n$ 个整数从小到大排序输出. 归并排序(用 ...

  10. Web开发——HTML DOM基础

    文档资料参考: 参考:HTML DOM 参考手册 参考:HTML DOM 教程 目录: 1.HTML DOM (文档对象模型) 2.查找 HTML 元素 2.1 通过 id 查找 HTML 元素 2. ...