CN109710250A - 一种用于构建用户界面的可视化引擎***及方法 - Google Patents

Abstract

本发明提供了一种用于构建用户界面的可视化引擎***及方法，可视化引擎***，包括模板设置模块、java标签类库模块、数据存储模块、可视化引擎模块、网页生成模块，在可视化引擎模块中进行模板文件与数据属性字段的替换后通过网页生成网页，通过本***及方法，网页设计师能够采用本可视化引擎独立完成修改、重建用户界面的工作，解决了开发人员人工重复编写HTML脚本、网页构建或者修改的效率低的问题。

Description

一种用于构建用户界面的可视化引擎***及方法

技术领域

本发明属于用户界面构建领域，特别涉及一种用于构建用户界面的可视化引擎***及方法。

背景技术

B2B电商是较为典型的WEB的交互式***，通常采用MVC模式的体系架构来实现电商***中的人—机交互。MVC即模型(model)－视图(view)－控制器(controller)，分别对应该架构***中的视图层、模型层和控制层，每一层有特定的功能，负责特定的任务。模型层表示业务数据和业务逻辑/操作，负责业务数据的访问和修改，同时提供访问接口供控制层调用；视图层表现模型的内容，它从模型层得到数据并且指定这些数据任意被显示，同时将客户输入转交给控制层；控制层定义***的行为，它分配客户的请求并且选着适合的视图显示给客户，判定客户的输入，把输入匹配到在模型层进行的适当操作。

MVC模式应用在B2B电商***中，可以构建用户界面框架，在用户界面框架中根据用户输入需求导航到多个页面进行数据显示、根据用户操作进行多次业务请求等。现有的B2B电商***需要开发人员(java程序员)在设定用户界面时编写HTML脚本，实现用户界面的交互功能。而从开发人员(java程序员)中分离出(HTML设计师)在对页面的样式进行更新或者修改时，需要开发人员人工重复编写HTML脚本，导致网页设计师难以独立完成网页修改等工作，网页构建或者修改的效率降低。

发明内容

针对上述问题，本发明提供了一种用于构建用户界面的可视化引擎。

一种用于构建用户界面的可视化引擎***，包括模板设置模块、java标签类库模块、数据存储模块、可视化引擎模块和网页生成模块，所述模板设置模块和所述数据存储模块均与所述可视化引擎模块相连接，所述可视化引擎模块与所述网页生成模块相连接；

模板设置模块，用于编写、存储用户界面呈现效果的模板文件；

java标签类库模块，用于提供模板文件编写用的各类标签；

数据存储模块，用于储存、更改各种模板文件相对应的业务数据；

可视化引擎模块，用于获取模板文件和数据模型中的数据，并将在数据模型中数据的属性字段值替换到模板文件中；

网页生成模块，用于解析替换后的模板文件进行网页生成，并且将生成的网页缓存后输出。

进一步地，所述模板设置模块包括模板生成单元和模板存储单元；

模板生成单元，用于输入自定义的网页内容和调用java标签类库中的标签代码，生成模板文件；

模板存储单元，将生成后的模板文件进行存储。

进一步地，所述模板文件由HTML语言、占位符表达式和java标签库中的标签组成。

进一步地，所述java标签类库包括权限控制标签、字符安全过滤标签、自动生成分页操作标签、字符串格式转换标签。

进一步地，所述可视化引擎模块包括调用单元、匹配单元、替换单元和传输单元；

调用单元，用于调用模板设置模块中储存的模板文件；

匹配单元，用于获取模板文件中的变量名字段，并在数据模型中匹配与变量名字段对应的数据类型；

替换单元，用于表达数据类型，接收输入数据类型中的数据属性字段，并将获取到的属性字段替换到对应的模板文件中；

传输单元，将替换后的模板文件传输给网页生成模块。

进一步地，所述匹配单元采用JSTL解析模板文件中含有java标签类库中的标签，再依据java标签反射调用java函数的逻辑技术来匹配数据存储模块中的数据类型。

