一种基于可视化配置开发自定义首页的方法及系统

摘要

本发明涉及一种基于可视化配置开发自定义首页的方法及系统,控制端的编辑系统配置具有功能信息的若干组件，以及将多个组件封装成不同的具有模块信息的模块；显示端基于模块和组件生成可视化页面；控制端的操作系统接收触发指令，修改模块框在显示端生成的可视化页面上的布局；触发控制端的操作系统接收布局指令，修改可视化页面上的组件单元在模块框内的位置布局；保存操作系统修改后的页面布局，显示端基于修改生成新的可视化页面。编辑系统作为开发人员进行配置的编辑端；操作系统作为用户对页面进行的操作端，操作系统没有代码层面的技术要求，用户可针对喜好对首页进行自定义，并且可调整模块组件的位置，提高了主页的自定义程度。

说明书

技术领域

本发明属于计算机应用技术领域，具有涉及一种基于可视化配置开发自定义首页的方法及系统。

背景技术

随着现在互联网的飞速发展，现在应用在各种操作端的软件愈发愈多，而现有的软件在研发设计时都是采用模块化的方式进行布局，现有的软件系统的首页中关于布局设置中，没有考虑令用户是否需要对主页进行自定义布局。例如：应用在手机端的很多软件，在多数软件中，通常是将搜索栏固定在上方某一位置，最底部是指示栏，中部为相应的操作模块，各个位置的模块用户在使用时无法移动，用户无法自行的配置合适自身的操作界面，现在大多数软件根本没有考虑用户是否需要自行配置操作首页的问题，不便于用户的使用。

而现有的一些可以自行配置的系统，其针对的并非是用户，而是前端专业人员，在调整时界面时需要相关的技术基础，部分逻辑需要配置代码，并非是针对非专业用户可以简便的自定义配置；并且自定义配置时仅仅调整每个模块的相应位置、大小等参数，以模块作为整体去移动配置，而每个模块内部的组件是后端开发时确定的，模块内部的相应布局无法进行调配，用户或前端调整专业人员都无法进行调整，前端专业人员仅仅可以调整每个大模块的相关参数，自定义的程度低，不便于用户自定义调整操作。

发明内容

本发明提供一种基于可视化配置开发自定义首页的方法及系统；本发明针对非专业的用户，无需任何代码层面的技术基础即可配置，且不仅仅只是针对模块进行配置，模块内部的组件用户也可自定义配置。

其具体技术方案如下：

本发明公开一种基于可视化配置开发自定义首页的方法，包括如下步骤：

A：控制端的编辑系统配置具有功能信息的若干组件，以及将多个所述组件封装成不同的具有模块信息的模块；

B：显示端基于所述编辑系统配置的模块信息和组件信息生成相应的可视化页面；

C：所述模块在可视化页面内生成对应的模块框，组件在模块框内对应生成组件单元；

D：控制端的操作系统接收触发指令，修改模块框在显示端生成的可视化页面上的布局；

E：触发控制端的操作系统接收布局指令，修改可视化页面上的组件单元在模块框内的位置布局；

F：保存操作系统修改后的页面布局，显示端基于修改后控制端的模块和组件信息生成新布局的可视化页面；

其中，所述步骤D和步骤E的顺序可调换，先修改模块在页面的布局或修改模块内组件的布局均可。

本发明还公开一种基于可视化配置开发自定义首页的系统，包括存储器、处理器及存储在存储器上的计算机程序，所述处理器执行所述计算机程序以实现上述方法的步骤。

本发明所提供的基于可视化配置开发自定义首页的方法及系统，针对目前市场上现有技术中的软件首页无法自定义编辑的问题进行改进，具体技术效果如下：

1、本发明所提供的技术方案通过将控制器分别编辑系统和操作系统两部分，编辑系统作为开发人员进行配置的编辑端，开发人员对主页单元的模块和组件进行配置编写，可以针对用户的需要进行拓展和开发，便于对软件的升级和维护；

而操作系统作为用户对首页进行操作的工具，将控制器针对使用的人分别两部分，使得用户在操作时不需要任何相关的技术基础，操作系统没有代码层面的技术要求，用户可针对自己的喜好对首页进行自定义。

