mockjs使用1

mockjs使用

1、定义

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

  • 根据数据模板生成模拟数据
  • 模拟 Ajax 请求，生成并返回模拟数据
  • 基于 HTML 模板生成模拟数据

2、各环境下怎么使用

大致就是 引入/安装mockjs然后还用

2.1 浏览器

<!-- （必选）加载 Mock -->
<script src="http://mockjs.com/dist/mock.js"></script>

// 使用 Mock
var data = Mock.mock({'list|1-10': [{'id|+1': 1}]
});
$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body')

2.2 Node（CommonJS）

// 安装
npm install mockjs// 使用
var Mock = require('mockjs');
var data = Mock.mock({'list|1-10': [{'id|+1': 1}]
});
console.log(JSON.stringify(data, null, 4))

tips：

  1. 框架一般用这种如果不想预加载也可以用2.1浏览器的那种
    以vue项目为例：

项目基本信息：vue 2.6.10，mockjs 1.1.0

  • 用2.1的方法就是：

    • 在public文件夹下index.html中引入
    • 然后直接使用Mock.mock()造取数据

  • 用2.2的方法就是：

    • 先使用命令行npm install mockjs 安装
    • 之后在main.ts里面：
      先引入import Mock from 'mockjs'然后挂到Vue原型上面上面之后整个项目均可this.Mock.mock()方法造取数据

2.3 Bower

npm install -g bower
bower install --save mockjs<script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script>

2.4 RequireJS（AMD）

<script src="http://requirejs.org/docs/release/2.1.8/comments/require.js"></script>

// 配置 Mock 路径
require.config({paths:{'mock':'http://mockjs.com/dist/mock'}
})
// 加载 Mock
require(['mock'], function(Mock){// 使用 Mockvar data = Mock.mock({'list|1-10': [{'id|+1': 1}]});$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body')
})

2.5 Sea.js(CMD)

<script src="http://seajs.github.io/examples/sea-modules/seajs/seajs/2.1.0/sea.js"></script>

seajs.config({alias: {"mock": "http://mockjs.com/0.1/dist/mock.js"}
})// 加载 Mock
seajs.use('mock', function(Mock){// 使用 Mockvar data = Mock.mock({'list|1-10': [{'id|+1': 1}]});$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body')
})

2.6 KISSY

<script src="http://g.tbcdn.cn/kissy/k/1.3.1/seed.js"></script>

// 配置 Mock 路径
KISSY.config({packages: {mock: {base: 'http://mockjs.com/0.1/dist/',debug: true}}
})
// 加载 Mock
KISSY.use(['node', 'mock'], function (S, _, Mock) {// 使用 Mockvar data = Mock.mock({'list|1-10': [{'id|+1': 1}]});KISSY.all('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body')
})

2.7 Random CLI

// 安装
npm install mockjs -g// 执行
$ random url
// => http://rmcpx.org/funzwc

3、语法规范

Mock.js 的语法规范包括两部分：

  1. 数据模板定义（Data Temaplte Definition，DTD）
  2. 数据占位符定义（Data Placeholder Definition，DPD）

3.1 数据模板定义DTD

3.1.1 基础

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

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value
3.1.2 注意
  • 属性名 和 生成规则 之间用|分割
  • 生成规则是可选的
  • 生成规则由七种格式：
    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
  • 生成规则 的 含义 需要依赖 属性值 才能确定。
  • 属性值 中可以含有 @占位符。
  • 属性值 还指定了最终值的初始值和类型。
3.1.3 生成规则和示例

为了展示随机性，这些例子（'name|min-max': [{}, {} ...] 、'name|count': [{}, {} ...] 除外）外面都包裹了数组，但是代码示例里面没有写

1. 属性值是字符串String
  • 'name|min-max': value通过重复'value'生成一个字符串，重复次数大于等于min，小于等于max
    例如：'h|1-10': '名称'生成数据如下在这里插入图片描述
  • 'name|count': value通过重复'value'生成一个字符串，重复次数等于count。
    例如：'h|5': '名称'生成数据如下在这里插入图片描述
