CN111443911A - 一种页面开发方法、装置、电子设备及计算机存储介质 - Google Patents

Abstract

本申请公开了一种页面开发方法、装置、电子设备及计算机存储介质，应用于页面开发平台，进行可视化页面开发。页面开发平台包括组件区、页面编辑区和属性设置区。该方法包括接收用户基于指定页面对应的业务需求，在组件区移动的至少一个目标组件，显示在页面编辑区；加载每个目标组件的配置文件并分别显示在属性设置区并进行处理，得到目标配置文件；调用事件绑定功能，创建每个目标组件之间的关联关系，实现目标组件之间的触发到响应的联调；最后经过渲染处理，得到指定页面。可见，本发明实施例提供的方法，采用拖拽的开发方式，将所需的组件进行拖拽和属性配置完成页面搭建，解放前端资源，可节省前端和后端联调的时间，提升开发效率。

Description

一种页面开发方法、装置、电子设备及计算机存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面开发方法、装置、电子设备及计算机存储介质。

背景技术

为了获得满足自身需求的产品，通常采用开发平台进行开发，即通过一些配置和写入相关代码即可以完成一个业务系统的开发。开发平台主要开发表单类，列表类，报表类等页面。例如，在利用开发平台进行页面开发时，用户在开发过程中会有各种各样的页面需求，有的页面上元素比较少，有的页面上元素非常复杂。开发平台可以根据页面上所要呈现的元素的多少来开发对应的业务逻辑，得到可实现对应功能的页面。

在利用现有的开发平台进行页面开发时，通常需要经历下面几个步骤：根据该页面的需求，由后端工程师和前端工程师同时进行开发，然后将后端工程师和前端工程师的开发资源进行联调得到页面，最后经过提测和上线完成整个开发过程。

但是，在传统开发模式中，经常会出现前后端联调时接口文档更新不及时，或者接口字段沟通有出入等问题，导致联调成本增加，甚至有时联调时间比开发时间还要多，导致页面开发效率低下。

发明内容

本申请提供了一种页面开发方法、装置、电子设备及计算机存储介质，以解决现有的页面开发方法的开发效率较低的问题。

第一方面，本申请提供了一种页面开发方法，包括以下步骤：

接收用户基于指定页面对应的业务需求，在组件区移动的对应至少一个目标组件，显示在页面编辑区；

将所述页面编辑区的每个所述目标组件的配置文件，显示在属性设置区，所述属性设置区用于供用户对所述目标组件的配置文件进行处理，得到目标配置文件；

调用事件绑定功能，创建每个所述目标组件之间的关联关系，所述每个目标组件之间的关联关系用于实现目标组件之间的触发到响应的联调；

基于每个所述目标组件的目标配置文件以及每个所述目标组件之间的关联关系进行渲染处理，得到指定页面。

进一步地，所述调用事件绑定功能，创建每个所述目标组件之间的关联关系，包括：

选取作为触发器的目标组件，以及，选取作为响应的目标组件，所述触发器对应至少一个响应，所述触发器与所述响应用于实现目标组件之间的联动；

调用事件绑定功能，将作为触发器的目标组件与对应的作为响应的至少一个目标组件建立关联关系，每个所述目标组件之间的关联关系为触发器与至少一个响应的联调关系。

进一步地，所述基于每个目标组件的目标配置文件以及每个所述目标组件之间的关联关系进行渲染处理，得到指定页面，包括：

获取每个目标组件的目标配置文件；

创建页面渲染实例，所述页面渲染实例用于提供页面布局；

将每个所述目标组件的目标配置文件添加到所述页面渲染实例中；

调用所述目标组件之间的关联关系，进行页面渲染；

将页面渲染的结果进行存储，以及，创建删除按钮和卸载按钮，得到指定页面。

进一步地，所述接收用户基于指定页面对应的业务需求，在组件区移动的对应至少一个目标组件，显示在页面编辑区，包括：

接收用户基于指定页面对应的业务需求，在组件区中选取对应的至少一个目标组件时产生的触发指令；

响应于每个所述触发指令，调用拖拽接口，将至少一个所述目标组件添加至页面编辑区进行显示。

进一步地，所述调用事件绑定功能，创建每个所述目标组件之间的关联关系之后，还包括：

触发页面预览功能，根据所述每个目标组件的目标配置文件和每个所述目标组件之间的关联关系，生成预览页面。

进一步地，还包括：

获取新业务需求对应的至少一个新组件；

调用事件绑定功能，建立所述新组件之间的关联关系；

获取所述指定页面的特定版本组件，所述特定版本组件包括目标组件的目标配置文件以及目标组件之间的关联关系；

