CN111949267B

CN111949267B - 一种ui前端生成方法及装置

Info

Publication number: CN111949267B
Application number: CN202010821333.6A
Authority: CN
Inventors: 潘俊峰; 沈思思; 杨槟; 丘威
Original assignee: Industrial and Commercial Bank of China Ltd ICBC
Current assignee: Industrial and Commercial Bank of China Ltd ICBC
Priority date: 2020-08-14
Filing date: 2020-08-14
Publication date: 2023-09-22
Anticipated expiration: 2040-08-14
Also published as: CN111949267A

Abstract

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

Description

一种UI前端生成方法及装置

技术领域

本申请属于计算机技术领域，具体地讲，涉及一种UI前端生成方法及装置。

背景技术

目前主流的UI前端开发方式为：通过文本类型的编辑器，编写html、css、vue、jsp等代码文件以此构成整个UI前端页面。每一次对UI前端页面的修改都需要对其代码进行阅读与调整，此种方式需要UI前端开发人员对前端领域有较为深入的了解，存在较高的准入门槛。同时页面代码修改后需要对其进行编译运行才可以知道效果，大大限制了开发的效率。上述UI前端开发方式所使用的文本类型编辑器，需要掌握一定的UI前端代码开发知识，有较高的技术准入门槛，并且所有界面的开发以及修改都需要前端开发人员直接对代码文件进行修改。而在UI前端开发中，往往会存在复用某些界面效果的情况，对UI前端开发人员来说，这是一个复制代码的过程，且需要检查复制代码块在该项目中的运行情况并据此对代码进行修改。为降低UI前端开发的准入门槛，提高相似功能或相似模块的复用率，提高UI前端开发的效率，前端可视化是比较大的方向。

业界已有的可视化前端开发工具主要有三类：一类是仅能对样式(即css)进行调整，不生成代码；另一类能生成代码片段；还有一类能够直接生成完整的软件程序。第一类可视化前端开发工具，属于单向修改工具，即用户修改代码后，通过该工具能够实时看到页面效果，可以针对页面样式进行微调，但无法通过调整页面来自动修改代码。而第二类前端开发工具，能够通过拖拽的形式，将一些简单组件转化成代码片段，其缺陷在于仍需使用人员关注代码生成的质量，对简单组件进行调整时需要了解代码片段的含义。而且这类开发工具的组件库所提供常用的简单组件，无法满足项目复杂的功能，同时代码片段间缺乏关联性，需要用户关注和补充。对于最后一类可视化前端开发工具，能够通过拖曳组件绘制页面、设置简单页面跳转后生成一系列完整的UI页面，该类工具所生成的程序文件，已经能够初步使用在项目中，但其功能较为单一且死板，往往只能应用在宣传、数据统计等低用户交互页面的项目中，在复杂功能项目中仅仅只能作为页面设计稿或DEMO参考。以上这三类可视化前端开发工具所存在的缺陷，前端可视化的不成熟，导致业界仍以文本类编辑工具编写代码开发UI前端页面为主流。

发明内容

本申请提供了一种UI前端生成方法及装置，以至少解决现有技术中缺乏可视化的前端开发工具以及需要具备基本编程能力才可进行前端开发的问题。

根据本申请的一个方面，提供了一种UI前端生成方法，包括：根据用户选择的UI布局构建空白的多维链表；

当多维链表中的节点发生更新事件时，从多维链表的头部开始遍历并判断多维链表中所有链头的类型；

当链头的类型为Y型时，在多维链表中当前编辑组件的VUE文件中插入标签并将当前编辑组件整合至UI页面中；

根据用户设置的接口调用数据及属性设置数据分别生成请求脚本及组件属性，并将请求脚本与组件属性中的动作属性进行绑定；

遍历组件属性并根据遍历结果生成UI文件。

在一实施例中，将当前编辑组件整合至UI页面中，包括：

在当前编辑组件所在的链表的第一个节点的组件标签中声明引入该当前编辑组件；

获取当前编辑组件的依赖关系并缓存以使当前编辑组件进入UI页面。

