mockjs自定义拓展-树形结构数据

最新推荐文章于 2023-08-02 18:26:57 发布

请叫我峻禾欧巴

最新推荐文章于 2023-08-02 18:26:57 发布

阅读量663

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_39361781/article/details/129008886

版权

文章介绍了如何使用Mockjs进行接口拦截，以便在前后端开发进度不一时，前端能独立调试。重点讲解了自定义函数treeCallback，该函数能生成具有多层级的树形结构数据，用于模拟接口返回。文章提供了具体的代码示例，包括如何注册到Mockjs中以及如何调用使用。

摘要由CSDN通过智能技术生成

由于前后端那开发进度不一致的，时常需要是mockjs进行接口拦截，方便前端独立进行功能调试。某些场景下需要mock出多层级的树形结构数据，在此记录一下mockjs自定义拓展生成树形结构的代码，方便之后使用

import Mock from 'mockjs'

// 自定义拓展
/**
 * 生成多层tree结构的列表数据
 * @param template Mockjs数据模板
 * @param number {?number} 一级树结构的数量
 * @param max {?number} 最深层级数量
 * @param min {?number} 最浅层级数量
 */
function treeCallback(template, number: number = 5, max: number = 3, min: number = 0) {
	let treeNodeList: any = []
	let index = 0
	while (index < (Math.round(Math.random() * number) || 1)) {
		// 随机一个子项有几个层级
		const len = Math.round(Math.random() * (max - min)) + min
		// 造一个临时数据
		const tempTemplate = { ...template }
		// 如果随机到有子项，插入一条子项，数量是1-随机最大值
		if (len) {
			tempTemplate[`children|1-${Math.round(Math.random() * number)}`] = treeCallback(template, 1, len - 1)
		} else {
			tempTemplate['children'] = []
		}

		treeNodeList[index++] = tempTemplate
	}
	return treeNodeList
}

// 注册到mockjs内
Mock.Random.extend({
	diyTreeNode: treeCallback,
})

使用方式

const getTreeList = () => {
	return Mock.mock({
		code: 200,
		message: '',
		body: Mock.Random.diyTreeNode({
			id: '@id', 
			name: '@cname',
			parentId: '@id', 
		}),
	})
}
Mock.mock(/\/get\/tree\/list/, 'post', getTreeList)