一种UI前端生成方法及装置制造方法及图纸

本发明专利技术提供了一种UI前端生成方法及装置，包括：根据用户选择的UI布局构建空白的多维链表；当多维链表中的节点发生更新事件时，从多维链表的头部开始遍历并判断多维链表中所有链头的类型；当链头的类型为Y型时，在多维链表中当前编辑组件的VUE文件中插入标签并将当前编辑组件整合至UI页面中；根据用户设置的接口调用数据及属性设置数据分别生成请求脚本及组件属性，并将请求脚本与组件属性中的动作属性进行绑定；遍历组件属性并根据遍历结果生成UI文件。通过本申请简化了UI前端开发的难度且使得组件可以被重复利用。

【技术实现步骤摘要】
一种UI前端生成方法及装置
本申请属于计算机
，具体地讲，涉及一种UI前端生成方法及装置。
技术介绍
目前主流的UI前端开发方式为：通过文本类型的编辑器，编写html、css、vue、jsp等代码文件以此构成整个UI前端页面。每一次对UI前端页面的修改都需要对其代码进行阅读与调整，此种方式需要UI前端开发人员对前端领域有较为深入的了解，存在较高的准入门槛。同时页面代码修改后需要对其进行编译运行才可以知道效果，大大限制了开发的效率。上述UI前端开发方式所使用的文本类型编辑器，需要掌握一定的UI前端代码开发知识，有较高的技术准入门槛，并且所有界面的开发以及修改都需要前端开发人员直接对代码文件进行修改。而在UI前端开发中，往往会存在复用某些界面效果的情况，对UI前端开发人员来说，这是一个复制代码的过程，且需要检查复制代码块在该项目中的运行情况并据此对代码进行修改。为降低UI前端开发的准入门槛，提高相似功能或相似模块的复用率，提高UI前端开发的效率，前端可视化是比较大的方向。业界已有的可视化前端开发工具主要有三类：一类是仅能对样式(即cs本文档来自技高网...

【技术保护点】
1.一种UI前端生成方法，其特征在于，包括：/n根据用户选择的UI布局构建空白的多维链表；所述多维链表中的节点用于放置组件；/n当所述多维链表中的节点发生更新事件时，从所述多维链表的头部开始遍历并筛选所述多维链表中所有链头类型为Y型的链头，将当前编辑的组件整合至UI页面后根据用户设置的接口调用数据及属性设置数据分别生成请求脚本及组件属性；/n将所述请求脚本与所述组件属性中的动作属性进行绑定；/n遍历所述组件属性并根据遍历结果生成UI文件。/n

【技术特征摘要】
1.一种UI前端生成方法，其特征在于，包括：
根据用户选择的UI布局构建空白的多维链表；所述多维链表中的节点用于放置组件；
当所述多维链表中的节点发生更新事件时，从所述多维链表的头部开始遍历并筛选所述多维链表中所有链头类型为Y型的链头，将当前编辑的组件整合至UI页面后根据用户设置的接口调用数据及属性设置数据分别生成请求脚本及组件属性；
将所述请求脚本与所述组件属性中的动作属性进行绑定；
遍历所述组件属性并根据遍历结果生成UI文件。


2.根据权利要求1所述的UI前端生成方法，其特征在于，所述将所述当前编辑组件整合至UI页面中，包括：
在当前编辑组件所在的链表的第一个节点的组件标签中声明引入该当前编辑组件；
获取当前编辑组件的依赖关系并缓存以使所述当前编辑组件进入UI页面。


3.根据权利要求1所述的UI前端生成方法，其特征在于，所述根据用户设置的接口调用数据及属性设置数据分别生成请求脚本及组件属性，包括：
根据所述接口调用数据中的变量命名的结构生成请求脚本；
根据用户输入的属性设置数据生成样式属性、动作属性及状态关联属性，并将所述样式属性、所述动作属性及所述状态关联属性与所述当前编辑组件进行绑定并生成依赖关系。


4.根据权利要求1所述的UI前端生成方法，其特征在于，还包括：
实时监听当前编辑组件的编辑焦点，当所述编辑焦点丢失时，解锁所述当前编辑组件的编辑状态。


5.一种UI前端生成装置，其特征在于，包括：
多维链表创建单元，用于根据用户选择的UI布局构建空白的多维链表；所述多维链表中的节点用于放置组件；
遍历单元，用于当所述多维链表中的节点发生更新事件时，从所述多...

【专利技术属性】
技术研发人员：潘俊峰，沈思思，杨槟，丘威，
申请(专利权)人：中国工商银行股份有限公司，
类型：发明
国别省市：北京;11