在一实施例中，根据用户设置的接口调用数据及属性设置数据分别生成请求脚本及组件属性，包括：

根据接口调用数据中的变量命名的结构生成请求脚本；

根据用户输入的属性设置数据生成样式属性、动作属性及状态关联属性，并将样式属性、动作属性及状态关联属性与当前编辑组件进行绑定并生成依赖关系。

在一实施例中，UI前端生成方法还包括：

实时监听当前编辑组件的编辑焦点，当编辑焦点丢失时，解锁当前编辑组件的编辑状态。

根据本申请的另一方面，还提供了一种UI前端生成装置包括：

多维链表创建单元，用于根据用户选择的UI布局构建空白的多维链表；

遍历单元，用于当多维链表中的节点发生更新事件时，从多维链表的头部开始遍历并判断多维链表中所有链头的类型；

组件整合单元，用于当链头的类型为Y型时，在多维链表中当前编辑组件的VUE文件中插入标签并将当前编辑组件整合至UI页面中；

生成及绑定单元，用于根据用户设置的接口调用数据及属性设置数据分别生成请求脚本及组件属性，并将请求脚本与组件属性中的动作属性进行绑定；

UI生成单元，用于遍历组件属性并根据遍历结果生成UI文件。

在一实施例中，组件整合单元包括：

声明引入模块，用于在当前编辑组件所在的链表的第一个节点的组件标签中声明引入该当前编辑组件；

依赖关系缓存模块，用于获取当前编辑组件的依赖关系并缓存以使当前编辑组件进入UI页面。

在一实施例中，生成及绑定单元包括：

请求脚本生成模块，用于根据接口调用数据中的变量命名的结构生成请求脚本；

属性生成模块，用于根据用户输入的属性设置数据生成样式属性、动作属性及状态关联属性，并将样式属性、动作属性及状态关联属性与当前编辑组件进行绑定并生成依赖关系。

在一实施例中，UI前端生成装置还包括：

编辑解锁单元，用于实时监听当前编辑组件的编辑焦点，当编辑焦点丢失时，解锁当前编辑组件的编辑状态。

本申请提供了可视化前端开发工具的组件库，由组件库提供常用的组件及组件所配套的功能，用户通过拖拽组件即可实现开发整个页面，还可以通过拖拽连线的方式连接组件或在属性表中配置调整方式、设置组件间的依赖关系或跳转、弹出等简单逻辑。通过本申请提供的方法能够简化UI前端的开发难度，减少项目的沟通成本，同时可视化和组件化的开发方式也避免了对相似页面的重复开发的问题。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请提供的一种UI前端生成方法流程图。

图2为本申请实施例中将当前编辑组件整合至UI页面中的方法流程图。

图3为本申请实施例中请求脚本及组件属性生成方法流程图。

图4为本申请实施例中UI前端开发工具的结构框图。

图5为本申请实施例中界面模块的结构框图。

图6为本申请实施例中总体界面的示意图。

图7为本申请实施例中的一具体实施例示意图。

图8为本申请实施例中的一具体实施例示意图。

图9为本申请实施例中的一具体实施例示意图。

图10为本申请提供的一种UI前端生成装置结构框图。

图11为本申请实施例中组件整合单元的结构框图。

图12为本申请实施例中生成及绑定单元的结构框图。

图13为本申请实施例中一种电子设备的具体实施方式。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

目前，由于可视化前端开发工具存在缺陷，前端可视化工具发展不成熟，导致业界仍以文本类编辑工具编写代码开发UI前端页面为主流，但是这就要求UI前端开发人员具备一定的编程基础，并且，通过编写代码开发UI前端页面还具有重复开发的问题。

基于上述现有技术中存在的问题，本申请提供了一种UI前端生成方法，如图1所示，包括：

S101：根据用户选择的UI布局构建空白的多维链表。

在一具体实施例中，用户首先创建一个新页面或新组建，在未开始进行页面编辑时，系统会生成一个vue文件，含有以上<template>、<style>、<script>三个标签。同时布局模块会构建一条空的链表，此时组件是整个页面对象，是容纳其他组件或元素的容器。用户可以根据自己的需求，设定布局为几行几列，在该阶段预渲染模块会根据用户所选的布局模板进行初始化设置，形成一条二维甚至多维的空链表。

