适用多场景的页面搭建方法及系统、介质、装置与流程

本发明涉及web开发技术领域，具体地，涉及一种适用多场景的页面搭建方法及系统、介质、装置。

背景技术：

在面对企业中后台的应用开发中，目前主流的web应用开发方式为前后端分离开发，前端处理web页面的外观和逻辑开发，后端专注数据的处理以及提供前端页面需要的应用程序编程接口api。企业中后台的应用一般都是专注于数据的管理，权限的管理，还有对数据价值的挖掘和呈现的需求。针对这几种场景使用传统的开发模式会有开发周期长，开发/测试资源消耗大，不易于扩展的问题。

经过检索，专利文献cn106909361b公开了一种基于模板引擎的web开发方法和装置，包括：从第三方框架或者组件库中获取所需组件；对获取的组件及按照预设格式进行封装，形成组件模板；根据组件模板的标签，引入所需的组件模板，并形成相应的网页模板；通过预设的模板解析引擎，对网页模板和网页模板对应的组件模板进行解析并形成相应的页面。该现有技术虽然形成了组件模板，但是还是需要开发人员在开发页面时调用预定义的组件，进行编写代码。

专利文献cn109710248a公开了一种基于web开发分模块框架的搭建方法，该现有技术支持总体架构不变，分模块分层次进行框架搭建，每个业务模块内部都是一个完整的web代码层结构，同时还提供一个对外服务的接口层，专门供其它模块进行数据交互。该现有技术侧重解决服务端开发业务逻辑时模块耦合度过高的问题，但并不能解决前端开发/测试资源的投入问题。

专利文献cn103617037b公开了一种用于web开发系统的开发方法和web开发系统，在web开发系统运行时，生成或修改脚本代码；经由脚本解析器解析生成或修改的脚本代码以生成新功能的对象类型或修改已有功能的对象类型；以及由对象管理器根据生成的新功能的对象类型或修改的已有功能的对象类型生成新功能的对象或修改的已有功能的对象，并组织该对象与其他对象之间的调用关系。但是该现有技术仍然需要由开发人员在页面设计器和代码编辑器中编写部分逻辑，将页面中的元素和代码联系起来。

因此，亟需研发设计一种开发周期短、开发/测试资源消耗小且易于扩展的web开发系统和方法。

技术实现要素：

针对现有技术中的缺陷，本发明的目的是提供一种适用多场景的页面搭建方法及系统、介质、装置，能够减少前端开发/测试资源的投入，开发周期短、开发/测试资源消耗小且易于扩展。

根据本发明提供的一种适用多场景的页面搭建方法，包括如下步骤：

步骤s1：针对需访问的数据来源进行定义，创建数据源；

步骤s2：根据创建的数据源建立数据查询；

步骤s3：针对使用场景构建页面，每种使用场景能依据数据进行处理；

步骤s4：将构建的页面结果组合成应用；

步骤s5：将组合生成的应用进行打包发布。

优选地，步骤s1包括：

步骤s1.1：选择数据源模型；

步骤s1.2：配置选择的数据源，根据不同的数据源类型，用户界面呈现出不同的配置参数；

步骤s1.3：创建相同类型的多个数据源进行保存。

优选地，步骤s2包括：

步骤2.1：选择创建的数据源；

步骤2.2：可视化配置数据查询模型，不同类型的数据源会有不同的可视化配置界面；

步骤s2.3：对配置完成的数据查询模型进行保存。

优选地，步骤s3包括：

步骤s3.1：根据功能的场景判断使用搭建的页面类型，包括大屏页面、dashboard以及自定义页面；

步骤s3.2：选择大屏页面进行配置；

步骤s3.3：选择dashboard进行配置；

步骤s3.4：选择自定义页面进行配置。

优选地，步骤s4包括：

步骤s4.1：对应用基本信息进行自定义；

步骤s4.2：选择定义的页面类型配置页面集合；

步骤s4.3：将配置完成的页面集合进行保存。

优选地，步骤s5包括：

步骤s5.1：将保存的页面组合打包成web应用；

步骤s5.2：将打包的web应用进行发布。

根据本发明提供的一种适用多场景的页面搭建系统，包括：

数据源模块：创建数据源，对接外部系统数据；

查询模块：选取数据源模块创建的数据源，创建查询语句，可视化查看数据；

页面定义模块：创建大屏页面、dashboard以及自定义页面，使用查询模块创建的查询语句应用至可视化图表中；

应用定义模块：将页面定义模块中的页面组合成应用；

应用发布模块：将应用定义模块组合生成的应用进行打包发布。

优选地，还包括：

