CN107450917A - 一种前端快速架构方法及其系统 - Google Patents

Abstract

本发明公开了一种前端快速架构方法及其系统。所述方法包括：按照数据维度对数据进行维度属性的分类；根据所述数据的分类结果自定义若干组件；所述组件之间具有对应的映射，形成与数据维度属性相关的联动展示；针对所述不同组件之间的独立性设置对应的模板布局。该方法采用各个组件技术实现上独立的，但组件之间可以根据数据维度配置不同参数进行相互联动，并通过前端可视化实现自定义拖拉拽，后端有明确的组件定义和组件之间的关系定义，可以很好的解决现有工期长、需求反馈慢、同纬数据查询不关联等而引致客户端感知非常差的问题。

Description

一种前端快速架构方法及其系统

技术领域

本发明涉及前端设计技术领域，尤其涉及一种前端快速架构方法及系统。

背景技术

传统的数据可视化采用HTML、CSS、JS等开源前端框架以及使用最新浏览器技术，将数据库中的每个数据项作为单个图元元素表示，大量的数据集成构成数据图像，同时将数据的各个属性值以多维数据的形式表示，令用户可以从不同维度观察数据，从而对数据进行更深入的观察和分析。

特别是，在当前大数据的商业智能化后，对数据可视化展示要求由N维属性和M个元素组成的数据集所构的多维信息空间，更多的是从点面结合的分析来理解数据的本身真实意义。

因此数据的分析具有了不同的观察或者分析角度，每个人都可以根据自己的观点了解数据特性。为此需要对多维数据进行切片、块、旋转等动作剖析，从而能多角度的多侧面的观察数据。但现有的自定义个性化展示方式中并不能很好的满足这样的需求。

因此，现有技术还有待发展。

发明内容

鉴于上述现有技术的不足之处，本发明的目的在于提供一种前端快速架构方法及系统，旨在解决现有技术中前端实现工期长、需求反馈慢、同纬数据查询不关联等而引致客户端感知非常差的问题。

为了达到上述目的，本发明采取了以下技术方案：

一种前端快速架构方法。其中，所述方法包括：按照数据维度对数据进行维度属性的分类；根据所述数据的分类结果自定义若干组件；所述组件之间具有对应的映射，形成与数据维度属性相关的联动展示；针对所述不同组件之间的独立性设置对应的模板布局。

可选地，所述根据所述数据的分类结果，自定义若干个组件，具体包括：

通过HTML语法，制作静态HTML页面；所述HTML页面为各个组件的代码块形成的HTML页面；根据目标动态展示效果，使用JavaScript编写对应的动态语法；所述动态展示效果为当触发某个组件的事件发生时，与所述事件相关的组件对应的动态变化；在所述组件之间维护映射；所述组件具有至少两个字段，所述字段在各个组件之间存在关联；当存在改变组件的事件时，通过所述各个组件之间存在的关联，确定与所述事件相关的组件的联动。

可选地，所述针对所述不同组件之间的独立性设置对应的模板布局，具体包括：根据目标模板的基本架构，拖动所述组件到所述目标模板的可视化区域，生成对应的DIV区域；使用父级元素控制所述组件的尺寸，生成相应的HTML代码；将所述HTML代码添加到父对象中，在所述父对象中构建一个均匀展现的模板布局。

可选地，在将所述HTML代码添加到父对象中，在所述父对象中构建一个均匀展现的模板布局的步骤之后，所述方法还包括：将当前布局作为父对象；构造相应的组件HTML代码并添加到所述模板布局中，以实现布局之间的任意嵌套。

可选地，在将所述HTML代码添加到父对象中，在所述父对象中构建一个均匀展现的模板布局的步骤之后，所述方法还包括：获取至少一个布局的代码区域对象；将所述代码区域对象从所述布局中的父对象中移除，以删除所述布局。

一种前端快速架构系统，其中，所述系统包括：数据分类模块，用于按照数据维度对数据进行维度属性的分类；组件设置模块，用于根据所述数据的分类结果自定义若干组件；所述组件之间具有对应的映射，形成与数据维度属性相关的联动展示；布局设置模块，用于针对所述不同组件之间的独立性设置对应的模板布局。

