mock.js学习记录

原始猿miser

已于 2022-09-05 23:36:38 修改

阅读量377

点赞数

分类专栏： study_document 文章标签： javascript 学习前端 react.js 交互

于 2022-08-29 22:58:55 首次发布

本文链接：https://blog.csdn.net/qq_41347964/article/details/126593937

版权

study_document 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

mock介绍

为什么要使用mock.js呢？在系统的开发中，做前端的同学经在工作中常常面临一个问题：因为后端的接口迟迟不能做好而无法进行页面的调试，尤其在根据后端的数据做数据的动态展示的时候，这种情况尤为明显，所以mock.js就是一个很好的工具，我们可以根据已知的数据结构自己仿造数据作调试使用，在前端自己写接口，自己做一组数据进行调用。
mock的优点如下：
1、前后端分离
2、可以随机生成大量数据
3、数据类型丰富
4、在已知接口文档的情况下，可以自己写接口进行页面的调试，后期只需要更换url即可，无需等待后端给接口。
mock.js官网文档：https://github.com/nuysoft/Mock/wiki

如何在react中使用

以一个简单的例子说明如何在react项目中使用
安装：首先安装mock.js和axios(个人感觉yarn比npm好用)

npm i -g yarn 
yarn add mockjs
yarn add axios

生成数据：在src文件夹下创建一个专门用于生成数据的mock文件夹，新建文件mock.js如下：

//mock.js
// 使用 Mock
import Mock from 'mockjs'

export default Mock.mock('/getdata','post',{
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})

引入：在App.js中进行引入，挂载数据进行中间件拦截

//App.js
import '../src/mock/mock'

调用：已经写好接口，现在可以进行接口的调用，在任意其他页面上进行如下调用：

//test.js
import React from "react"
import axios from 'axios'

export default function Test(){
    function getdata(){
        axios.post('/getdata',{a:1,b:2})
        .then(res=>{
            console.log('数据：',res)
        })
        .catch(err=>{
            console.log('error:',err)
        })
    }
    
    return(
        <div>
            <button onClick={getdata}>数据获取</button>
        </div>
    )
}

最终获得数据如下

mock的使用

Mock.mock()

Mock.mock( rurl?, rtype?, template|function( options ) )
根据数据模板生成模拟数据，数据生成器可以是不接受参数的template，也可以是接受参数的函数function

接受参数的function
Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
rurl:表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。
rtype: 表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
function(options): 表示用于生成响应数据的函数。
options:指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性，
注意：1、得到的body是string类型，可以用JSON.parse转换为json类型。2，每一个生成数据的文件都要在app.js入口文件进行挂载才能访问到。

//mockfunction.js
import Mock from 'mockjs'

export default Mock.mock('/mockmock','post',function(props){
    console.log('props.url',props.url)
    console.log('props.type',props.type)
    console.log('props.body', props.body)
    const data = JSON.parse(props.body)
    
    return data.a + data.b
})

//test.js
function mockfunction() {
        axios.post('/mockmock', {
            a: 'hello',
            b: ' world'
        })
            .then(res => {
                console.log('mockmock：', res)
            })
            .catch(err => {
                console.log('errormockmock:', err)
            })
    }

结果如下：
在这里插入图片描述

不接受参数的template
Mock.mock( rurl, rtype, template )
记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

import Mock from 'mockjs'

export default Mock.mock('/mocktemplate','post',{ 'data|1-10':[{}] })

Mock.setup()

Mock.setup( settings )
用于拦截ajax请求时候的行为，可以配置timeout，设置接口的延迟响应时间
设置timeout:2000：延迟2s执行
设置timeout:‘2000-5000’：延迟2s到5s（这种写法需要加引号）

import Mock from 'mockjs'
export default Mock.mock('/mocktemplate','post',{ 'data|1-10':[{}] })
.setup({
    timeout:'2000-5000'
})

Mock.Random

Mock.Random 是一个工具类，用于生成各种随机数据。

basic

Random.boolean()

Random.boolean( min?, max?, current? )
current为true或者false，以min/(min+max)的概率生成current
默认情况下Random.boolean()以0.5的概率返回true和false
备注：尝试给current赋值为其他值，最终得到的结果为以min/(min+max)的概率生成current和max/(min+max)的概率返回false

import Mock from 'mockjs'

var random = Mock.Random
export default Mock.mock('/basic','post',{
    data:random.boolean(3,7,true)
})

Random.natural()