元数据管理模块：对数据来源进行管理，存储数据源模块和页面定义模块的元数据；

任务执行模块：执行页面定义模块创建的查询语句进行数据的查询；

任务管理模块：针对大屏页面和dashboard产生的数据查询进行调度管理。

根据本发明提供的一种存储有计算机程序的计算机可读存储介质，计算机程序被处理器执行时实现上述的方法的步骤。

根据本发明提供的一种适用多场景的页面搭建装置，包含上述的适用多场景的页面搭建系统或者上述的存储有计算机程序的计算机可读存储介质。

与现有技术相比，本发明具有如下的有益效果：

1、本发明中的适用多场景的页面搭建方法能够减少前端开发/测试资源的投入，实现加速页面的开发、功能快速落地。

2、本发明针对特定场景，能显著加速web应用的开发速度。

3、本发明避免了人工参与页面编吗，能显著降低bug的产生。

附图说明

通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：

图1为本发明中适用多场景的页面搭建方法的流程示意图；

图2为本发明中适用多场景的页面搭建系统的结构示意图；

图3为本发明中dashboard的定义流程示意图；

图4为本发明中大屏页面的定义流程示意图；

图5为本发明中自定义页面的定义流程示意图。

具体实施方式

下面结合具体实施例对本发明进行详细说明。以下实施例将有助于本领域的技术人员进一步理解本发明，但不以任何形式限制本发明。应当指出的是，对本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变化和改进。这些都属于本发明的保护范围。

如图1所示，本发明提供了一种适用多场景的页面搭建方法，包括如下步骤：

步骤s1：针对需访问的数据来源进行定义，创建数据源。

步骤s1.1：选择数据源模型；

步骤s1.2：配置选择的数据源，根据不同的数据源类型，用户界面呈现出不同的配置参数；

步骤s1.3：创建相同类型的多个数据源进行保存。

步骤s2：根据创建的数据源建立数据查询。

步骤2.1：选择创建的数据源；

步骤2.2：可视化配置数据查询模型，不同类型的数据源会有不同的可视化配置界面；

步骤s2.3：对配置完成的数据查询模型进行保存。

步骤s3：针对使用场景构建页面，每种使用场景能依据数据进行处理。

步骤s3.1：根据功能的场景判断使用搭建的页面类型，包括大屏页面、dashboard以及自定义页面；

如图4所示，步骤s3.2：选择大屏页面进行配置。

步骤s3.2.1：选择系统内提供的大屏部件到中央画布。部件类型包括(但不限于)图表类：曲线图，柱形图、条形图、饼图、散点图等20等多种；地图类：省市地图，地图飞线；装饰类部件；3d动画部件；图片；文字；时间等。

步骤s3.2.2：定位部件。根据需求任意排布部件位置，部件大小，部件角度，部件层级，多个部件的对齐上下左右、水平居中、垂直居中等。

步骤s3.2.3：配置部件数据。数据包括静态数据、步骤2定义的数据查询。静态数据以电子表格的方式编辑。

步骤s3.2.4：配置部件显示细节。可视化配置部件的显示细节。

步骤s3.2.5：重复步骤s3.2.1到步骤s3.2.4后组成大屏内容。

如图3所示，步骤s3.3：选择dashboard进行配置。

步骤s3.3.1：选定系统提供的图表的类型，加入到中央布局区域。鼠标拖动图表部件到中央布局区域，调整图表位置。

步骤s3.3.2：根据用户界面需求调整图表的宽高。系统目前支持图表能够任意跨行和列布局。这种布局灵活性很高，能够适应各种布局需求。

步骤s3.3.3：配置图表的数据查询。有两种方式可以创建数据查询：第一种选取步骤s1中创建的数据源作为当前图表的数据源，配置查询内容并且保存；第二种选取步骤s2中创建的数据查询。

不同类型的数据源的数据查询配置会有不同。统计类的数据查询有统一的数据模型定义：过滤器、度量、维度及度量统计函数。

数据查询模块管理保存的数据查询模型。数据查询模型可以在dashboard和大屏页面的图表间复用，即同一个dashboard中的n个图表使用了相同的数据查询，那么当dashboard发送数据查询请求时，这n个图表只发送了一次数据查询请求，减少了服务器计算资源，加快了查询响应速度。

步骤s3.3.4：配置图表显示细节。配置图表x轴，y轴，tooltip，图例等一系列配置项。利用antv/g2plot图表库实现了可灵活自定义图表属性的可视化配置器。

步骤s3.3.5：根据实际业务需求配置图表的下钻功能。目前包括(但不限于)跳转到第三方系统、触发当前dashboard中另外的图表改变显示数据等。

