mockjs详细介绍

一，什么是mockjs？

官网: https://github.com/nuysoft/Mock/wiki/Getting-Started

二，为什么要使用mockjs

在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口,.使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查

三，优点

1.前后端分离，
2.可随机生成大量的数据
3.在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可。

四，mockjs的使用

1，首先要进行mockjs的安装，cd到我们的项目目录下，然后输入下面的指令

npm i mockjs -D  //安装mockjs

2，回到我们项目的main.js文件下

import './utils/mock.js' //导入mock.js

3，在我们的utils文件夹下面新建一个mock.js文件，专门存放我们的mock模拟数据

4，在我们的mock.js文件下面，首先要将mock.js导入进来

import Mock from 'mockjs'; //导入mock.js文件

五，mockjs可模拟的数据类型有很多，比如：数字，字符串，数组，对象，下面就让我们简单了了解一下这些数据类型是如何进行模拟的

1.在mock.js文件中

//拦截ajax生成伪数据
Mock.mock("/\/v5\list/", {  //正则匹配地址,和下面get请求的地址保持一致
	name: "mumu",
	age: 18
})

2.然后来到我们所需要的.vue文件中，在created声明周期中请求我们生成的伪数据

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

Mock.mock(/\/v5\/user/, {
			code: 0,
			msg: '成功',
			"data|10": [{
			//生成随机id
				"id|+1": 1024,
				//随机生成名字
				"name": "@cname",
				//随机生成1-100之间的任意一个数
				"age|1-100": 1,
				//随机生成一个小数，小数点后面有2-5位
				"price|25-50.2-5": 1,
				//随机生成1-5颗星
				"score|1-5": "*",
				//随机生成8-14个文字
				"title": "@ctitle(8,14)",
				//随机生成一行段落
				"description": "@cparagraph",
				//随机生成一个对象
				"des|2": {
					"eye": 1,
					"hand": 2,
					"job": "teacher"
				},
				//随机生成一个带有正则的电话号码
				"tel": /1\d{10}/,
				//随机生成一个邮箱
				"email": /[a-z]{2,6}@(126|163|qq)\.(com|cn|net)/,
				//根据随机生成的age值返回一个布尔类型
				"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','')"
			}],
			}

		)

生成这些数据之后，我们来到.vue文件中进行数据请求

created(){
			request.post("/v5/user").then(res=>{
				console.log("随机",res.data)
				this.list=res.data.data
			}).catch(err=>{
			console.log("网络错误")}
			)
		}

然后运行我们的文件，可以在控制台看到我们请求的模拟数据，然后就可以将这些伪数据渲染到我们的页面中了！

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