---

前言

当前端开发程序员写好了接口文档，后端还没有实现接口时，可以先自己造数据,模拟后端，继续前端开发。本文介绍了模拟数据的一个工具：mock.js

---

一、Mock.js是什么？

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

二、使用步骤

1.安装

npm i mockjs -D

2.使用

定义mock.js

        新建mock文件夹 mock.js

在main.js导入：

import '@/mock/mock.js'

在mock.js中导入Mock

import Mock from 'mockjs';

 三、方法

 Mock的三种写法：

Mock(url,method,data)

//mock.js
Mock.mock("/api/getData", "get", function(options) {
	return {
		"name": "mewow",
		"age": 18
	}
})

//MockView.vue
request.get("/api/getData").then(res => {
    console.log("mock", res.data);
})

Mock(url,data)

//mock.js
Mock.mock("/api/getData2", {
	"name": "mewow",
	"age": 18
})

//MockView.vue
request.get("/api/getData2").then(res => {
    console.log("mock2", res.data);
})

Mock(url,method,function(options){
    return {data数据}
})

mock.js中的url接收正则写法，再截取url，利用qs.js可将字符串转为对象，获取url中的属性

//mock.js
Mock.mock(/\/api\/getData3/, "get", function(options) {
	var str = options.url.slice(options.url.indexOf("?") + 1);
	var elem = qs.parse(str)
	return {
		"name": elem.name,
		"age": elem.age
	};
})

//MockView.vue
request.get("/api/getData3?name=mewow&age=18").then(res => {
    console.log("mock3", res.data);
})

 三种写法的运行结果：

 四、mock.js常用数据模板

//mock.js
import Mock from 'mockjs';
import qs from "qs"
Mock.mock(/\/api\/random/, function(options) {
	var str = options.url.slice(options.url.indexOf("?") + 1);
	var elem = qs.parse(str)
	return Mock.mock({
		status: 0,
		"ename": elem.name,
		"list|10": [{
			"id|+1": 1234,//id 从1234累加
			"name": "@cname",//随机中文姓名
			"age|1-200": 1,//1-200间的随机整数
			"price|200-500.2-5": 1,//200-500间 随机2-5位小数
			"star|1-5": "★",//随机1-5个★
			"chart|2": "hello",//字符串重复两次
			"love|1": true,//随机布尔值
			"arr|1": ["a", "b", "c", "d"],//随机数组中的一项
			"obj": {
				"h|150-165": 1,
				"weight|85-120": 1,
				"money|1000-9999": 1
			},
			"aprice": function() {//随机数值拼接
				return this.price + this.name
			},
			"tel": /1\d{10}/,//可接收正则
			"pic": function() {//随机演示图片
				return Mock.Random.dataImage('200x100', this.name)
			},
			"date": "@date(yyyy/MM/dd)",//随机日期
			"time": "@time", //Mock.Random.time()//随机时间
			"pdate": "@datetime()",//随机日期和时间
			"now": "@now()",//当前日期和时间
			"das": "@cparagraph(1, 3)",//随机一段话
			"keyword": "@cword(3, 5)",//随机2-5个子
			"email": /[\w\d]{8,12}\@(126|163|qq)\.(com|cn|org)/,//正则 邮箱格式
			"ip": "@ip()",//随机ip
			"address": "@county(true)"//随机省市区
		}]
	})
})

<!--MockView.vue-->
<template>
	<div>
		<h1>mock</h1>
		<div v-for="item in list" :key="item.id">
			<!-- <p>{{item.name}}</p>
			{{item.date}}-{{item.time}}
			<p>{{item.pdate}}</p>
			<p>{{item.now}}</p>
			<p>{{item.das}}</p>
			<p>{{item.keyword}}</p> -->
			<p>{{item.email}}</p>
			<p>{{item.ip}}</p>
			<p>{{item.address}}</p>
			<img :src="item.pic" alt="">
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import request from "@/utils/request.js"
	const list = ref([]);
	request.get("/api/random?name=wei&age=18").then(res => {
		console.log("random", res.data);		
		list.value = res.data.list;
	})
</script>

<style>
</style>

运行结果：

注意事项：

"arr|1": ["a", "b", "c", "d"]  指数组中随机一个

"arr|2": ["a", "b", "c", "d"]  指数组重复两遍

---

 

总结

利用mockjs，可以自定义高仿真数据，在后端接口没实现前完善前端。等后端接口做好,和后端联调,更改baseURL即可实现切换接口服务器。提高开发效率