Mock 基本使用

news2024/11/27 10:28:31

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,
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/978183.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Springcloud】Sentinel熔断和降级

【Springcloud】Sentinel熔断和降级

【Springcloud】Sentinel熔断和降级 【一】基本介绍【1】什么是熔断和降级【2】为什么使用熔断和降级【3】Sentinel熔断和降级【4】核心概念 【二】下载方式【1】Windows平台安装包下载【2】打开控制台 【三】使用案例【1】添加依赖【2】添加Sentinel配置【3】添加TestUserCont…
阅读更多...
网络类型+二层封装技术

网络类型+二层封装技术

一、网络类型分类 1、点到点网络 在一个网段中，只能部署两个节点（两个IP），如GRE环境就属于虚拟的点到点网络类型，通常是串线连接。 如下图当前只存在两个节点，但并不是点到点，因为它中间网段…
阅读更多...
简易版人脸识别qt opencv

简易版人脸识别qt opencv

1、配置文件.pro #------------------------------------------------- # # Project created by QtCreator 2023-09-05T19:00:36 # #-------------------------------------------------QT core guigreaterThan(QT_MAJOR_VERSION, 4): QT widgetsTARGET 01_face TEMP…
阅读更多...
【trie树】CF Edu12 E

【trie树】CF Edu12 E

Problem - E - Codeforces 题意： 思路： 这其实是一个套路题 区间异或转化成前缀异或，然后枚举 i 对于每一个 i，ai ^ x k，对 x 计数 先建一棵字典树，然后在字典树上计数 先去对 > k 的部分计数&a…
阅读更多...
m8130kt GPS模块测试

m8130kt GPS模块测试

m8130kt GPS模块测试 ✨在某宝捡电子垃圾，10块钱的价格，就是没有资料可以提供的。上面携带有u-blox UBX-M8130-KT芯片，是肯定的，至于HMC5883芯片不确定，拆了屏蔽罩，芯片实在是太小，使用40倍放大…
阅读更多...
SpringCloud实战项目(1)---创建空项目 jdk17

SpringCloud实战项目(1)---创建空项目 jdk17

创建空项目 New ProjectAdd Jdk17创建空白标准Maven项目不要选择Create from archetype选项填写相关项目信息创建项目得到一个标准的maven项目，作为一个Parent project存在的，需删除src文件夹。 New Project 使用Idea, File -> New ->Project Add …
阅读更多...
语音特征提取与预处理

语音特征提取与预处理

导入相关包 import librosa import librosa.display import soundfile as sf import numpy as np import matplotlib.pyplot as plt from playsound import playsound 语音读取与显示 file_path test1.wav data, fs librosa.load(file_path, srNone, monoTrue) librosa.d…
阅读更多...
word如何插入图片？3种常用的方法

word如何插入图片？3种常用的方法

word作为一款常用的办公软件，不仅可以处理文本内容，还能够轻松地插入图片以丰富文档内容。插入图片可以使文档更具吸引力、可读性和信息传达能力。本文将为您介绍word如何插入图片的3种方法，帮助您在文档中灵活、高效地添加图像元素。 word插…
阅读更多...
SLAM从入门到精通（矩阵的使用）

SLAM从入门到精通（矩阵的使用）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing 163.com】 学习SLAM，离开了矩阵肯定是玩不转的。大学数学里面除了微积分，剩下的就是线性代数和概率论。而矩阵就是线性代数的一部分。…
阅读更多...
selenium 动态爬取页面使用教程以及使用案例

selenium 动态爬取页面使用教程以及使用案例

Selenium 介绍 概述 Selenium是一款功能强大的自动化Web浏览器交互工具。它可以模拟真实用户在网页上的操作，例如点击、滚动、输入等等。Selenium可以爬取其他库难以爬取的网站，特别是那些需要登录或使用JavaScript的网站。Selenium可以自动地从Web页面…
阅读更多...
在多机多卡训练时，保存的文件无法读取，报错文件已经损坏

在多机多卡训练时，保存的文件无法读取，报错文件已经损坏

问题描述&#xff1a;多机多卡训练保存了optimizer.pt文件&#xff0c;但是该文件在被读取时显示已经损坏。 原来的报错&#xff1a; Traceback (most recent call last):File "/mnt/petrelfs/tongjingqi/train-moe/smoe/entrypoint/cpt_fpt.py", line 280, in <…
阅读更多...
Android Aidl跨进程通讯(三)--进阶使用