2. 属性值是数字 Number
  • 'name|+1' : 100属性值自动加一，初始值为100
    例如： 'id|+1' : 100 生成数据如下：
    在这里插入图片描述
  • 'name|1-100' : 100 生成一个大于等于1，小于等于100的整数，属性值100用来确定类型
    例如 'u|1-9999': 100生成数据如下
    在这里插入图片描述
  • 'name|1-100.1-10': 100 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位。
    例如：'c|1-9999999.2': 1 生成数据如下
    在这里插入图片描述
3. 属性值是布尔类型Boolean

  • 'name|1': value 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2。
    例如：'isEdit|1': true，生成数据如下：
    在这里插入图片描述

  • 'name|min-max': value 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
    例如：'isRandom|20-80':true ，数据生成结果如下
    在这里插入图片描述

4. 属性值是对象 Object
  • 'name|min-max': {} 从属性值 {} 中随机选取 min 到 max 个属性。
    例如：'privince|1-4':{ '130000': '河北省', '140000': '山西省', '320000': '江苏省', '330000': '浙江省', '340000': '安徽省' }，生成数据如下：
    在这里插入图片描述
  • 'name|count': {} 从属性值 {} 中随机选取 count 个属性。
    例如： 'city|2':{ '110000': '北京市', '120000': '天津市', '310000': '上海市', '130000': '河北省', '140000': '山西省', '320000': '江苏省', '330000': '浙江省', '340000': '安徽省' }，生成数据如下
    在这里插入图片描述
5 属性值是数组 Array

  • 'name|1': [{}, {} ...] 从属性值 [{}, {} …] 中随机选取 1 个元素，作为最终值。
    例如： 'array|1':['AMD', 'CMD', 'KMD', 'UMD']，生成数据如下：
    在这里插入图片描述

  • 'name|min-max': [{}, {} ...] 通过重复属性值 [{}, {} …] 生成一个新数组，重复次数大于等于 min，小于等于 max。
    例如：'list2|1-10': [ { 'array|1':['AMD', 'CMD', 'KMD', 'UMD'] } ]，生成数据如下：
    在这里插入图片描述

  • 'name|count': [{}, {} ...] 通过重复属性值 [{}, {} …] 生成一个新数组，重复次数为 count。
    例如：'list2|5': [ { 'array|1':['AMD', 'CMD', 'KMD', 'UMD'] }, ] ，生成数据如下：
    在这里插入图片描述

6 属性值是数组 Function
  • 'name': function(){} 执行函数 function(){}，取其返回值作为最终的属性值，上下文为 ‘name’ 所在的对象。
    例如：'randomNum':function() { return Math.floor(Math.random()*1000000) }，生成数据如下：
    在这里插入图片描述

3.2 数据占位符定义 DPD

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

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

注意：

  • 用 @ 来标识其后的字符串是 占位符。
  • 占位符 引用的是 Mock.Random 中的方法。
  • 通过 Mock.Random.extend() 来扩展自定义占位符。
  • 占位符 也可以引用 数据模板 中的属性。
  • 占位符 会优先引用 数据模板 中的属性。
 {name: {first: '@FIRST',middle: '@FIRST',last: '@LAST',full: '@first @middle @last'}}// =>{"name": {"first": "Charles","middle": "Brenda","last": "Lopez","full": "Charles Brenda Lopez"}}

参考文献：
3. 官网
4. mockjs文档

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

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

相关文章

软件测试|SQLAlchemy query() 方法查询数据

软件测试|SQLAlchemy query() 方法查询数据

简介 上一篇文章我们介绍了SQLAlchemy 的安装和基础使用&#xff0c;本文我们来详细介绍一下如何使用SQLAlchemy的query()方法来高效的查询我们的数据。 创建模型 我们可以先创建一个可供我们查询的模型&#xff0c;也可以复用上一篇文章中我们创建的模型&#xff0c;代码如…
阅读更多...
游戏开发，中小公司跳槽去大厂容易还是考研应届生校招容易？

游戏开发，中小公司跳槽去大厂容易还是考研应届生校招容易？

游戏开发&#xff0c;中小公司跳槽去大厂容易还是考研应届生校招容易&#xff1f; 在之前的文章中&#xff0c;我们提到过&#xff0c;游戏开发行业首选直接进入游戏大厂。《开发者必读&#xff1a;如何选择适合的游戏开发公司&#xff1f;》因为大厂不仅能提供良好的职业发展…
阅读更多...
接口防刷方案