进一步地，所述网页生成模块包括缓存单元和输出单元；

缓存单元，对接收可视化引擎模块传输的模板文件进行解析后生成网页样式，并且对生成的网页样式进行缓存；

输出单元，将缓存完成的网页样式进行输出。

进一步地，所述缓存单元采用开源框架ehcache的方式进行网页缓存。

一种利用上述可视化引擎***构建用户界面的方法，包括：

在模板设置模块内引用java标签类库中的标签编写构建用户界面的模板文件，将编写好的模板文件储存；

在数据存储模块内建立与不同模板文件相匹配的数据模型；

可视化引擎模块调用获取模板文件、匹配与模板文件对应的数据类型、获取即时输入到数据类型中的数据属性字段，将匹配的属性字段替换到模板文件中，形成确定的模板文件；

网页生成模块会解析确定的模板文件生成网页，输出生成的网页。

本发明的可视化引擎***能够基于网页设计师编写好的的模板在数据模型中的数据发生变化时能够动态生成用户可访问页面，无需开发人员重复编写页面脚本；网页设计师能够采用本可视化引擎独立完成修改、重建用户界面的工作，无需面对复杂的逻辑，有效提高网页构建的效率；本可视化引擎支持自定义java标签类库，便于可视化引擎的应用更加方便快捷。本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在说明书、权利要求书以及附图中所指出的结构来实现和获得。

附图说明

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

图1示出了本发明实施例可视化引擎***的结构图；

图2示出了根据本发明实施例的可视化引擎***构建网页顶部欢迎模块的工作流程图；

图3示出了利用可视化引擎构建用户页面的流程示意图。

具体实施方式

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

本发明提供了一种用于构建用户界面的可视化引擎***，如图1所示，包括模板设置模块、java标签类库模块、数据存储模块、可视化引擎模块和网页生成模块，模板设置模块与java标签类库模块相连接，java标签类库模块与可视化引擎模块相连接，模板设置模块和数据存储模块均与可视化引擎模块相连接，可视化引擎模块与网页生成模块相连接。

具体的，模板设置模块包括模板生成单元和模板存储单元，模板生成单元与模板存储单元相连接。

模板生成单元，模板生成单元与java标签类库相连接，用于调用java标签类库中的标签编辑模板文件。

模板文件由HTML语言、占位符表达式和java标签库中的标签组成，采用HTML语言(超文本标记语言)该种通用性较广的语言进行表达，既便于不同的使用者编辑也便于可视化引擎模块的识别；占位符表达式中包括用于表达用户界面数据类型的变量名，如：${变量名}格式的表达式，采用占位符表达式可以将网页中需要修改的数据在模板文件中进行占位，在数据确定后即可直接表达，java标签类库中的标签符能够使模板文件具有固定的功能如：换行、日期显示等。

模板存储单元，用于储存在模板生成单元中编辑好的模板文件。

模板设置模块的工作流程为:开发人员在模板生成单元中使用HTML语言、输入含“变量名”的占位符表达式、在java标签类库中调用所需要的标签进行组成形成模板文件，将设置好的模板文件储存在模板储存单元。

java标签类库模块，用于实现JSTL标签库的扩展，JSTL是一个不断完善的开放源代码的JSP标签库，运行在支持JSP1.2等规范容器上。java标签类库是根据网页设计师修改网页框架的需求，在JSTL标签库中调用常用的源代码，并且根据网页功能需要将一些源代码进行组合或者补充扩展形成扩展后的源代码，确保适合网页内容。将这些常用的源代码和扩展后的源代码进行归类即形成符合网页设计师使用要求的java标签类库；

java标签类库模块与可视化引擎模块相连接，java标签类库中的内容会依据可视化引擎模块的运行情况进行调整，由开发人员补充可视化引擎模块运行需要的标签、对原有的标签进行更新替换和删除可视化引擎模块难以读取或者不使用的标签，实现利用本实施例可视化引擎模块对java标签类库进行更新升级。