2、现有的自定义首页方案中，都是针对页面中的模块进行自定义设置，自定义配置时仅仅调整每个模块的相应位置在页面上的部件进行调整，以模块作为整体去移动配置，而每个模块内部的组件是后端开发时确定的，模块内部的相应布局和功能组件无法进行使用者无法调配，而本发明针对这一问题作为发明构思，针对自定义主页进行改进，使得模块化的页面对模块的内部组件也可进行自定义编辑，在模块内部调整组件的位置，更加适配不同用户的使用，提高了主页的自定义程度，更加便于用户进行自定义调整。

附图说明

图1为本发明的所述的自定义首页方法的流程图；

图2为本发明的所述的自定义首页方法的具体流程框图；

图3为本发明的所述的自定义首页系统的结构示意图。

具体实施方式

下面结合附图和以下实施例对本发明的一种基于可视化配置开发自定义首页的方法及系统进一步的详细说明。

实施例

本发明的一些实施例中，参照图1所示，公开一种基于可视化配置开发自定义首页的方法，包括如下步骤：

A：控制端的编辑系统配置具有功能信息的若干组件，以及将多个所述组件封装成不同的具有模块信息的模块；

B：显示端基于所述编辑系统配置的模块信息和组件信息生成相应的可视化页面；

C：所述模块在可视化页面内生成对应的模块框，组件在模块框内对应生成组件单元；

D：控制端的操作系统接收触发指令，修改模块框在显示端生成的可视化页面上的布局；

E：触发控制端的操作系统接收布局指令，修改可视化页面上的组件单元在模块框内的位置布局；

F：保存操作系统修改后的页面布局，显示端基于修改后控制端的模块和组件信息生成新布局的可视化页面；其中，所述步骤D和步骤E顺序可调换。

进一步结合图2所示，一些实施例还包括以下步骤：

A1：通过所述编辑系统内的组件配置模块逐一编辑组件信息，通过数据源配置模块配置组件的数据源，并传输至服务器进行保存；

A2：编辑系统进一步将数据源与组件中的属性关联，将配置好的组件封装成模块，

A3：将每个模块所需的组件进行选择组合，逐一配置成所需的模块，并通过数据源配置模块传输至服务器进行保存；

A4：所述编辑系统与显示端相关联。

进一步地，步骤B的具体步骤包括：

B1：编辑系统将每个模块逐一生成特定的主标识，通过所述主标识与显示端进行关联；

B2：显示端通过所述主标识获取控制端的编辑系统的数据信息，数据信息包括模块功能、模块框在显示端的显示尺寸、模块颜色布局指标、模块对应的组件数据信息；

B3：组件数据信息包括组件的子标识、组件功能和组件在模块内部的位置信息、组件显示信息；

B4：显示端通过解析器解析模块和组件的相关信息，在显示端上生成可视化页面。

进一步地，步骤C的具体步骤包括：

C1：控制端的编辑系统对完成配置的模块生成特定的主标识，可视化页面内形成有用于匹配所述模块的主框架，模块通过主标识插入所述主框架内；

C2：主框架内设有多个用于插入所述模块的模块框，模块框对应形成有主框标识，模块通过主标识与对应的主框标识进行匹配；

C3：通过数据源配置模块传输至服务器进行保存。

再进一步地，步骤C的步骤还包括：

C4：控制端的编辑系统对每个模块内的组件生成特定的子标识，可视化页面的主框架内形成有用于匹配组件的所述子标识的子框架；

C4.1：所述子标识与其对应模块的主标识相关联；

C5：子框架内设有多个用于显示所述组件的组件框，组件框内形成有子框标识，组件通过子标识与对应的子框标识进行匹配；

C6：通过数据源配置模块传输至服务器进行保存。

进一步地，步骤D的步骤还包括：

D1：触发控制端的操作系统对模块进行选择查找，选取所需模块；

D2：选取到模块后通过控制端内的解析器对模块进行解析；

D3：操作系统识别主框架和主标识，修改控制端的模块的数据信息；

D3.1：通过操作系统修改模块框在显示端的主框架内的位置、模块的模块框在显示端的显示尺寸、模块框的模块颜色布局指标；

D4：重复上述步骤，对多个模块的数据信息进行修改配置；

D5：保存修改参数，通过解析器对模块进行解析进一步保存至服务器。

再进一步地，步骤D的步骤还包括：

