一、mock.js介绍
Mock.js 是一个用于生成随机数据，拦截 Ajax 请求的 JavaScript 库。它主要用于前后端分离开发时，模拟后端数据接口，使得前端开发者在不需要后端实际编写接口的情况下，也能进行开发、测试。
1、主要功能
生成随机数据：Mock.js 提供了丰富的 API 来生成各种类型的数据，如字符串、数字、图片、日期等，并且支持自定义模板来生成复杂的数据结构。
拦截 Ajax 请求：Mock.js 可以拦截前端发起的 Ajax 请求，并返回预设的模拟数据，这样前端就可以像调用真实接口一样进行开发。
数据模板：Mock.js 允许你定义数据模板，这些模板可以基于 JSON 格式，但增加了占位符和函数来生成随机数据。
2、使用场景
前后端分离开发：在前端工程师等待后端接口开发完成之前，可以使用 Mock.js 来模拟接口数据，保证开发进度不受影响。
测试：在自动化测试或单元测试中，使用 Mock.js 来模拟外部依赖（如数据库、网络请求等），提高测试的可靠性和速度。
原型开发：在快速原型开发阶段，使用 Mock.js 快速生成数据，展示界面效果。
二、安装
npm install mockjs
npm install axios 需要安装
安装成功后，node_modules下会有
三、简单应用案例
1、创建文件夹及文件
src \ mock \ index.js
2、src \ mock \ index.js 模拟接口
import Mock from 'mockjs';
// 定义模拟数据接口
Mock.mock('/api/user', 'get', {
code: 200,
message: 'success',
data: {
'id|1-100': 1,
'name': '@name',
'age|20-30': 25,
'gender|1': ['Male', 'Female'],
'email': '@email',
}
});
3、main.js 引入 mock
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import VueI18n from './language'
import './mock' // 引入 Mock.js 配置
createApp(App).use(VueI18n).mount('#app')
4、创建组件 src / components/UserInfo.vue
<template>
<div>
<h2>User Information</h2>
<div v-if="user">
<p>ID: {{ user.id }}</p>
<p>Name: {{ user.name }}</p>
<p>Age: {{ user.age }}</p>
<p>Gender: {{ user.gender }}</p>
<p>Email: {{ user.email }}</p>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
user: null
};
},
mounted() {
this.fetchUser();
},
methods: {
async fetchUser() {
try {
const response = await axios.get('/api/user');
this.user = response.data.data;
} catch (error) {
console.error('Failed to fetch user data:', error);
}
}
}
};
</script>
5、app.vue 加载组件
<template>
<UserInfo />
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import UserInfo from './components/UserInfo.vue';
</script>
控制台：npm run dev 运行
刷新，数据随机不同
四、数据生成规则
1 数字生成
你可以通过 Mock.js 生成各种范围和步长的数字：
const data = Mock.mock({
'number|1-100': 1, // 生成1到100之间的随机整数
'float|1-100.1-10': 1.1 // 生成1到100之间的随机浮点数，保留1到10位小数
});
console.log(data);
输出示例：
{
"number": 57,
"float": 83.231
}
2 字符串生成
mock.js 提供了丰富的字符串生成规则：
const data = Mock.mock({
'string|1-10': '★', // 重复生成1到10个'★'字符
'title': '@title', // 生成一个随机标题
'paragraph': '@paragraph', // 生成一个随机段落
'sentence': '@sentence' // 生成一个随机句子
});
console.log(data);
输出示例：
{
"string": "★★★★",
"title": "Laboris pariatur in.",
"paragraph": "Deserunt cillum minim...",
"sentence": "Id cupidatat ut."
}
3 布尔值生成
你可以生成随机布尔值：
const data = Mock.mock({
'boolean|1': true, // 生成一个布尔值（true 或 false）
'boolean2|1-2': true // 生成布尔值，true 的概率为 1/(1+1)
});
console.log(data);
输出示例：
{
"boolean": false,
"boolean2": true
}
4 对象生成
你可以使用 mock.js 生成包含随机属性的对象：
const data = Mock.mock({
'object|2': { // 从属性中随机选取2个属性
'name': '@name',
'age|20-30': 25,
'city': '@city',
'gender': '@boolean'
}
});
console.log(data);
输出示例：
{
"object": {
"name": "John Smith",
"age": 29
}
}
5 数组生成
mock.js 提供了生成随机数组的功能：
const data = Mock.mock({
'list|1-5': [{ // 生成1到5个元素的数组
'id|+1': 1, // id 从 1 开始递增
'name': '@name'
}]
});
console.log(data);
输出示例：
{
"list": [
{ "id": 1, "name": "John" },
{ "id": 2, "name": "Alice" }
]
}
6 时间生成
mock.js 也支持生成随机日期和时间：
const data = Mock.mock({
'date': '@date', // 生成随机日期
'time': '@time', // 生成随机时间
'datetime': '@datetime', // 生成随机日期时间
'now': '@now' // 生成当前时间
});
console.log(data);
输出示例：
{
"date": "2024-08-20",
"time": "14:22:16",
"datetime": "2024-08-20 14:22:16",
"now": "2024-08-20 14:22:16"
}
五. 拦截 AJAX 请求
1 模拟 GET 请求
你可以使用 Mock.mock() 拦截 GET 请求并返回模拟数据：
Mock.mock('/api/user', 'get', {
'id': 1,
'name': '@name',
'age|20-30': 25
});
fetch('/api/user')
.then(response => response.json())
.then(data => {
console.log(data);
});
输出示例：
{
"id": 1,
"name": "John Doe",
"age": 28
}
2 模拟 POST 请求
你也可以模拟 POST 请求：
Mock.mock('/api/user', 'post', (options) => {
const body = JSON.parse(options.body);
return {
id: body.id,
name: '@name',
age: '@integer(20,30)'
};
});
fetch('/api/user', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: 1 })
})
.then(response => response.json())
.then(data => {
console.log(data);
});
输出示例：
{
"id": 1,
"name": "Jane Doe",
"age": 23
}
3 使用正则表达式匹配路由
你可以使用正则表达式来匹配路由，模拟 RESTful 风格的接口：
Mock.mock(/\/api\/user\/\d+/, 'get', {
'id': '@id',
'name': '@name',
'age|20-30': 25
});
fetch('/api/user/123')
.then(response => response.json())
.then(data => {
console.log(data);
});
输出示例：
{
"id": 123,
"name": "John Smith",
"age": 25
}
