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.hqwc.cn/news/55306.html

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

相关文章

微信小程序开发【从0到1~入门篇】2023.08

一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 文件必须作用app.js是小程序逻辑app.json是小程序公告配置app.wxss否小程序公告样式表 3. 小程序项目结构 一个小程序页面由四个文件组成,分别是: 文…

Vue2 第十九节 Vuex (一)

1.理解Vuex 2.Vuex工作原理 3.求和案例 4.Vuex的开发者工具 一.理解Vuex ① 概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写)&#xf…

JMeter(二十四)、使用吞吐量控制器实现不同的用户操纵不同的业务

一、需求 需求:博客系统,模拟用户真实行为,80%的用户阅读文章,20%的用户创建文章,创建文章的用户随机的删除或者修改文章。 二、脚本实现 80%的用户查看文章 20%用户创建文章 根据post_id是否能整除2,决…

Lua 使用 —— IO 操作

一、前言 Lua 语言是以一个脚本存在,所以他自身不会提供太多和外部交互的机制。需要交互则由宿主提供或是由外部库。 接下来分享下如何使用以 iso c 作为宿主,进行标准库的 io 操作。 二、io.input、io.output 1、io.input io.input(filename) 会以…

【windows】windows上如何使用linux命令?

前言 windows上的bat命令感觉不方便,想在windows上使用linux命令。 有人提供了轮子,本文简单介绍一些该轮子的安装与使用,希望能够帮助到和我有一起需求的网友。 我的答案是busybox。 1.安装busybox.exe 在这个网站上安装busybox busyb…

如何设计一个自动化测试框架

在进行自动化框架设计之前我们先来看两个问题,什么是自动化框架,设计的时候应该注意什么原则,然后该怎么做?本文会以一个web端的UI自动化测试框架设计为例 Python自动化测试:2023最新合集Python自动化测试开发框架【全…

fishing之第四篇使用案例一模拟登陆口

文章目录 一、访问钓鱼平台二、Sending Profiles(发件人邮箱配置)三、User&Groups(接收人邮件列表)四、Landing Pags(钓鱼页面配置)五、Email Templates(邮件内容配置)六、Campa…

【C++】二叉搜索树的模拟实现

🌇个人主页:平凡的小苏 📚学习格言:命运给你一个低的起点,是想看你精彩的翻盘,而不是让你自甘堕落,脚下的路虽然难走,但我还能走,比起向阳而生,我更想尝试逆风…

AI介绍——chat gpt/文心一言/claude/bard/星火大模型/bing AI

AI体验 1. AI 介绍(注册和使用)1.1 Chat GPT1.2 文心一言1.3 Slack 上的 Claude1.3.1 Claude 介绍1.3.2 Claude 使用 1.4 Google的Bard1.4.1 Bard 介绍1.4.2 Bard 使用 1.5 科大讯飞的星火大模型1.5.1 星火大模型 介绍1.5.2 星火大模型 使用 1.6 new bin…

iOS Viper架构(中文版)【看懂这篇就够了】

完整源码地址 一、iOS_Viper iOS的Viper架构,作为一个从业多年的iOS开发者,我个人认为应该要会一点viper 二、前言 viper的设计模式在iOS开发中不流行,甚至是Swift中,也没有用,我认为比较可惜。作为iOSer,当你掌握…

2023年第四届“华数杯”数学建模思路 - 案例:随机森林

## 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 什么是随机森林? 随机森林属于 集成学习 中的 Bagging(Bootstrap AGgregation 的简称) 方法。如果用图来表示他们之…

electron+vue+ts窗口间通信

文章目录 一. 目的二.逻辑分析三. 代码示例 "types/node": "^20.3.1","vitejs/plugin-vue": "^4.1.0","vueuse/electron": "^10.2.1","electron": "^25.2.0","electron-packager":…