前言
当前端开发程序员写好了接口文档，后端还没有实现接口时，可以先自己造数据,模拟后端，继续前端开发。本文介绍了模拟数据的一个工具：mock.js
一、Mock.js是什么？
生成随机数据，拦截 Ajax 请求
二、使用步骤
1.安装
npm i mockjs -D2.使用
定义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即可实现切换接口服务器。提高开发效率