可视化界面配置方法、装置、计算机设备及存储介质与流程

本发明涉及计算机软件技术领域，尤其涉及一种可视化界面配置方法、装置、计算机设备及存储介质。

背景技术：

随着互联网技术的飞快发展，软件产品迭代快速，网页数量要求较多，因此，需要开发人员不断地进行研发和编译，以生成前端页面。但是这种方法需要大量开发人员，且需要开发人员具备较高的专业知识，人力成本较高；而且，编译代码，形成页面，工作量较大，导致开发效率低，开发时间过长，容易出现错误，难以满足高速迭代的产品需求。

技术实现要素：

本发明实施例提供一种可视化界面配置方法、装置、计算机设备及存储介质，以现有技术中页面开发过程中，人力成本较高，工作量较大，导致开发效率低，开发时间过长，容易出现错误的问题。

一种可视化界面配置方法，包括：

获取页面生成指令；

基于所述页面生成指令显示前端工作台，所述前端工作台包括多个待配置组件；

基于多个所述待配置组件，获取目标组件和与所述目标组件对应的目标参数；

采用目标模板解析器，对所述目标参数进行处理，获取所述目标组件对应的运行文件；

执行所述运行文件，显示目标页面。

一种可视化界面配置装置，包括：

页面生成指令获取模块，用于获取页面生成指令；

显示模块，用于基于所述页面生成指令显示前端工作台，所述前端工作台包括多个待配置组件；

组件参数获取模块，用于基于多个所述待配置组件，获取目标组件和与所述目标组件对应的目标参数；

运行文件获取模块，用于采用目标模板解析器，对所述目标参数进行处理，获取所述目标组件对应的运行文件；

目标页面模块，用于执行所述运行文件，显示目标页面。

一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述可视化界面配置方法的步骤。

一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述可视化界面配置方法的步骤。

上述可视化界面配置方法、装置、计算机设备及存储介质，该可视化界面配置方法基于所述页面生成指令显示前端工作台，所述前端工作台包括多个待配置组件开发人员可以通过前端工作台，对待配置组件进行组合设计和修改等，以得到目标组件，可以有效降低开发难度，减低开发人员的专业性，适用范围广；缩短开发时间，满足快速更改的设计需求，提高页面设计效率。基于多个所述待配置组件，获取目标组件和与所述目标组件对应的目标参数过程高度自动化，可以减少开发人员的工作量，加快开发效率，减少错误操作。采用目标模板解析器，对所述目标参数进行处理，获取所述目标组件对应的运行文件；执行所述运行文件，显示目标页面，实现自动化生成运行文件，减少开发人员编码，减低开发难度，提高开发效率。接着，开发人员点击运行文件，以执行该运行文件，显示目标页面，实现开发设计目标页面。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一实施例中可视化界面配置方法的一应用环境示意图；

图2是本发明一实施例中可视化界面配置方法的一流程图；

图3是本发明一实施例中可视化界面配置方法的另一流程图；

图4是本发明一实施例中可视化界面配置方法的另一流程图；

图5是本发明一实施例中可视化界面配置方法的另一流程图；

图6是本发明一实施例中可视化界面配置方法的另一流程图；

图7是本发明一实施例中可视化界面配置方法的另一流程图；

图8是本发明一实施例中可视化界面配置装置的一原理框图；

图9是本发明一实施例中计算机设备的一示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例提供的可视化界面配置方法，该可视化界面配置方法可应用如图1所示的应用环境中。具体地，该可视化界面配置方法应用在可视化界面配置系统中，该可视化界面配置系统包括如图1所示的客户端和服务器，客户端与服务器通过网络进行通信，用于实现快速、便捷地生成目标页面，提高页面开发效率；降低开发难度。其中，客户端又称为用户端，是指与服务器相对应,为客户提供本地服务的程序。客户端可安装在但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备上。服务器可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在一实施例中，如图2所示，提供一种可视化界面配置方法，以该方法应用在图1中的客户端为例进行说明，包括如下步骤：

s201：获取页面生成指令。

其中，页面生成指令是开发人员操作，以使客户端进入前端工作台，以便开发人员设计目标页面的指令。

