CN114036177A - 基于组件的智能报表的设计与实现方法 - Google Patents

Abstract

本发明请求保护一种基于组件的智能报表的设计与实现方法，包括以下步骤：1)用户根据页面向导创建报表；2)过数据集选择，增加数据源，填写过滤条件例如SQL数据集；3)通过新增数据连接填写报表SQL语句获取报表数据，生成一个访问业务数据库的请求并发往报表服务器，报表服务器从系统数据库中读取业务数据库的信息，根据这些信息访问业务数据库，查询出满足设定条件的数据，并将数据返回浏览器4)通过添加报表字段以及要展示的图表信息设置报表5)手动拖拽要展示的字段后点击预览可自动生成报表展示给用户。本发明将异步请求和数据格式的编码该为配置化处理，该方法使得编程更快捷简便，代码耦合度更低，且可跨平台。

Description

基于组件的智能报表的设计与实现方法

技术领域

本发明属于计算机技术领域，特别涉及一种组件的智能报表的设计与实现方法。

背景技术

说到报表，相信大家不会觉得陌生，它是企业管理的基本措施和途径，是企业的基本业务要求，也是实施BI战略的基础。报表可以帮助企业访问、格式化数据，并把数据信息以可靠和安全的方式呈现给使用者，使企业管理者可以深入地洞察企业的运营情况。

对现代企业有着如此重要的表单在计算机还没有出现以前，说白了就是账本子。当时人们是用笔和纸来记录数据的，就如老百姓所说的豆腐帐，就是卖豆腐的人每天将自己的卖出的豆腐记在一个本子上，然后每月进行汇总算算。这种情况下，报表数据和报表格式是紧密结合在一起的，都在同一个本子上。但是这种早期报表的表现形式基本上只有记账的人才能理解，且这种形式难以修改。

随着Internet的广泛应用，电子政务、电子商务以及企业ERP得到迅猛发展，数据的采集、传输、展示、交互等问题显得越来越重要。报表作为一种信息组织和展示的有力手段，为用户特别是企业中高层用户提供直观的数据视图(进行自动的统计计算，如求和，求平均，对分组进行小计等)，为用户制定商业计划和决策提供基础和依据。报表系统在各行各业中都有很广泛的用途，是进行信息浏览、分析、打印的有力工具。随着WWW技术的发展，企业系统从传统的C/S结构逐步向Internet转移，企业信息系统也正向基于Web的信息系统进行转变，越来越多的报表应用将在Web环境下开发与运行。以往的报表，系统中，业务逻辑与报表处理过程混杂在一起，任何一个需求或逻辑的改变都必须重新修改、编译报表程序才能完成。随着开发人员的不断完善，出现了多种报表设计器、生成器之类的工具，可以方便、快捷地实现需求。虽然有了很大的进步，但是仍然不能满足报表动态化和格式多样化的需求。

图2是传统页面开发设计图，简要对照图2描述现在的开发流程是什么。

传统开发页面，需要获取数据或者发送数据时，均需写异步代码请求数据，多数页面都需写请求代码，且在请求代码中对数据进行格式处理。

经过检索，比较接近的现有技术为：CN111913701A基于前后端分离的ERP管理系统、方法、介质和计算机设备，包括：前端开发平台，使用基于Vue的框架；后端开发平台，使用基于MVT的Django框架；API接口，连接所述前端开发平台和后端开发平台。本发明的技术方案结合前端web页面，采用了前后端分离的方式进行数据管理，能够实现ERP系统需求的基本功能，具有高效、易于管理、易于更新、便捷性高、计算功能强大等明显优势。本发明与功能框架并不同，并且相对于报表系统中涉及中对多种数据处理的操作在该系统中并未体现。

CN112905558A一种基于数据库配置的报表系统实现方法，包括以下步骤：步骤一：对含有报表的数据库进行配置；步骤二：通过报表对应的列表信息查询接口查询全部报表信息；步骤三：用户通过单个报表信息查询接口获取报表的初始化信息，并进入单个报表展示初始化页面；步骤四：通过报表查询条件接口渲染查询条件；步骤五：分别通过报表数据查询模块显示报表数据以及通过报表导出接口将报表数据导出和下载。本发明提供了更多数据源入口(不止数据库配置)，且操作更加简便，实现报表自动化配置以及提高了报表数据导出效率，并将代码前后端分离，代码耦合度更低，利于开发和维护。

