一种前端页面的树形组件的实现方法和装置与流程

专利检索2025-03-16  29


本申请涉及计算机,特别涉及一种前端页面的树形组件的实现方法、装置、计算设备和计算机可读存储介质。


背景技术:

1、在现有技术中,在实现后台系统的配置时多采用react、vue等技术实现树形组件,为了方便传输,树形组件的配置通常使用js的object或array封装,但这种方式对于树形组件中参数的结构没有有效的限制,这导致了开发和后期维护的难度;而且这些组件无法限制变量的类型,只有运行时才能发现数据侧的错误,对于没有充分的测试数据的环境,出现缺陷的概率较高;即使在在完成表单的填写后进行仔细检查,也会由于发送内容不透明,无法确认前端的内容如中文英文映射、传递参数的类型是等是否正确。


技术实现思路

1、有鉴于此,本申请实施例提供了一种前端页面的树形组件的实现方法、装置、计算设备和计算机可读存储介质,以解决现有技术中存在的技术缺陷。

2、根据本申请实施例的第一方面,提供了一种前端页面的树形组件的实现方法,包括:

3、获取前端页面需要的第一json对象;

4、将所述第一json对象转换为vue节点;

5、根据所述vue节点进行前端页面的树形组件渲染;

6、在提交表单前,将更新后的树形组件对应的vue节点转换为第二json对象并在所述前端页面进行预览显示。

7、根据本申请实施例的第二方面,提供了一种前端页面的树形组件的实现装置,包括:

8、获取单元,用于获取前端页面需要的第一json对象;

9、第一转换单元,用于将所述第一json对象转换为vue节点;

10、渲染单元,用于根据所述vue节点进行前端页面的树形组件渲染;

11、第二转换单元,用于在提交表单前,将更新后的树形组件对应的vue节点转换为第二json对象;

12、显示单元,用于在所述前端页面对第二json对象进行预览显示。

13、根据本申请实施例的第三方面,提供了一种计算设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机指令,所述处理器执行所述指令时实现所述基于上述前端页面的树形组件的实现方法的步骤。

14、根据本申请实施例的第四方面,提供了一种计算机可读存储介质,其存储有计算机指令,该指令被处理器执行时实现所述前端页面的树形组件的实现方法的步骤。

15、通过本申请的实施例,在获取后端的json对象后,不直接显示json数据,而是将其转换为vue节点,使用vue框架创建一个递归vue组件,能够支撑上百条子节点不卡顿,并使用typescript语言对vue节点的数据类型和格式进行约束,无需启动项目即可发现数据问题,通过完备的输入输出类型定义,始终保持了数据类型和格式的准确性,提高开发效率和代码质量,减少了测试压力;最后在进行表单提交时还通过实时预览功能对待提交的json对象进行实时预览,使得表单的操作透明,后台使用人员对于发送内容的准确性有更高信任度。



技术特征:

1.一种前端页面的树形组件的实现方法,其特征在于,包括:

2.根据权利要求1所述的方法,其中,所述将所述第一json对象转换为vue节点包括:

3.根据权利要求2所述的方法,其中,所述将所述第一json对象转换为vue节点还包括:

4.根据权利要求1所述的方法,其中,根据所述vue节点进行前端页面的树形组件渲染包括:

5.根据权利要求1所述的方法,其中,将更新后的树形组件对应的vue节点转换为第二json对象并在所述前端页面进行预览显示还包括:

6.根据权利要求1所述的方法,其中,每个第一和第二json对象均表示一个策略配置规则。

7.一种前端页面的树形组件的实现装置,其特征在于,包括:

8.一种计算设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机指令,其特征在于,所述处理器执行所述指令时实现权利要求1-6任意一项所述方法的步骤。

9.一种计算机可读存储介质,其存储有计算机指令,其特征在于,该指令被处理器执行时实现权利要求1-6任意一项所述方法的步骤。


技术总结
本申请提供一种前端页面的树形组件的实现方法、装置、计算设备和计算机可读存储介质,该方法在获取后端的JSON对象后,不直接显示JSON数据,而是将其转换为Vue节点,使用Vue框架创建一个递归Vue组件,并使用Typescript语言对Vue节点的数据类型和格式进行约束,无需启动项目即可发现数据问题,通过完备的输入输出类型定义,始终保持了数据类型和格式的准确性,提高开发效率和代码质量,减少了测试压力;最后在进行表单提交时还通过实时预览功能对待提交的JSON对象进行实时预览,使得表单的操作透明,用户对于发送内容的准确性有更高信任度。

技术研发人员:翟效杨,张洪保,安晓宇,郭子文,李建良,林逸,杨东,袁冠鹏,杨利华,乐坚强,何雨泉
受保护的技术使用者:在线途游(北京)科技有限公司
技术研发日:
技术公布日:2024/5/29
转载请注明原文地址:https://win.8miu.com/read-1151017.html

最新回复(0)