基于所述特定版本组件和新组件之间的关联关系进行渲染处理，生成新页面。

进一步地，还包括：

触发功能测试和接口测试功能，对所述指定页面进行测试；

在测试通过的情况下，生成访问链接，所述访问链接用于操作指定页面实现业务需求。

第二方面，本申请提供了一种页面开发装置，包括：

组件移动模块，用于接收用户基于指定页面对应的业务需求，在组件区移动的对应至少一个目标组件，显示在页面编辑区；

加载器模块，用于将所述页面编辑区的每个所述目标组件的配置文件，显示在属性设置区，所述属性设置区用于供用户对所述目标组件的配置文件进行处理，得到目标配置文件；

关系解析引擎模块，用于调用事件绑定功能，创建每个所述目标组件之间的关联关系，所述每个目标组件之间的关联关系用于实现目标组件之间的触发到响应的联调；

渲染引擎模块，用于基于每个所述目标组件的目标配置文件以及每个所述目标组件之间的关联关系进行渲染处理，得到指定页面。

进一步地，所述关系解析引擎模块，包括：

组件功能选取单元，用于选取作为触发器的目标组件，以及，选取作为响应的目标组件，所述触发器对应至少一个响应，所述触发器与所述响应用于实现目标组件之间的联动；

关联关系创建单元，用于调用事件绑定功能，将作为触发器的目标组件与对应的作为响应的至少一个目标组件建立关联关系，每个所述目标组件之间的关联关系为触发器与至少一个响应的联调关系。

进一步地，所述渲染引擎模块，包括：

配置文件获取单元，用于获取每个目标组件的目标配置文件；

实例创建单元，用于创建页面渲染实例，所述页面渲染实例用于提供页面布局；

配置文件添加单元，用于将每个所述目标组件的目标配置文件添加到所述页面渲染实例中；

渲染单元，用于调用所述目标组件之间的关联关系，进行页面渲染；

指定页面生成单元，用于将页面渲染的结果进行存储，以及，创建删除按钮和卸载按钮，得到指定页面。

进一步地，所述组件移动模块，包括：

目标组件选取单元，用于接收用户基于指定页面对应的业务需求，在组件区中选取对应的至少一个目标组件时产生的触发指令；

组件移动单元，用于响应于每个所述触发指令，调用拖拽接口，将至少一个所述目标组件添加至页面编辑区进行显示。

进一步地，还包括：

页面预览模块，用于触发页面预览功能，根据所述每个目标组件的目标配置文件和每个所述目标组件之间的关联关系，生成预览页面。

进一步地，还包括：

新组件获取模块，用于获取新业务需求对应的至少一个新组件；

关联关系建立模块，用于调用事件绑定功能，建立所述新组件之间的关联关系；

特定版本组件获取模块，用于获取所述指定页面的特定版本组件，所述特定版本组件包括目标组件的目标配置文件以及目标组件之间的关联关系；

新页面生成模块，用于基于所述特定版本组件和新组件之间的关联关系进行渲染处理，生成新页面。

进一步地，还包括：

测试功能触发模块，用于触发功能测试和接口测试功能，对所述指定页面进行测试；

访问链接生成模块，用于在测试通过的情况下，生成访问链接，所述访问链接用于操作指定页面实现业务需求。

第三方面，本申请提供一种电子设备，包括：

存储器，用于存储程序指令；

处理器，用于调用并执行所述存储器中的程序指令，以实现第一方面所述的页面开发方法。

第四方面，本申请提供一种计算机存储介质，所述计算机存储介质中存储有计算机程序，当页面开发装置的至少一个处理器执行所述计算机程序时，页面开发装置执行第一方面所述的页面开发方法。

由以上技术方案可知，本申请提供了一种页面开发方法、装置、电子设备及计算机存储介质，应用于页面开发平台，进行可视化页面开发。页面开发平台包括组件区、页面编辑区和属性设置区。该方法包括接收用户基于指定页面对应的业务需求，在组件区拖拽的对应的至少一个目标组件，显示在页面编辑区；加载每个目标组件的配置文件，将每个目标组件的配置文件显示在属性设置区并进行处理，得到目标配置文件；调用事件绑定功能，创建每个目标组件之间的关联关系，实现目标组件之间的触发到响应的联调；最后经过渲染处理，得到指定页面。可见，本发明实施例提供的方法，采用拖拽的开发方式，将所需的组件进行拖拽和属性配置完成页面搭建，解放前端资源，可节省前端和后端联调的时间，提升开发效率。

附图说明

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

图1为本发明实施例提供的页面开发平台的结构框图；

图2为本发明实施例提供的编辑器的示意图；

图3为本发明实施例提供的页面开发方法的流程图；