D1.1：操作系统内设有搜索板块，通过搜索板块直接搜索所需模块进行选取；

D1.2操作系统内还设有列表板块，列表板块与主标识关联，每个模块的主标识对应在列表板块内生成特定标记，通过标记选取所需的模块。

再进一步地，步骤D的步骤还包括：

D2.1：操作系统内设有预览板块，选取所需模块后触发预览板块，在显示端对所选取的模块进行放大预览；

D3.2：修改所需模块后触发预览板块，在显示端对所选取完成修改的模块进行放大预览。

再进一步地，步骤E的步骤还包括：

E1：触发操作系统后选取所需模块，触发操作系统内的编辑板块，控制端内的解析器对模块内的组件进行解析；

E2：编辑板块识别子框架和子标识，修改模块内组件的数据信息；

E2.1：编辑板块修改组件在模块内部的位置信息、组件显示信息；

E3：重复上述步骤，对多个模块内的组件信息进行修改配置；

E4：保存修改参数，通过解析器对模块内的组件信息进行解析进一步保存至服务器。

综上所述，通过本方法后端开发人员通过操作系统对模块内的组件进行编辑，配置各个组件的相应功能，编辑系统配置每个组件的功能信息，将多个组件封装成不同模块；显示端基于编辑系统配置的模块和组件信息生成相应的可视化页面；模块在可视化页面内生成对应的模块框，组件在模块框内对应生成组件单元；

用户在使用时触发控制端的操作系统，先修改模块框在显示端生成的可视化页面上的布局，修改模块在页面上的位置、颜色、大小等参数，配置成页面的初始状态；用户再修改可视化页面上的组件单元在模块框内的位置布局，配置每个模块内部的组件位置，如将模块内的关闭按键、最小化按键不放在右上角，搜索栏不放在上方，用户对每个模块进行自行配置，选择自己喜欢的模块内布局和页面整体的布局；保存操作系统修改后的页面布局，显示端基于修改后控制端的模块和组件信息生成新布局的可视化页面。

本方法将操作系统作为开发人员进行配置的操作端，开发人员对主页单元的模块和组件进行配置编写，可以针对用户的需要进行拓展和开发，便于对软件的升级和维护；而编辑系统作为用户对首页进行编辑的工具，将控制器针对使用的人分别两部分，使得用户在编辑时不需要任何相关的技术基础，操作编辑系统没有代码层面的技术要求，用户可针对自己的喜好对首页进行自定义。

本发明的方法相对于现有的自定义首页方案，自定义配置时不仅仅调整每个模块的相应位置在页面上的部件进行调整，以模块和组件作为不同单元主体去移动配置，模块内部的相应布局和功能组件无法进行使用者也可以调配，而本发明针对这一问题作为发明构思，针对自定义主页进行改进，使得模块化的页面对模块的内部组件也可进行自定义编辑，在模块内部调整组件的位置，更加适配不同用户的使用，提高了主页的自定义程度，更加便于用户进行自定义调整。

在一些实施例中，基于上述方法提供一种基于可视化配置开发自定义首页的系统，包括存储器、处理器及存储在存储器上的计算机程序，所述计算机程序被处理器执行时实现上述方法的步骤。系统具体内容包括：

包括显示端1、控制端2，控制端2包括编辑系统3和操作系统4，显示端与控制端相关联；每个模块5包括子框架51和组件52，组件52布置在子框架51内，组件52通过编辑系统3改变在子框架51内的位置；显示端1生成的可视化页面包括主框架11，主框架11内设有多个模块框12，本实施例中的模块2包括模块A、模块B、模块C等，每个模块上对应设有组件52，如模块B的子框架上对应设有组件B1和组件B2，每个模块放在主框架对应的模块框内，模块2对应布置在模块框12内，子框架内设有多个用于显示所述组件的组件框，组件框内形成有子框标识，组件通过子标识与对应的子框标识进行匹配，主框架11和模块框12通过操作系统1进行编辑和预览；

操作系统4用于对模块2和组件52的功能进行后台配置；模块2在操作系统4上配置完成后生成特定标识进入编辑系统3；编辑系统3通过标识配置模块2在主框架11内的布局和组件52在子框架51内的位置。