java标签类库的设置实现网页设计师不需要面对JSTL标签库中的复杂逻辑，能够快速找到所需标签程序。

java标签类库包括权限控制标签库、字符安全过滤标签库、自动生成分页操作标签库、字符串格式转换标签库等电商***中常用的标签库。

权限控制标签库中的标签用于识别使用本引擎的用户是否符合权限要求，符合权限的会需要权限的加载HTML元素片段显示，如：用户只有查看权限就不加载”<buttomvalue＝””添加/>”HTML元素，若有操作权限就加载button HTML元素。

字符安全过滤标签库中的标签，对将不符合java标签类库要求的字符，进行过滤，避免不符合要求的字符应用到网页上引起页面显示异常、防XSS(跨站脚本)攻击等异常情况，确保在java标签类库调用源代码进行编辑的过程中即可发现该异常字符，提醒网页设计师及时更正。

自动生成分页操作标签库中的标签，调用该种标签代码，可以帮助网页设计师实现网页自动分页的功能，实现上一页、当前页和下一页能够顺利转换。

字符串格式转换标签库中的标签，调用该种标签代码，可以实现不同种格式字符串的相互转换，如：可以将字符串转化为日期格式，用于在网页中自动显示当前日期和时间。

数据存储模块，包括用户界面设计中需要用到的多种数据类型，这些数据类型来源于电商***各个业务模块在***数据库中读取数据进行业务处理的过程中经常使用到的数据，由开发工程师进行整理。将不同的数据类型封装到电商***的java model即模型层中，形成本实施例可视化引擎的数据模型。电商***中展示在网页上的业务模块有：商品搜索模块、广告展示模块、商品分类模块等其他业务模块，依据这些业务模块中的数据形成搜索类型数据、展示类型数据等多种数据类型。

可视化引擎模块包括调用单元、匹配单元、替换单元和传输单元。

调用单元与模板设置模块中的模板存储单元相连接，用于调用网页设计师需要的模板文件，并将模板文件传输给分析单元。

匹配单元分别与调用单元和数据存储模块相连接，用于接收、分析单元传输的模板文件，获取模板文件中占位符表达式中变量名的字段名，依据字段名在数据存储模块匹配与字段名相符的数据类型，并将数据类型传输给替换单元。

替换单元与调用单元相连接，替换单元接收到调用单元传输的数据类型后，将该数据类型表达展示，网页设计师可在数据类型的表达式中输入页面构建所需要的数据属性字段，输入完毕后，替换单元获取该数据属性字段，并将模板文件中的占位符表达式整个替换掉，形成确定的模板文件。

传输单元与替换单元相连接，接收替换单元传输的确定模板文件，并将确定的模板件传输给网页生成模块。

可视化引擎模块采用JSTL解析模板文件中用到的java标签类库中的标签获取变量名字段后，再通过java Class进行反射调用java标签类库中java函数的逻辑技术处理模板文件中的字段名在数据存储模块中匹配数据类型。

占位符表达式为“${变量名}”例，可视化引擎模块的工作流程为：可视化引擎模块接收到模板设置模块传输的“网页名${变量名}”模板文件后，通过JSTL标签库的解析功能解析出来自java标签类库的标签获取变量名字段，再采用反射调用Java函数的逻辑技术获取与“${变量名}”对应的数据类型后，由网页设计师输入确定的属性字段，再将属性字段对“${变量名}”进行替换得到确定的模板文件，如：调用“网页名+${变量名}”的模板文件经过匹配、替换后得到“网页名+属性字段”确定的模板文件。

网页生成模块包括缓存单元和输出单元。

缓存单元与可视化引擎模块中的传输单元相连接，用于接收传输单元传输的确定模板文件，接收到确定模板文件后，缓存单元会调用电商***中的java IO即java输入输出***进行初始化读取接收到的模板内容，在读取过程中同样采用JSTL解析方式处理java输入输出***接收到的模板内容，依据模板内容生成页面样式，将页面样式进行缓存。