S102：当多维链表中的节点发生更新事件时，从多维链表的头部开始遍历并判断多维链表中所有链头的类型。

在一具体实施例中，用户每从组件库中拖拽一个组件到布局编辑区时，被拖拽的组件就会按照拖拽时被释放的位置填充到步骤A中生成的链表相应位置中。当系统检测到链表节点有更新时，从链表的头部开始重新遍历。首先判断链头的类型，如果是z链链头，则表示这是一个多层的页面或组件。如果是一个x链链头，则表示这个一个单层的页面或组件。例如，当用户拖拽了一个输入框组件到布局编辑区并释放，该输入框组件被插入到链表中。系统检测到了链表的节点变化，开始遍历。

S103：当链头的类型为Y型时，在多维链表中当前编辑组件的VUE文件中插入标签并将当前编辑组件整合至UI页面中。

在一具体实施例中，当系统检测到了链表的节点变化开始遍历该链表并判断链头的类型，如果是z链链头，则表示这是一个多层的页面或组件。如果是一个x链链头，则表示这个一个单层的页面或组件。用户拖拽了一个输入框组件到布局编辑区并释放，该输入框组件被插入到链表中。系统检测到了链表的节点变化，开始遍历。当前节点是x链链头，是一个单层页面，继续往下一个节点扫描，发现当前节点是一个y链的链头，则在目前编辑的组件的vue文件的<template>标签中插入一个标签<div id＝”row1”></div>，然后记录该标签在目前遍历x链中的位置，同时从y链链头开始向y链链尾继续遍历。此时扫描的y链的第一个节点存在组件元素，将在<script>标签中声明引入被拖曳的组件,如引入名为inputField的输入框时，在<script>标签中插入：

import inputField from'../../components/inputField

同时在刚刚创建的<div id＝”row1”></div>中插入名为<inputField/>的标签。如果该输入框组件引用了共享数据，那么将该共享数据纳入管理。该输入框原依赖关系也会纳入到依赖管理体系中。至此，被拖曳组件已经整合进页面之中，完成了引用组件库中组件的动作。

S104：根据用户设置的接口调用数据及属性设置数据分别生成请求脚本及组件属性，并将请求脚本与组件属性中的动作属性进行绑定。

在一具体实施例中，组件属性包括组件样式属性、组件动作属性以及组件状态关联属性等。

S105：遍历组件属性并根据遍历结果生成UI文件。

在一具体是实施例中，文件生成模块根据预渲染模块中所生成的数据信息，由链头开始遍历生成组件结构代码，样式属性代码，动作属性代码，状态关联属性代码，最后生成一系列文件或者项目文件。同时如果该组件或页面具备复用性，则可以选择上传至组件库。该组件或页面的<template>、<style>、<script>三对标签的内容以及共享数据模型中的变量即会上传至服务器中，同时登记该组件的相关信息。

在一实施例中，将当前编辑组件整合至UI页面中，如图2所示，包括：

S201：在当前编辑组件所在的链表的第一个节点的组件标签中声明引入该当前编辑组件。

在一具体实施例中，当发现当前节点是一个y链的链头，则在目前编辑的组件的vue文件的<template>标签中插入一个标签<div id＝”row1”></div>，布局管理模块记录记录在目前遍历x链中的位置同时从y链链头开始向y链链尾继续遍历。此时扫描的y链的第一个节点存在组件元素，将在<script>标签中声明引入被拖曳的组件,如引入名为inputField的输入框时，在<script>标签中插入：import inputField from'../../components/inputField完成声明，同时在刚刚创建的<div id＝”row1”></div>中插入名为<inputField/>的标签。

S202：获取当前编辑组件的依赖关系并缓存以使当前编辑组件进入UI页面。

在一具体实施例中，数据模型管理模块会将该共享数据纳入管理。该输入框原依赖关系也会纳入到依赖管理模块中。至此，被拖曳组件已经整合进页面之中，完成了引用组件库中组件的动作。