可选地，所述组件设置模块具体用于：通过HTML语法，制作静态HTML页面；所述HTML页面为各个组件的代码块形成的HTML页面；根据目标动态展示效果，使用JavaScript编写对应的动态语法；所述动态展示效果为当触发某个组件的事件发生时，与所述事件相关的组件对应的动态变化；在所述组件之间维护映射；所述组件具有至少两个字段，所述字段在各个组件之间存在关联；当存在改变组件的事件时，通过所述各个组件之间存在的关联，确定与所述事件相关的组件的联动。

可选地，所述布局设置模块具体用于：根据目标模板的基本架构，拖动所述组件到所述目标模板的可视化区域，生成对应的DIV区域；使用父级元素控制所述组件的尺寸，生成相应的HTML代码；将所述HTML代码添加到父对象中，在所述父对象中构建一个均匀展现的模板布局。

可选地，所述布局设置模块还用于：将当前布局作为父对象；构造相应的组件HTML代码并添加到所述模板布局中，以实现布局之间的任意嵌套。

可选地，所述布局设置模块还用于：获取至少一个布局的代码区域对象；将所述代码区域对象从所述布局中的父对象中移除，以删除所述布局。

有益效果：本发明提供的方法采用各个组件技术实现上独立的，但组件之间可以根据数据维度配置不同参数进行相互联动，并通过前端可视化实现自定义拖拉拽，后端有明确的组件定义和组件之间的关系定义，可以很好的解决现有工期长、需求反馈慢、同纬数据查询不关联等而引致客户端感知非常差的问题，提高了开发效率并给予了灵活多变的人机交互形式。

附图说明

图1为本发明具体实施例的业务场景示意图。

图2为本发明具体实施例的事件联动示意图；

图3为本发明具体实施例的前端快速架构方法的方法流程图；

图4为本发明具体实施例的前端快速架构的功能框图。

具体实施方式

本发明提供一种前端快速架构方法及系统。为使本发明的目的、技术方案及效果更加清楚、明确，以下参照附图并举实施例对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

图1为本发明实施例提供的业务场景。如图1所示，在该业务场景中，页面10通过不同区块11对数据进行展示。而当某个区域中的数据查询条件发生改变时，页面中其他区域数据拥有该条件查询也会随着查询条件进行关联查询，进而提高客户对同维度数据的感知。

由于人对文字、数字类的信息不敏感，但对于图像、图表信息则比较敏感。通过该信息可视化的场景，可以充分适当地对信息进行组织整理，使用表格、图形，图像展现数据、信息和知识，使得用户能够通过所见即所得的方式分析、理解信息，洞察、定位隐含的漏洞或问题，发现数据之间的关系，理解在人工分析情况下不易发觉的事情，从而追根溯源地挖掘信息背景的问题与深层次原因。

图2为对应的页面的各区块的事件联动示意图。如图2所示，各个区块10之间可以相互订阅事件，而且订阅事件触发后，订阅事件的自身区块可以按照事件标准自动变化，其他的区块则跟随所述事件标准变化。

在上述业务场景中，整个页面或者数据系统的数据关联辨识度更加清晰，不同维度数据交互更加友好。其能够提高客户对同异维度数据感知并且令数据之间关系管控处于可控状态。

本发明实施例进一步提供了一种前端快速架构方法，用以实现上述的业务场景。在本实施例中，如图3所示，所述方法可以包括如下步骤：

100、按照数据维度对数据进行维度属性的分类。

200、根据所述数据的分类结果自定义若干组件；所述组件之间具有对应的映射，形成与数据维度属性相关的联动展示。

300、针对所述不同组件之间的独立性设置对应的模板布局。

在一些实施例中，步骤200具体可以包括以下几个方面：

一是通过HTML语法，制作静态HTML页面；所述HTML页面为各个组件的代码块形成的HTML页面。所述静态HTML页面还可以标记需要进行可视化配置的标签，在标签中添加对应的标示符样式属性。

其二是根据目标动态展示效果，使用JavaScript编写对应的动态语法；所述动态展示效果为当触发某个组件的事件发生时，与所述事件相关的组件对应的动态变化。当这些组件在被最终应用后，可以根据实时数据源，展示在显示区域内的效果。

其三是，上述组件具体可以是根据实际的网站功能需要而制作的不同类型、多种展现形式的组件，这些组件可以按照特定的分类类别，保存到合适的组件库中。

