mock数据(模拟数据)

目的：mockjs基本使用

mockjs可以模拟可更快的得到较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，保存业务完整度。当然模拟数据有一定的规则请参考： http://mockjs.com/
mock.js官网

目标：模拟 /my/test 接口，随机返回点数据。

1. 基本使用步骤：

安装
npm i mockjs
或
yarn add mockjs

2. 配置 src/mock/index.js

import Mock from 'mockjs'// mock的配置
Mock.setup({// 随机延时500-1000毫秒timeout: '500-1000'
})

3. 使用 src/main.js

import 'normalize.css'
import '@/assets/styles/common.less'
+ import './mock'

4. 模拟接口，拦截请求

// 拦截请求，
// 第一个参数：url，使用正则去匹配
// 第二个参数：请求方式
// 第三个参数： 生成数据的函数
Mock.mock(/\/my\/test/, 'get', () => {return { msg: '请求测试接口成功', result: [] }
})

5. 生成随机数据

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

具体规则：http://mockjs.com/examples.html

简单使用

mock/index.js

import Mock, { Random } from 'mockjs'
// 拦截请求，
// 第一个参数：url，使用正则去匹配
// 第二个参数：请求方式
// 第三个参数： 生成数据的函数
Mock.mock(/\/my\/test/, 'get', () => {return {msg: '请求测试接口成功',result: [{id: Random.id(),name: Random.ctitle(2, 9),picture: Random.image(200 * 200),desc: Random.ctitle(6, 15),price: Random.float(60, 1000, 2, 2)}]}
})

index.js

// 测试用的代码axios({ url: '/my/test', method: 'get' }).then(res => {console.log(res)})

项目中使用

// 模拟：获取收藏接口 - 参数字段按接口文档来定义
Mock.mock(/\/member\/collect/, 'get', ({ url }) => {const queryStr = url.split('?')[1]console.log(queryStr)const { page, pageSize } = qs.parse(queryStr)//   console.log(queryObj)return Mock.mock({msg: '操作成功',result: {counts: 35,pages: 4, // 总页数pageSize: Number(pageSize), // 页容量page: Number(page), // 当前页// 数据模板定义['items|' + pageSize]: [{id: '@id()',name: '@ctitle(10, 15)', // 名称description: '@ctitle(12, 20)', // 描述picture: '@image(200 * 200)', // 图片collectType: '@integer(1, 3)', // 收藏类型，1为商品，2为专题，3为品牌price: '@float(60, 1000, 2, 2)', // 商品价格discount: '@float(1, 1, 1, 2)', // 折扣信息productionPlace: '@province()', // 品牌-产地，多字段通过/分割detailsUrl: '@url()' // 详情链接}]}})
})

mock数据(模拟数据)相关推荐

mock模拟接口测试 vue_Easy Mock以及Vue+Mock.js模拟数据
Easy Mock以及Vue+Mock.js模拟数据一.Mock.js简介 Mock.js是一个可以模拟后端数据,也可以模拟增删改查操作的js库基础语法规范数据模板中的每个属性由 3 部分构成: ...
dva ajax请求,dva框架使用mock.js模拟数据 + fetch请求数据
what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...
Mock.mock()生成模拟数据
在做前端项目时,如果没有测试数据,可以通过mock来生成模拟数据. Mock.mock( rurl?, rtype?, template|function( options ) ) 根据数据模板生成模 ...
Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
微信小程序——使用mock.js模拟数据
一,创建目录再根目录utils目录下面创建 WxMock.js文件和api.js文件二,WxMock.js WxMock.js下载地址:https://github.com/webx32/WxMo ...
使用Mock技术模拟数据
mock数据准备文件 1.mock数据一般存放在项目文件夹src下面的mock文件夹准备好数据文件banner.json 和 floor.json(json文件)并通过mockServe.js进行暴 ...
umi搭建react+antd项目（三）Mock 数据--模拟数据
1.添加mockjs yarn add mockjs 2.在mock目录下新建test.js List|10,返回list,10条数据 @image,随机生成img的url链接,mock内置函数 im ...
Vue Element Admin 用mock模块模拟数据
步骤简单一在 src/api/charts 中添加接口 , 方法名为 getindexMock import request from '@/utils/request'export func ...
vue@3-cli使用mock.js模拟数据.........
第一步:项目路径下执行命令: npm install --save mockjs第二步:main.js统计目录简历mock文件夹 mock.jsconst Mock = require('mockjs ...