在一实施例中，根据用户设置的接口调用数据及属性设置数据分别生成请求脚本及组件属性，如图3所示，包括：

S301：根据接口调用数据中的变量命名的结构生成请求脚本。

在一具体实施例中，调用接口工具中将调用模块的方式转化成表单的形式，更容易用户填写。如下表：

用户只需要填写表格，接口管理模块就会根据表格中变量命名的结构生成一个请求脚本。

S302：根据用户输入的属性设置数据生成样式属性、动作属性及状态关联属性，并将样式属性、动作属性及状态关联属性与当前编辑组件进行绑定并生成依赖关系。

在一具体实施例中，设置组件样式属性具体包括如下步骤：

属性编辑区监听用户输入的数据，以key和value的对照关系如：“高度：20像素”，“宽度40像素”形成组件的css样式：height:20px，width:40px。设置的样式仅对该组件生效。当前组件下的子组件或元素可选择继承当前组件的相同样式属性。同时在依赖管理模块中会形成如下关系：组件A-〉(绑定)样式属性1。系统获取组件A的id，并且根据该关系将该样式属性1种的css样式在<style>标签中插入:

#组件A的id{

height:20px；

width:40px；

}

如果需要将该样式属性1绑定给组件B，只需调整其连线即可，系统检测到关系的变化时，根据前后关系列表的对比，判断该关系新增、调整还是删除，然后修改<style>中标签的内容，将组件A的id替换为组件B的id，如:

#组件B的id{

height:20px；

width:40px；

}。

在一具体实施例中，设置组件动作属性的步骤具体包括：

用户可以在属性编辑区进行设置，使监听单元监听如下事件或事件组：鼠标点击(x次),如鼠标1秒内点击组件A2次执行动作FunC:

<组件A@click＝“FunA”/>

