Mock基本用法

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'  //随机中文名
    }]
})