缓存单元采用开源框架ehcache方式，ehcache为一个纯Java的进程内缓存框架，具有快速、精干等特点，提高缓存单元对模板内容的缓存读取速度，将解析后生成的网页缓存在ehcache框架内。

输出单元会将缓存过的网页输出到电商***中形成用户可以点击的动态页面，由于缓存单元会一直缓存有当前未修改的网页样式，因此在运行本可视化引擎***时，输出单元会先请求访问缓存单元的ehcache缓存框架内是否新的网页，若存在则直接输出；若访问到ehcache内不存在新的网页，则继续输出未修改的网页，同时等待经过可视化引擎模块处理后生成新的网页后缓存在ehcache框架中，再直接输出。

本实施例可视化引擎的在开发阶段，中前端即网页设计师需要根据修改网页的效果图编写输入到模板设置模块内的HTLM模板文件，后端即Java程序员会根据电商***中的业务模块进行数据收集，建立包含不同数据类型的数据存储模块。本实施例可视化引擎工作时会获取所需的HTML模板文件内容和数据存储模块中具体的数据属性字段进行占位符解析编译处理，输出最终用户可访问动态页面内容。

如图2所示，以构建网页顶部的欢迎模块为例，具体展示本实施例可视化引擎***的工作流程。

网页设计师会采用HTML语言编辑HTML模板文件，若网页名为同徽，对网页顶部的欢迎模块，进行模板编辑，得到自定义的模板文件为：

<html>

…

同徽${name}

…

</html>

将改模板文件储存在模板设置模块中。

网页设计师需要构建网页顶部时，使用本可视化引擎***时，先通过可视化引擎模块调出该模板，可视化引擎模块会分析获取到模板文件中“${name}”，在数据存储模块中检索与name匹配的数据类型后，进行显示如下：model.setName(“”)，网页设计师会会在括号内输入确定的属性字段“欢迎您”，形成model.setName(“欢迎您”)格式，输入完毕后，可视化引擎模块会获取“欢迎您”并与模板中的“${name}”进行整个替换，得到一个固定的页面模板：

<html>

…

同徽欢迎您

…

</html>

可视化引擎模块会将整合好的网页固定模板传输给网页生成单元，网页生成单元同样采用JSTL解析对模板进行解析，读取模板中的内容，并且将模板进行缓存后直接生成“同辉欢迎您”的网页样式，实现对网页样式的修改。

由于后端的java工程师在数据存储模块中存储数据类型，网页设计师只需要编写HTML模板文件，输入到本实施例的可视化引擎***中，通过本实施例的可视化引擎***进行调用数据模型后，输入变化的数据属性字段，再通过本可视化引擎***转换即可得到改变后的网页，实现在网页修改过程中避免java工程师重复编写脚本文件，减少网页构建、修改的步骤，提高了网页设计师的工作效率。

本发明还包括一种利用可视化引擎构建用户界面框架的方法，包括以下步骤：

步骤一：在模板设置模块内编写构建用户界面的模板文件；

前端网页设计师采用HTML语言根据修改内容和调用java标签类库中的源代码编写模板文件，模板文件依据网页展示效果和网页修改内容进行编写。

步骤二：在数据存储模块内建立与模板文件相匹配的数据模型；

后端java工程师会收集电商***各业务模块用到网页端的数据类型，将这些数据类型封装到javamodel中形成含有不同数据类型的数据存储模块。

步骤三：可视化引擎模块会获取所需的模板文件和数据存储模块中的属性字段并将字段名替换为属性字段，形成确定的模板文件；

网页设计师通过可视化引擎模块调用所需的模板文件，可视化引擎模块先采用JSTL解析技术解析读取模板文件中用到java标签类库的内容后获取模板文件中的变量名字段，再匹配过程根据解析到的java标签类库内容进行反射调用java函数的逻辑技术在数据存储模块中匹配到数据类型，由网页设计师输入确定的属性字段，再获取属性字段与变量名字段进行替换，得到确定的模板文件。

