一.Mock.js简介

1. mock.js是什么？

   mock.js是基于node平台的一款生成随机数据的资源包，因此需要在node环境下安装以及使用它，我们通过操作mock指令完成对数据的增删改查，是前后端分离过程中前端的比较优秀的模拟API的工具。

2. mock.js有什么用？

   在后端接口（API）尚未完成之前，前端制作的“假数据”或者写死的数据时使用，并在接口文档拟定之后切换成真实数据组，完成页面的相互交互效果以及对程序性能的相关测试。

3. mockjs的作用

   生成随机数据，拦截Ajax请求

二.使用Mock.js

1.安装

npm i mockjs -D

2.创建

创建一个mockjs文件并导入使用

import Mock from 'mockjs'  //导入mockjs
Mock.mock(url,data) //url 模拟请求网址 ，data 模拟数据

3.main.js导入

import '@/utils/mock'/

4.使用

import request from "@/utils/request"; //导入封装好的request

 created() { 
 request
      .get("/v5/list")  // uel 获取你创建的模拟数据
      .then((res) => {   
        console.log("模拟数据", res.data);//data模拟数据
      })
      .catch((err) => {
        console.log(err);
      });
}

Mockjs使用

// 导入mockjs
import Mock from 'mockjs'
// 随即数据
Mock.mock(/\/v5\/user/, {
	code: 0,
	msg: "成功",
	"data|10": [{
		"name": "@cname",
		"age|1-100": 1,
		"price|25-100": 1, //单价
		"scroce|1-15": "#", //符号
		"title": "@ctitle(8,14)", //标题  8-14
		"description": "@cparagraph", //段落
		"isLog|1-2": true, //布尔值  1-2从小到大
		"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('200x100','')"
	}]

})

// post参数，option前端请的数据
// option.url请求的地址
// option.type请求的方式
// option.body请求的自参数（需要JSON.parase转对象）
// post请求不带参数
Mock.mock(/\/v5\/item/, "post", {
	code: 0,
	msg: "成功",
	data: [1, 2, 3, 4]
})
// post请求带参数  option前端请求的数据
Mock.mock(/\/v5\/jok/, "post", function(option) {
	return {
		code: 0,
		msg: "成功",
		data: {
			title: "信息标题",
			content: "内容",
			...JSON.parse(option.body) //转为json格式  body是请求回来的参数
		}
	}
})

// Mock.mock("http://abc.com/v5/list", {
// 	name: "mm",
// 	age: 18
// })

// 拦截Ajax  生成数据 拦截地址
// 只要网络皮跑到这个正则就会拦截
Mock.mock(/\/v5\/list/, {
	name: "mm",
	age: 18
})