mockjs

---

一、定义及作用：

1.拦截ajax
2. 生成伪随机数据

当前端开发 程序员写好了接口文档,没有实现接口文档,先自己造数据，模拟后端，开发前端的功能
等待后端接口做好，和后端联调，更改baseURL实现切换接口服务器。

二、安装及使用

1、安装

npm i mockjs -D

2、使用

1. 定义mock.js文件

2. 在main.js 导入

import ‘@/mock/mock.js’

3. 导入 mock

import Mock from ‘mockjs’

三、方法

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

实例：

1.mock.js

// 导入mockjs
import Mock from 'mockjs';
import qs from 'qs'
// 拦截 接口地址/api/getData  拦截get方法
// 并返回数据
Mock.mock("/api/getData", "get", function() {
	return {
		"name": "shangwu",
		"age": 18
	}
})
//定义数据
Mock.mock(/\/api\/random/, function(options) {
	// console.log(options,"options");
	var str = options.url.slice(options.url.indexOf("?") + 1);
	var elem = qs.parse(str);
	// 获取问号后面内容
	console.log(str);
	return Mock.mock({
		status: 0,
		name: elem.name,
		"list|10": [{//10条数据
			"id|+1": 1234,
			"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份）,
			"bodyDate": {
				"h|150-190": 1,
				"weight|85-150": 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":Mock.Random.time(),
			"pdate":"@datetime()",
			"now":"@now()",
			"des":"@cparagraph(1,3)",
			"keyword":"@cword(3,5)",
			"title":"@ctitle(5,12)",
			"url":"@url()",
			"@email":/[a-z]{8,12}@\.(126|163|qq)\.(com|cn|org)/,
			"ip":"@ip",
			"add":"@county(true)"
		}]
	})
})

2.MockView.vue

<template>
	<div class="mock">
		<h1>mock数据</h1>
		<div v-for="item in list" :key="item.id">
			<p><b>姓名：</b>{{item.name}}</p>
			<p><b>住址：</b>{{item.add}}</p>
			<p><b>ip：</b>{{item.ip}}</p>
			<p><b>关键词：</b>{{item.keyword}}</p>
			<p><b>标题：</b>{{item.title}}</p>
			<p><b>段落：</b>{{item.des}}</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>