接口防刷方案

1、前言 本文为描述通过Interceptor以及Redis实现接口访问防刷Demo 2、原理 通过ip地址uri拼接用以作为访问者访问接口区分 通过在Interceptor中拦截请求&#xff0c;从Redis中统计用户访问接口次数从而达到接口防刷目的 如下图所示 3、案例工程 项目地址&#xff1a; htt…
阅读更多...
localStorage、sessionStorage、vuex区别和使用感悟

localStorage、sessionStorage、vuex区别和使用感悟

一、介绍及区别 localStorage的生命周期是永久&#xff1b;不手动在浏览器提供的UI上清除localStorage信息&#xff0c;否则这些信息将永远存在。 sessionStorage的生命周期为当前窗口或标签页&#xff0c;一旦窗口或标签页被永久关闭&#xff0c;那么所有通过sessionStorage存…
阅读更多...
AI红娘开启约会新时代；网易云音乐Agent实践探索；微软生成式AI课程要点笔记；ComfyUI新手教程；图解RAG进阶技术 | ShowMeAI日报

AI红娘开启约会新时代；网易云音乐Agent实践探索；微软生成式AI课程要点笔记；ComfyUI新手教程；图解RAG进阶技术 | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; &#x1f440; Perplexity 官宣 7360 万美元B轮融资&#xff0c;打造世界上最快最准确的答案平台 https://blog.perplexity.ai/blog/perplexity-rais…
阅读更多...
uniapp中uview组件库Toast 消息提示 的使用方法

uniapp中uview组件库Toast 消息提示 的使用方法

目录 #基本使用 #配置toast主题 #toast结束跳转URL #API #Props #Params #Methods 此组件表现形式类似uni的uni.showToastAPI&#xff0c;但也有不同的地方&#xff0c;具体表现在&#xff1a; uView的toast有5种主题可选可以配置toast结束后&#xff0c;跳转相应URL目…
阅读更多...
Linux系统——yum仓库及NFS共享

Linux系统——yum仓库及NFS共享

目录 一、yum仓库 1.yum简介 2.yum实现过程 3.如何实现安装服务 4.yum配置文件及命令 4.1yum配置文件 4.1.1主配置文件 4.1.2仓库设置文件 4.1.3日志文件 4.2yum命令详解 4.2.1查询 4.2.2yum安装升级 4.2.3软件卸载 4.2.4操作安装历史记录 5.搭建本地yum仓库 5…
阅读更多...
【分布式技术】分布式存储ceph部署

【分布式技术】分布式存储ceph部署

目录 一、存储的介绍 单机存储设备 单机存储的问题 商业存储 分布式存储 二、分布式存储 什么是分布式存储 分布式存储的类型 三、ceph简介 四、ceph的优点 五、ceph的架构 六、ceph的核心组件 七、OSD存储后端 八、Ceph 数据的存储过程 九、Ceph 版本发行生命周…
阅读更多...
NFS的共享与挂载

NFS的共享与挂载

一、NFS网络文件服务 1.1简介 NFS&#xff08;Network File System 网络文件服务&#xff09; 文件系统&#xff08;软件&#xff09;文件的权限 NFS 是一种基于 TCP/IP 传输的网络文件系统协议&#xff0c;最初由 Sun 公司开发。 通过使用 NFS 协议&#xff0c;客户机可以像访…
阅读更多...
【数据库8.0备份还原】之Percona XtraBackup

【数据库8.0备份还原】之Percona XtraBackup

目录 Percona XtraBackup备份数据库1、Percona XtraBackup的介绍2、Percona XtraBackup安装3、Percona XtraBackup8.0的使用1.全库备份和还原2.增量备份和还原3.差异备份和还原4.差异备份和增量备份的区别5.压缩备份和还原 Percona XtraBackup备份数据库 yum源安装&#xff1a…
阅读更多...
Spring基础属性一览：注释、对象装配、作用域、生命周期

Spring基础属性一览：注释、对象装配、作用域、生命周期

在Spring中想要更简单的存储和读取对象的核心是使用注解&#xff0c;也就是我们接下来要学的Spring中相关注解。 之前我们存储Bean时&#xff0c;需要在自己添加的配置文件中添加一行bean才行&#xff1a; 而现在我们只需要一个注解就可以替代之前要写的一行配置的繁琐了。 …
阅读更多...
消息队列的作用与使用场景？

