Mock 基本使用

最新推荐文章于 2024-06-13 15:01:43 发布
最新推荐文章于 2024-06-13 15:01:43 发布
阅读量474 收藏
点赞数
分类专栏： 前端 文章标签： mock 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NOfighting/article/details/132696821
版权

mock解决的问题

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

mock的优点

1、前后端分离 让前端工程师独立于后端进行开发。

2、增加测试的真实性 通过随机数据，模拟各种场景。

3、开发无侵入 不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

4、用法简单 符合直觉的接口。

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

6、方便扩展 支持支持扩展更多数据类型，支持自定义函数和正则。

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

8、不涉及跨域问题

简单基本使用

Mock官网mock官网

开始命令：
npm init -y
npm i mockjs -D

简单示例

mock返回的模拟数据都是一个对象类型
| 左右不要有空格
数据模板定义规范： ‘属性名|生成规则’：属性值

let data = Mock.mock({
    /!*随机生成一个长度为5的数组*!/
    'list|5-10': [
        /!*从1开始，每次+1*!/
        {'id|+1': 1}
    ]
})
console.log(data.list)

生成字符串和数组

console.log('==============随机生成字符串=============')
let data = Mock.mock({
    'a': '#',
    'b|3': '#',
    'c|7-9': '#'
})
console.log(data)
console.log('==============随机生成数zi=============')
data = Mock.mock({
    'a': 1,
    'b|1-100': 0
})
console.log(data)


==============随机生成字符串=============
{ a: '#', b: '###', c: '#########' }   
==============随机生成数组=============
{ a: 1, b: 91 }

boolean 、对象、数组

const Mock = require("mockjs");
console.log('==============随机生成boolean=============')
let data = Mock.mock({
    'a': true,
    'b|1-2': false
})
console.log(data)
==============随机生成boolean=============
{ a: true, b: true }


console.log('==============随机生成对象=============')
const cities = {
    'zhengzhou': '郑州',
    'hangzhou': '杭州',
    'wuhan': '武汉',
    'guangzhou': '广州',
    'shanghai': '上海',
    'beijing': '北京'
}
data = Mock.mock({
    'a|2': cities,
    'b|2-5': cities
})
console.log(data)
==============随机生成对象=============
{
  a: { guangzhou: '广州', hangzhou: '杭州' },
  b: { wuhan: '武汉', beijing: '北京', guangzhou: '广州' }
}


console.log('==============随机生成数组=============')
const arr = ['北京', '郑州', '上海', '厦门']
data = Mock.mock({
    'a|1': ['北京', '郑州', '上海', '厦门'],
    'b|2-5': ['北京', '郑州', '上海', '厦门', '武汉', '南京', '杭州', '福州'],
    'c|2': arr
})
console.log(data)
==============随机生成数组=============
{
  a: '郑州',
  b: [
    '北京', '郑州', '上海',
    '厦门', '武汉', '南京',
    '杭州', '福州', '北京',
    '郑州', '上海', '厦门',
    '武汉', '南京', '杭州',
    '福州', '北京', '郑州',
    '上海', '厦门', '武汉',
    '南京', '杭州', '福州'
  ],
  c: [
    '北京', '郑州',
    '上海', '厦门',
    '北京', '郑州',
    '上海', '厦门'
  ]
}

随机生成字符串、布尔、自然数、整数、浮点数、range、日期、文本

/*随机生成篇*/
const Mock = require('mockjs')
/*三种生成方式
* Mock.Random.xxxx()
* Mock.mock('@xxx')
* Mock.mock('@xxx()')
* */
console.log('=========随机生成字符串=========')
// console.log(Mock.Random.string('pool'?, min?, max?));
console.log(Mock.Random.string());
let data = Mock.mock({
    'a': Mock.Random.string('number', 4),
    'b': Mock.Random.string('upper', 4),
    'c': Mock.Random.string('lower', 4),
    'd': Mock.Random.string('simple', 4, 10),
    'e': Mock.Random.string('booasdfsadlean', 4, 10),
    'f': Mock.mock('@string'),
    'g': Mock.mock('@string()')
})
console.log(data)