s202：基于页面生成指令显示前端工作台，前端工作台包括多个待配置组件。

其中，待配置组件是指具备具体功能、可被复用的组件，本实施例是指vue示例。例如，待配置组件可以是按钮、评分、时间选择和级联选择等组件。

前端工作台是指是供开发人员使用的界面，开发人员可以在前端工作台上选择待配置组件，以对各个待配置组件进行组合设计，为后续形成个性化的目标页面提供技术支持。具体地，该前端工作台上设置有组件显示区域、修改区域和组件配置区域；其中，组件显示区域是用于显示待配置组件的区域。修改区域是用于对待配置组件进行修改的区域。组件配置区域是用户对待配置组件进行组合设计的区域。其中，目标页面是由开发人员自行设计形成的页面。

本实施例中，开发人员点击客户端上的页面生成按键，以形成页面生成指令，客户端基于该页面生成指令上显示前端工作台；开发人员在组件显示区域上直观地查看多个待配置组件，根据设计需求选择待配置组件；在组件配置区域上，对选中的待配置组件进行组合设计，当需要对待配置组件进行修改时，则点击待配置组件，形成替换指令，并在修改区域中对待配置组件进行修改，以得到目标组件，为后续形成目标页面提供技术支持。本实施例中，开发人员可以通过前端工作台，对待配置组件进行组合设计和修改等，以得到目标组件，可以有效降低开发难度，减低开发人员的专业性，适用范围广；缩短开发时间，满足快速更改的设计需求，提高页面设计效率。

s203：基于多个待配置组件，获取目标组件和与目标组件对应的目标参数。

其中，目标组件是开发人员需要的、后续可以生成目标页面的组件。目标参数是指目标组件对应的变量，例如，该目标参数可以是传递参数、组件名和组件路径等等，该传递参数是父目标组件传递函数到子目标组件的参数。组件路径是表示目标组件的地址。

具体地，开发人员在前端工作台上选中的待配置组件，并对待配置组件进行组合设计，形成目标组件，调用与目标组件对应的参数接口，得到目标组件对应的目标参数，过程高度自动化，可以减少开发人员的工作量，加快开发效率，减少错误操作。

s204：采用目标模板解析器，对目标参数进行处理，获取目标组件对应的运行文件。

s205：执行运行文件，显示目标页面。

其中，目标模板解析器用于对目标组件进行解析的解析器，以得到运行文件。

运行文件是指具有可执行程序的文件，该运行文件可在操作系统上运行。

本实施例中，调用目标模板解析器对目标组件进行解析，得到目标组件对应的代码，以便基于目标组件对应的代码得到运行文件，实现自动化生成运行文件，减少开发人员编码，减低开发难度，提高开发效率。接着，开发人员点击运行文件，以执行该运行文件，显示目标页面，实现开发设计目标页面。

本实施例所提供的可视化界面配置方法，基于页面生成指令显示前端工作台，前端工作台包括多个待配置组件开发人员可以通过前端工作台，对待配置组件进行组合设计和修改等，以得到目标组件，可以有效降低开发难度，减低开发人员的专业性，适用范围广；缩短开发时间，满足快速更改的设计需求，提高页面设计效率。基于多个待配置组件，获取目标组件和与目标组件对应的目标参数过程高度自动化，可以减少开发人员的工作量，加快开发效率，减少错误操作。采用目标模板解析器，对目标参数进行处理，获取目标组件对应的运行文件；执行运行文件，显示目标页面，实现自动化生成运行文件，减少开发人员编码，减低开发难度，提高开发效率。开发人员点击运行文件，以执行该运行文件，显示目标页面，实现开发设计目标页面。

在一实施例中，如图3所示，步骤s203，即基于多个待配置组件，获取目标组件和与目标组件对应的目标参数，包括：

s301：基于多个待配置组件，获取目标组件。

具体地，开发人员在前端工作台上查看待配置组件，每一待配置组件还携带有组件特性，用户根据该组件特性选择对应的开发需要的待配置组件，以得到目标组件，该配置过程直观，便捷，有效地提高开发效率。其中，组件特性是用于表示待配置组件的功能和实用方法等性质，例如，组件特性可以是待配置组件1与待配置组件2可以实现什么功能；或者待配置组件可以应用的页面。