图4为本发明实施例提供的渲染过程的方法流程图；

图5为本发明实施例提供的另一种页面开发方法的流程图；

图6为本发明实施例提供的页面开发方法的流程框图；

图7为本发明实施例提供的页面开发方法的完整流程图；

图8为本发明实施例提供的页面开发装置的结构框图；

图9为本发明实施例提供的电子设备的硬件结构示意图。

具体实施方式

图1为本发明实施例提供的页面开发平台的结构框图。本发明实施例提供的一种页面开发方法，应用于页面开发平台。参见图1，页面开发平台包括开发平台和内置于开发平台内的SDK(Software Development Kit，软件开发工具包)，开发平台用于提供网站、用户使用界面，为用户呈现开发页面；SDK用于实现开发平台的各种功能。

开发平台包括项目模块、页面模块和组件UI及关系模块。项目模块用于提供每个开发项目所需的功能，如项目列表、修改、定制组件、表单、图、列表、项目管理、新增、删减等功能。页面模块即开发页面中的四个区，包括组件区、页面编辑区、属性设置区和功能区。组件UI及关系模块用于提供组件库，组件库包括多个相互关联的组件，一套关联的组件实现一个业务逻辑，完成一个项目的开发。

SDK包括加载器、渲染引擎和关系解析引擎。加载器用于加载每个组件的配置文件，即加载工具，实现资源的加载。比如，用户在平台中移动一个组件进入到编辑区，由加载器加载该组件的配置文件。渲染引擎用于实现编辑器，经过渲染过程后可生成用户所需的页面。关系解析引擎用于处理组件UI及关系模块中各组件可实现的功能，并创建各组件之间的关联关系，将实现同一业务逻辑的各个组件的关联关系呈现在页面上。

图2为本发明实施例提供的编辑器的示意图。参见图2，编辑器配置在页面模块，用于呈现开发所需的操作页面，该操作页面上显示有组件区、页面编辑区、属性设置区和功能区。组件区内列有组件UI及关系模块提供的组件库；页面编辑区用于对每个移动过来的组件进行编辑，使多个组件按照一定的布局形式进行显示；属性设置区用于显示每个组件的设置文件，以根据每个开发项目的所需参数对各个组件的设置文件进行修改，得到用户所需的配置文件；功能区用于提供在操作编辑器时对页面进行开发所需的功能，如保存、关系模式、预览、测试、上线和返回等功能。

开发平台提供编辑器对页面进行开发，该编辑器为可视化页面编辑器，方便快速搭建页面布局，实现功能；大大降低页面开发难度，使用者能够快速完成页面配置，无需前端工程师支持，提高页面开发效率。用户通过可视化编辑器，将平台提供的组件拖拽到编辑器中，进行相应的排列组合，得到后台视图页面，即用户所需的某个项目的页面。

图3为本发明实施例提供的页面开发方法的流程图。参见图3，本发明实施例提供的一种页面开发方法，执行主体为浏览器，浏览器内配置有页面开发平台，该方法包括以下步骤：

S1、接收用户基于指定页面对应的业务需求，在组件区移动的对应至少一个目标组件，显示在页面编辑区。

用户在开发某个项目时，即可确定对应的业务需求，业务需求包括最后生成的指定页面的所需的组件。用户在将所需的组件进行布局和渲染前，需在组件区移动对应的目标组件到页面编辑区。浏览器根据用户的操作，实现将各个目标组件在页面编辑区的显示。

具体地，该过程包括：

S11、接收用户基于指定页面对应的业务需求，在组件区中选取对应的至少一个目标组件时产生的触发指令。

S12、响应于每个所述触发指令，调用拖拽接口，将至少一个目标组件添加至页面编辑区进行显示。

用户基于业务需求，确定所需的目标组件，用户将组件区中展示的目标组件依次拖拽到页面编辑区。用户在组件区中每拖拽(移动)一个目标组件，均会产生对应的触发指令，浏览器获取该触发指令，并依据触发指令实现目标组件的拖拽。实现拖拽过程是拖拽接口，配置在SDK，用户每移动一个目标组件，浏览器响应对应的触发指令，即调用一次拖拽接口，将目标组件添加至页面编辑区进行显示。页面编辑区可设置每个目标组件的位置和页面布局形式。

S2、将页面编辑区的每个目标组件的配置文件，显示在属性设置区，属性设置区用于供用户对目标组件的配置文件进行处理，得到目标配置文件。

利用加载器将每个目标组件的配置文件进行加载，并分别显示在属性设置区。例如，当前移动的是组件A，则由加载器加载组件A的配置文件，并显示在属性设置区；下一个移动的是组件B，则由加载器加载组件B的配置文件，并显示在属性设置区。此时，属性设置区显示的内容由组件A的配置文件替换为组件B的配置文件。