步骤3.3.6：重复步骤s3.3.1到步骤s3.3.5组成dashboard。

如图5所示，步骤s3.4：选择自定义页面进行配置。

步骤s3.4.1：拖动组件到画布并布局。系统提供了100种以上的组件：基础组件和一些根据常用业务场景封装的业务组件。

步骤s3.4.2：对组件配置数据、组件事件触发后的逻辑。组件数据可以使用步骤1创建的数据源建立的数据查询。组件事件触发后的逻辑包括(但不限于)触发其他依赖相同数据的组件的显示或隐藏，其他组件的数据更新。

步骤s3.4.3：重复步骤s3.4.1到步骤s3.4.2后，生成自定义页面的数字用户线路，保存数字用户线路到服务器。

步骤s4：将构建的页面结果组合成应用。

步骤s4.1：对应用基本信息进行自定义；

步骤s4.2：选择定义的页面类型配置页面集合；

步骤s4.3：将配置完成的页面集合进行保存。

步骤s5：将组合生成的应用进行打包发布。将保存的页面组合打包成web应用；将打包的web应用进行发布。

步骤s5.1：将保存的页面组合打包成web应用；

步骤s5.2：将打包的web应用进行发布。

如图2所示，本发明还提供了一种适用多场景的页面搭建系统，包括：

数据源模块：创建数据源，对接外部系统数据。例如选择对接mysql数据源，在选择mysql数据源类型后，在表单中配置ip地址，端口，用户名和密码，数据库名称以及其他信息，测试连通性正确后保存。

查询模块：选取数据源模块创建的数据源，创建查询语句，可视化查看数据。选择创建的数据源后可以看到数据库对应的数据表，在查询语句编辑框内输入sql后执行该语句，可以看到该sql的查询结果，可以将该结果可视化呈现为表格、曲线图，饼图等。

页面定义模块：创建大屏页面、dashboard以及自定义页面，使用查询模块创建的查询语句应用至可视化图表中。选取组件到画布中，配置组件的数据来源。

应用定义模块：将页面定义模块中的页面组合成应用。定义应用需要的页面，设置页面路由信息。

应用发布模块：将应用定义模块组合生成的应用进行打包发布。

元数据管理模块：对数据来源进行管理，存储数据源模块和页面定义模块的元数据。

任务执行模块：执行页面定义模块创建的查询语句进行数据的查询。

任务管理模块：针对大屏页面和dashboard产生的数据查询进行调度管理。

权限管理模块：提供了数据以及页面的可访问性。

本发明还提供了一种存储有计算机程序的计算机可读存储介质，计算机程序被处理器执行时实现上述的方法的步骤。

根据本发明又提供了一种适用多场景的页面搭建装置，包含上述的适用多场景的页面搭建系统或者上述的存储有计算机程序的计算机可读存储介质。

本发明在设计的框架内执行，不会因为配置的不同而超出框架的控制范畴，所以开发人员和测试人员只需要针对框架做完备的测试，能够减少前端开发/测试资源的投入，能加速页面的开发，功能的落地，传统的开发方式每次都是需要重新编写代码，可能与之前项目开发的功能类似，但是并不能保证不会产生bug。而本发明设计的方案是一次编写，任意配置。

传统的开发需要针对不同的数据源编写后端数据源的适配，而本发明内置了常用的数据源，只需简单配置就能运行。传统的开发中查询数据都是程序员在业务逻辑中编写的，灵活性不高，而本申请的数据查询是客户自定义的，灵活性高，并且该数据查询可以复用在多个页面中。传统的页面开发需要投入前端开发人员，而本发明的页面定义针对三种场景，一是dashboard类，二是大屏类，三是完全自定义页面，自定义的页面可覆盖多数常见页面逻辑。这三类场景都是无需任何编码的，客户直接所见即所得编辑就能实时反馈内容。

本领域技术人员知道，除了以纯计算机可读程序代码方式实现本发明提供的系统及其各个装置、模块、单元以外，完全可以通过将方法步骤进行逻辑编程来使得本发明提供的系统及其各个装置、模块、单元以逻辑门、开关、专用集成电路、可编程逻辑控制器以及嵌入式微控制器等的形式来实现相同功能。所以，本发明提供的系统及其各项装置、模块、单元可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置、模块、单元也可以视为硬件部件内的结构；也可以将用于实现各种功能的装置、模块、单元视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

以上对本发明的具体实施例进行了描述。需要理解的是，本发明并不局限于上述特定实施方式，本领域技术人员可以在权利要求的范围内做出各种变化或修改，这并不影响本发明的实质内容。在不冲突的情况下，本申请的实施例和实施例中的特征可以任意相互组合。