Android Aidl跨进程通讯(三)--进阶使用

学更好的别人&#xff0c; 做更好的自己。 ——《微卡智享》 本文长度为2478字&#xff0c;预计阅读6分钟 前言 Android的AIDL使用和异常报错都已经介绍过了&#xff0c;今天这篇还是在原来的Demo基础上加入几个AIDL的进阶使用方法。 】 AIDL进阶使用 微卡智享 in,out,inout的使…
阅读更多...
定时线程池原理解析

定时线程池原理解析

基本使用 ScheduledThreadPoolExecutor继承自ThreadPoolExecutor。它主要用来在给定的延迟之后运行任务&#xff0c;或者定期执行任务。 public class ScheduledThreadPoolExecutorTest {public static void main(String[] args) {ScheduledThreadPoolExecutor threadPoolExecu…
阅读更多...
QT DAY7

QT DAY7

主要完成多人聊天室&#xff0c;注册与登录使用sql3数据库进行对密码的保存&#xff0c;避免了用户重复登录、错误密码登录、重复注册的问题&#xff0c;之后使用TCP通信&#xff0c;连接上服务器后可在聊天室多人交流
阅读更多...
怎么处理zk或redis脑裂

怎么处理zk或redis脑裂

很极端场景会出现脑裂 什么是分布式的脑裂 怎么理解zk脑裂 就是ZK&#xff0c;与客户端可能因为网络原因&#xff0c;客户端A还在跑着后续程序&#xff0c;而zk与客户端之前的心跳断了&#xff0c;此zk就把这节点给删除了&#xff0c;这时另一个客户会加锁成功&#xff0c;就样…
阅读更多...
[Java]异常

[Java]异常

目录 1.异常的概念与体系结构 1.1异常的概念 1.1.1算术异常 1.1.2数组越界异常 1.1.3空指针异常 1.2异常的体系结构 1.3异常的分类 2.异常的处理 2.1 防御式编程 2.2异常的抛出 2.3异常的捕获 2.3.1 异常声明throws 将光标放在抛出异常方法上&#xff0c;alt Insert …
阅读更多...
咖啡店小程序：吸引顾客的创新营销手段

咖啡店小程序：吸引顾客的创新营销手段

近日&#xff0c;“酱香拿铁”的大火让大家再次把目标聚焦在年轻人都喜欢的咖啡上。现在咖啡已经成为年轻一代的社交硬通货&#xff0c;咖啡店也遍地开花。而随着移动互联网的快速发展&#xff0c;咖啡店小程序已经成为了各大咖啡店主的选择&#xff0c;因为它提供了便捷的方式…
阅读更多...
【Leetcode-面试经典150题-day22】

【Leetcode-面试经典150题-day22】

目录 97. 交错字符串 97. 交错字符串 题意&#xff1a; 给定三个字符串 s1、s2、s3&#xff0c;请你帮忙验证 s3 是否是由 s1 和 s2 交错 组成的。 两个字符串 s 和 t 交错 的定义与过程如下&#xff0c;其中每个字符串都会被分割成若干 非空 子字符串&#xff1a; s s1 s2 …
阅读更多...
便捷、快速、稳定、高性能！以 GPU 实例演示 Alibaba Cloud Linux 3 对 AI 生态的支持 | 龙蜥技术

便捷、快速、稳定、高性能！以 GPU 实例演示 Alibaba Cloud Linux 3 对 AI 生态的支持 | 龙蜥技术

编者按&#xff1a;日前&#xff0c;Alibaba Cloud Linux 3 为使 AI 开发体验更高效&#xff0c;提供了一些优化升级&#xff0c;本文为“Alibaba Cloud Linux 3 AI 能力介绍”系列文章预告篇&#xff0c;以 GPU 实例为例&#xff0c;为大家演示 Alibaba Cloud Linux 3 对 AI 生…
阅读更多...
Vue + Element UI 前端篇（五）：国际化实现

Vue + Element UI 前端篇（五）：国际化实现

Vue Element UI 实现权限管理系统 前端篇&#xff08;五&#xff09;&#xff1a;国际化实现 国际化支持 1.安装依赖 执行以下命令&#xff0c;安装 i18n 依赖。 yarn add vue-i18n $ yarn add vue-i18n yarn add v1.9.4 warning package-lock.json found. Your project …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023