【MockJS】使用MockJS模拟数据 （超级详细）

文章目录

  • 【MockJS】使用MockJS模拟数据 （超级详细）
  • 2. MockJS
    • 2.1 准备工作
    • 2.2 语法规范
      • 数据模板定义规范 DTD
      • 1. 属性值是字符串 **String**
      • 2. 属性值是数字 **Number**
      • 3. 属性值是布尔型 **Boolean**
      • 4. 属性值是对象 **Object**
      • 5. 属性值是数组 **Array**
      • 6. 属性值是函数 **Function**
      • 7. 属性值是正则表达式 **RegExp**
      • 数据占位符定义规范 DPD
    • 2.3 模拟get请求
    • 2.4 模拟post请求
    • 2.5 模拟delete和put请求
    • 2.6 可以搭配fastmock开发
  • 总结

2. MockJS

2.1 准备工作

npm i axios

npm i mockjs

2.2 语法规范

数据模板定义规范 DTD

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

属性名   name
生成规则 rule
属性值   value
'name|rule': value

注意：

  • 属性名 和 生成规则 之间用竖线 | 分隔。

  • 生成规则 是可选的。

  • 生成规则

    有 7 种格式：

    1. 'name|min-max': value
    2. 'name|count': value
    3. 'name|min-max.dmin-dmax': value
    4. 'name|min-max.dcount': value
    5. 'name|count.dmin-dmax': value
    6. 'name|count.dcount': value
    7. 'name|+step': value

  • *生成规则* 的 含义 需要依赖 *属性值的类型* 才能确定。

  • 属性值 中可以含有 @占位符。

  • 属性值 还指定了最终值的初始值和类型。

生成规则和示例：

1. 属性值是字符串 String

  1. 'name|min-max': string

    通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

  2. 'name|count': string

    通过重复 string 生成一个字符串，重复次数等于 count。

2. 属性值是数字 Number

  1. 'name|+1': number

    属性值自动加 1，初始值为 number。

  2. 'name|min-max': number

    生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。

  3. 'name|min-max.dmin-dmax': number

    生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

Mock.mock({'number1|1-100.1-10': 1,'number2|123.1-10': 1,'number3|123.3': 1,'number4|123.10': 1.123
})
// =>
{"number1": 12.92,"number2": 123.51,"number3": 123.777,"number4": 123.1231091814
}

3. 属性值是布尔型 Boolean

  1. 'name|1': boolean

    随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

  2. 'name|min-max': value

    随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

4. 属性值是对象 Object

  1. 'name|count': object

    从属性值 object 中随机选取 count 个属性。

  2. 'name|min-max': object

    从属性值 object 中随机选取 min 到 max 个属性。

5. 属性值是数组 Array

  1. 'name|1': array

    从属性值 array 中随机选取 1 个元素，作为最终值。

  2. 'name|+1': array

    从属性值 array 中顺序选取 1 个元素，作为最终值。

  3. 'name|min-max': array

    通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

  4. 'name|count': array

    通过重复属性值 array 生成一个新数组，重复次数为 count。

6. 属性值是函数 Function

  1. 'name': function

    执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。

7. 属性值是正则表达式 RegExp

  1. 'name': regexp

    根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

    Mock.mock({'regexp1': /[a-z][A-Z][0-9]/,'regexp2': /\w\W\s\S\d\D/,'regexp3': /\d{5,10}/
})
// =>
{"regexp1": "pJ7","regexp2": "F)\fp1G","regexp3": "561659409"
}

数据占位符定义规范 DPD

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。

占位符 的格式为：

@占位符
@占位符(参数 [, 参数])

注意：

  1. 用 @ 来标识其后的字符串是 占位符。
  2. 占位符 引用的是 Mock.Random 中的方法。
  3. 通过 Mock.Random.extend() 来扩展自定义占位符。
  4. 占位符 也可以引用 数据模板 中的属性。
  5. 占位符 会优先引用 数据模板 中的属性。
  6. 占位符 支持 相对路径 和 绝对路径。
