mockjs的安装使用

一、为什么使用mockjs

• 在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口
  • 1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查
  • 2.使用json-server模拟，但不能随机生成所需数据
  • 3.使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查

mock优点

• 1.前后端分离，
  • 前端，访问后端接口展示数据
  • 后端，负责出来业务逻辑访问数据的数据,返回给前端
  • 数据库，存储数据
• 2.可随机生成大量的数据
• 3.用法简单
• 4.数据类型丰富
• 5.可扩展数据类型
• 6.在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可。

mockjs的安装与使用

• 安装
  npm i mockjs -D
• 使用
  import Mock from 'mockjs'
Mock.mock(url,data)
• main.js导入
  import ‘@/utils/mock’

mock用法

mock(url,data)
mock(url,method,data)
mock(url,method,function(option){
return data
})

• url:可以是正则，也可以是字符串
  method:post,get,put,delete
• option
  url 请求地址
method请求方法
body 请求第参数

mock随机

• 数字
  • 整数
    “num|1-100"
  • 小数点
    "price|25-50.2-3":1
• 递增字符串随机
  • 文字
    "score|1-5":"★"
  • 中文本标题
    "title":"@ctitle(8,14)"
  • 中文段落
    "des":"@paragraph"
  • 布尔值
    “bol|1”:true
  • 数组
    "friend|1":[1,2,3]
"friend|2":[1,2,3] //复制两份
  • 对象
    “des|2”：{} //随机从对象取两个属性

案例

// 导入mock
import Mock from 'mockjs';


// mock随机
Mock.mock(/\/v5\/user/,{
	code:0,
	msg:"成功",
	"data|10":[
	{
    "name":"@cname",
    "age|1-100":1,
	"price|25-50.2-5":1,
	"score|1-5":"★",
	"title":"@ctitle(8,14)",
	"description":"@cparagraph",
	"isLog|1":true,
	"friend|2-10":["小红","小吕"],
	"des|2":{"eye":1,"hand":2,"job":"teacher"},
	"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('200×200','')"
}]
})

mockjs语法规范

• 数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
  // 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value

• 注意：
  属性名 和 生成规则 之间用竖线 | 分隔。
  生成规则 是可选的。
  生成规则 有 7 种格式：
  'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
  属性值自动加 1，初始值为 number` ‘name|+step’: value

生成规则 的 含义 需要依赖 属性值的类型 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。