mock是什么
Mock生成随机数据,拦截Ajax 请求，前后端分离，让前端攻城师独立于后端进行开发。 增加单元测试的真实性 通过随机数据,模拟各种场景。
在实际开发过程中，前端是通过axios来请求数据的，很多时候前端开发者就是通过写固定的JSON数据来模拟数据，但是这个JSON是一个对象，没有经过数据请求的情况下直接使用，在后续的工作中要等到后端将API写好以后再进行对接API，而mock就是通过拦截真实的axios的请求来模拟数据，相当于通过mock写一个假的API，并直接拿来使用，前端开发人员是可以真实的写一个axios请求的。
简单来说，mock就是假的API。
（一）前提条件
vue项目已经进行了axios请求接口封装，可以正常的请求后端接口（我用的是登录接口测试是合适的）。
（二）安装
我使用的是vue的vite（Vue3的）框架。使用的依赖是以下两个依赖。
"vite-plugin-mock": "^2.9.6",
"mockjs": "^1.1.0",
（三）配置
vite.config.js 文件中引入并配置这个插件：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
plugins: [
vue(),
viteMockServe({
ignore: /^\_/,
mockPath: 'mock',
localEnabled: !isBuild,//表示是否在本地环境中启用Mock服务器。如果isBuild为false，则localEnabled为true，表示在本地环境中启用Mock服务器；反之亦然。
prodEnabled: isBuild,//表示是否在生产环境中启用Mock服务器。如果isBuild为true，则prodEnabled为true，表示在生产环境中启用Mock服务器；反之亦然。
injectCode: `
import { setupProdMockServer } from '../mock/_createProductionServer';
setupProdMockServer();
`,
}),
],
})
创建mock服务
其中**/mock/_createProductionServer**文件如下：
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
const modules = import.meta.glob('./**/*.ts', { eager: true });
const mockModules: any[] = [];
Object.keys(modules).forEach((key) => {
if (key.includes('/_')) {
return;
}
mockModules.push(...(modules as Recordable)[key].default);
});
/**
* Used in a production environment. Need to manually import all modules
*/
export function setupProdMockServer() {
createProdMockServer(mockModules);
}
（四）实例
1、在mock文件夹中的一个house.ts文件：
import { MockMethod } from 'vite-plugin-mock';
import { resultPageSuccess, resultSuccess, baseUrl } from '../_util';
const testList = (() => {
const result: any[] = [];
for (let index = 0; index < 40; index++) {
result.push({
id: index,
apartment: '@integer(1,4)',//公寓楼--字典
building: '@integer(1,10)',//栋数--字典
room: '@integer(1,32)' + '0' + '@integer(1,9)' + '-' + '@integer(1,6)',// 房间--string
type: '@integer(1,4)',//户型--字典
address: "@county(true)", // 地址--string
area: '@integer(15,90)',//面积--数字
status: '@integer(1,2)',// 入住状态--字典
matching: "@ctitle",//房屋配套---string
decorationTime: "@date(yyyy-MM-dd)", //装修时间--data
checkDate: "@date(yyyy-MM-dd)", // 预入住时间---data
rent: "@float(500,4000,0,2)",//租金---float
managerId: "admin",// 用户（公寓管理员）标识--用户列表中的username字段---根据实际情况定是否使用该字段
managerName: "@cname",//用户名称（公寓管理员）---后端根据用户标识匹配返回前端
pictureList: "@image", // 多张图片
remarks: "@ctitle", // 备注信息---富文本
identityCard: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,//身份证号码-----number
phone: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,//生成的符合正则表达式的字符串
identificationPhoto: "@image(35x50)", // 证件照--一张图片
});
}
return result;
})();
const info = (() => {
const result = {
id: 1,
apartment: '2',
building: '9',
room: '@integer(1,32)' + '0' + '@integer(1,9)' + '-' + '@integer(1,6)',
type: '4',
address: "@county(true)",
area: '@integer(15,90)',
status: '1',
matching: "@ctitle",
decorationTime: "@date(yyyy-MM-dd)",
checkDate: "@date(yyyy-MM-dd)",
rent: "@float(500,4000,0,2)",
managerId: "admin",
managerName: "@cname",
pictureList: "@image",
remarks: "@ctitle",
}
return result;
})();
export default [
{
url: `${baseUrl}/internetOfThings/getHouseList`,
timeout: 1000,
method: 'get',
response: ({ query }) => {
const { page = 1, pageSize = 20 } = query;
return resultPageSuccess(page, pageSize, testList);
},
},
{
url: `${baseUrl}/internetOfThings/getHouseInfo`,
timeout: 1000,
method: 'get',
response: () => {
return resultSuccess(info);
},
},
] as MockMethod[];
其中_util.ts文件：
export function resultSuccess<T = Recordable>(result: T, { message = 'ok' } = {}) {
return {
code: 0,
result,
message,
type: 'success',
};
}
export function resultPageSuccess<T = any>(
pageNo: number,
pageSize: number,
list: T[],
{ message = 'ok' } = {}
) {
const pageData = pagination(pageNo, pageSize, list);
return {
...resultSuccess({
records: pageData,
total: list.length,
}),
message,
};
}
export function resultError(message = 'Request failed', { code = -1, result = null } = {}) {
return {
code,
result,
message,
type: 'error',
};
}
export function pagination<T = any>(pageNo: number, pageSize: number, array: T[]): T[] {
const offset = (pageNo - 1) * Number(pageSize);
const ret =
offset + Number(pageSize) >= array.length
? array.slice(offset, array.length)
: array.slice(offset, offset + Number(pageSize));
return ret;
}
export interface requestParams {
method: string;
body: any;
headers?: { authorization?: string };
query: any;
}
/**
* @description 本函数用于从request数据中获取token，请根据项目的实际情况修改
*
*/
export function getRequestToken({ headers }: requestParams): string | undefined {
return headers?.authorization;
}
//TODO 接口父路径（写死不够灵活）
export const baseUrl = '/api/mock';
2、mock API书写
就像平时请求API的接口一样正常请求数据，defHttp 是封装好的axios请求封装好的函数，没有做其他操作。
import { defHttp } from '/@/utils/http/axios';
enum Api {
houseList = '/mock/internetOfThings/getHouseList',
houseInfo = '/mock/internetOfThings/getHouseInfo',
}
/**
* @description: 房源管理--列表
*/
export const getHouseList = (params) => {
// console.log(params,"API传参");
return defHttp.get({ url: Api.houseList, params });
}
/**
* 详情
* */
export const getHouseInfo = (id) => {
return defHttp.get({ url: Api.houseInfo, id });
}
3、API的实际使用
getHouseList(recordId.value).then((res) => {
console.log(res, '请求数据');
});
（五）效果
