前后端分离，使用MOCK进行数据模拟开发，让前端攻城师独立于后端进行开发

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)',// 房间--stringtype: '@integer(1,4)',//户型--字典address: "@county(true)", // 地址--stringarea: '@integer(15,90)',//面积--数字status: '@integer(1,2)',// 入住状态--字典matching: "@ctitle",//房屋配套---stringdecorationTime: "@date(yyyy-MM-dd)", //装修时间--datacheckDate: "@date(yyyy-MM-dd)", // 预入住时间---datarent: "@float(500,4000,0,2)",//租金---floatmanagerId: "admin",// 用户（公寓管理员）标识--用户列表中的username字段---根据实际情况定是否使用该字段managerName: "@cname",//用户名称（公寓管理员）---后端根据用户标识匹配返回前端pictureList: "@image", // 多张图片remarks: "@ctitle", // 备注信息---富文本identityCard: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,//身份证号码-----numberphone: /^(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, '请求数据');});

（五）效果