[发明专利]一种适用于监测服务类应用动态构建页面的方法

说明书

技术领域

本发明涉及一种动态构建实时数据展示页面的方法，在大量的实时监测数据中动态选择业务相关的数据，按照符合监测大屏布局的方式来快速构建监测页面。

背景技术

传统的前端页面开发是以页面为独立的最小单元，一个业务场景设计一个页面，在这个页面上根据业务场景设计布局，不同的区域显示不同的内容，整个页面的HTML元素和CSS样式是耦合在一起的。

随着业务场景的逐渐增多，有两个问题逐渐显现出来：

1.当业务场景发生变化时，有时可能是某些区域的内容发生了变化，有时可能是多个区域间的业务关联发生了变化，这个时候只能对页面整体代码进行修改调整。而这样的修改调整经常维持不了多久又会随着下一次的业务调整而发生新的变化。

2.当有新的业务场景出现的时候，必须重新设计页面布局，开发新的页面HTML和CSS，这个时候需要引入设计人员和开发人员把页面的开发过程再次实施一遍。

这两个问题其实总结来说就是页面的开发不能适应业务场景的变化，而在监测服务类应用中，由于监测数据繁多，监测场景复杂多变，上述两个问题尤其明显。

为了解决上述问题，本文提出了一种适用于监测服务类应用的动态构建页面的方法。这种方法的核心思想是从数据展示的角度出发，构建仅仅为数据服务的组件，然后用配置的方式将监测数据和组件组合起来构建用户页面。这样随着组件库的不断完善，无论业务场景变化或者新增，都不再需要开发人员去修改原始代码，只需要相关人员去更改配置文件即可。

发明内容

针对现有技术中存在的上述问题，本发明采用的技术方案为一种适用于监测服务类应用动态构建页面的方法，该方法包括一种构建组件的方法和一种配置页面的方法，一种构建组件的方法为下述步骤的1-3，一种配置页面的方法为下述步骤4，一种构建组件的方法和一种配置页面的方法两者相配合实现具体的实施过程，

步骤1：设计组件的外观。

这一步骤通过UI的交互设计完成，根据整个网页应用的外观风格来确定不同的组件外观，组件外观图表以及自定义外观的数据展示组件，图表的形式为饼图、折线图、区域图或柱状图等，数据展示组件中为一个多列的表格，其中表格的某一列显示一个进度条和指示标杆来显示当前日期的值和指定的对比日期的值。

步骤2：设计组件的接口。

组件的接口也为组件的配置方式，这里需要明确这个通用的组件需要暴露哪些配置项给用户，有了这些配置项用户就在配置文件中随时修改从而让对应的组件适用于对应的业务场景。

组件的接口设计要考虑到组件所适用的数据类型、业务场景、表现形式。组件会展示一组数据的对比，那接口中一定会有一个这组数据的特征值项；组件在不同的场景下表现的对比形式不一样，对比形式是一组柱图对比或是一个饼图对比总体百分比权重，那接口中会有一个表现外观的配置项。

步骤3：组件的实现设计。

组件的实现过程其实就是完成从设计组件的接口到最终设计组件的应用的过渡，每个组件的开发都包含逻辑代码JS，展示代码HTML+CSS。设计组件的接口中设计的配置项都会作为组件JS的初始化参数，组件的模板采用含表达式的动态编译模板引擎，步骤2中设计的接口配置项中外观表现相关的参数首先会使得模板编译为配置项要求的HTML片段。然后步骤2设计的数据特征值会使得组件从后台获取到相关的数据，然后用这些数据渲染到组件中，进而形成与设计匹配的组件表现。

步骤4：配置组件

在组件的实现设计的基础之上，有以上组件后页面的开发过程就转变为编写配置文件的过程，配置文件的格式很灵活，配置文件的格式是xml、j son或者其他解析格式的文件。在配置文件里需要以下两方面的内容，第一方面是页面布局和组件选择，当前这个页面需要显示为上下两行时，上面一行按50％-50％分为两列，下面一行按40％-20％-40％的比例分成三列，这一共5个显示单元每个单元显示哪个特定的组件都写在配置文件中。第二方面就是配置单个组件的接口参数，即第一个单元格的组件需要一个id一个日期，一个显示主题，单个组件的接口参数都需要写到配置文件中。

与现有技术相比，本发明具有以下明显的优势：

1.适应复杂多变的业务场景。配置文件中的排版和组件选择都是很灵活，随时可以改动的，业务场景变化后只需要修改配置文件即可。

2.形成了一整套完善的页面配置流程和方法，使得不同的工程人员专注于各自负责的领域。框架开发人员只需要专注于组件的完善，页面配置人员只专注于对业务的理解和组件的配置使用。

附图说明