Random.natural( min?, max? )
返回一个随机的自然数（大于等于 0 的整数），默认最大值：默认值为 9007199254740992（2的53次方），可以指示最大最小数

const basic1 = Mock.mock('/basic1','post',{
    data:random.natural()
})
export default {
    basic1,
}

Random.integer()

Random.integer( min?, max? )
返回一个随机的整数，默认[ -9007199254740992, 9007199254740992]，可以指示最大最小数

const integer = Mock.mock('/integer', 'post', {
    data:random.integer(1,10)
})

Random.float()

Random.float( min?, max?, dmin?, dmax? )
min：整数部分的最小值，默认值为 -9007199254740992
max：整数部分的最大值。默认值为 9007199254740992
dmin：小数部分位数的最小值。默认值为 0
dmax：小数部分位数的最大值。默认值为 17

Random.character()

Random.character( pool? )
返回一个随机字符
pool为字符池，可以自定义
内置字符池包括如下：

{
    lower: "abcdefghijklmnopqrstuvwxyz",
    upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    number: "0123456789",
    symbol: "!@#$%^&*()[]"
}

如果不带参数，默认从这四个里面随机抽取字符串

Random.string()

Random.string( pool?, min?, max? )
Random.string( pool?, length )
返回一个随机字符串
pool的使用规则与Random.character一样，length为可选长度
min合max为可选最大和最小长度

Random.range()

Random.range( start?, stop, step? )
返回一个整型数组
start–开始值
stop–结束值
step–步长，默认为1

const integer = Mock.mock('/num', 'post', {
    natural:random.natural(),
    integer:random.integer(1,10),
    float:random.float(2,5,1,1),
    char:random.character('hello world',2,6),
    lower:random.character('lower'),
    upper:random.character('upper'),
    number:random.character('number'),
    symbol:random.character('symbol'),
    str:random.string('hello world', 3,7),
    arr:random.range(1,10,2)
})

结果如下
在这里插入图片描述

Date

Random.date()

Random.date( format? )
返回一个随机的日期字符串。

Random.time()

Random.time( format? )
返回一个随机的时间字符串。

Random.datetime()

Random.datetime( format? )
返回一个随机的日期和时间字符串。

Random.now()

Random.now( unit?, format? )
返回当前的日期和时间字符串。

const date =  Mock.mock('/date','post',{
    date:random.date('yyyy-MM-dd HH-mm-ss'),
    time:Random.time(),
    datetime:random.datetime(),
    now:random.now()
})

Image

Random.image()

Random.image( size?, background?, foreground?, format?, text? )
用于生成一个随机的图片地址
size：大小（宽x高）
background：指示图片的背景色
foreground：图片上文字的颜色
format：图片的格式，可选值包括：‘png’、‘gif’、‘jpg’
text：图片上的文字

export default Mock.mock('/image','post',{
    data:random.image('300x250','#fb0a2a','#ffcc33','png','hello world')
})

得到的结果：

data: "http://dummyimage.com/300x250/fb0a2a/ffcc33.png&text=hello world"

在这里插入图片描述

Random.dataImage()

Random.dataImage( size?, text? )
生成一段随机的base64图片编码
size：图片的大小
text：图片文字

Mock.mock('/image1','post',{
    data:random.dataImage('300x250','你好世界')
})

在这里插入图片描述

Color

Random.color()

以#RRGGBB的格式随机生成颜色

Random.rgb()

以’rgb(r, g, b)'的格式随机生成

Random.rgba()

Random.hsl()

Text

Random.paragraph()

Random.paragraph( min?, max? )
Random.paragraph( num? )
随机生成一段英文文本
num：句子个数
min：句子最小个数
max：句子最大个数

Random.cparagraph()

Random.cparagraph( min?, max? )
随机生成一段中文文本，用法与paragraph相同

Random.sentence()

Random.sentence( min?, max? )
随机生成一个英文句子。首字母大写

Random.csentence()

Random.csentence( min?, max? )
随机生成一段中文文本

Random.word()

Random.word( min?, max? )
随机生成一个单词

Random.cword()

Random.cword( pool )
pool：字符池
随机生成一个汉字

Random.title()

Random.title( min?, max? )
随机生成一个英文标题
每个单词的首字母都大写

Random.ctitle()

Random.ctitle( min?, max? )
随机生成一个中文标题

Mock.mock('/text','post',{
    data:random.paragraph(2,9),
    data1:random.cparagraph(5),
    data3:random.sentence(4,8),
    data4:random.csentence(4,10),
    data5:random.word(4),
    data6:random.cword(2,7),
    data7:random.title(6),
    data8:random.ctitle(3,9)
})