将每个所需的目标组件拖拽到页面编辑区后，属性设置区显示每个目标组件的默认参数。为使每个目标组件符合业务需求，需对每个目标组件的配置文件进行处理，以得到符合页面开发需求的配置文件。即可依据页面开发需求，对每个目标组件的配置文件进行修改，得到对应的目标配置文件。

在完成每个目标组件的配置文件修改之后，将修改后的配置文件更新到相应的目标组件中，在后续进行页面开发时，依据的是每个目标组件的修改后的配置文件。

S3、调用事件绑定功能，创建每个目标组件之间的关联关系，每个目标组件之间的关联关系用于实现目标组件之间的触发到响应的联调。

为达到业务需求，在将各个目标组件拖拽到页面编辑区以及对相应的配置文件进行修改后，需对各个目标组件建立关联关系，以实现组件之间的联动，即完成触发到响应的联调，实现相应的功能。

本实施例中，利用关系解析引擎调用事件绑定功能实现每个目标组件之间的关联。事件绑定功能配置在浏览器中，在创建组件的关联关系时，直接调用该功能即可。

具体地，本实施例中，调用事件绑定功能，创建每个所述目标组件之间的关联关系的过程，包括：

S31、选取作为触发器的目标组件，以及，选取作为响应的目标组件，触发器对应至少一个响应，触发器与响应用于实现目标组件之间的联动。

在建立每个目标组件之间的关联关系时，需根据每个目标组件所能实现的功能来确定哪些目标组件可作为触发器，哪些目标组件可作为响应。

例如，业务需求为考勤系统，则需要开发的页面中显示姓名、列表、时间等。如果某个用户想要查询自己的打卡情况，则需要在输入框中输入时间条件，以在列表中筛选出自己的打开情况。此时，目标组件包括姓名、列表、日期、输入框、弹出框等。

用户在查询自己的打卡情况时，在输入框中输入目标时间段，并以弹出框的形式弹出表单，以呈现查询结果。此时，输入框、弹出框、表单(列表)可作为关联组件，输入框为触发器，弹出框和表单为响应。

S32、调用事件绑定功能，将作为触发器的目标组件与对应的作为响应的至少一个目标组件建立关联关系，每个目标组件之间的关联关系为触发器与至少一个响应的联调关系。

在确定出每个目标组件的执行功能后，调用浏览器内的事件绑定功能，建立作为触发器的目标组件与对应的作为响应的至少一个目标组件的关联关系，实现触发到响应的联调。

本实施例中，建立目标组件之间的关联关系的过程可发生在页面渲染的过程中，即在进行页面渲染时，同步利用关系解析引擎调用事件绑定功能建立各目标组件之间的关联关系，形成多级嵌套的联调，实现组件之间的联动。

S4、基于每个目标组件的目标配置文件以及每个目标组件之间的关联关系进行渲染处理，得到指定页面。

在完成目标组件的选取，触发器和响应的划分，以及页面布局等，可调用渲染引擎，对当前的开发过程进行渲染，即将各个目标组件以及各目标组件之间的嵌套层级关系通过递归渲染成完整的页面。

图4为本发明实施例提供的渲染过程的方法流程图。参见图4，具体地，本实施例中，基于每个目标组件的目标配置文件以及每个所述目标组件之间的关联关系进行渲染处理，得到指定页面的过程，包括：

S41、获取每个目标组件的目标配置文件。

S42、创建页面渲染实例，页面渲染实例用于提供页面布局。

S43、将每个目标组件的目标配置文件添加到页面渲染实例中。

S44、调用目标组件之间的关联关系，进行页面渲染。

S45、将页面渲染的结果进行存储，以及，创建删除按钮和卸载按钮，得到指定页面。

在进行页面渲染时，依据的是每个目标组件的配置文件，此处的配置文件为修改后的目标配置文件。将每个目标组件的目标配置文件进行加载，并创建一个页面渲染实例，页面渲染实例可根据页面布局而定，而页面布局可根据用户拖拽每个目标组件到页面编辑区的设置位置有关。

将每个目标组件的目标配置文件添加到页面渲染实例中，进行实例化。再调用目标组件之间的关联关系，进行页面渲染。渲染过程为递归过程，将目标组件之间的关系进行嵌套，形成多级嵌套关系，如组件A与组件B进行关联，再将组件B分别与组件C和组件D进行关联。

在完成多目标组件的层级嵌套和页面布局渲染之后，将得到的页面渲染结果进行挂载，存储在浏览器的内存空间，便于后续进行使用。同时，在渲染页面添加删除按钮。删除按钮可在用户在不需要某个功能时，可点击删除按钮，将实现该功能的关联关系删除掉。