s302：调用目标组件对应的参数接口，获取目标组件对应的目标参数。

其中，参数接口是用于获取参数的接口。本实施例中，当确定目标组件后，则直接调用目标组件对应的参数接口，以实现对目标组件的目标参数，为后续形成可以进行用户交互的目标页面提供技术支持，有效减少开发人员的开发难度。

本实施例所提供的可视化界面配置方法，基于多个待配置组件，获取目标组件，该配置过程直观，便捷，有效地提高开发效率。调用目标组件对应的参数接口，获取目标组件对应的目标参数，为后续形成可以进行用户交互的目标页面提供技术支持，有效减少开发人员的开发难度。

在一实施例中，目标参数进包括js参数和template参数。目标模板解析器包括js模板解析器和template模板解析器。

如图4所示，步骤s204，即采用目标模板解析器，对目标参数进行处理，获取目标组件对应的运行文件，包括：

s401：采用js模板解析器对js参数进行处理，获取js代码。

其中，js模板解析器是用于对js参数进行处理，以得到可运行的js代码的解析器。本实施例中，采用js模板解析器对js参数进行处理，实现自动化生成代码，有利于提高页面设计效率。

js代码是指js组件对应的代码。

s402：采用template模板解析器对template参数进行处理，获取template代码。

其中，template模板解析器是用于对template参数进行处理，以得到可运行的template代码的解析器。本实施例中，采用template模板解析器对template参数进行处理，实现自动化生成代码，有利于提高页面设计效率。

template代码是指目标组件对应的代码。本实施例中，将js参数和template参数分开处理，有利于提供参数处理效率；使得数据处理更加有序，便于后续出现错误的时候，快速查找错误原因和修改。

s403：对js代码和template代码进行拼接处理，获取目标组件对应的运行文件。

本实施例中，将js代码和template代码拼接在一起，以形成目标组件对应的运行文件，实现快速便捷地得到运行文件。

本实施例所提供的可视化界面配置方法，采用js模板解析器对js参数进行处理，获取js代码；采用template模板解析器对template参数进行处理，获取template代码，将js参数和template参数分开处理，有利于提供参数处理效率；使得数据处理更加有序，便于后续出现错误的时候，快速查找错误原因和修改。对js代码和template代码进行拼接处理，获取目标组件对应的运行文件，实现快速便捷地得到运行文件。

在一实施例中，步骤s501，即采用js模板解析器对js参数进行处理，获取js代码，包括：

遍历js参数，采用编译器对js组件和对应的js参数进行解析，获取js参数对应的js代码。

其中，编译器是用于将js组件和js参数转转为浏览器可识别的代码，实现自动化生成js代码，以保证后续的目标页面可以被浏览器识别。本实施例中，编译器是指babel，babel用于将js组件和对应的js参数转换为向后兼容的javascript语法，本实施例中，通过babel将js参数和js组件编译并转换成浏览器识别的js代码，实现自动化生成js代码，减少开发难度，加快开发效率。

在一实施例中，如图5所示，步骤s402，即采用template模板解析器对template参数进行处理，获取template代码，包括：

s501：遍历template参数，获取目标组件对应的组件id、源属性和函数方法。

本实施例中，组件id是用于唯一识别目标组件的id，本实施例中，组件id用于唯一识别目标组件。源属性是目标组件对应的属性，例如，class属性和“.”属性等。函数方法是目标组件对应的功能。

s502：基于组件id，获取目标组件对应的源码。

本实施例中，基于组件id查询数据库，以得到预先存储在数据库中，与该组件id对应的源码，为后续得到目标组件对应的template代码提供技术支持。

s503：将源属性和函数方法与目标组件对应的源码进行关联处理，获取template代码。

本实施例中，将源属性和函数方法与目标组件对应的源码进行关联处理，以实现快速地获取template代码，减少用户编译代码的步骤，有效减低开发难度，可以实现高效开发。

