mockjs

使用情况

1.很多公司，后端还没有做好接口，写好接口文档（前端就不需要等待后端实现接口再写代码）

2. 前端可以通过mockjs参考接口文档自己先模拟数据；写业务代码，等待后端准备好，再用后端接口替换自己写模拟数据，实现前后端同时开发

安装与使用

1.在提示命令符中切换到项目目录

2.输入 npm i mockjs -D

3.创建js文件，然后导入mock

//导入mock
import Mock from 'mockjs'

//拦截ajax，生成伪数据，拦截地址“/v5/list”
Mock.mock(/\/v5\/list/, {
    name: "mumu",
    age: 18,
})

4.

request.get("/v5/list")
.then(res => {
  console.log("模拟数据", res.data);
})
.catch(err => {
  console.log(err);
})

 mock用法

• mock(url,data)
• mock(url,method,data)
• mock(url,method,function(option){ return data })
• url:可以是正则，也可以是字符串
• methodLpost,get,put,delete
• option
  • url请求地址
  • method请求方法
  • body请求参数

 

 mock随机

1.数字

• 整数
  • "num|1-100"
• 小数点
  • "price|25-50.2-3":1

 2.字符串

• 文字
  • "score|1-5":"⭐"
• 中文标题
  • "title":"@ctitle(8,14)"
• 中文段落
  • "description":"@cparagraph"

 3.布尔值

• "bol|1":true

4.数组

• "friend|1":[1,2,3]
• "friend|2":[1,2,3] 复制两份

 5.对象

• "des|2""{} 随机从对象取两个属性

 6.其他常用

"tel": /1\d{10}/,
"email": /[a-z]{2,6}@(126|163|qq)\.(com|cn|net)/,
"canMerry": function () {
  if (this.age > 22) {
    return true;
  } else {
    return false;
  }
},
"day": "@date('yyyy-MM-dd')",
"time": "@time('HH:mm:ss')",
"add": "@county(true)",
"avatar": "@dataImage('200x100',' 图库 ')"

 更多随机方法请参照官网：Mock.js