在渲染页面创建卸载按钮，卸载按钮可实现该页面的卸载，即在用户不需要开发的页面时，如考勤系统，可点击卸载按钮，将该页面卸载，即将考勤系统卸载。

在完成目标组件的拖拽、布局、组件之间的关联关系的创建、渲染过程后，即可得到满足业务需求对应的指定页面。

用户在操作开发平台开发相应的页面时，在渲染得到指定页面之前，为便于可对该页面进行及时修改和调整，本实施例提供的方法，可在开发过程中，对即将生成的页面进行预览。

具体地，在调用事件绑定功能，创建每个目标组件之间的关联关系之后，还包括：触发页面预览功能，根据每个目标组件的目标配置文件和每个目标组件之间的关联关系，生成预览页面。

开发平台的功能区设置有预览按钮，开发人员可根据自己的开发进度，在完成每个目标组件之间的关联关系的创建之后，或创建过程中，点击预览按钮，触发页面预览功能，弹出预览页面。预览页面中可显示页面布局，也可呈现目标组件之间所能实现的联动过程。

在页面开发过程中，对页面进行预览，可在预览到最后得到的指定页面时，若页面布局不符合业务需求，或目标组件的组件选取出现差错，均可在此阶段进行更改，避免在完成指定页面的生成后，才发现页面不符合业务需求，此时需要重新进行开发。可见，页面预览可提高开发效率。

本发明实施例提供的页面开发平台具有丰富的UI组件库，快捷方便的操作界面，一站式的开发流程，方便快捷的接入方式等特点。在进行页面开发时，用户所采用是方法可以通过此平台提供的各个组件来完成页面的搭建、通过可视化界面的拖拽生成UI界面、通过关系解析引擎来配置各个组件之间的交互关系、通过平台提供的发布功能一站式发布上线。最终，用户开发的页面只需要引入发布生成的脚本，即可完成整个开发过程。本实施例提供的页面开发平台，可将复杂的前端页面交互抽象成用户可以配置的各个属性，随配随变。解决前端开发人员大量重复开发的工作，极大提升开发效率。采用本实施例的页面开发方法，通过页面搭建、属性配置方式可以很好的解放前端资源，提升前端开发效率高达75％。

大部分的后台系统的前端页面级交互逻辑都是相似的，即可以通过本实施例提供的页面开发平台配置完成。并且，针对一些特殊的情况现有的开发平台无法覆盖到，而本实施例提供的页面开发平台，为特殊业务需求提供定制化组件的方案，以此来满足某些情况下的特殊需求。用户可根据自己的业务需求，在开发平台内的组件区选择对应的目标组件，通过拖拽完成组件的搭建，以实现满足自身业务需求的个性化配置。

除此以为，本发明实施例提供的页面开发方法，还可在完成指定页面后，将该指定页面作为页面模板，在为其他后台系统开发其前端页面时，可直接一键复制即可在自己的项目中使用，极大降低重复的工作，提高页面开发的高可复用性。

图5为本发明实施例提供的另一种页面开发方法的流程图；图6为本发明实施例提供的页面开发方法的流程框图。参见图5和图6，为此，本发明实施例提供的页面开发方法，还包括：

S601、获取新业务需求对应的至少一个新组件。

S602、调用事件绑定功能，建立新组件之间的关联关系。

S603、获取指定页面的特定版本组件，特定版本组件包括目标组件的目标配置文件以及目标组件之间的关联关系。

S604、基于特定版本组件和新组件之间的关联关系进行渲染处理，生成新页面。

用户在选择页面模板作为页面开发基础时，可在页面模板上增加或删除相应的功能，以满足自身的业务需求。将新业务需求与在先业务需求进行对比，确定出新组件，在组件区拖拽新组件至页面编辑区，经过修改配置文件后，由关系解析引擎调用事件绑定功能，建立新组件之间的关联关系，该关联关系包括新组件与新组件的关联关系，以及，新组件与在先目标组件之间的关联关系。

由加载器调用页面模板的特定版本组件，即指定页面的特定版本组件，进行渲染处理，即重新渲染新组件之间的关联关系以及新组件与在先目标组件的关联关系，形成层级嵌套的组件关系，形成新页面，该新页面满足新业务需求。

例如，在某个指定页面中，如果输入框采用大尺寸的输入框，而新业务需求需要小尺寸的输入框，此时可在指定页面的特定版本组件基础上，将打尺寸的输入框删除，同时，添加小尺寸的输入框，以满足当前的业务需求。该方法还可应用在对现有版本的页面进行升级的情况，大尺寸的输入框为1.0版本，而小尺寸的输入框为2.0版本。

