[发明专利]一种前端快速架构方法及其系统

说明书

技术领域

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

背景技术

传统的数据可视化采用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代码并添加到所述模板布局中，以实现布局之间的任意嵌套。

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