一、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虚拟机|系列1|架构简介

    今天开了一个专题.谈谈我们java程序员每天面对的java虚拟机(jvm). 本质上来说,jvm分两部分:编译器(compiler)和运行时(runtime). 所谓的编译器,简单来说,他就是个翻译机 ...

  2. SpringMVC @ModelAttribute详解

    被@ModelAttribute注释的方法会在此controller每个方法执行前被执行,因此对于一个controller映射多个URL的用法来说,要谨慎使用. 我们编写控制器代码时,会将保存方法独立 ...

  3. js 判断判断多选表单checkbox

    html代码 <input type="checkbox" class="ace auth_id" name="ckb[]" valu ...

  4. LOJ-数列分块入门5

    链接: https://loj.ac/problem/6281 题意: 给出一个长为 的数列 ,以及 n个操作,操作涉及区间开方,区间求和. 思路: 考虑开方5次之后就为1, 即考虑一整个区间的开方次 ...

  5. mysql——非主键自增

    今天遇到一个问题: 要创建一张表,其中我想将ip和date这两列作为一个复合主键,可以通过如下语句修改表结构: alter table tb_name add primary key (字段1,字段2 ...

  6. 对JavaScript 引擎基础:原型优化的研究 -----------------------引用

    一.优化层级与执行效率的取舍 介绍了现代 JavaScript 引擎通用的工作流程: 我们也指出,尽管从高级抽象层面来看,引擎之间的处理流程都很相似,但他们在优化流程上通常都存在差异.为什么呢?为什么 ...

  7. vue学习-day02(自定义指令,生命周期)

    目录: 1.案例:品牌管理    2.Vue-devtools的两种安装方式    3.过滤器,自定义全局或私有过滤器    4.鼠标按键事件的修饰符    5.自定义全局指令:让文本框获取焦点   ...

  8. sh_02_第一个while循环

    sh_02_第一个while循环 # 打印 5 遍 Hello Python # 1. 定义一个整数变量,记录循环次数 i = 1 # 2. 开始循环 while i <= 3: # 1> ...

  9. 苹果CMSv10对接微信公众号教程

    首先声明下,对接公众号的话需要自行注册公众号“订阅号”  对接失败的原因大多是域名变红导致!简单的测试方法就是把域名链接发给qq好友或是qq群里看看有没有变红 域名变红以后大概率不会对接成功的,请知悉 ...

  10. Spring Cloud架构教程 (一)Hystrix监控面板

    下面我们基于之前的示例来结合Hystrix Dashboard实现Hystrix指标数据的可视化面板,这里我们将用到下之前实现的几个应用,包括: eureka-server:服务注册中心 eureka ...