前端用Mockjs模拟数据

mockjs可以模拟数据，可以使我们更快的得到较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，保存业务完整度。

使用步骤：

1、安装

npm i mockjs

2、配置 src/mock/index.js

这里的setup是配置，跟vue3的setup不一样。

import Mock from 'mockjs'// mock的配置
Mock.setup({// 随机延时200-300毫秒，模拟网络延时timeout: '500-1000'
})

3、在 src/main.js中使用

import './mock'

4、模拟接口，拦截请求

拦截请求后的三个参数

// 拦截请求，
// 第一个参数：url，使用正则去匹配
// 第二个参数：请求方式
// 第三个参数： 生成数据的函数

生成随机数据

// 单个数据
Mock.mock('@integer(0,7)')
// 对象数据
Mock.mock({id: '@id',name: '@ctitle(2,4)'
})

例一：随机生成简单的数组对象数据

比如拦截接口路径为 /my/test的接口路径，生成5个对象，里面的数据为随机的id和name。如果想要生成随机的英文名字，则要去掉@cname前面的c。这里的c代表生成中文

import Mock from 'mockjs'// 拦截接口  /my/test
// 1. 接口地址路径规则，需要匹配到它
// 2. 请求方式
// 3. 返回数据（函数返回数据）
Mock.mock(/\/my\/test/, 'get', () => {// 随机数据逻辑 目标：5条数据  [{id:'',name:''},...]const arr = []for (let i = 0; i < 5; i++) {// arr.push(Mock.mock('@id'))arr.push(Mock.mock({id: '@id',name: '@cname'}))}return { msg: '获取数据成功', result: arr }
})

当我们调用这个接口时生成的mock数据如下：

例二：获取分页数据，前端传递每页多少数据，根据传递的数据Mock对应的数据条数返回给前端。

1、因为mock会拦截axios的接口调用。所以我们可以从config里面取出url，然后通过？把url分成两部分，后面的部分就是我们携带的参数部分。打印的结果如下，分别为页码，每页显示的数量和商品类型。后端根据pageSize去生成对应的数据条数。

page=1&pageSize=4&collectType=1

2、这个时候我们就要取到 queryString 里面的pageSize。所以我们要先把queryString转化为对象的形式。

此时我们可以用node内置的包qs。他是不用

下载的，因为当webpack打包时，它会将项目中运用到的nodejs内置的包也打包进来。作为内置资源的一部分。

获取url里面的数据的方法也可以查看我的另一篇文章，不需要借助依赖

https://blog.csdn.net/m0_45219210/article/details/123377690?spm=1001.2014.3001.5502
用法：（1）先引入qs（2）通过qs.parse()方法去解析queryString。

下图是解析前和解析后的数据样式：

3、解析的结果为queryObject ，如上图。此时我们可通过queryObject.pageSize去拿到需要mock的数据个数，显然我们的结果都字符串类型，我们可以通过js字符串的隐式转化将其转化为数字类型。即在前面添加+号。然后通过for循环将往数组里面追加（push）mock的数据。从代码可见生成了id，name，desc（描述），price（价格）和picture（图片）。其中图片mock生成的图片比较丑。这里是一个url后面随机生成了一个1到9的整型数据，因为这个是后台的图片url。1到8分别代表9张不同的图片。最后把结果返回出去。

import Mock from 'mockjs'
import qs from 'qs'// 基本配置
Mock.setup({// 随机延时200-300毫秒，模拟网络延时timeout: '200-300'
})// 模拟 我的收藏
Mock.mock(/\/member\/collect/, 'get', config => {const queryString = config.url.split('?')[1]const queryObject = qs.parse(queryString)const items = []for (let i = 0; i < +queryObject.pageSize; i++) {items.push(Mock.mock({id: '@id',name: '@ctitle(10,20)',desc: '@ctitle(4,10)',price: '@float(100,200,2,2)',// http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_7.jpgpicture: `http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_${Mock.mock('@integer(1,8)')}.jpg`}))}return {msg: '获取收藏商品成功',result: {counts: 35,pageSize: +queryObject.pageSize,page: +queryObject.page,items}}
})

生成是数据如下。前端调用/member/collect时就会被mock拦截，然后得到下图所示的数据。前端通过data.result.items拿到数据去渲染。

此时我们就完成了mock数据的全部过程，当后端接口实现时。我们可以注掉上图第三步

src/main.js文件里面引入mock的那一行代码，就会将请求发往后端。这个时候如果数据正常。我们前端的业务就已经完成了。不需要更改其他代码。

前端用Mockjs模拟数据相关推荐

mock模拟的数据能增删改查吗_如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
在vue-cli项目下简单使用mockjs模拟数据
为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试.大部分情况下,前后端需要同时进行开发.因此便需要mockjs制造随机数 ...
vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
文章目录 19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件) 本人其他相关文章链接 19.mockjs模拟数据(开发Home首页当中的ListConta ...
react使用mockjs模拟数据
react使用mockjs模拟数据废话少说,直接开始: mockjs简介生成随机数据,拦截 Ajax 请求注意:只能使用axios,fetch请求无法拦截官网:http://mockjs.co ...
【MockJS】使用MockJS模拟数据（超级详细）
[MockJS]使用MockJS模拟数据 (超级详细) 文章目录 [MockJS]使用MockJS模拟数据 (超级详细) 2. MockJS 2.1 准备工作 2.2 语法规范数据模板定义规范 DT ...
【Vue】032-尚硅谷-尚品汇-mockjs模拟数据---20230111
032-尚硅谷-尚品汇-mockjs模拟数据官网链接第一步:安装依赖包mockjs 安装mockjs `npm install --save mockjs` 第二步:在src文件夹下创建一个文件夹 ...
vue实战-mockjs模拟数据
vue实战-mockjs模拟数据 1.在src目录下创建文件夹mock 2.将模拟的json格式的数据写入到文件夹中 banner.json [{"id": "1&quo ...
前端使用mockjs模拟接口数据
在前后端分离开发中,有时候后台开发比较慢还没有给回接口给前端,那么这时我们可以自己模拟数据(也就是mock数据). 当然可能你会想到我新建个js文件,把数据模拟好导出再引入请求就可以啦.这个方法虽然可 ...
使用mockjs模拟数据
一.安装简单粗暴 npm install mockjs 二.引入 CommonJS引入 let Mock = require('mockjs') let userInfo = Mock.mock({ ...

前端用Mockjs模拟数据

前端用Mockjs模拟数据相关推荐

最新文章

热门文章