function FunA(FunC){

if((this.clickTime-this.lastClickTime)<1000){

this.num++；

}else{

this.num＝0；

}

if(this.num＝＝x){

FunC()；

}

鼠标进入组件区域执行FunC，如鼠标进入组件A执行FcunC：

<组件A@focus＝“FunA”/>

function FunA(FunC){

FunC()；

}

鼠标离开组件区域，如鼠标离开组件A时执行FunC：

<组件A@blur＝“FunA”/>

function FunA(FunC){

FunC()；

}

数据模型变化，如变量A变化时执行FunC：

通过顺序控制单元设置动作属性(组)的执行顺序：从上一动作开始时开始、从上一动作完成时开始。通过延时控制单元设置动作属性延时时长。设置动作内容单元储存触发后需要完成的动作。由以上监听单元、顺序控制单元、延时控制单元、动作内容单元联动构成一整个触发事件链。整个触发动作的流程为：触发事件+(执行顺序+延时控制+动作内容)乘以X次。

首先用一个对象event存储事件；event.order为执行顺序，0值时从上一个动作开始时开始，1值时从上一动作完成时开始；event.delay为延时控制，值为毫秒数；event.content为动作内容：

如“点击1次+上一个动作完成后开始+不延时+隐藏组件A”，即当用户点击该组件一次后，组件A会立即隐藏。

首先在<template>标签中对应的组件A标签会增加@click和v-show的属性

<组件A@click＝“FunA”v-show＝”showStatus”/>

然后在<script>标签中的method域中增加以下方法：

function FunA(FunC){

FunC()；

}

function FunC(){

var event＝{order:1,delay:0,content:FunD}

}

Function FunD(){

this.showStatus＝false；

}

其中动作内容可以在属性编辑区中选择默认但不限于隐藏组件、显示组件等工作内容。还可选择执行自定义的脚本，并将开发提供的脚本复制到自定义处，即填充到FunD中。同时在依赖管理模块中会形成如下关系：组件A-〉(绑定)动作属性1。如果需要将该动作属性1绑定给组件B，只需修改其连线即可。用户也可以通过在组件库中拖曳某种功能组件(仅含有动作单元的组件，不含样式单元、状态单元等其他单元)到组件B的区域中，组件B即会与该功能组件产生绑定的关系，拥有该功能组件的动作单元包含但不限于：监听该区域内焦点(鼠标或手指触碰屏幕时的位置)的移动轨迹为向左，则触发返回功能。

在一具体实施例中，设置组件状态关联属性包括：

用户通过连线的方式，可将组件动作属性中的变量或方法与其他组件动作属性中的变量或方法建立关系，此种关系会记录到依赖管理模块6中。用户将组件A中的变量f和组件B中的变量h连接数据模型管理模块5中的共享变量c，表明组件A中的变量f和组件B中的变量h随数据模型管理模块5中的共享变量c变化。组件B中的动作c与组件A中的变量e相连，表明组件A中的变量e变化时会触发组件B中的动作。

将动作属性与S301生成的请求脚本绑定，将页面、数据、数据操作分离，与现有工具相比，无需用户生成页面后额外编写调用接口的代码。其原理为：

a.首先获取表单中的请求地址并转化成url变量:var url＝”http://www.xxx.cn”；

b.然后遍历表单中的输入部分。根据输入的变量名称列，初始化请求接口的入参。如：

var params＝{}

params.a＝””

params.b＝””

c.再根据变量值列对相应的变量进行赋值，如果需要上送数据模型管理模块中的共享变量，则可以通过this.的方式获取，如果是固定值则上送用户在表单中填写的值。

params.a＝this.a；

params.b＝”nihao”；

d.解析输出部分，根据输出的变量名称解析response接口返回数据data修改变量值列中的变量,最终数据模型管理模块中的共享变量得到了改变。

var tempValue＝response.data.c；

this.$store.commit(“e”,tempValue)；

e.其最终生成的代码封装进动作属性中:

function actionA(){

var url＝”http://www.xxx.cn”；

params.a＝this.a；

params.b＝”nihao”；

api.get(url,params).then(function(response){

var tempValue＝reaponse.data.c；

this.$store.commit(“e”,tempValue)；

})

}

在一实施例中，UI前端生成方法还包括：

在一具体实施例中，根据生成的数据信息，由链头开始遍历生成组件结构代码，样式属性代码，动作属性代码，状态关联属性代码，最后生成一系列文件或者项目文件。同时如果该组件或页面具备复用性，则可以选择上传至组件库。该组件或页面的<template>、<style>、<script>三对标签的内容以及共享数据模型中的变量立即上传至服务器中，同时登记该组件的相关信息。

该系统在协同模块的作用下支持多人协同编辑：前端与前端协同，前端与后台(数据)协同。多用户首先需要在同一项目组中才具备协同编辑的权限，陌生用户可通过向项目负责人申请以获得协同编辑的权限。前端与前端协同，即多人编辑单页面或多页面时，协同模块会锁定组件单元，防止多用户同时修改同一组件，当组件单元失去编辑焦点时，该组件单元即被解锁，允许其他用户进行编辑，同时获取数据模型管理模块中共享变量、依赖管理模块中的依赖关系数据并打上时间戳，系统上传以上数据到服务器中，对比多用户间数据变化并合并其修改。前端与后台(数据)协同，用户在接口管理模块的支持下，填写表格中各项信息后，一个包含请求地址和请求内容结构的接口调用则已经完成，后台开发可通过表格的方式导入虚拟请求返回的案例。例如案例1：a>3且b＝1时，返回c＝5

案例2：a小于2时，返回c＝0

系统通过对比页面发出的请求地址与虚拟请求的请求地址，如果地址匹配则拦截请求，以案例中的逻辑进行判断，返回对应的案例结果，如对一个或多个输入参数的值进行大小判断:

if(a>3&&b＝＝1){

var data＝{c:5}

}else if(b<2){

var data＝{c:0}

}

return data；

如果地址不匹配则向原请求地址发出调用请求。通过此种方式，前端不依赖于后台数据返回，达到用户使用该系统时前端后台完全分离开发的模式。

基于上述方法，本申请提供了一种适用于该方法的UI前端开发工具系统及方法结构框架图，如图4所示，包括界面模块1、预渲染模块2、文件生成模块3、组件库4、数据模型管理模块5、依赖管理模块6、接口管理模块7、协同模块8。

界面模块1负责提供给用户一个可视化的界面以及交互方式，其主要包含四个单元如图5：工具栏单元11、布局编辑区12、组件选择区13、属性编辑区14。在工具栏单元11中提供常用的操作按钮如新建、撤销、保存、页面设置等。布局编辑区12作为界面模块1的主体部分，需要监听用户的操作行为：当用户从组件选择区13中拖曳组件至布局编辑区12时，监听鼠标释放的位置并根据位置计算出组件在页面中的位置。组件选择区13提供组件库4的实体展示。属性编辑区14将组件的属性的以可视化的形式暴露出来并提供界面设置的方法。其总体界面如图6所示。

预渲染模块2在用户新建页面时，通过vue-cli脚手架构建项目框架。然后将用户的实时操作结果转化成数据信息，同时根据该数据信息生成代码并解析编译运行在云服务器中，用户可以通过访问链接的方式在各种电脑手机等机器的浏览器中实时的看到编辑的真实效果，无需手工部署。

文件生成模块3根据预渲染模块2中的数据信息生成文件或者项目文件；组件库4内置有各种常见的组件，组件库包含组件单元41描述组件的功能、存储单元42用于存储自定义的组件，同步单元43用于上传自定义组件至服务器的组件数据库中，同时可以下载同步服务器中其他用户创建的自定义组件。每个组件都有其配套的组件动作属性单元、组件样式属性单元、状态关联属性单元和布局管理单元。组件单元是整个页面的基本组成，由此，一个页面可以是一个组件，也可以是多个组件组合或是嵌套而成。在业内常见的形式，一个页面往往分成css文件、html或jsp类页面结构文件、js文件这三类文件，其功能分别为元素样式和页面的表达控制、页面元素和结构控制、动作和事件控制。从这个维度来看，各组件间的界限难以区分，组件间耦合性极强。本发明强调组件独立的概念，每个组件可单独从页面抽离出来。而在本系统中，一个组件单元对应一个vue文件，vue中主要由三对标签组成：<template>、<style>、<script>。

<template>标签受布局管理单元管理，该标签中主要定义组件含有什么元素及组件的结构。在新建组件时，即会创建一个含有一个空元素的一维链表。当用户在绘画组件时，系统会依据元素数量和元素布局对该链表进行扩展。如图7所示，当用户往组件A增加输入框<input/>基本元素，该链表即将输入框<input/>作为节点填充进链表中。如图8所示，当用户横向添加关闭按钮<button/>基本元素时，该链表分出y1链扩展成二维链表，将删除按钮<button/>作为节点填充进y1链中。如图9所示，当用户纵向添加确认按钮<button/>基本元素时，该链表在x1链中将确认按钮<button/>作为节点填充进x1链中。当用户绘制弹出窗口时，该链表将扩展z链，并将原x1链作为第一个节点填充进z链中，同时以确认框生成一个新二维x2链作为第二个节点填充进z链中，由此形成了该组件的三维结构。

使用到的行为动作定义在methods域中，以便组件内元素可以关联该方法，如：

定义方法后，用户设置点击按钮执行getUrl方法，系统将在<template>中找到用户所设置的源，然后为该源绑定事件getUrl，<button v-on:click＝”getUrl”/>。

组件内部数据及行为与外部数据的关系定义在computed和watch中，如当数据模型管理模块5中数据url变化时，当前组件会监听到变化同时执行指定的逻辑：

基于同一发明构思，本申请实施例还提供了一种UI前端生成装置，可以用于实现上述实施例中所描述的方法，如下面实施例所述。由于该UI前端生成装置解决问题的原理与UI前端生成方法相似，因此UI前端生成装置的实施可以参见UI前端生成方法的实施，重复之处不再赘述。以下所使用的，术语“单元”或者“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的系统较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

根据本申请的另一方面，如图10所示，还提供了一种UI前端生成装置包括：

多维链表创建单元1001，用于根据用户选择的UI布局构建空白的多维链表；

遍历单元1002，用于当多维链表中的节点发生更新事件时，从多维链表的头部开始遍历并判断多维链表中所有链头的类型；

组件整合单元1003，用于当链头的类型为Y型时，在多维链表中当前编辑组件的VUE文件中插入标签并将当前编辑组件整合至UI页面中；

生成及绑定单元1004，用于根据用户设置的接口调用数据及属性设置数据分别生成请求脚本及组件属性，并将请求脚本与组件属性中的动作属性进行绑定；

UI生成单元1005，用于遍历组件属性并根据遍历结果生成UI文件。

在一实施例中，如图11所示，组件整合单元1003包括：

声明引入模块1101，用于在当前编辑组件所在的链表的第一个节点的组件标签中声明引入该当前编辑组件；

依赖关系缓存模块1102，用于获取当前编辑组件的依赖关系并缓存以使当前编辑组件进入UI页面。

在一实施例中，如图12所示，生成及绑定单元1004包括：

请求脚本生成模块1201，用于根据接口调用数据中的变量命名的结构生成请求脚本；

属性生成模块1202，用于根据用户输入的属性设置数据生成样式属性、动作属性及状态关联属性，并将样式属性、动作属性及状态关联属性与当前编辑组件进行绑定并生成依赖关系。

在一实施例中，UI前端生成装置还包括：

本申请提供的UI生成方法及装置的优点在于：首先，其降低了UI前端开发的门槛，能够为业务人员、设计师、前端开发人员、中后端开发人员等多种角色提供前端开发能力，通过拖曳式开发页面，用户不需要关注代码层面，由页面的实现转移为页面的展示效果和动作效果是否符合业务或服务，即关注结果隐藏实现过程；其次，克服了目前主流编辑器单向修改的缺点，能够通过直接调整页面的方式达到修改页面显示或功能的效果，无需手工修改代码，在代码层面降低组件间的关联性，提升组件的特性及功能，具备低耦合高内聚的优点，用户可以自由组合、自定义web前端页面的编辑制作，能够满足更多样化的业务需求页面；相比其他前端可视化开发工具组件只能完成组件内交互的缺陷，本系统提供组件间交互，其事件链能完成复杂的用户交互，使整个前端页面具有完整性和多功能性。同时，用户历史创建的组件或页面加入组件库中，可以通过上传到服务器的方式，分享给其他用户，克服了其他前端可视化开发工具提供的组件功能单一、样式单一的缺陷。通过本申请提供的方法及装置，组件、页面复用性高，实现了页面开发效率的提升，减少重复性工作。

本发明中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

本申请的实施例还提供能够实现上述实施例中的方法中全部步骤的一种电子设备的具体实施方式，参见图13，所述电子设备具体包括如下内容：

处理器(processor)1301、内存1302、通信接口(Communications Interface)1303、总线1304和非易失性存储器1305；

其中，所述处理器1301、内存1302、通信接口1303通过所述总线1304完成相互间的通信；

所述处理器1301用于调用所述内存1302和非易失性存储器1305中的计算机程序，所述处理器执行所述计算机程序时实现上述实施例中的方法中的全部步骤，例如，所述处理器执行所述计算机程序时实现下述步骤：

S101：根据用户选择的UI布局构建空白的多维链表。

S105：遍历组件属性并根据遍历结果生成UI文件。

本申请的实施例还提供能够实现上述实施例中的方法中全部步骤的一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中的方法的全部步骤，例如，所述处理器执行所述计算机程序时实现下述步骤：

S101：根据用户选择的UI布局构建空白的多维链表。

S105：遍历组件属性并根据遍历结果生成UI文件。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于硬件+程序类实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。虽然本说明书实施例提供了如实施例或流程图所述的方法操作步骤，但基于常规或者无创造性的手段可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的装置或终端产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境，甚至为分布式数据处理环境)。术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、产品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、产品或者设备所固有的要素。在没有更多限制的情况下，并不排除在包括所述要素的过程、方法、产品或者设备中还存在另外的相同或等同要素。为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本说明书实施例时可以把各模块的功能在同一个或多个软件和/或硬件中实现，也可以将实现同一功能的模块由多个子模块或子单元的组合实现等。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