消息队列的作用与使用场景？

一、消息队列的作用 队列的主要作用是消除高并发访问高峰&#xff0c;加快网站的响应速度。 在不使用消息队列的情况下&#xff0c;用户的请求数据直接写入数据库&#xff0c;在高并发的情况下&#xff0c;会对数据库造成巨大的压力&#xff0c;同时也使得系统响应延迟加剧。 …
阅读更多...
HDFS WebHDFS 读写文件分析及HTTP Chunk Transfer Encoding相关问题探究

HDFS WebHDFS 读写文件分析及HTTP Chunk Transfer Encoding相关问题探究

文章目录 前言需要回答的首要问题DataNode端基于Netty的WebHDFS Service的实现基于重定向的文件写入流程写入一个大文件时WebHDFS和Hadoop Native的块分布差异 基于重定向的数据读取流程尝试读取一个小文件尝试读取一个大文件 读写过程中的Chunk Transfer-Encoding支持写文件使…
阅读更多...
postman 简单测试（二）

postman 简单测试（二）

接着上一节 https://blog.csdn.net/myy2012/article/details/135616719 1.Tests的简单使用&#xff08;后置处理器&#xff09; 具体的截图是每一步操作后得来的&#xff0c;记录方便自己以后查阅&#xff0c;也希望能帮助到有缘人。 1.1 把返回值存入到环境变量中&#xff…
阅读更多...
protobuf学习日记 | 初识protobuf

protobuf学习日记 | 初识protobuf

目录 前言 一、序列化与反序列化 二、protobuf是什么 三、protobuf的使用特点 四、快速上手 1、proto文件编写 2、编译proto文件 3、序列化与反序列化的使用 前言 这是小编新开的一个栏目&#xff0c;为了记录自己在学习ProtoBuf的历程&#xff0c;也希望能帮助大家&am…
阅读更多...
亚马逊店飞飞ERP系统，跟卖+铺货+物流发货模式综合一体的ERP系统

亚马逊店飞飞ERP系统，跟卖+铺货+物流发货模式综合一体的ERP系统

跨境电商亚马逊&#xff0c;目前为止电商行业比较靠前的电商平台&#xff01;那么有人做电商&#xff0c;就会有人出单&#xff0c;有人出单就会有中转仓需求&#xff0c;代打包&#xff0c;代贴单&#xff01;那么这一切都是有一套逻辑完善的ERP来完成&#xff01;前端通过授权…
阅读更多...
将.NET应用转换成Window服务

将.NET应用转换成Window服务

写在前面 本文介绍了将.NET8.0应用程序转换成Windows服务。 需要在NuGet中获取并安装&#xff1a;Microsoft.Extensions.Hosting.WindowsServices 包 代码实现 using System.Runtime.InteropServices; using WorkerService1;public class Program {public static void Main…
阅读更多...
Kafka 简介

Kafka 简介

目录 1、概念介绍 Kafka 由来 ZooKeeper Kafka 特性 Kafka 使用场景 Kafka 复制备份 2、Kafka 架构 Broker Topic Producer Partition Consumers Consumer Group Distribution 1、概念介绍 Kafka 由来 Kafka 是最初由 Linkedin 公司开发&#xff0c;是一个分布…
阅读更多...
aigc修复美颜学习笔记

aigc修复美颜学习笔记

目录 GFPGAN进行图像人脸修复 美颜 修复畸形手势 GFPGAN进行图像人脸修复 原文&#xff1a;本地使用GFPGAN进行图像人脸修复_人相修复处理网页 csdn-CSDN博客 人脸修复 1.下载项目和权重文件 2.部署环境 3.下载权重文件 4.运行代码 5.网页端体验 首先来看一下效果图 1.下…
阅读更多...
uni-app的项目创建和环境搭建

uni-app的项目创建和环境搭建

uni-app 是一个使用 Vue.js 开发所有前端应用的框架&#xff0c;开发者编写一套代码&#xff0c;可发布到iOS、Android、Web&#xff08;响应式&#xff09;、以及各种小程序&#xff08;微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝&#xff09;、快应用等多个平台。 第一步…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023