发明内容

本发明旨在解决以上现有技术的问题。提出了一种数据格式统一进行处理，不需重复对数据进行处理，前端和后端分离，提高工作效率，分工更加明确的基于组件的智能报表的设计与实现方法。本发明的技术方案如下：

一种基于组件的智能报表的设计与实现方法，其包括以下步骤：

用户根据页面向导创建报表；增加数据源，填写过滤条件；通过新增数据连接填写报表SQL语句获取报表数据，生成一个访问业务数据库的请求并发往报表服务器，报表服务器从系统数据库中读取业务数据库的信息，根据这些信息访问业务数据库，查询出满足设定条件的数据，并将数据返回浏览器；通过添加报表字段以及要展示的图表信息设置报表；手动拖拽要展示的字段后点击预览可自动生成报表展示给用户。

进一步的，所述智能报表的前端开发采用Vue技术栈，使用Vue技术栈开发报表前端页面，基础组件使用element，重复业务代码抽离为公共组件供各个页面使用，后端采用Java开发，数据库使用mySQL。

进一步的，智能报表的前端和后端所传递数据、浏览器页面显示和数据库所存储的数据，格式并不一致，应对数据进行格式转换。

进一步的，所述对数据进行格式转换具体如下：在浏览器向后端发送请求前，对数据进行与数据库格式保持一致的数据格式化操作；相应的在数据向浏览器发送后，浏览器在渲染前，应将数据转换为页面应该展示的格式化数据；前后端相互传递数据时，前端需要不断的写重复的异步请求代码，只需对异步请求代码进行配置，就可实现发送请求数据功能。

进一步的，所述在浏览器向后端发送请求前，对数据进行与数据库格式保持一致的数据格式化操作，包括：通过设置数据格式转换中间件，在接收和发送请求时，对数据进行格式化操作，为浏览器页面和后端存储，都放置一符合格式的数据。

进一步的，所述异步请求代码进行配置具体包括：通过抽离全局请求方法，形成请求中间件，只需传输参数，使用请求中间件进行异步请求发送，可实现请求异步数据获取以及冗余代码的减少。

进一步的，还包括制定统一的数据发送机制，具体包括：通过设置通用组件的数据发送参数配置，包括提交数据的url、描述提交数据以及是否异步，各个页面可直接配置请求获取数据以及更新数据，减少前端JavaScript重复开发的工作。

进一步的，用户点击新建报表后进入报表制作页面，提供包括SQL数据集、API数据集、JSON数据集在内的多种数据源。

进一步的，当用户选择SQL数据集创建方式获取数据时，交互得获取用户输入的SQL语句，使用所接收的SQL语句生成访问数据库的请求并发送至服务器；接收到访问数据库的请求的服务器，根据请求中SQL语句中的信息从所述数据中查询出满足查询条件的数据；

当用户选择API数据集获取数据集时，交互得获取用户输入的API地址，使用该API生成访问后端某一具体接口的请求，该接口负责访问数据库并返回符合查询条件的数据；

当用户选择JSON数据集获取数据集时，该数据可由用户根据一定的规则填入后，使用该JSON生成访问JSON解析接口的请求，JSON接口对该数据进行解析后，返回符合前端显示的数据。

本发明的优点及有益效果如下：

1、传统请求数据，或提供请求代码工具类或在各个页面JavaScript处写请求代码，产生大量冗余的代码，本发明相对于传统的代码编写方式，对element通用组件进行封装请求参数，使得请求作为类似属性的参数，直接进行配置请求数据所需的参数即可实现发送请求数据的效果，实现一套代码处处可使用的效果。创新点为：基于element组件进行将请求代码转为其参数化配置，使用组件获取数据无需再写异步代码，直接进行配置即可；