本实施例所提供的可视化界面配置方法，遍历template参数，获取目标组件对应的组件id、源属性和函数方法；基于组件id，获取目标组件对应的源码，为后续得到目标组件对应的template代码提供技术支持。将源属性和函数方法与目标组件对应的源码进行关联处理，获取template代码，减少用户编译代码的步骤，有效减低开发难度，可以实现高效开发。

在一实施例中，如图6所示，步骤s403，即对js代码和template代码进行拼接处理，获取目标组件对应的运行文件。

s601：获取原始模板，原始模板包括js模块和template模块。

s602：将js代码填充到js模块中，将template代码填充到template模块中，获取目标组件对应的运行文件。

其中，原始模板是指预先设定的，待填充的模板。js模块是用于容置js代码的模板。template模块是用于容置template代码的模板。

本实施例中，采用原始模板，有效地提供开发效率，降低开发难度，开发人员可以不需要专业性太高。将js代码和template代码分别填充至对应的模块中，即可形成运行文件，以加快开发速度。

本实施例所提供的可视化界面配置方法，获取原始模板，原始模板包括js模块和template模块，有效地提供开发效率，降低开发难度。将js代码填充到js模块中，将template代码填充到template模块中，获取目标组件对应的运行文件，以加快开发速度。

在一实施例中，如图7所示，在步骤s204之后，即在获取目标组件对应的运行文件之后，方法还包括：

s701：调用预览接口对运行文件进行处理，形成预览页面，显示预览页面。

其中，预览接口是设置在前端工作台中，用于对目标组件和目标参数进行预生成处理，得到预览页面，以查看预览页面的页面布局和设计，判断预览页面是否满足设计开发的要求，保证后续的目标页面满足开发人员的开发需求。预览页面是预先生成的界面。

本实施例中，采用预览接口执行运行文件，得到预览页面，以判断预览页面是否满足设计开发的要求，如果预览页面不满足设计开发的要求，则可以快速地修改目标组件和目标参数，保证后续的目标页面满足开发人员的开发需求。

s702：基于预览页面，获取用户指令。

s703：若用户指令为确认指令，则运行执行运行文件，显示目标页面。

s704：若用户指令为替换指令，则执行基于待配置组件，获取替换组件和与替换组件对应的替换参数；采用目标模板解析器，对替换参数进行处理，获取替换组件对应的运行文件。

其中，用户指令指是否对目标组件和目标参数进行的指令。确认指令是确定不需要对目标组件和目标参数进行修改的指令。替换指令是需要对目标组件和目标参数进行修改的指令。

具体地，当预览页面满足设计开发的要求，则开发人员确定不需要对目标组件和目标参数进行修改，则点击确认按键，此时，形成的用户指令为确认指令，以便执行步骤s203和s204；当预览页面不满足设计开发的要求，则开发人员需要对目标组件和目标参数进行修改，则点击修改按键，此时，形成的用户指令为替换指令，以便开发人员可以从待配置组件中选择其他的组件，作为替换组件，并调用该替换组件对应的参数接口，得到替换参数，实现灵活地替换，开发人员可以直接在前端工作台上进行替换组件，提高开发效率，缩短开发时间，保证后续的目标页面满足开发人员的开发需求。

本实施例所提供的可视化界面配置方法，调用预览接口对目标参数进行处理，形成预览页面，显示预览页面，保证后续的目标页面满足开发人员的开发需求。基于预览页面，获取用户指令；若用户指令为确认指令，则运行执行运行文件，显示目标页面。若用户指令为替换指令，则基于待配置组件，获取替换组件和与替换组件对应的替换参数；采用目标模板解析器，对替换参数进行处理，获取替换组件对应的运行文件，开发人员可以直接在前端工作台上进行替换组件，提高开发效率，缩短开发时间，保证后续的目标页面满足开发人员的开发需求。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

在一实施例中，提供一种可视化界面配置装置，该可视化界面配置装置与上述实施例中可视化界面配置方法一一对应。如图8所示，该可视化界面配置装置包括页面生成指令获取模块801、显示模块802、组件参数获取模块803、运行文件获取模块804和目标页面模块805。各功能模块详细说明如下：

