淳安县住房和城乡建设局网站,深圳优化服务,在线广告,深圳网站建设网络mock是什么
Mock生成随机数据,拦截Ajax 请求#xff0c;前后端分离#xff0c;让前端攻城师独立于后端进行开发。 增加单元测试的真实性 通过随机数据,模拟各种场景。 在实际开发过程中#xff0c;前端是通过axios来请求数据的#xff0c;很多时候前端开发者就是通过写固定…mock是什么
Mock生成随机数据,拦截Ajax 请求前后端分离让前端攻城师独立于后端进行开发。 增加单元测试的真实性 通过随机数据,模拟各种场景。 在实际开发过程中前端是通过axios来请求数据的很多时候前端开发者就是通过写固定的JSON数据来模拟数据但是这个JSON是一个对象没有经过数据请求的情况下直接使用在后续的工作中要等到后端将API写好以后再进行对接API而mock就是通过拦截真实的axios的请求来模拟数据相当于通过mock写一个假的API并直接拿来使用前端开发人员是可以真实的写一个axios请求的。 简单来说mock就是假的API。
一前提条件
vue项目已经进行了axios请求接口封装可以正常的请求后端接口我用的是登录接口测试是合适的。
二安装
我使用的是vue的viteVue3的框架。使用的依赖是以下两个依赖。
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-mockexport 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 resultSuccessT Recordable(result: T, { message ok } {}) {return {code: 0,result,message,type: success,};
}export function resultPageSuccessT 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 paginationT 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, 请求数据);});五效果