console.log('=========boolean==========')
/*Boolean就俩值，这一个操作足以*/
console.log(Mock.Random.boolean())

console.log('==============natural============')
// natural(min?, max?)
data = Mock.mock({
    'a': Mock.Random.natural(),
    'b': Mock.mock('@natural'),
    'c': Mock.mock('@natural()'),
    'd': Mock.mock('@natural(10000)'),
    'e': Mock.mock('@natural(100, 200)'),
})
console.log(data)

console.log('==========integer============')
// integer(min?, max?)

console.log('===============float===================')
// float(min?, max?, dmin?, dmax?)
data = Mock.mock({
    'a': Mock.Random.float(),
    'b': Mock.mock('@float'),
    'c': Mock.mock('@float(900)'),
    'd': Mock.mock('@float(900, 1000)'),
    'e': Mock.mock('@float(900, 1000, 3)'),
    'f': Mock.mock('@float(900, 1000, 1, 3)'),
})
console.log(data)

console.log('================获取数字类型数组 range===============')
// range(start?, stop, step?)
// 默认从0开始，start包括， stop不包括
data = Mock.mock({
    'a': Mock.Random.range(5),
    'c': Mock.mock('@range(0, 10)'),
    'd': Mock.mock('@range(1, 100, 2)'),
})
console.log(data)

console.log('==============获取随机日期================')
// date( format? )
data = {
    'a': Mock.Random.date(),
    'b': Mock.mock('@date'),
    'c': Mock.mock('@date(yyyy-mm-dd)'),
    'd': Mock.mock('@date(yy-mm-dd)'),
    'e': Mock.mock('@date(y-m-d)'),// 单个 m / d : 小于10 没有0
}
console.log(data)

console.log('===========获取随机文本============')
// paragraph, sentence, word, title, cparagraph, csentence, cword(pool?, min?, max?), ctitle
// 带有c的是随机生成中文入参除了cword 均为(min?, max?)
data = Mock.mock({
    'a': Mock.Random.paragraph(),
    'b': Mock.mock('@paragraph(3, 9)')
})
console.log(data)

data = Mock.mock({
    'a': Mock.Random.sentence(),
    'b': Mock.mock('@sentence(3, 9)')
})
console.log(data)

data = Mock.mock({
    'a': Mock.Random.word(),
    'b': Mock.mock('@word(3, 9)'),
    'c': Mock.mock('@cword("爱上了的看法no暗示法", 3, 5)')
})
console.log(data)

data = Mock.mock({
    'a': Mock.Random.cparagraph(),
    'b': Mock.mock('@cparagraph(3, 9)')
})
console.log(data)

生成图片、颜色

/**/
const Mock = require('mockjs')

/*获取随机图片*/
console.log('=============获取随机图片============')
// image( size?, background?, foreground?, format?, text?)
let data = Mock.mock({
    'a': Mock.Random.image(),
    'b': Mock.mock('@image'),
    'c': Mock.mock('@image()'),
    'd': Mock.Random.image('700x300', '#FF6600', '#ffffff', 'png', 'hello')
})
console.log(data)
=============获取随机图片============
{
  a: 'http://dummyimage.com/728x90',
  b: 'http://dummyimage.com/88x31',
  c: 'http://dummyimage.com/300x600',
  d: 'http://dummyimage.com/700x300/FF6600/ffffff.png&text=hello'
}

console.log('=========获取随机颜色========')
data = Mock.mock({
    'a': Mock.Random.color(),
    'b': Mock.mock('@color'),
    'c': Mock.mock('@color()')
})
console.log(data)

data = Mock.mock({
    'a': Mock.Random.rgb(),
    'b': Mock.mock('@rgb'),
    'c': Mock.mock('@rgb()')
})
console.log(data)

data = Mock.mock({
    'a': Mock.Random.rgba(),
    'b': Mock.mock('@rgba'),
    'c': Mock.mock('@rgba()')
})
console.log(data)
=========获取随机颜色========
{ a: '#8079f2', b: '#95f279', c: '#f279b8' }
{
  a: 'rgb(121, 219, 242)',
  b: 'rgb(242, 229, 121)',
  c: 'rgb(193, 121, 242)'
}
{
  a: 'rgba(121, 242, 158, 0.66)',
  b: 'rgba(242, 123, 121, 0.18)',
  c: 'rgba(121, 154, 242, 0.09)'
}