最后，为了实现联动的目的，在所述组件之间还需要维护映射；所述组件具有至少两个字段。由于每个组件都用动态和静态的分别。因此，每个组件都至少有两个字段。这两个字段在各个组件之间存在关联(即映射)。

当存在改变组件的事件(即触发事件)时，通过所述各个组件之间存在的关联，确定与所述事件相关的组件的联动。这样的，用户可以通过数据维度或者数据属性进行事件触发联动。根据触发事件，不同的组件之间相互联动展示，同时页面根据相应的指令达到相应的展示效果。

在另一些实施例中，所述步骤300则具体可以包括如下的几个步骤：

一、首先是根据目标模板的基本架构，拖动所述组件到所述目标模板的可视化区域，生成对应的DIV区域。使用父级元素控制所述组件的尺寸，生成相应的HTML代码；将所述HTML代码添加到父对象中，在所述父对象中构建一个均匀展现的模板布局。

具体的，若需要在某个布局中嵌套一个或者多个组件时，可以将所述HTML代码添加到父对象中，在所述父对象中构建一个均匀展现的模板布局的步骤之后，所述方法还包括：将当前布局作为父对象；构造相应的组件HTML代码并添加到所述模板布局中，以实现布局之间的任意嵌套。

对于一些多余的，不希望保留的布局，可以采用如下方法步骤进行删除：获取至少一个布局的代码区域对象；将所述代码区域对象从所述布局中的父对象中移除，以删除所述布局。

二、针对所述组件在布局中位置定义，操作时可以从上述的组件库中拖动想要的组件到显示区域，并且在显示区域中，构造出一个组件的div块。然后，读取该组件所对应的控件文件，获得该控件文件所包含的静态HTML文件和动态语言javascript后，分别将静态HTML代码存放到可视化组件div块中的展现块，将动态语言javascript存放到可视化组件div块中的隐藏域中。最后，使组件div块的代码添加到目标布局的显示区域中，就可以使显示区域就会展示出静态HTML页面的展示效果，实现组件在模版布局中特定位置的存放。

最后，可以采用与上述步骤二部分揭露的方法，自行拖动组件到目标的布局中即可快速的在显示区域中实时展现出目标效果。在组件位置不理想的情况下，也可以拖动相应的控件到其他布局或者相同布局的其他位置。

在本实施例中，由于组件div块是一个整体的div块，脱离布局区域也可以独立存在，因此，组件可以在布局区域内任意移动。使用时，通过直接控制组件div块的代码添加到显示区域中，就可以将组件div块移动到目标位置。而在需要删除组件时，可以通过直接移除组件div块的方式实现。

综上所述，本发明实施例提供的前端快速架构方法中，各个组件之间相互独立又能相互的联动效果，解决了现有技术中存在延时高、响应慢引致客户端感知非常差等一些列问题，大大提高了开发效率以及客户人机互动的体验。

图4是本发明实施例提供的，与上述方法相对应的前端快速架构系统的功能框图。

如图4所示，所述系统包括：数据分类模块410、组件设置模块420以及布局设置模块430。

其中，数据分类模块410用于按照数据维度对数据进行维度属性的分类。组件设置模块420用于根据所述数据的分类结果自定义若干组件；所述组件之间具有对应的映射，形成与数据维度属性相关的联动展示；布局设置模块430，用于针对所述不同组件之间的独立性设置对应的模板布局。

可选地，所述组件设置模块420具体用于：通过HTML语法，制作静态HTML页面；所述HTML页面为各个组件的代码块形成的HTML页面；根据目标动态展示效果，使用JavaScript编写对应的动态语法；所述动态展示效果为当触发某个组件的事件发生时，与所述事件相关的组件对应的动态变化；在所述组件之间维护映射；所述组件具有至少两个字段，所述字段在各个组件之间存在关联；当存在改变组件的事件时，通过所述各个组件之间存在的关联，确定与所述事件相关的组件的联动。

可选地，所述布局设置模块430具体用于：根据目标模板的基本架构，拖动所述组件到所述目标模板的可视化区域，生成对应的DIV区域；使用父级元素控制所述组件的尺寸，生成相应的HTML代码；将所述HTML代码添加到父对象中，在所述父对象中构建一个均匀展现的模板布局。