本领域技术人员应明白，本说明书的实施例可提供为方法、系统或计算机程序产品。因此，本说明书实施例可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本说明书实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本说明书实施例的至少一个实施例或示例中。

在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。以上所述仅为本说明书实施例的实施例而已，并不用于限制本说明书实施例。对于本领域技术人员来说，本说明书实施例可以有各种更改和变化。凡在本说明书实施例的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本说明书实施例的权利要求范围之内。

Claims

1.一种UI前端生成方法，其特征在于，包括：

根据用户选择的UI布局构建空白的多维链表；所述多维链表的节点用于放置组件；用户每从组件库中拖拽一个组件到布局编辑区时，被拖拽的组件就会按照拖拽时被释放的位置填充到链表相应位置中；

当所述多维链表中的节点发生更新事件时，从所述多维链表的头部开始遍历并筛选所述多维链表中所有链头类型为Y型链的链头，在多维链表中当前编辑组件的VUE文件中插入标签，并将当前编辑组件整合至UI页面后根据用户设置的接口调用数据及属性设置数据分别生成请求脚本及组件属性；

将所述请求脚本与所述组件属性中的动作属性进行绑定；

遍历所述组件属性并根据遍历结果生成UI文件。

2.根据权利要求1所述的UI前端生成方法，其特征在于，所述将所述当前编辑组件整合至UI页面中，包括：