随机生成名字、地址、web相关

/*生成名字*/
const Mock = require('mockjs')

console.log('============随机生成名字============')
/*first: 生成英文姓
* last: 生成英文名
* cfirst: 生成中文姓
* clast: 生成中文名
* name(middle? ): 生成英文名字 middle: true、false (为true时，名字是3个字)
* cname(): 生成中文名字*/
let data = Mock.mock({
    'a': Mock.Random.first(),
    'b': Mock.mock('@last'),
    'c': Mock.mock('@name(true)')
})
console.log(data)

data = Mock.mock({
    'a': Mock.Random.cfirst(),
    'b': Mock.mock('@clast'),
    'c': Mock.mock('@cname()')
})
console.log(data)
============随机生成名字============
{ a: 'Angela', b: 'Allen', c: 'Eric Mark Lopez' }
{ a: '袁', b: '芳', c: '丁静' }


console.log('=============随机生成地址============')
/*区域：region
* 省份：province
* 城市：city(prefix?) 是否固定前缀，也就是是否带有 省市
* 区县：county(prefix?)*/
data = Mock.mock({
    'a': Mock.Random.region(),
    'b': Mock.mock('@province'),
    'c': Mock.mock('@city(true)'),
    'd': Mock.mock('@county(true)')
})
console.log(data)
=============随机生成地址============
{ a: '西南', b: '广西壮族自治区', c: '台湾 苗栗县', d: '西藏自治区 山南地区 琼结县' }


/*web相关 生成 url(protocol?, domain?)(网址)
 protocol(协议)
 domain(域名)
 tld(顶级域名) email(domain?) ip zip(邮编)*/
console.log('===========随机生成web相关===============')
data = Mock.mock({
    'a': Mock.Random.url(),
    'b': Mock.mock('@url(https, www.baidu.com)'),
    'h': Mock.mock('@url(https)'),
    'c': Mock.mock('@protocol'),
    'd': Mock.mock('@domain'),
    'e': Mock.mock('@tld'),
    'f': Mock.mock('@email'),
    'i': Mock.mock('@email(qq.com)'),
    'g': Mock.mock('@ip'),
    'k': Mock.mock('@zip'),
})
console.log(data)
===========随机生成web相关===============
{
  a: 'mid://jmwxcdbcrz.st/mnhs',
  b: 'https://www.baidu.com/smkdeb',
  h: 'https://kfcd.cx/zlvvdohs',
  c: 'mid',
  d: 'fkxfnotusd.museum',
  e: 'bh',
  f: 's.qjkkopngb@wjyojntjo.cz',
  i: 'j.sejdmq@qq.com',
  g: '192.229.68.65',
  k: '767870'
}

helper

helper   了解使用

capitalize 首字母大写
* upper 转大写字母
* lower 转小写字母
* pick 从数组中随机选出一个
* shuttle 将数组打乱
* guid 获取一个gu id  "d34AdCff-Ad1e-ecAF-9929-41DA36dc4B76"
* id 随机生成一个18位身份证id "140000199305223398"

启动本地服务

数据有了，但要模拟访问和响应你模拟的数据，这个时候要用到@shymean/mock-server

为开发环境快速搭建koa服务器，只需要一个mock模板文件即可。
脚本启动本地服务器，然后匹配mock模板内的url返回对应的数据

# 全局安装
npm i @shymean/mock-server -g
# 快速启动mock服务器
mock -p 9999 -f ./_mock.js
port：1024-65535之间
参数说明

port，服务器端口号，默认7654，简写 -p
file，mock模板文件路径，默认./_mock.js，简写 -f

基础使用

其使用方式与mockjs基本类似
Mock.mock(url, 返回的数据)
Mock.mock(url, method, 返回的数据)

简单示例

// _mock.js
// 对应的rurl会被中间件拦截，并返回mock数据
// ANY localhost:9999/
Mock.mock('/home', {
    data: [
        {'city': Mock.mock('@city(true)')}
    ],
    msg: "hello mock",
    "code": Mock.mock('@integer(200, 300)'),
})