为了达到高效的页面开发，本发明实施例提供的页面开发平台可实现页面发布测试及上线一站式服务，页面从预览、测试到上线，可在页面开发平台上一键完成操作。为此，本发明实施例提供的页面方法，还包括：

S701、触发功能测试和接口测试功能，对指定页面进行测试。

S702、在测试通过的情况下，生成访问链接，访问链接用于操作指定页面实现业务需求。

页面开发平台提供的功能区中设置有测试按钮，点击测试按钮，可触发功能测试和接口测试功能，对指定页面进行测试。功能测试用于对目标组件之间的联动所能实现的功能进行测试，测试是否可实现相应功能，例如，弹窗是否可弹出、参数名称是否正确等。接口测试功能用于进行前后端接口文档是否匹配一致，前后端数据是否一致。

在功能测试和接口测试均通过的情况下，可对开发出的指定页面进行上线发布，供用户使用。在上线发布时，可以访问链接的形式，置于某个服务中，用户操作该服务，点击访问链接，即可操作指定页面实现业务需求。

图7为本发明实施例提供的页面开发方法的完整流程图。参见图7，本发明实施例提供的页面开发方法，在利用页面开发平台进行页面开发时，用户进行登录，经过权限控制后确定自己要开发的项目，进入项目管理。在项目管理中可为新建项目定制组件，按照配置Json和接口数据对组件进行本地开发，得到定制化的组件，满足用户需求。组件经过测试后发布在开发平台，进行线上测试，得到可用的版本。各个组件放置在组件区，形成丰富的组件库。

用户在开发页面阶段，在编辑器中按照业务需求进行组件拖拽，并设置页面布局和页面样式，对每个组件的属性进行配置，组件之间的关系进行设置，进行页面预览，最后经过接口测试和功能测试得到指定页面，等待发布。发布时，经过一键提测和一键发布进行上线，由模板下载模块将指定页面生成访问链接，内置于服务中，有用户访问服务中的访问链接，进行线上验收，操作指定页面满足自己的业务需求。

由以上技术方案可知，本申请提供了一种页面开发方法，应用于页面开发平台，进行可视化页面开发。页面开发平台包括组件区、页面编辑区和属性设置区。该方法包括接收用户基于指定页面对应的业务需求，在组件区移动的对应的至少一个目标组件，显示在页面编辑区；加载每个目标组件的配置文件，将每个目标组件的配置文件分别显示在属性设置区并进行处理，得到目标配置文件；调用事件绑定功能，创建每个目标组件之间的关联关系，实现目标组件之间的触发到响应的联调；最后经过渲染处理，得到指定页面。可见，本发明实施例提供的方法，采用拖拽的开发方式，将所需的组件进行拖拽和属性配置完成页面搭建，解放前端资源，可节省前端和后端联调的时间，提升开发效率。

图8为本发明实施例提供的页面开发装置的结构框图。参见图8，本申请提供了一种页面开发装置，应用于页面开发平台，用于执行图3所示的页面开发方法，该装置包括：组件移动模块10，用于接收用户基于指定页面对应的业务需求，在组件区移动的对应至少一个目标组件，显示在页面编辑区；加载器模块20，用于将所述页面编辑区的每个所述目标组件的配置文件，显示在属性设置区，所述属性设置区用于供用户对所述目标组件的配置文件进行处理，得到目标配置文件；关系解析引擎模块30，用于调用事件绑定功能，创建每个所述目标组件之间的关联关系，所述每个目标组件之间的关联关系用于实现目标组件之间的触发到响应的联调；渲染引擎模块40，用于基于每个所述目标组件的目标配置文件以及每个所述目标组件之间的关联关系进行渲染处理，得到指定页面。

进一步地，所述关系解析引擎模块40，包括：组件功能选取单元，用于选取作为触发器的目标组件，以及，选取作为响应的目标组件，所述触发器对应至少一个响应，所述触发器与所述响应用于实现目标组件之间的联动；关联关系创建单元，用于调用事件绑定功能，将作为触发器的目标组件与对应的作为响应的至少一个目标组件建立关联关系，每个所述目标组件之间的关联关系为触发器与至少一个响应的联调关系。

进一步地，所述渲染引擎模块50，包括：配置文件获取单元，用于获取每个目标组件的目标配置文件；实例创建单元，用于创建页面渲染实例，所述页面渲染实例用于提供页面布局；配置文件添加单元，用于将每个所述目标组件的目标配置文件添加到所述页面渲染实例中；渲染单元，用于调用所述目标组件之间的关联关系，进行页面渲染；指定页面生成单元，用于将页面渲染的结果进行存储，以及，创建删除按钮和卸载按钮，得到指定页面。

