---Mock---基本使用
一、mock解决的问题
开发时,后端还没完成数据输出,前端只好写静态模拟数据。数据太长了,将数据写在js文件里,完成后挨个改url。某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。特殊的格式,例如IP,随机数,图片,地址,需要去收集
二、mock优点
1、前后端分离
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(){
}
}
---Mock---基本使用的更多相关文章
- 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 ...
- Google C++单元测试框架GoogleTest---Google Mock简介--概念及基础语法
就在昨天终于做了gtest的分享,我的预研工作终于结束了,感觉离我辞职的日子不远了,毕竟是专注java二百年啊,要告别实习啦.. 这篇是GoogleMock的简介文档,会在后边附带一个自己的例子. 一 ...
- Pramp - mock interview experience
Pramp - mock interview experience February 23, 2016 Read the article today from hackerRank blog on ...
- Spring Mock
今天看别人的测试代码,发现有 MockMvc.MockHttpServletRequest.MockHttpServletResponse ,不知道是干啥的,百度下下才知道 Mock这个东东. 下 ...
- Python mock
在测试过程中,为了更好地展开单元测试,mock一些数据跟对象在所难免,下面讲一下python的mock的简单用法. 关于python mock,网上有很多资料,这里不会讲的特别深,但一定会是实用为主, ...
- ABP中单元测试的技巧:Mock和数据驱动
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:虽然ABP为大家提供了测试的脚手架了,不过有些小技巧还是需要自己探索的. ASP.NE ...
- [转] 前后端分离开发模式的 mock 平台预研
引入 mock(模拟): 是在项目测试中,对项目外部或不容易获取的对象/接口,用一个虚拟的对象/接口来模拟,以便测试. 背景 前后端分离 前后端仅仅通过异步接口(AJAX/JSONP)来编程 前后端都 ...
- 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 ...
- Nova PhoneGap框架 第六章 使用Mock
在我们的框架中引入了一个很重要的设计,那就是使用Mock. 这里的mock是指cordova.mock.js文件,它模拟了PhoneGap(Cordova)的API,从而可以在浏览器中运行测试我们的程 ...
- mock.js
mock.js http://mockjs.com/ https://github.com/nuysoft/Mock/wiki 为了完成angularjs的karma测试,看到这个好东东,这货能拦截a ...
随机推荐
- 浅谈java虚拟机|系列1|架构简介
今天开了一个专题.谈谈我们java程序员每天面对的java虚拟机(jvm). 本质上来说,jvm分两部分:编译器(compiler)和运行时(runtime). 所谓的编译器,简单来说,他就是个翻译机 ...
- SpringMVC @ModelAttribute详解
被@ModelAttribute注释的方法会在此controller每个方法执行前被执行,因此对于一个controller映射多个URL的用法来说,要谨慎使用. 我们编写控制器代码时,会将保存方法独立 ...
- js 判断判断多选表单checkbox
html代码 <input type="checkbox" class="ace auth_id" name="ckb[]" valu ...
- LOJ-数列分块入门5
链接: https://loj.ac/problem/6281 题意: 给出一个长为 的数列 ,以及 n个操作,操作涉及区间开方,区间求和. 思路: 考虑开方5次之后就为1, 即考虑一整个区间的开方次 ...
- mysql——非主键自增
今天遇到一个问题: 要创建一张表,其中我想将ip和date这两列作为一个复合主键,可以通过如下语句修改表结构: alter table tb_name add primary key (字段1,字段2 ...
- 对JavaScript 引擎基础:原型优化的研究 -----------------------引用
一.优化层级与执行效率的取舍 介绍了现代 JavaScript 引擎通用的工作流程: 我们也指出,尽管从高级抽象层面来看,引擎之间的处理流程都很相似,但他们在优化流程上通常都存在差异.为什么呢?为什么 ...
- vue学习-day02(自定义指令,生命周期)
目录: 1.案例:品牌管理 2.Vue-devtools的两种安装方式 3.过滤器,自定义全局或私有过滤器 4.鼠标按键事件的修饰符 5.自定义全局指令:让文本框获取焦点 ...
- sh_02_第一个while循环
sh_02_第一个while循环 # 打印 5 遍 Hello Python # 1. 定义一个整数变量,记录循环次数 i = 1 # 2. 开始循环 while i <= 3: # 1> ...
- 苹果CMSv10对接微信公众号教程
首先声明下,对接公众号的话需要自行注册公众号“订阅号” 对接失败的原因大多是域名变红导致!简单的测试方法就是把域名链接发给qq好友或是qq群里看看有没有变红 域名变红以后大概率不会对接成功的,请知悉 ...
- Spring Cloud架构教程 (一)Hystrix监控面板
下面我们基于之前的示例来结合Hystrix Dashboard实现Hystrix指标数据的可视化面板,这里我们将用到下之前实现的几个应用,包括: eureka-server:服务注册中心 eureka ...