// 可以mock指定的请求方法
// POST localhost:9999/test
Mock.mock('/test', 'POST', {
    data: [],
    msg: "hello mock",
    "code|1-4": 1,
})
多喝热水，重启试试
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Mock基本使用
田晨丿ggss
05-29 333
1、mock模拟接口数据 2、使用moco框架  Moco下载地址 https://repo1.maven.org/maven2/com/github/dreamhead/moco-runner/ 3、启动方法  java -jar ./moco-runner-1.1.0-standalone.jar http -p 1123 -c ./start001.json  moco包路径  使用的协议  -p端口号  -c访问的json文件 4、部署方式  热部署（配置文件修改，服务重新启动） 5、respons
mockjs 的使用
lx_1024的博客
01-17 7767
最近前后端有点不协调，用了一下mockjs，下面记录一下 我的环境是webpack+npm+vue，首先就用npm安装mockjs，安装命令是 npm install mockjs --save-dev，使用淘宝镜像也是可以的，就是使用cnpm替换npm，一样的效果 安装好mockjs后，在main.js里引入mockjs // 引入mockjs require('./mock.js')
mock的使用
weixin_71403100的博客
03-28 2694
mock数据：是指通过模拟实际数据的请求和响应，来生成测试数据，从而提供给应用程序的测试、开发、联调等环节使用的一种技术。图片放置到public文件夹中【public文件夹在打包的时候，会把相应的资源原封不动打包到dist文件夹中】第六步：在统一管理api接口的index.js文件内，引入二次封装的mock请求，获取接口数据。第三步：在mock文件夹中创建mockServe.js文件，通过mockjs插件实现模拟数据。第五步：在api文件夹下新建mockIndex.js文件，用于模拟数据的axios请求。
测试开发工程必备技能之一：Mock的使用
最新发布
2301_78843735的博客
06-13 1007
下一个订单，支付页面的接口，根据支付结果，支付成功，展示支付成功页，支付失败，展示支付失败页。在做接口自动化的时候，有时候需要调用第三方的接口，但是别人公司的接口服务不受你的控制，有可能别人提供的测试环境今天服务给你开着，别人就关掉了，给自动化接口测试带来很多的麻烦，此时就可以通过mock来模拟接口的返回数据，比如模拟各种第三方异常时的返回。，mock原理都类似，要么是修改原服务地址为Mock服务地址，要么是拦截原服务的请求Mock返回值，总之就是构造一个假的服务，替代原有服务。（实际你可以补充更多）
Mock使用
assw123sa的博客
05-09 169
什么是Mock? 模拟外部用户，真实操作系统，别的，postMan,Jmter等 SpringBoot中使用 With(SpringRunner.class) @SpringBootTest @AutoConfigureMockMvc public class MockConfigTest { @Autowired priva...
Go语言Mock使用基本指南详解
09-16
主要介绍了Go语言Mock使用基本指南详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
python之mock模块基本使用方法详解
09-19
主要介绍了python之mock模块基本使用方法详解,Mock是Python中一个用于支持单元测试的库，它的主要功能是使用mock对象替代掉指定的Python对象，以达到模拟对象的行为,需要的朋友可以参考下
Python mock的基本使用介绍.md
07-22
Python mock的基本使用介绍。Mock即模拟的意思。在Python中，提供了基于单元测试的Mock模块，它的主要作用是使用mock对象替代掉指定的Python对象，以达到模拟对象功能的行为。
mock的基本使用
myazwj的博客
11-13 750
作用：拦截ajax请求，产生随机数据 官网地址：Mock.js 使用步骤如下： 1:安装mock yarn add mockjs 2:导入 import Mock from 'mockjs' 3:使用： 功能：拦截ajax请求，产生随机数据 Mock.mock(需要拦截的url地址,{ 产生的随机数据 }) 4:引入 该js main.js引入 import "地址" ------飞哥讲述，然后了...
mock使用详解
无知者无畏
04-10 6473
场景1：在vue项目中使用mock.js 步骤1.搭建测试项目 步骤1.1 创建项目 命令： vue create mock-demo 然后选择：test(router,babel) 步骤1.2 安装依赖 # 使用axios发送ajax npm install axios --save # 使用mock.js产生随机数据 npm install mockjs --save-dev # 使用j...
Mock 使用方式 + 在 Vue 项目中使用 Mock
热门推荐
一个努力学习的程序猿
08-09 1万+
在前后端开发过程中，后端进行接口开发，前端使用对应接口从数据库获取前端想要展现的数据。对于后端来讲，它们需要根据需求文档，确定要写的接口的功能。有时，虽然接口还没有写出来，但是相关接口文档已经写出来了。这时前端如果想要调用接口，但是接口还没有完成，前端开发人员也就只能含泪上班摸摸鱼了。 那在开发过程中，为了避免这样的情况发生，现在前端已经能够独立于后端进行开发，也就是前端开发人员可以自己根据接口文档去模拟假数据。这个问题的解决方案就是使用第三方库 mock.js。
Mock的基本使用以及使用场景
qq_65089414的博客
03-16 5607
最主要的原因是在开发中，前后端开发的进度并不一定是同步的，如果前端开发的小伙伴想要后端接口数据进行测试，刚好后端还没有这个接口数据，那么这个时候前端的小伙伴就可以使用mock模拟接口数据。最近在写一个vue的demo，但是又没有后端的接口，在写首页三级分类列表的时候，并没有把三级分类列表写成静态的，而是使用mock模拟了假的接口，然后通过axios发送GET请求获取到了这个模拟的数据并渲染到页面上。(3)在定义这个接口规则的时候引入自己设计的json格式的接口数据。（2）使用vuex管理请求到的接口数据。
mock使用小结
zb0002011的博客
07-07 253
umi+antd+dva环境下测试小结。 1、安装 npm install mockjs --save 2、mock文件夹下创建example.js 可以是定值： 也可以是范围值，如果是范围值时需要使用Mock.mock。 3、service文件下
Mock的基本使用
weixin_53068161的博客
10-11 5237
通过 Mock 我们可以便捷的生成大量模拟数据，有助于我们在前后端分离的开发模式中前端做网络请求测试。摆脱后端接口未给出时前端的数据只能自己不断写死数据的窘境；下面中介绍Mock的基本使用和配合 vite插件实现更真实的请求响应。
如何使用mock
GZZ__z的博客
12-19 3230
1.首先得知道什么是mock数据呢？ mock：假的 前端程序员提到的mock数据的含义是：真的假数据 真的：符合接口规范要求的。 假数据：数据是人为创建出来的，不是真正的业务数据。 2.那mock的使用场景是什么呢？ 后端接口的开发速度跟不上前端的进度， 而前端要实现业务还必须依赖数据，前端为了保证开发进度就需要自己mock数据 ，保证业务能正常开发 3.mock一般是如何实现的呢？ 本地启mock服务器： 自己用express写接口 本地用专门的mock服务 2 线上的m
vue中mock的使用方法
niuge8905的博客
08-20 2227
按照以下步骤 1、安装mock npm install mockjs --save-dev 2、在src下创建mock文件夹，并在main.js下添加下面的代码 require('./mock') 3、在mock文件夹创建index.js文件，这样第2步就会直接运行这个index.js文件 // 首先引入Mock const Mock = require('mockjs') // 设置拦截ajax请求的相应时间 Mock.setup({ timeout: '200-600' })
应该如何使用Mock
windsome的专栏
08-25 1027
话说昨天看了一篇《Mock Roles, not Objects》的论文，彻底颠覆了我对mock的理解和认识。这篇论文是jMock作者在2004年发表的，描述了Mock Objects应该如何在TDD的过程中使用。 按照这篇文章的说法，Mock最重要的用途是用于推进纯粹的测试驱动开发。 例如，我们在开发一个对象A的时候，A需要一个service S，但这时S还没有编写实现。于是
mock.js的基本使用
06-08
Mock.js 的基本使用步骤如下： 1. 安装 Mock.js 库 可以通过 npm 安装 Mock.js，命令如下： ``` npm install mockjs --save-dev ``` 2. 编写模拟数据 在前端开发中，通常需要模拟后端接口的返回数据。使用 Mock...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

多喝热水，重启试试

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值