进一步地，所述组件移动模块10，包括：目标组件选取单元，用于接收用户基于指定页面对应的业务需求，在组件区中选取对应的至少一个目标组件时产生的触发指令；组件移动单元，用于响应于每个所述触发指令，调用拖拽接口，将至少一个所述目标组件添加至页面编辑区进行显示。

进一步地，还包括：页面预览模块，用于触发页面预览功能，根据所述每个目标组件的目标配置文件和每个所述目标组件之间的关联关系，生成预览页面。

进一步地，还包括：新组件获取模块，用于获取新业务需求对应的至少一个新组件；关联关系建立模块，用于调用事件绑定功能，建立所述新组件之间的关联关系；特定版本组件获取模块，用于获取所述指定页面的特定版本组件，所述特定版本组件包括目标组件的目标配置文件以及目标组件之间的关联关系；新页面生成模块，用于基于所述特定版本组件和新组件之间的关联关系进行渲染处理，生成新页面。

进一步地，还包括：测试功能触发模块，用于触发功能测试和接口测试功能，对所述指定页面进行测试；访问链接生成模块，用于在测试通过的情况下，生成访问链接，所述访问链接用于操作指定页面实现业务需求。

图9为本发明实施例提供的电子设备的硬件结构示意图。如图9所示，本申请提供一种电子设备，包括：存储器601，用于存储程序指令；处理器602，用于调用并执行所述存储器中的程序指令，以实现前述实施例所述的页面开发方法。

本实施例中，处理器602和存储器601可通过总线或其他方式连接。处理器可以是通用处理器，例如中央处理器、数字信号处理器、专用集成电路，或者被配置成实施本发明实施例的一个或多个集成电路。存储器可以包括易失性存储器，例如随机存取存储器；存储器也可以包括非易失性存储器，例如只读存储器、快闪存储器、硬盘或固态硬盘。

本申请提供一种计算机存储介质，所述计算机存储介质中存储有计算机程序，当页面开发装置的至少一个处理器执行所述计算机程序时，页面开发装置执行前述实施例所述的页面开发方法。

所述的存储介质可为磁碟、光盘、只读存储记忆体(英文：read-only memory，简称：ROM)或随机存储记忆体(英文：random access memory，简称：RAM)等。

本领域的技术人员可以清楚地了解到本发明实施例中的技术可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本发明实施例中的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例或者实施例的某些部分所述的方法。

本说明书中各个实施例之间相同相似的部分互相参见即可。尤其，对于页面开发装置实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例中的说明即可。

以上所述的本发明实施方式并不构成对本发明保护范围的限定。

Claims (16)

1.一种页面开发方法，其特征在于，包括以下步骤：

接收用户基于指定页面对应的业务需求，在组件区移动的对应至少一个目标组件，显示在页面编辑区；

将所述页面编辑区的每个所述目标组件的配置文件，显示在属性设置区，所述属性设置区用于供用户对所述目标组件的配置文件进行处理，得到目标配置文件；

调用事件绑定功能，创建每个所述目标组件之间的关联关系，所述每个目标组件之间的关联关系用于实现目标组件之间的触发到响应的联调；

基于每个所述目标组件的目标配置文件以及每个所述目标组件之间的关联关系进行渲染处理，得到指定页面。

2.根据权利要求1所述的方法，其特征在于，所述调用事件绑定功能，创建每个所述目标组件之间的关联关系，包括：

选取作为触发器的目标组件，以及，选取作为响应的目标组件，所述触发器对应至少一个响应，所述触发器与所述响应用于实现目标组件之间的联动；

调用事件绑定功能，将作为触发器的目标组件与对应的作为响应的至少一个目标组件建立关联关系，每个所述目标组件之间的关联关系为触发器与至少一个响应的联调关系。

3.根据权利要求1所述的方法，其特征在于，所述基于每个目标组件的目标配置文件以及每个所述目标组件之间的关联关系进行渲染处理，得到指定页面，包括：

获取每个目标组件的目标配置文件；

创建页面渲染实例，所述页面渲染实例用于提供页面布局；

将每个所述目标组件的目标配置文件添加到所述页面渲染实例中；

调用所述目标组件之间的关联关系，进行页面渲染；

将页面渲染的结果进行存储，以及，创建删除按钮和卸载按钮，得到指定页面。

4.根据权利要求1所述的方法，其特征在于，所述接收用户基于指定页面对应的业务需求，在组件区移动的对应至少一个目标组件，显示在页面编辑区，包括：

接收用户基于指定页面对应的业务需求，在组件区中选取对应的至少一个目标组件时产生的触发指令；

