mockjs宝典（前端必备）

mockjs简介

前端在开发时，如果后端接口还未及时输出时，我们可以使用mokjs来模拟API接口生成数据

mockjs特征

• 生成随机数据，模拟各种场景
• 拦截ajax请求

 

mockjs的安装

npm install mockjs

mockjs的使用

新建mock.js文件

 在main.js中导入

//导入mockjs
import '@/mock/mock.js'

 导入Mock

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

 mockjs使用实例

生成随机姓名

在新建的mock.js中

// 导入mockjs
import Mock from 'mockjs';
import qs from "qs"
// 拦截 接口地址/api/getData  拦截get方法
// 并返回数据
Mock.mock(/\api\/random/,function(options){
	var str=options.url.slice(options.url.indexOf("?")+1);
	var elem = qs.parse(str);
	console.log(elem)
	return Mock.mock({
		status:0,
		"list|10":[{
		name:"@cname",//随机中文名		
		}]
	})
})

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

<template>
	<div>
		<h1>mock数据</h1>
		<div v-for="item in list" :key="item.id">
			<p>{{item.name}}</p>
		</div>
	</div>
</template>

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

<style>
</style>

 运行结果为：

 属性名 和 生成规则 之间用竖线 | 分隔。

 生成规则格式：
‘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
‘name|+step’: value
完整代码：

// 导入mockjs
import Mock from 'mockjs';
import qs from "qs"
// 拦截 接口地址/api/getData  拦截get方法
// 并返回数据
Mock.mock(/\api\/random/,function(options){
	var str=options.url.slice(options.url.indexOf("?")+1);
	var elem = qs.parse(str);
	console.log(elem)
	return Mock.mock({
		status:0,
		"list|10":[{
		name:"@cname",//随机中文名
		"age|1-200":1,//生成1-200的随机数
		"price|200-500.2-5":1,//生成小数
		"star|1-5":"★",
		"chart|2":"我爱我的祖国",
		"love|1":true,//随机布尔值
		"girl|2":["小红","小张","小白"],//随机数组（1随机1个，2复制2分）
		"wife":{"h|190":1,"w":45,"weight|85-130":1,"money|1000-9999":1},//对象
		"aprice":function(){return this.price+this.name},//函数
		"tel":/1\d{10}/,
		"pic":function(){return Mock.Random.dataImage('200x100',this.nama)},
		"date":"@date('yyy/MM/dd')",
		"time":Mock.Random.time(),
		"pdate":"@datetime()",
		"now":"@now()",
		"des":"@cparagraph(1,3)",
		"keyword":"@cword(3,5)",
		"title":"@ctitle(5,12)",
		
		}]
	})
})

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

 

<template>
	<div>
		<h1>mock数据</h1>
		<div v-for="item in list" :key="item.id">
			<p>{{item.name}}</p>
			<p>{{item.des}}</p>
			<p>{{item.title}}</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=聪&age=18")
	.then(res=>{
		console.log(res.data,"random")
		list.value=res.data.list;
	})
	
	
	request.get("/api/getData")
	.then(res=>{
		console.log("mockdata",res.data);
	})
	
</script>

<style>
</style>

 浏览器运行结果：