具体配置时，编辑系统3包括数据源定义模块31和组件内容配置模块32，组件内容配置模块32与数据源定义模块31进行关联，数据源定义模块为每个模块2生成特定主标识，为组件52生成特定的子标识，组件内容配置模块42用于对组件52的内容进行编辑并组合封装成模块2。

在具体实施时，操作系统4包括列表板块41和预览板块42，每个模块2通过标识关联在列表板块41上进行可选择的排列展示，预览板块42用于对每个模块2进行独立放大预览，组件52通过标识关联在模块2上，通过在子框架51上拖拽组件52的标识拼装成特定的模块2。

操作系统4设有搜索板块43和编辑板块44，搜索板块43与模块2的标识关联，搜索板块43用于搜索模块2，模块2拖拽至编辑板块44内，模块2在编辑板块44内可进行缩放，模块2在编辑板块44内对组件52与子框架51的布局进行编辑。在操作系统4中，通过搜索板块43选择模块5，或者拖拽等操作，将模块放置到合适的区域；操作系统作为用户对首页进行编辑的工具，将控制器针对使用的人分别两部分，使得用户在编辑时不需要任何相关的技术基础，操作系统没有代码层面的技术要求，用户可针对自己的喜好对首页进行自定义。

此时控制器将获取此模块的标识ID，并以JSON格式保存；当用户编辑完成时，此JSON格式的配置字符通过接口形式保存至数据库中。

显示端1内设有解析器13，解析器13用于对模块2和组件52进行解析，解析器13与编辑系统3相关联，模块2在编辑系统3内进行编辑后，拖入显示端1内，解析器13对模块2进行解析，再对模块2内的组件52进行解析，令模块2展示在主框架11内。

显示端的框架和模块以及组件都是通过后端开发人员在操作系统上配置形成，用户通过操作系统可以对首页进行自定义的编辑预览和布局，再进行保存，通过显示端内的解析器进行解析并进行展示。

页面的底层组件可以选择后端开发人员独立开发编辑，或在Echarts开源数据可视化图表库中进行基础柱状图，曲线图，雷达图的封装，再次基础上结合服务器数据封装多个业务定制组件，并且后端技术人员在图标库的基础上结合用户需求和服务器数据，封装配置多个模块和组件，组件支持用户选择配置需要绘制的数据以及绘制的颜色，用户只关心需要展示什么模块以及模块需要展示哪些指标，并且可自定义图表颜色风格。

本实施例所表面的页面是指作为统计意义出现的页面，通常包含大量图表和统计数据，是一个轻量级配置系统，而轻量级配置系统，首页系统内容丰富而复杂，并非所有业务都会开发一个大屏，但是开发配置一个用图表展示统计数据的页面，对于绝大部分系统具有实际意义；本系统在应用后，技术人员仅需开发基础组件和配置模块，非技术人员的用户对首页进行配置，从而达到即配即用，所见即所得的首页效果，大大提升项目交付效率。

虽然本说明书包含很多具体的实施细节，但是这些不应当被解释为对任何发明的范围或者对可以要求保护的内容的范围的限制，而是作为可以使特定发明的特定实施方式具体化的特征的说明。在独立的实施方式的语境中的本说明书中描述的特定特征还可以与单个实施方式组合地实施。相反地，在单个实施方式的语境中描述的各种特征还可以独立地在多个实施方式中实施，或者在任何合适的子组合中实施。此外，虽然以上可以将特征描述为组合作用并且甚至最初这样要求，但是来自要求的组合的一个或多个特征在一些情况下可以从该组合去掉，并且要求的组合可以转向子组合或者子组合的变形。

此外，虽然以特定顺序在附图中描述了操作，但是不应当理解为：为了实现期望的结果，要求这样的操作以示出的特定顺序或者以顺序次序而执行，或者所有图示的操作都被执行。在特定情况下，多任务处理和并行处理可以是有利的。上述实施方式中的各种模块和组件的封装不应当理解为在所有实施方式中要求这样的封装，并且应当理解程序组件和系统可以通常被一体化在单个软件产品中或者打包至多个软件产品中。

以上所述实施例仅仅是本发明的优选实施方式进行描述，并非对本发明的范围进行限定，基于本发明中的实施方式，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施方式，都属于本发明保护的范围，在不脱离本发明构思的前提下，本领域普通技术人员对本发明的技术方案作出的各种变形和改进，均应落入本发明的权利要求书确定的保护范围内。