2、本报表系统涉及到各种数据格式的转换，前后端数据保存格式的不同，在前端接收数据及前端发送数据时，应对数据进行格式化处理，发送或者接收数据时，进行格式化配置，即可实现对数据的格式化处理，无需单独写数据处理代码。改进：前端展示后端存储，双向处理数据格式，且数据处理为配置化无需书写JavaScript代码；

3、本发明是基于技术和模型上的改进，将大量异步代码和数据格式转化代码，转化为参数化配置，极大的提高了开发效率和缩短了前后端人员的交流时间。本发明的前后端分离和对比文件1的前后端分离的ERP系统在结构上和功能上均不同，本发明是针对现有的报表没有实现前后端分离，大多后端实现，着重于前端实现代码部分，在代码层面进行的优化，开发人员使用配置化开发可以提高效率，不需要写数据转换代码和异步请求代码，直接在UI组件上配置参数即可。采用前后端分离满足户对报表多样化、个性化，页面体验感更好，数据源更加丰富的要求，并且不受设备限制，手机、电脑浏览器均可使用。服务器压力更小，获取数据速度快，页面渲染速度快，前端极快响应数据变化等优点。

附图说明

图1是本发明提供优选实施例前后端分离的智能报表的设计与实现方法的流程图；

图2是传统页面开发设计图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、详细地描述。所描述的实施例仅仅是本发明的一部分实施例。

本发明解决上述技术问题的技术方案是：

本发明提供了一种基于组件的智能报表的设计与实现方法，本发明的技术方案中的报表的数据源更加多元，能够满足报表和样式的个性化，以及数据格式的多样化，同时采用了前后端分离的方式编写代码，前后端代码耦合度低，使得开发速度更快，web端更具跨平台性。

Web环境不断更新，用户们对前端的要求也在不断提高，用户不再满足于页面功能的实现，对页面性能和网站迭代速度也提出更高的要求。

为了达到上述目的，本发明的技术方案是这样实现的：

本发明公开了一种基于组件的智能报表的设计与实现方法，本发明的技术方案如下：

步骤1、前端开发采用Vue技术栈，使用Vue技术栈开发报表前端页面，基础组件使用element，重复业务代码抽离为公共组件供各个页面使用，后端采用Java开发，数据库使用mySQL。

步骤2、制定统一的数据发送机制，通过设置通用组件的数据发送参数配置，例如：提交数据的url、描述提交数据以及是否异步等。各个页面可直接配置请求获取数据以及更新数据，减少前端JavaScript重复开发的工作。

步骤3、由于该系统是报表系统，其中涉及到数据格式问题，需要对数据格式进行处理，设置数据处理模块，在数据发送至后端和接收后端数据时，对数据进行格式化处理。

步骤4、后端处理JSON，连接数据库，运行SQL语句，筛选符合条件的数据，发送至前端，前端根据情境处理数据并渲染报表。

S11前端使用Vue搭建指引页面，用户点击新建报表，进入报表制作页面，提供多种数据源(SQL数据集、API数据集、JSON数据集)，

S12当用户选择SQL数据集创建方式获取数据时，交互得获取用户输入的SQL语句，使用所接收的SQL语句生成访问数据库的请求并发送至服务器；接收到访问数据库的请求的服务器，根据请求中SQL语句中的信息从所述数据中查询出满足查询条件的数据；

S13当用户选择API数据集获取数据集时，交互得获取用户输入的API地址，使用该API生成访问后端某一具体接口的请求，该接口负责访问数据库并返回符合查询条件的数据。

S14当用户选择JSON数据集获取数据集时，该数据可由用户根据一定的规则填入后，使用该JSON生成访问JSON解析接口的请求，JSON接口对该数据进行解析后，返回符合前端显示的数据。

其中用户添加S234获取到的数据源至页面，通过拖拽或一定格式填写至相应的表格，此时表格中都是字段名，设置表格个性化样式，点击预览可自动生成最终的报表。

S21由于在获取数据源的同时，需要不断的发送请求，产生大量冗余的代码，通过将请求代码配置为element通用组件的属性，从而通过配置请求属性就可自动的发送请求而不需要写大量冗余的代码。

