Mock用法
1.安装
npm install mockjs
2.使用
//1.vue中的使用方法(以vue3为实例)
npm install mockjs --save-dev //安装在开发环境中
npm install axios
//2.在项目目录下创建mock/index.js文件
//3.index.js文件中编写
import Mock from 'mockjs'
const list = []
list.push(Mock.mock({
id: '@id',
title: '@ctitle(5)',
...
}))
Mock.mock('/userData', 'get', {
code: 200,
data: list,
})
//4.在main.js中引入mock/index.js文件
import '@/../mock/index.js'
//5.在页面中请求
import axios from 'axios'
let userData: any = {}
const getData = async () => {
await axios.get('/userData').then((res)=>{
userData = res.data.data
})
}
3.mock语法(数据模板由属性名、生成规则、属性值组成)
属性名:name 、生成规则:rule 、属性值: value
例:’name|rule’: name
'nameData|3': 'a', //重复fei这个字符串 3 次,打印出来就是'aaa'。
'nameData|1-5': 'x', //重复x这个字符串 1-5 次。
'id|+1': 0, //属性值自动加 1,初始值为 0
'age|2-30': 25, //生成一个[2,30]整数,25 只是用来确定类型
'height|170-190.2-5': 110.24, //生成一个浮点数,整数部分[170,190],小数部分保留 2 到 5 位。
'flag1|1': true, //50%为true
'flag2|1-9': true, //1/(1+9)为true
'arr1|1': arr, //从数组 arr 中随机选取 1 个元素,作为最终值。
'arr2|+1': arr, //从属性值 arr 中顺序选取 1 个元素,作为最终值
'arr3|2-6': arr, //通过重复属性值 arr 生成一个新数组,重复次数[2,6]。
'obj1|2': obj, //从属性值 obj 中随机选取 2 个属性
'obj2|1-2': obj, //从属性值 obj 中随机选取 1 到 2 个属性。
'regexp': /^[0-9]$/, //生成的符合正则表达式的字符串
//占位符 网站(http://mockjs.com/examples.html#DPD)
//列举常用的
'id': '@id', //随机id 18位
'title': '@ctitle()', //随机中文标题可以自定义字数
'name': '@cname', //随机中文名
'datetime': '@datetime()', //随机时间默认格式为y-MM-dd HH:mm:ss,可自定义格式
'province': '@province', //随机省
'city': '@city(true)', //随机市 (true)代表是否要带省,省略则不带省
'county': '@county(true)', //随机省市县,不带true,只有县
'image': '@image(100x100, #894FC4, #ccc, png, !)' //随机图片,返回的是图片地址 大小--背景颜色--字体颜色--格式--图片内容
//自定义占位符
'myFriend': '@pick(["小明", "小红", "小李"])'
4.例子
//随机生成5个数据带id和姓名
Mock.mock({
'nameData|5':[{ //生成五条数据
'id|+1': 1, //自增从1开始
name: '@cname' //随机中文名
}]
})