一、mock解决的问题

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

二、mock优点

  1、前后端分离

  让前端工程师独立于后端进行开发。
 
  2、增加测试的真实性
  通过随机数据,模拟各种场景。
 
  3、开发无侵入
  不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。
 
  4、用法简单
  符合直觉的接口。
 
  5、数据类型丰富
  支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
 
  6、方便扩展
  支持支持扩展更多数据类型,支持自定义函数和正则。
 
  7、在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成 之后,只需要改变url地址即可。
 
  8、不涉及跨域问题,
 
三、案例demo
  1.首先需要下载安装mockjs模块
    cnpm install mockjs -S
 
   2.然后可以在scr下创建一个文件夹,用于存放模拟的数据的文件 例如 /src/mock/index.js,在这个文件中
  

const Mock = require("mockjs");
let data = Mock.mock({
"data|100": [ //生成100条数据 数组
{
"shopId|+1": 1,//生成商品id,自增1
"shopMsg": "@ctitle(10)", //生成商品信息,长度为10个汉字
"shopName": "@cname",//生成商品名 , 都是中国人的名字
"shopTel": /^1(5|3|7|8)[0-9]{9}$/,//生成随机电话号
"shopAddress": "@county(true)", //随机生成地址
"shopStar|1-5": "★", //随机生成1-5个星星
"salesVolume|30-1000": 30, //随机生成商品价格 在30-1000之间
"shopLogo": "@Image('100x40','#c33', '#ffffff','小北鼻')", //生成随机图片,大小/背景色/字体颜色/文字信息
"food|7": [ //每个商品中再随机生成七个food
{
"foodName": "@cname", //food的名字
"foodPic": "@Image('100x40','#c33', '#ffffff','小可爱')",//生成随机图片,大小/背景色/字体颜色/文字信息
"foodPrice|1-100": 20,//生成1-100的随机数
"aname|14": [
{
"aname": "@cname",
"aprice|30-60": 20
}
]
}
]
}
]
})
Mock.mock(/goods\/goodAll/, 'post', () => { //三个参数。第一个路径,第二个请求方式post/get,第三个回调,返回值
return data
})

   3.模拟完数据后,需要在入口主文件 main.js中 引入这个模拟数据的文件

   import "./mock/index.js"

  4.在页面中,我们直接可以进行axios请求,(这里懒省事了,正常情况下,要把每个接口都封装到api里面,后期便于修改维护等一系列操作)

  

import axios from "axios";

mounted () {
this.initMsg();
},
methods: {
initMsg(){
      axios.post("http://localhost:8080/goods/goodAll").then((res)=>{
        console.log(res)
       })
  }
}
  
 
 

---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. java高并发实战Netty+协程(Fiber)|系列1(续)|事件驱动模式和零拷贝

    上次讲到事件驱动模式,今天我们来好好分析下netty的事件模式的几个类型. 先从NIO讲起, JAVA NIO方面Selector给Reactor模式提供了基础,Netty结合Selector和Rea ...

  2. Python修炼之路-数据类型

    Python编程之列表 列表是一个使用一对中括号"[   ]" 括起来的有序的集合,可以通过索引访问列表元素,也可以增加和删除元素. 列表的索引:第一个元素索引为0,最后一个元素索 ...

  3. set uniion()

    union()方法返回两个集合的并集,包含所有集合的元素,重复元素只会出现一次. 语法: set.union(set1,set2) 参数: set1必填参数,合并的目标集合 set2选填参数,其他要合 ...

  4. 有关pip报错的问题

    错误消息:“Fatal error in launcher: Unable to create process using '"' 解决办法: python3解决方案:python3 -m ...

  5. JAVA笔记14-线程

    一.概念 线程:是一个程序里面不同的执行路径,每一个分支都叫线程.到现在为止我们所讲的程序分支只有一个,即main方法,称作主线程. 进程:class文件,exe文件.程序的执行过程:程序放入代码区( ...

  6. 两台linux服务器相互拷贝文件的两个方法

    scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器 ...

  7. 洛谷 P3049 Landscaping ( 贪心 || DP)

    题意 : 有n块土地,每块有A[i]泥土,现把其改造成B[i]泥土,有3种操作:(1)花费X向任意土地增加1泥土:(2)花费Y向任意土地减少1泥土:(3)花费Z*|i-j|把土地i的1泥土运到土地j. ...

  8. 模板_SEG_TREE

    #include<bits/stdc++.h> #define maxn 500005 #define int long long using namespace std; inline ...

  9. Codechef TRIPS Children Trips (分块、倍增)

    题目链接: https://www.codechef.com/problems/TRIPS 感觉CC有点毒瘤啊.. 题解: 首先有一个性质可能是因为太傻所以网上没人解释,然而我看了半天: 就是正序和倒 ...

  10. springboot切换配置

    1.默认只有一个application.properties文件 1)删除properties文件,换成yml方式.新增dev,prod两个文件 2)配置application.yml文件:actio ...