步骤五：网页生成模块会将确定的模板文件解析后生成网页，输出生成的网页；

缓存过程中会先采用java IO进行初始化读取替换后模板文件内容，再采用JSTL解析技术解析java IO读取的内容进行页面生成，生成的页面采用开源框架ehcache方式进行缓存后再输出用户界面。

尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种用于构建用户界面的可视化引擎***，包括模板设置模块、java标签类库模块、数据存储模块、可视化引擎模块和网页生成模块，所述模板设置模块和所述数据存储模块均与所述可视化引擎模块相连接，所述可视化引擎模块与所述网页生成模块相连接；

模板设置模块，用于编写、存储用户界面呈现效果的模板文件；

java标签类库模块，用于提供模板文件编写用的各类标签；

数据存储模块，用于储存、更改各种模板文件相对应的业务数据；

可视化引擎模块，用于获取模板文件和数据模型中的数据，并将数据模型中数据的属性字段值替换到模板文件中；

网页生成模块，用于解析替换后的模板文件进行网页生成，并且将生成的网页缓存后输出。

2.根据权利要求1所述的用于构建用户界面的可视化引擎***，其中，所述模板设置模块包括模板生成单元和模板存储单元；

模板生成单元，用于输入自定义的网页内容和调用java标签类库中的标签代码，生成模板文件；

模板存储单元，将生成后的模板文件进行存储。

3.根据权利要求2所述的用于构建用户界面的可视化引擎***，其中，所述模板文件由HTML语言、占位符表达式和java标签类库中的标签组成。

4.根据权利要求1所述的用于构建用户界面的可视化引擎***，其中，所述java标签类库包括权限控制标签、字符安全过滤标签、自动生成分页操作标签和字符串格式转换标签。

5.根据权利要求1所述的用于构建用户界面的可视化引擎***，其中，所述可视化引擎模块包括调用单元、匹配单元、替换单元和传输单元；

调用单元，用于调用模板设置模块中储存的模板文件；

匹配单元，用于获取模板文件中的变量名字段，并在数据模型中匹配与变量名字段对应的数据类型；

替换单元，用于表达数据类型，接收输入数据类型中的数据属性字段，并将获取到的属性字段替换到对应的模板文件中；

传输单元，将替换后的模板文件传输给网页生成模块。

6.根据权利要求5所述的用于构建用户界面的可视化引擎***，其中，所述匹配单元采用JSTL解析模板文件中含有java标签类库中的标签，再依据java标签反射调用java函数的逻辑技术来匹配数据存储模块中的数据类型。

7.根据权利要求1所述的用于构建用户界面的可视化引擎***，其中，所述网页生成模块包括缓存单元和输出单元；

缓存单元，对接收可视化引擎模块传输的模板文件进行解析后生成网页样式，并且对生成的网页样式进行缓存；

输出单元，将缓存完成的网页样式进行输出。

8.根据权利要求7所述的用于构建用户界面的可视化引擎***，其中，所述缓存单元采用开源框架ehcache的方式进行网页缓存。

9.根据权利要求7所述的用于构建用户界面的可视化引擎***，其中，所述输出单元在网页输出之前先访问缓存单元是否存在新生成的网页缓存，若存在则直接输出，若不存在则等待缓存好后再输出。

10.一种利用如权利要求1-9任一所述的可视化引擎***构建用户界面的方法，包括：

在模板设置模块内引用java标签类库中的标签编写构建用户界面的模板文件，将编写好的模板文件储存；

在数据存储模块内建立与不同模板文件相匹配的数据模型；

可视化引擎模块调用获取模板文件、匹配与模板文件对应的数据类型、获取即时输入到数据类型中的数据属性字段，将匹配的属性字段替换到模板文件中，形成确定的模板文件；

网页生成模块会解析确定的模板文件生成网页，输出生成的网页。