一、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. idea 新手入门配置

    1.配置新建类时,创建者信息 2.配置svn 1. 在idea中不显示无用的内容,配置如下  .hprof;.iml;.pyc;.pyo;.rbc;.yarb;~;.DS_Store;.git;.hg ...

  2. python中导入from appium import webdriver时报错:ModuleNotFoundError: No module named 'appium'

    1.检查一下有没有安装Appium-Python-Client,执行语句:pip install Appium-Python-Client进行安装 2.安装后,出现ModuleNotFoundErro ...

  3. 解决input 中placeholder的那些神坑

    **昨天后台小哥哥提到placehold无法显示问题,我这边总结一下,顺便写个小文章分享给大家..** ============================================== 一 ...

  4. 微信小程序-饮食日志_开发日志

    针对假期作业为父母或者身边的人做一款“小软件”这个课题,由于对 android 开发不熟悉 ,所以决定做一款微信小程序. 项目名称:饮食管理日志 目的:身边的人群对摄入食物热量及消耗不清楚,对健康需求 ...

  5. day_06 猜年龄游戏,三级菜单 ,求1 - 2 + 3 - 4 + 5...99的所有数的和(课后作业)

    1.猜年龄游戏: 要求: 允许用户最多尝试3次 每尝试3次后,如果还没猜对,就问用户是否还想继续玩,如果回答Y或y, 就继续让其猜3次,以此往复,如果回答N或n,就退出程序 如果猜对了,有三次选择奖励 ...

  6. Fortran代码生成so库

    例: ifort -c -fpic test.f90ifort -shared -o test.so test.o

  7. 为什么要用setTimeout模拟setInterval ?

    setInterval有两个缺点: 使用setInterval时,某些间隔会被跳过: 可能多个定时器会连续执行: 在前一个定时器执行完前,不会向队列插入新的定时器(解决缺点一) 保证定时器间隔(解决缺 ...

  8. 设计模式来替代if-else

    前言# 物流行业中,通常会涉及到EDI报文(XML格式文件)传输和回执接收,每发送一份EDI报文,后续都会收到与之关联的回执(标识该数据在第三方系统中的流转状态).这里枚举几种回执类型:MT1101. ...

  9. LeetCode - 乘积最大子串

    给定一个整数数组 nums ,找出一个序列中乘积最大的连续子串(该序列至少包含一个数). 示例 1: 输入: [2,3,-2,4] 输出: 6 解释: 子数组 [2,3] 有最大乘积 6. 示例 2: ...

  10. BZOJ 4769: 超级贞鱼 逆序对 + 归并排序

    手画几下序列的变换后发现逆序对数是恒定的,故只需对第 $0$ 年求逆序对即可. 树状数组会 $TLE$ 的很惨,需要用到归并排序来求逆序对. 其实就是省掉了一个离散化的时间,估计能比树状数组快一半的时 ...