在一些实施例中，所述布局设置模块430还用于：将当前布局作为父对象；构造相应的组件HTML代码并添加到所述模板布局中，以实现布局之间的任意嵌套，或者获取至少一个布局的代码区域对象；将所述代码区域对象从所述布局中的父对象中移除，以删除所述布局。

可以理解的是，对本领域普通技术人员来说，可以根据本发明的技术方案及本发明构思加以等同替换或改变，而所有这些改变或替换都应属于本发明所附的权利要求的保护范围。

Claims (10)

1.一种前端快速架构方法，其特征在于，包括：

按照数据维度对数据进行维度属性的分类；

根据所述数据的分类结果自定义若干组件；所述组件之间具有对应的映射，形成与数据维度属性相关的联动展示；

针对所述不同组件之间的独立性设置对应的模板布局。

2.根据权利要求1所述的方法，其特征在于，所述根据所述数据的分类结果，自定义若干个组件，具体包括：

通过HTML语法，制作静态HTML页面；所述HTML页面为各个组件的代码块形成的HTML页面；

根据目标动态展示效果，使用JavaScript编写对应的动态语法；所述动态展示效果为当触发某个组件的事件发生时，与所述事件相关的组件对应的动态变化；

在所述组件之间维护映射；所述组件具有至少两个字段，所述字段在各个组件之间存在关联；

当存在改变组件的事件时，通过所述各个组件之间存在的关联，确定与所述事件相关的组件的联动。

3.根据权利要求1所述的方法，其特征在于，所述针对所述不同组件之间的独立性设置对应的模板布局，具体包括：

根据目标模板的基本架构，拖动所述组件到所述目标模板的可视化区域，生成对应的DIV区域；

使用父级元素控制所述组件的尺寸，生成相应的HTML代码；

将所述HTML代码添加到父对象中，在所述父对象中构建一个均匀展现的模板布局。

4.根据权利要求3所述的方法，其特征在于，在将所述HTML代码添加到父对象中，在所述父对象中构建一个均匀展现的模板布局的步骤之后，所述方法还包括：

将当前布局作为父对象；

构造相应的组件HTML代码并添加到所述模板布局中，以实现布局之间的任意嵌套。

5.根据权利要求3所述的方法，其特征在于，在将所述HTML代码添加到父对象中，在所述父对象中构建一个均匀展现的模板布局的步骤之后，所述方法还包括：

获取至少一个布局的代码区域对象；

将所述代码区域对象从所述布局中的父对象中移除，以删除所述布局。

6.一种前端快速架构系统，其特征在于，包括：

数据分类模块，用于按照数据维度对数据进行维度属性的分类；

组件设置模块，用于根据所述数据的分类结果自定义若干组件；所述组件之间具有对应的映射，形成与数据维度属性相关的联动展示；

布局设置模块，用于针对所述不同组件之间的独立性设置对应的模板布局。

7.根据权利要求6所述的系统，其特征在于，所述组件设置模块具体用于：

通过HTML语法，制作静态HTML页面；所述HTML页面为各个组件的代码块形成的HTML页面；

根据目标动态展示效果，使用JavaScript编写对应的动态语法；所述动态展示效果为当触发某个组件的事件发生时，与所述事件相关的组件对应的动态变化；

在所述组件之间维护映射；所述组件具有至少两个字段，所述字段在各个组件之间存在关联；当存在改变组件的事件时，通过所述各个组件之间存在的关联，确定与所述事件相关的组件的联动。

8.根据权利要求6所述的系统，其特征在于，所述布局设置模块具体用于：根据目标模板的基本架构，拖动所述组件到所述目标模板的可视化区域，生成对应的DIV区域；

使用父级元素控制所述组件的尺寸，生成相应的HTML代码；

将所述HTML代码添加到父对象中，在所述父对象中构建一个均匀展现的模板布局。

9.根据权利要求8所述的系统，其特征在于，所述布局设置模块还用于：

将当前布局作为父对象；

构造相应的组件HTML代码并添加到所述模板布局中，以实现布局之间的任意嵌套。

10.根据权利要求8所述的系统，其特征在于，所述布局设置模块还用于：

获取至少一个布局的代码区域对象；

将所述代码区域对象从所述布局中的父对象中移除，以删除所述布局。