获取当前编辑组件的依赖关系并缓存以使所述当前编辑组件进入UI页面。

3.根据权利要求1所述的UI前端生成方法，其特征在于，所述根据用户设置的接口调用数据及属性设置数据分别生成请求脚本及组件属性，包括：

根据所述接口调用数据中的变量命名的结构生成请求脚本；

根据用户输入的属性设置数据生成样式属性、动作属性及状态关联属性，并将所述样式属性、所述动作属性及所述状态关联属性与所述当前编辑组件进行绑定并生成依赖关系。

4.根据权利要求1所述的UI前端生成方法，其特征在于，还包括：

实时监听当前编辑组件的编辑焦点，当所述编辑焦点丢失时，解锁所述当前编辑组件的编辑状态。

5.一种UI前端生成装置，其特征在于，包括：

多维链表创建单元，用于根据用户选择的UI布局构建空白的多维链表；所述多维链表的节点用于放置组件；用户每从组件库中拖拽一个组件到布局编辑区时，被拖拽的组件就会按照拖拽时被释放的位置填充到链表相应位置中；

遍历单元，用于当所述多维链表中的节点发生更新事件时，从所述多维链表的头部开始遍历并筛选所述多维链表中所有链头类型为Y型链的链头，在多维链表中当前编辑组件的VUE文件中插入标签，并将当前编辑组件整合至UI页面后根据用户设置的接口调用数据及属性设置数据分别生成请求脚本及组件属性；

组件整合绑定单元，用于将所述请求脚本与所述组件属性中的动作属性进行绑定；

UI生成单元，用于遍历所述组件属性并根据遍历结果生成UI文件。

6.根据权利要求5所述的UI前端生成装置，其特征在于，所述组件整合绑定单元包括：

依赖关系缓存模块，用于获取当前编辑组件的依赖关系并缓存以使所述当前编辑组件进入UI页面。

7.根据权利要求5所述的UI前端生成装置，其特征在于，所述组件整合绑定单元还包括：

请求脚本生成模块，用于根据所述接口调用数据中的变量命名的结构生成请求脚本；

属性生成模块，用于根据用户输入的属性设置数据生成样式属性、动作属性及状态关联属性，并将所述样式属性、所述动作属性及所述状态关联属性与所述当前编辑组件进行绑定并生成依赖关系。

8.根据权利要求5所述的UI前端生成装置，其特征在于，还包括：

编辑解锁单元，用于实时监听当前编辑组件的编辑焦点，当所述编辑焦点丢失时，解锁所述当前编辑组件的编辑状态。

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至4中任意一项所述UI前端生成方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至4中任一项所述UI前端生成方法。