Mock.js的基本使用方法

news/2025/3/6 5:03:17/

官网网址: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.ppmy.cn/news/1008782.html

相关文章

vue2-组件和插件的区别

1、组件是什么? 组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在vue中每一个.vue文件都可以被视为一个组件。 组件的优势: 降低整个系统的耦合度,在保持接口不变的情况下…

[Linux]理解文件系统!动静态库详细制作使用!(缓冲区、inode、软硬链接、动静态库)

hello,大家好,这里是bang___bang_,今天来谈谈的文件系统知识,包含有缓冲区、inode、软硬链接、动静态库。本篇旨在分享记录知识,如有需要,希望能有所帮助。 目录 1️⃣缓冲区 🍙缓冲区的意义 …

华为QinQ技术的基本qinq和灵活qinq 2种配置案例

基本qinq配置: 运营商pe设备在收到同一个公司的ce发来的的包,统一打上同样的vlan ,如上图,同一个家公司两边统一打上vlan 2,等于在原内网vlan 10或20过来的包再统一打上vlan 2的标签,这样传输就不会和其它…

webSocket 协议是什么

webSocket 协议是什么,能简述一下吗? websocket 协议 HTML5 带来的新协议,相对于 http,它是一个持久连接的协议,它利用 http 协议完成握手,然后通过 TCP 连接通道发送消息,使用 websocket 协议可…

DB2 数据库基础使用

1.启动步骤 Last login: Sun Jul 23 09:38:48 2023 from 192.168.56.101 [rootlocalhost ~]# cd /usr/local/src/expc [rootlocalhost expc]# cd /opt/ibm/db2/V10.5/instance/ [rootlocalhost instance]# su - db2inst1 Last login: Sun Jul 23 09:40:13 UTC 2023 on pts/0 […

基于Vgg16和Vgg19深度学习网络的步态识别系统matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022A 3.部分核心程序 ................................................................ % 设置训练选项options …

openCV 图像色彩空间转换

文章目录 一、cvColor二、HSV/BGR三、imwrite void QuickDemo::colorSpce_Demo(cv::Mat &image) {cv::Mat gray, hsv;cvtColor(image, hsv, COLOR_BGR2HSV);cvtColor(image, gray, COLOR_RGB2GRAY);imshow("hsv", hsv);imshow("gray", gray);imwrite(&…

C++知识点小结(持续补充)

1、进程虚拟地址划分: 内存分区和编译链接C内存分区(考虑const常量分区) 32位操作系统上,3G用户空间1G内核空间,从低地址到高地址: .text段->.rodata段->.data段->.bss段->.heap段->.stack段->内核空间.text段&…