页面生成指令获取模块801，用于获取页面生成指令。

显示模块802，用于基于页面生成指令显示前端工作台，前端工作台包括多个待配置组件。

组件参数获取模块803，用于基于多个待配置组件，获取目标组件和与目标组件对应的目标参数。

运行文件获取模块804，用于采用目标模板解析器，对目标参数进行处理，获取目标组件对应的运行文件。

目标页面模块805，用于执行运行文件，显示目标页面。

优选地，组件参数获取模块803，包括：目标组件获取单元和目标参数获取单元。

目标组件获取单元，用于基于多个待配置组件，获取目标组件。

目标参数获取单元，用于调用目标组件对应的参数接口，获取目标组件对应的目标参数。

优选地，运行文件获取模块804，包括：js代码获取单元、template代码获取单元和运行文件获取单元。

js代码获取单元，用于采用js模板解析器对js参数进行处理，获取js代码。

template代码获取单元，用于采用template模板解析器对template参数进行处理，获取template代码。

运行文件获取单元，用于对js代码和template代码进行拼接处理，获取目标组件对应的运行文件。

优选地，js代码获取单元，包括：js遍历子单元。

js遍历子单元，用于遍历js参数，采用编译器对js组件和对应的js参数进行解析，获取js参数对应的js代码。

优选地，template代码获取单元，包括：template遍历子单元、源码获取子单元、关联处理子单元

template遍历子单元，用于遍历template参数，获取目标组件对应的组件id、源属性和函数方法。

源码获取子单元，用于基于组件id，获取目标组件对应的源码。

关联处理子单元，用于将源属性和函数方法与目标组件对应的源码进行关联处理，获取template代码。

优选地，运行文件获取单元，包括：原始模板获取子单元和填充子单元。

原始模板获取子单元，用于获取原始模板，原始模板包括js模块和template模块。

填充子单元，用于将js代码填充到js模块中，将template代码填充到template模块中，获取目标组件对应的运行文件。

优选地，在运行文件获取模块804之后，装置还包括：预览页面模块、用户指令获取模块、确认指令模块和替换指令模块。

预览页面模块，用于调用预览接口对运行文件进行处理，形成预览页面，显示预览页面。

用户指令获取模块，用于基于预览页面，获取用户指令。

确认指令模块，用于若用户指令为确认指令，则运行目标页面模块805。

替换指令模块，用于若用户指令为替换指令，则执行组件参数获取模块803和运行文件获取模块804。

关于可视化界面配置装置的具体限定可以参见上文中对于可视化界面配置方法的限定，在此不再赘述。上述可视化界面配置装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是客户端，其内部结构图可以如图9所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储待配置组件。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种可视化界面配置方法。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例中可视化界面配置方法的步骤，例如图2所示的步骤s201-s205，或者图3至图7中所示的步骤，为避免重复，这里不再赘述。或者，处理器执行计算机程序时实现可视化界面配置装置这一实施例中的各模块/单元的功能，例如图8所示的页面生成指令获取模块801、显示模块802、组件参数获取模块803、运行文件获取模块804和目标页面模块805的功能，为避免重复，这里不再赘述。

在一实施例中，提供一计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中可视化界面配置方法的步骤，例如图2所示的步骤s201-s205，或者图3至图7中所示的步骤，为避免重复，这里不再赘述。或者，处理器执行计算机程序时实现可视化界面配置装置这一实施例中的各模块/单元的功能，例如图8所示的页面生成指令获取模块801、显示模块802、组件参数获取模块803、运行文件获取模块804和目标页面模块805的功能，为避免重复，这里不再赘述。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦除可编程rom(eeprom)或闪存。易失性存储器可包括随机存取存储器(ram)或者外部高速缓冲存储器。作为说明而非局限，ram以多种形式可得，诸如静态ram(sram)、动态ram(dram)、同步dram(sdram)、双数据率sdram(ddrsdram)、增强型sdram(esdram)、同步链路(synchlink)dram(sldram)、存储器总线(rambus)直接ram(rdram)、直接存储器总线动态ram(drdram)、以及存储器总线动态ram(rdram)等。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。

以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。