Mock.js的基本使用方法

官网网址:Mock.js (mockjs.com)

当前端工程师需要独立于后端并行开发时,后端接口还没有完成,那么前端怎么获取数据?


这时可以考虑前端搭建web server自己模拟假数据,这里我们选第三方库mockjs用来生成随机数据,拦截Ajax请求。


下面是mock的原理图:

实战案例

先下载mockjs

npm install mockjs

再在src文件夹下面创建一个api文件夹,并在main.js引入

Mock.mock({"data|6": [ //生成6条数据 数组{"shopId|+1": 1,//生成商品id,自增1"shopMsg": "@ctitle(10)", //生成商品信息,长度为10个汉字"shopName": "@cname",//生成商品名 , 都是中国人的名字"shopTel": /^1(5|3|7|8)[0-9]{9}$/,//生成随机电话号"shopAddress": "@county(true)", //随机生成地址"shopStar|1-5": "★", //随机生成1-5个星星"salesVolume|30-1000": 30, //随机生成商品价格 在30-1000之间"shopLogo": "@Image('100x40','#c33', '#ffffff','小北鼻')", //生成随机图片,大小/背景色/字体颜色/文字信息"food|2": [ //每个商品中再随机生成2个food{"foodName": "@cname", //food的名字"foodPic": "@Image('100x40','#c33', '#ffffff','小可爱')",//生成随机图片,大小/背景色/字体颜色/文字信息"foodPrice|1-100": 20,//生成1-100的随机数"aname|2": [{"aname": "@cname","aprice|30-60": 20}]}]}]})

下载axios并发请求

npm install axios

 

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

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

相关文章

IDEA偶尔编译的时候不识别lombok

偶尔IDEA启动项目的时候会识别不到lombok,识别不到get()跟set()方法 方案 在settings添加下面代码 -Djps.track.ap.dependenciesfalse

数据安全治理的关键-数据分类分级工具

强大的资产发现能力 多种资产发现方式的组合应用,能够最大程度地提高资产发现能力。 灵活的敏感数据分类分级规则 内置丰富的敏感数据分类分级规则,支持正则表达式、关键词组、非结构化指纹、结构化指纹、机器聚类等多种匹配方式,并且规则…

HDFS的QJM方案

Quorum Journal Manager仲裁日志管理器 介绍主备切换,脑裂问题解决---ZKFailoverController(zkfc)主备切换,脑裂问题解决-- Fencing(隔离)机制主备数据状态同步问题解决 HA集群搭建集群基础环境准备HA集群规…

Linux中的firewall-cmd

2023年8月4日,周五上午 目录 打开端口关闭端口查看某个端口是否打开查看当前防火墙设置firewall-cmd中的服务在防火墙中什么是服务?为什么会有服务?打开或关闭服务查看某个服务是否打开firewall-cmd中的 zones查看所有可用的zones&#xff0…

面试之多线程案例(四)

1.单例模式 单例模式是指在内存中只会创建且仅创建一次对象的设计模式。在程序中多次使用同一个对象且作用相同时,为了防止频繁地创建对象使得内存飙升,单例模式可以让程序仅在内存中创建一个对象,让所有需要调用的地方都共享这一单例对象。…

python实现自动化检查谁没交作业

作为一个学委总是被查谁没交作业这种事所困扰,python写一个小程序帮我自动化查谁没交作业 用python实现的,因为find函数都可以直接找出文件名中的名字,最后代码量都不到40行 文件名乱七八槽的也可以识别,只要文件名带学生姓名就可…

WAF绕过-漏洞利用篇-sql注入+文件上传-过狗

WAF绕过主要集中在信息收集,漏洞发现,漏洞利用,权限控制四个阶段。 1、什么是WAF? Web Application Firewall(web应用防火墙),一种公认的说法是“web应用防火墙通过执行一系列针对HTTP/HTTPS的安…

多赛道出海案例,亚马逊云科技为企业提供全新解决方案实现高速增长

数字化浪潮之下,中国企业的全球化步伐明显提速。从“借帆出海”到“生而全球化”,中国企业实现了从低端制造出口,向技术创新和品牌先导的升级。为助力中国企业业务高效出海,亚马逊云科技于2023年6月9日在深圳大中华喜来登酒店举办…

【JS】实现系统取色器

效果 使用环境说明 根据当前的信息,截至到 2023 年 8 月,以下是一些支持使用 new EyeDropper() 的主要浏览器(可能还有其他浏览器也提供了类似的功能): Google Chrome:从 Chrome 94 版本开始引入了 new Ey…

【数据结构|二叉树遍历】递归与非递归实现前序遍历、中序遍历、后序遍历

递归与非递归实现二叉树的前序遍历、中序遍历、后序遍历。 二叉树图 定义 前序遍历(Preorder Traversal): 前序遍历的顺序是先访问根节点,然后按照先左后右的顺序访问子节点。对于上面的二叉树,前序遍历的结果是&…

Java三大特征之继承【超详细】

文章目录 一、继承概念二、继承的语法三、父类成员访问3.1子类中访问父类的成员变量3.2子类和父类成员变量同名3.3子类中访问父类的成员方法 四、super关键字五、子类构造方法六、super和this七、再谈初始化八、protected 关键字九、继承方式十、final 关键字十一、继承与组合 …

npm install报错 -> npm ERR! Unexpected token ‘.‘ 报错解决办法

问题原因: 用nvm1.1.7的版本安装了16.x以上的node, 然后再下载依赖的时候就报错了;总结一下就是nvm版本太低了,他的里面没有集成高版本node导致的。 解决办法: 把nvm切换到新版本就行了。 1. 卸载掉当前所有的node nvm unins…

06 HTTP(下)

06 HTTP(下) 介绍服务器如何响应请求报文,并将该报文发送给浏览器端。介绍一些基础API,然后结合流程图和代码对服务器响应请求报文进行详解。 基础API部分,介绍stat、mmap、iovec、writev。 流程图部分,描…

一个完整的http请求响应过程

一、 HTTP请求和响应步骤 以上完整表示了HTTP请求和响应的7个步骤,下面从TCP/IP协议模型的角度来理解HTTP请求和响应如何传递的。 二、TCP/IP协议 TCP/IP协议模型(Transmission Control Protocol/Internet Protocol),包含了一系…

【ASP.NET MVC】使用动软(三)(11)

一、问题 上文中提到,动软提供了数据库的基本操作功能,但是往往需要添加新的功能来解决实际问题,比如GetModel,通过id去查对象: 这个功能就需要进行改进:往往程序中获取的是实体的其他属性,比如…

【Maven】让maven更高效,优化maven构建项目速度

打开idea的setting,找到maven,设置它多线程数,重启后即可! 我这里是8,你们可以随便设置。 如下图:

c语言每日一练(1)

前言: 每日一练系列,每一期都包含5道选择题,2道编程题,博主会尽可能详细地进行讲解,令初学者也能听的清晰。每日一练系列会持续更新,暑假时三天之内必有一更,到了开学之后,将看学业情…

需求飙升120%!芭比产品火爆出圈,意大利人争相购买!

据外媒报道,真人版《芭比》成为今年夏天最火的电影,仅在美国和加拿大,该影片的票房收入就超过3.5亿美元。在意大利《芭比》也备受追捧,目前的票房收入突破1670万欧元,成为2023年观看人数第三多的电影。 除了电影界之外…

uniapp使用视频地址获取视频封面

很多时候我们都需要使用视频的第一帧当作视频的封面,今天我们从uni-app的安卓app这个环境来实现下这个需求。文中需要你对uniapp的renderjs有一定了解,可以先看我的这篇文章初识renderjs uniapp 安卓APP端(ios未测试) 方法&…

React入门学习笔记2

jsx语法规则 定义虚拟DOM时,不要写引号。标签中混入JS表达式时要用{ }。样式的类名指定不要用class,要用className。内联样式,要用style{{key:value}}的形式去写。只有一个根标签标签必须闭合标签首字母 )若小写字母开头&#xf…