响应于每个所述触发指令，调用拖拽接口，将至少一个所述目标组件添加至页面编辑区进行显示。

5.根据权利要求1所述的方法，其特征在于，所述调用事件绑定功能，创建每个所述目标组件之间的关联关系之后，还包括：

触发页面预览功能，根据所述每个目标组件的目标配置文件和每个所述目标组件之间的关联关系，生成预览页面。

6.根据权利要求1所述的方法，其特征在于，还包括：

获取新业务需求对应的至少一个新组件；

调用事件绑定功能，建立所述新组件之间的关联关系；

获取所述指定页面的特定版本组件，所述特定版本组件包括目标组件的目标配置文件以及目标组件之间的关联关系；

基于所述特定版本组件和新组件之间的关联关系进行渲染处理，生成新页面。

7.根据权利要求1所述的方法，其特征在于，还包括：

触发功能测试和接口测试功能，对所述指定页面进行测试；

在测试通过的情况下，生成访问链接，所述访问链接用于操作指定页面实现业务需求。

8.一种页面开发装置，其特征在于，包括：

组件移动模块，用于接收用户基于指定页面对应的业务需求，在组件区移动的对应至少一个目标组件，显示在页面编辑区；

加载器模块，用于将所述页面编辑区的每个所述目标组件的配置文件，显示在属性设置区，所述属性设置区用于供用户对所述目标组件的配置文件进行处理，得到目标配置文件；

关系解析引擎模块，用于调用事件绑定功能，创建每个所述目标组件之间的关联关系，所述每个目标组件之间的关联关系用于实现目标组件之间的触发到响应的联调；

渲染引擎模块，用于基于每个所述目标组件的目标配置文件以及每个所述目标组件之间的关联关系进行渲染处理，得到指定页面。

9.根据权利要求8所述的装置，其特征在于，所述关系解析引擎模块，包括：

组件功能选取单元，用于选取作为触发器的目标组件，以及，选取作为响应的目标组件，所述触发器对应至少一个响应，所述触发器与所述响应用于实现目标组件之间的联动；

关联关系创建单元，用于调用事件绑定功能，将作为触发器的目标组件与对应的作为响应的至少一个目标组件建立关联关系，每个所述目标组件之间的关联关系为触发器与至少一个响应的联调关系。

10.根据权利要求8所述的装置，其特征在于，所述渲染引擎模块，包括：

配置文件获取单元，用于获取每个目标组件的目标配置文件；

实例创建单元，用于创建页面渲染实例，所述页面渲染实例用于提供页面布局；

配置文件添加单元，用于将每个所述目标组件的目标配置文件添加到所述页面渲染实例中；

渲染单元，用于调用所述目标组件之间的关联关系，进行页面渲染；

指定页面生成单元，用于将页面渲染的结果进行存储，以及，创建删除按钮和卸载按钮，得到指定页面。

11.根据权利要求8所述的装置，其特征在于，所述组件移动模块，包括：

目标组件选取单元，用于接收用户基于指定页面对应的业务需求，在组件区中选取对应的至少一个目标组件时产生的触发指令；

组件移动单元，用于响应于每个所述触发指令，调用拖拽接口，将至少一个所述目标组件添加至页面编辑区进行显示。

12.根据权利要求8所述的装置，其特征在于，还包括：

页面预览模块，用于触发页面预览功能，根据所述每个目标组件的目标配置文件和每个所述目标组件之间的关联关系，生成预览页面。

13.根据权利要求8所述的装置，其特征在于，还包括：

新组件获取模块，用于获取新业务需求对应的至少一个新组件；

关联关系建立模块，用于调用事件绑定功能，建立所述新组件之间的关联关系；

特定版本组件获取模块，用于获取所述指定页面的特定版本组件，所述特定版本组件包括目标组件的目标配置文件以及目标组件之间的关联关系；

新页面生成模块，用于基于所述特定版本组件和新组件之间的关联关系进行渲染处理，生成新页面。

14.根据权利要求8所述的装置，其特征在于，还包括：

测试功能触发模块，用于触发功能测试和接口测试功能，对所述指定页面进行测试；

访问链接生成模块，用于在测试通过的情况下，生成访问链接，所述访问链接用于操作指定页面实现业务需求。

15.一种电子设备，其特征在于，包括：

存储器，用于存储程序指令；

处理器，用于调用并执行所述存储器中的程序指令，以实现权利要求1～7任一项所述的页面开发方法。

16.一种计算机存储介质，其特征在于，所述计算机存储介质中存储有计算机程序，当页面开发装置的至少一个处理器执行所述计算机程序时，页面开发装置执行权利要求1～7任一项所述的页面开发方法。

Images