结果如下：

data: "Gfhzwmwqp obmkhj jsyflfdkmq ywhn kuwcep epuy yhehhzqf rrdde tuhuvib fyvshci syuevj mksfdglb njmajgc auhgt oupbm wdog. Wxprzn mus qtlhmqdaa tuwlgayj xxcl jncwxb kipyub hdrcjnk roanmdno losmupro tpmmxstw zbilmv sqamkyyly wbgu lelclgrrn qamgwnfgvu. Tdqjhoh khpmdr mggqikq lbrxmsjr kscy dgci uuqtbm fuo cjhmw nnevoy xghe dlvicum peiagxu svrpcfv qnmtgz. Ybhj xlnzz vpbrg odgfofufr xlnyeql vpqchvcnf gyvilloi bwmc ltrw fegthwbkn ykuwmxfvf kpann xtlb hnde. Kwxtvtjy fmwqogbtuj ctuetbdw oshlbxo hpwp gpu ioeofexjy yqmqpwfts yyxtk awpkabipeq ikyzywc jwzejcgf bhrnlfxph wbxk gimafxhxp eoclkd."
data1: "象共个查革等接制器写常色式。技国决事位政前事儿所何便管。料容儿道先类根必一条亲内。命状几据就按信部明反低不。造定需调准金当以论管出精设先。"
data3: "Phsjbmk udbwj iwqx qzfjqt qluiv."
data4: "况天认了任别传。"
data5: "vpxk"
data6: "门识"
data7: "Wdt Hwlwsn Pmhxkfda Honeasqva Ztrqquqydk Vksk"
data8: "必精当精布引省声节"

Name

Random.first()

随机生成一个英文名

Random.last()

随机生成一个英文姓

Random.name( middle? )

随机生成一个英文姓名，middle可以取true指示是否取中间名

Random.cfirst()

随机生成一个中文名

Random.clast()

随机生成一个中文姓

Random.cfirst()

随机生成一个中文名字

Mock.mock('/name','post',{
    first:random.first(),
    last: random.last(),
    englishname: random.name(true),
    cfirst:random.cfirst(),
    clast:random.clast(),
    name:random.cname()
})

结果：

cfirst: "常"
clast: "娜"
englishname: "Donna Linda Walker"
first: "Angela"
last: "Wilson"
name: "邹娜"

Web

Random.url()

Random.url( protocol?, host? )
随机生成一个 URL
protocol：协议
host：域名和端口号

Random.protocol()

随机生成一个 URL 协议如：‘http’、‘ftp’、‘gopher’、‘mailto’、‘mid’、‘cid’、‘news’、‘nntp’、‘prospero’、‘telnet’、‘rlogin’、‘tn3270’、‘wais’

Random.domain()

随机生成一个域名。

Random.tld()

随机生成一个顶级域名

Random.email( domain? )

随机生成一个邮件地址。

Random.ip()

随机生成一个 IP 地址。

Address

Random.region()

随机生成一个（中国）大区：华东，华北，华中，华南，西南，西北，东北

Random.province()

随机生成一个（中国）省（或直辖市、自治区、特别行政区）

Random.city( prefix? )

随机生成一个（中国）市。
prefix为true时，生成对应的省份

Random.county( prefix? )

随机生成一个（中国）县
prefix为true时，生成对应的省、市

Random.zip()

随机生成一个邮政编码（六位数字）

Helper

Random.capitalize( word )

把word字符串的第一个字母转换位大写

Random.upper( str )

把str字符串所有字母转为大写

Random.lower( str )

把str字符串所有字母转为小写

Random.pick( arr )

从arr数组中选取一个元素并返回

Random.shuffle( arr )

打乱arr中的顺序并返回

Miscellaneous

Random.guid()

随机生成一个 GUID。

Random.id()

随机生成一个 18 位身份证。

Random.increment( step? )

生成一个全局的自增整数。

step为步长

Mock.valid()

Mock.valid( template, data )
检验数据data和模板 template是否相匹配

Mock.toJSONSchema()

Mock.toJSONSchema( template )
把 Mock.js 风格的数据模板 template 转换成 JSON

其他

代码示例：https://github.com/jsy1997-summer/study_mock.git
工具选择：useMock在线工具
工具优点：在项目中自己写的mock，本质上只是接收到了数据，但是在开发人员工具中并不经过“网络”，useMock还原度更高，可以在“网络”看到数据的请求过程。