S31由于在报表系统中，涉及到各种数据处理，在数据发送之前，数据通过接入前端处理数据中间件对数据进行处理之后发送至服务器保存至数据库，当从数据库接收到数据时，通过数据处理中间件对数据进行格式成页面所需的格式后渲染至页面。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

以上这些实施例应理解为仅用于说明本发明而不用于限制本发明的保护范围。在阅读了本发明的记载的内容之后，技术人员可以对本发明作各种改动或修改，这些等效变化和修饰同样落入本发明权利要求所限定的范围。

Claims (9)

1.一种基于组件的智能报表的设计与实现方法，其特征在于，包括以下步骤：

用户根据页面向导创建报表；增加数据源，填写过滤条件；通过新增数据连接填写报表SQL语句获取报表数据，生成一个访问业务数据库的请求并发往报表服务器，报表服务器从系统数据库中读取业务数据库的信息，根据这些信息访问业务数据库，查询出满足设定条件的数据，并将数据返回浏览器；通过添加报表字段以及要展示的图表信息设置报表；手动拖拽要展示的字段后点击预览可自动生成报表展示给用户。

2.根据权利要求1所述的一种基于组件的智能报表的设计与实现方法，其特征在于，所述智能报表的前端开发采用Vue技术栈，使用Vue技术栈开发报表前端页面，基础组件使用element，重复业务代码抽离为公共组件供各个页面使用，后端采用Java开发，数据库使用mySQL。

3.根据权利要求2所述的一种基于组件的智能报表的设计与实现方法，其特征在于，智能报表的前端和后端所传递数据、浏览器页面显示和数据库所存储的数据，格式并不一致，应对数据进行格式转换。

4.根据权利要求3所述的一种基于组件的智能报表的设计与实现方法，其特征在于，所述对数据进行格式转换具体如下：在浏览器向后端发送请求前，对数据进行与数据库格式保持一致的数据格式化操作；相应的在数据向浏览器发送后，浏览器在渲染前，应将数据转换为页面应该展示的格式化数据；前后端相互传递数据时，对业务代码和请求代码进行隔离，只需对异步请求代码进行配置，就可实现自动发送请求功能，不需冗余的请求代码。

5.根据权利要求4所述的一种基于组件的智能报表的设计与实现方法，其特征在于，所述在浏览器向后端发送请求前，对数据进行与数据库格式保持一致的数据格式化操作，包括：通过设置数据格式转换中间件，在接收和发送请求时，对数据进行格式化操作，为浏览器页面和后端存储，都放置一符合格式的数据。

6.根据权利要求4所述的一种基于组件的智能报表的设计与实现方法，其特征在于，所述异步请求代码进行配置具体包括：通过抽离全局请求方法，形成请求中间件，只需配置参数，使用请求中间件进行异步请求发送，可实现请求异步数据获取以及冗余代码的减少。

7.根据权利要求6所述的一种基于组件的智能报表的设计与实现方法，其特征在于，还包括制定统一的数据发送机制，具体包括：通过设置通用组件的数据发送参数配置，包括提交数据的url、描述提交数据以及是否异步，各个页面可直接配置请求获取数据以及更新数据，减少前端JavaScript重复开发的工作。

8.根据权利要求6所述的一种基于组件的智能报表的设计与实现方法，其特征在于，用户点击新建报表后进入报表制作页面，提供包括SQL数据集、API数据集、JSON数据集在内的多种数据源。

9.根据权利要求8所述的一种基于组件的智能报表的设计与实现方法，其特征在于，当用户选择SQL数据集创建方式获取数据时，交互得获取用户输入的SQL语句，使用所接收的SQL语句生成访问数据库的请求并发送至服务器；接收到访问数据库的请求的服务器，根据请求中SQL语句中的信息从所述数据中查询出满足查询条件的数据；

当用户选择API数据集获取数据集时，交互得获取用户输入的API地址，使用该API生成访问后端某一具体接口的请求，该接口负责访问数据库并返回符合查询条件的数据；

当用户选择JSON数据集获取数据集时，该数据可由用户根据一定的规则填入后，使用该JSON生成访问JSON解析接口的请求，JSON接口对该数据进行解析后，返回符合前端显示的数据。

Images