Mock.mock({name: {first: '@FIRST',middle: '@FIRST',last: '@LAST',full: '@first @middle @last'}
})
// =>
{"name": {"first": "Charles","middle": "Brenda","last": "Lopez","full": "Charles Brenda Lopez"}
}

2.3 模拟get请求

<script lang="ts" setup>
import axios from 'axios'
import Mock from 'mockjs'
// 这里需要注意userInfo是解构出来的，要一一对应
const { usersInfo } = Mock.mock({"usersInfo|10-20": [ // 表示生成10-20个数据{"id|+1": 1, // 表示id从1开始自增1name: '@cname()', // 生成随机名字固定写法address: '@city(true)', // 传入true表示具体到省份市区email: '@email(163.com)' // 传入163.com表示生成的邮箱以163.com结尾，可自定义}]
})const { newInfo } = Mock.mock({"newInfo|5-10": [{// id+1 的另外一种写法id: '@increment(45564)', // 可以指定从多少开始自增1title: "@ctitle", // 随机标题date: '@date(yyyy-MM-dd HH:mm:ss)', // 指定时间格式message:'@paragraph(3-5)', // 指定输出的段落image:"@image('200x200','#23272E','#FFF')"}]
})// 相当于模拟接口
Mock.mock('/api/users','get',() =>{return {code:200,msg:'查询成功！',data:usersInfo}
})Mock.mock('/api/news','get',() =>{return {code:200,msg:'查询成功！',data:newInfo}
})const getUsersInfo = () =>{axios.get('/api/users').then((res) =>{console.log(res.data);})
}const getNewsInfo = () =>{axios.get('/api/news').then((res) =>{console.log(res.data);})
}</script>

2.4 模拟post请求

const {companyList} = Mock.mock({"companyList|5-8":[{id:'@increment(1)','company|1':['腾讯','阿里巴巴','CSDN','百度','拼多多','京东'],  // 在指定的数组中选一个description:'@word(40)', // 生成40个字符logo:'@image("200x200","#ffffff","#23272E","LOGO")'}]
})Mock.mock('/api/company','post',(req:any) =>{console.log(req);console.log(req.body)return {code:200,msg:'请求成功',data:companyList}
})const getCompanyInfo = () =>{axios.post('/api/company',{name:'admin',password:'123456'}).then((res) =>{console.log(res.data);   })
}

2.5 模拟delete和put请求

Mock.mock('/api/putinfo','put',(req:any) =>{return {code:200,msg:'修改成功！',data:req.body}
})Mock.mock('/api/deleteinfo','delete',(req:any) =>{return {code:200,msg:'删除成功!',data:req}
})const putInfo = () =>{axios.put('/api/putinfo',{name:'admin',password:'123456'}).then((res) =>{console.log(res.data);   })
}const deleteInfo = () =>{axios.delete('/api/deleteinfo').then((res) =>{console.log(res.data);   })
}

2.6 可以搭配fastmock开发

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！

【MockJS】使用MockJS模拟数据 （超级详细）相关推荐

  1. 没有json数据，自己造！mockjs的使用-模拟数据其实超级简单

    虽然mockjs已经有好几年没有更新了,但是这个其实跟年限无关,因为它最终的目的是生成模拟json. 而且mockjs可以用于任何webpack项目中,也就是可以在已有的项目中添加mockjs.比如w ...

  2. 前端mock数据(超级详细)

    在实际的项目研发过程中,我们经常会遇到如下的尴尬场景: 前端开发依赖于后端接口数据,但是后台人员不足或者无法立即到位,前端迟迟不能开工,或者前端小伙子自己参照ui设计图,完成对应的静态页面(没有数据交 ...

  3. 基于androidx的快速开发框架_Vue企业级优雅实战07框架开发03封装基于MockJS的模拟数据...

    预览本文的实现效果: # giteegit clone git@gitee.com:cloudyly/dscloudy-admin-single.git# githubgit clone git@gi ...

  4. vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】

    文章目录 19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件) 本人其他相关文章链接 19.mockjs模拟数据(开发Home首页当中的ListConta ...

  5. mock模拟的数据能增删改查吗_如何在Vue中使用Mockjs模拟数据的增删查改

    之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...

  6. 使用mockjs模拟数据

    一.安装 简单粗暴 npm install mockjs 二.引入 CommonJS引入 let Mock = require('mockjs') let userInfo = Mock.mock({ ...

  7. vue本地模拟数据之mockjs安装 - cmd篇

    一.引言: 在项目中尝试了mockjs,mock数据,实现前后端分离开发. 官网描述mockjs是: 前后端分离 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 数据类型丰富 通 ...

  8. 在vue-cli项目下简单使用mockjs模拟数据

    为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试.大部分情况下,前后端需要同时进行开发.因此便需要mockjs制造随机数 ...

  9. 前端用Mockjs模拟数据

    mockjs可以模拟数据,可以使我们更快的得到较为真实的数据,且可以拦截axios的接口调用,让我们的代码实现了调用接口的逻辑且得到模拟的数据,保存业务完整度. 使用步骤: 1.安装 npm i mo ...

最新文章

  1. iOS动画进阶 - 手摸手教你写ShineButton动画
  2. 编译安装SVN不结合apache
  3. 【 MATLAB 】使用 MATLAB 实现模拟信号的近似及其连续傅里叶变换
  4. 06jQuery-01-基本选择器
  5. 图深度学习-第1部分
  6. FT计算机系统,芯片CP/FT测试的基本概念理解
  7. 怎样将程序猿写出来的程序打包成安装包(最简单的)
  8. HTML分页打印。Web打印控件，完美解决页面排版、结构复杂，内容、图片、表格跨页断裂，自定义页面设置、页眉、页脚、页码，保持原文CSS等难题
  9. 【问题描述】输入一行字符串，含有数字和非数字字符以及空格等，如： df23adfd56 2343？23dgjop535 如果将其中所有连续出现的数字视为一个整数，要求统计在该字符串中共有多少个整数，并
  10. 字符串匹配和KMP模式匹配（没太学懂，暂时不写）
  11. 微信读书是看公众号文章的另一种选择
  12. 图像修复神器！带上口罩都能还原！DDPM：用去噪扩散概率模型极限修复图像，效果太牛了！...
  13. android 判断 音乐是否播放,Android如何判断当前手机是否正在播放音乐并获取有关正在播放的音乐的信息...
  14. 【mysql】字符集与比较规则
  15. 分享一个云端电脑（让你的电脑少装几十款软件）
  16. 面试官最喜欢考的设计模式---单例设计模式
  17. HTML5 从入门到精通读书笔记
  18. 校园导游系统_C语言实现_Dijkstra(迪杰斯特拉算法)_数据结构
  19. 防止iOS中私有属性在block中的循环引用
  20. VUE中的pug使用

热门文章

  1. perl安装不全导致的Can't locate Time/HiRes.pm in @INC错误的处理方法
  2. speedoffice（PPT）怎么设置文字竖向
  3. php linux重新写路由器,通过php脚本重启路由器
  4. Kali Linux渗透测试 073 扫描工具-Vega
  5. 华东师范大学计算机考研专业,2017年华东师范大学计算机科学与软件工程学院考研专业目录...
  6. 苹果圆圈怎么设置_苹果手机白色圆圈怎么弄
  7. crontab任务不会执行解决方案(No MTA installed, discarding output)
  8. 密码破解神器海德拉GUI界面-xhydra
  9. ACPC Headquarters : AASTMT (Stairway to Heaven)
  10. Ubuntu强制修改root密码