CN111240679A - 页面开发方法及系统 - Google Patents

Abstract

本发明提供一种页面开发方法，方法应用于页面开发系统，页面开发系统包括：服务系统，服务系统包括：基础操作平台，方法包括：基础操作平台接收用户的开发指令，开发指令包括：新建页面指令、调取元件指令；基础操作平台根据新建页面指令新建要进行开发的初始页面；基础操作平台根据调取元件指令将元件调取到初始页面中的相应区域位置，元件是指组成页面的最小单位；基础操作平台接收用户的确认指令，完成页面开发，使得将完成开发的页面发布。进行页面开发时，只需要将元件调取到操作平台上后再发布即可，不需要再进行代码的编辑，简化了开发流程，提高了开发的效率，节约了开发成本。此外，本发明还提供一种页面开发系统。

Description

页面开发方法及系统

技术领域

本发明涉及软件开发领域，尤其涉及一种页面开发方法及系统。

背景技术

随着计算机技术的快速发展，越来越多的企业对于敏捷开发有了迫切的需求，即企业期望员工在开发过程中能更高效，能够尽可能的减少无效的沟通成本或者开发成本，同时，员工自身在开发的过程中也就会更多的考虑代码的复用性和可维护性，避免写出大量重复性的代码。因此越来越多的企业推出了自己的一套前端UI框架，框架包含基础组件的一些使用方法和规范，目的正是为开发提供一套编码规范，减少重复性开发，同时简单直观的技术文档也更能让非专业的同事能够快速了解组件的使用等。

但是现有业务系统中存在大量类型相似的页面，而页面的基本构成最小单位(基础元件)基本是相同的，只存在业务逻辑和字段不同，因此界面的变动将导致页面代码需要频繁改动，可维护性低，成本高，并且非开发岗位很难参与页面开发。

发明内容

基于此，有必要针对上述问题，提供一种页面开发方法及系统。

第一方面，本发明实施例提供一种页面开发方法，方法应用于页面开发系统，页面开发系统包括：服务系统，服务系统包括：基础操作平台，方法包括：

基础操作平台接收用户的开发指令，开发指令包括：新建页面指令、调取元件指令；

基础操作平台根据新建页面指令新建要进行开发的初始页面；

基础操作平台根据调取元件指令将元件调取到初始页面中的相应区域位置，元件是指组成页面的最小单位；

基础操作平台接收用户的确认指令，完成页面开发，使得将完成开发的页面发布。

在一个实施例中，开发指令还包括元件设值指令，在根据调取元件指令将元件库中元件调取到初始页面中的相应区域或位置的步骤之后，还包括：

基础操作平台根据元件设值指令对调取到初始页面中的元件设置相应的设置值。

在一个实施例中，在基础操作平台接收用户的确认指令，完成页面开发的步骤之后，还包括：

基础操作平台根据完成开发的页面生成与完成开发的页面对应的唯一标识以及与唯一标识对应的页面数据包，页面数据包包括完成开发的页面中元件的种类和数量、每个元件的设置值以及每个元件在页面中的位置信息。

在一个实施例中，服务系统还包括：元件库，元件库包含有不同类型的元件，元件库还包括：渲染模板组件，页面开发系统还包括：目标系统，方法还包括：

目标系统接收用户的接入元件库的指令；

目标系统根据接入指令接入元件库；

目标系统接收用户的发送唯一标识的指令；

目标系统根据发送指令将获取到的唯一标识发送给渲染模板组件，以使得渲染模板组件在目标系统中渲染页面。

在一个实施例中，目标系统根据接入指令接入元件库，包括：

目标系统根据接入指令将元件库添加为目标系统中目标仓库的子模块。

在一个实施例中，方法还包括：

渲染模板组件根据唯一标识并通过基础操作平台提供的接口获取页面数据包；

渲染模板组件根据页面数据包在目标系统中渲染页面。

在一个实施例中，渲染模板组件根据页面数据包在目标系统中渲染页面，包括：

渲染模板组件根据页面数据包将元件库中对应的种类和数量的元件调取到目标系统中；

渲染模板组件根据页面数据包中每个元件的设置值对调取到目标系统中的每个元件设置相应的设置值；

渲染模板组件根据页面数据包中每个元件的在页面中的位置信息调整调取到目标系统中的每个元件的位置。

第二方面，本发明实施例提供一种页面开发系统，包括：服务系统，服务系统包括：

基础操作平台，用于接收用户的开发指令，开发指令包括：新建页面指令、调取元件指令，根据新建页面指令新建要进行开发的初始页面，根据调取元件指令将元件库中元件调取到初始页面中的相应区域位置，元件是指组成页面的最小单位，接收用户的确认指令，完成页面开发，使得将完成开发的页面发布。

在一个实施例中，基础操作平台还用于根据完成开发的页面生成与完成开发的页面对应的唯一标识以及与唯一标识对应的页面数据包，页面数据包包括完成开发的页面中元件的种类和数量、每个元件的设置值以及每个元件在页面中的位置信息。

在一个实施例中，服务系统还包括：元件库，元件库包含有不同类型的元件，元件库还包括：渲染模板组件，页面开发系统还包括：

目标系统，用于接收用户的接入元件库的指令，根据接入指令接入元件库，接收用户的发送唯一标识的指令，根据发送指令将获取到的唯一标识发送给渲染模板组件，以使得渲染模板组件在目标系统中渲染页面。

上述页面开发方法及系统，进行页面开发时，只需要将所需要的元件调取到操作平台上后再发布即可，不需要再进行代码的编辑，并且在后续页面需要改动时也无需通过重新编辑代码，简化了开发流程，提高了开发的效率，节约了开发成本。

附图说明

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

其中：

图1为一个实施例中页面开发方法的流程图；

图2为一个实施例中基础操作平台的示意图；

图3为另一个实施例中页面开发方法的流程图；

图4为一个实施例中渲染模板组件渲染页面的流程图；

图5为一个实施例中渲染模板组件在目标系统中进行渲染具体流程图；

图6为一个实施例中页面开发系统的结构示意图；

图7为另一个实施例中页面开发系统的结构示意图。

具体实施方式

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

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

在一个实施例中，提供一种页面开发方法，方法应用于页面开发系统，页面开发系统包括：服务系统，服务系统包括：基础操作平台，方法包括：

步骤102，基础操作平台接收用户的开发指令，开发指令包括：新建页面指令、调取元件指令。

其中，如图2示出了一个实施例中基础操作平台的示意图，基础操作平台是针对元件库里的元件提供的一个编辑和操作的平台，用户可以在基础操作平台中选择元件以及对元件进行其他相应的设置。具体的，用户可以在基础操作平台中新建空白的界面，将元件拖拽到新建的空白页面中。

步骤104，基础操作平台根据新建页面指令新建要进行开发的初始页面。

其中，新建页面是指要选择页面的类型，类型又包括：显示主体的类型和页面内容的类型，显示主体包括电脑客户端界面，移动终端界面等，页面内容的类型包括网站页面、表单页面等，用户可以按照需要选择不同类型的初始页面，基础操作平台对应的执行用户新建某一类型初始页面的指令。初始页面可以为空白页面，也可以是预设具有一定版式的页面。如图2所示，开发的页面为一个终端上的表单界面，当然也可以是其他设备上的其他类型的界面

步骤106，基础操作平台根据调取元件指令将元件调取到初始页面中的相应区域位置，元件是指组成页面的最小单位。

其中，元件可以是一个输入框、单选框等等，并且对每个元件都抽象出一些共有的和特有的属性，比如每个元件都具备一个code属性代表该元件在页面里所对应的字段，同时也抽象出一个事件绑定的概念，比如通过给某个元件绑定一些事件，同时绑定其他元件，来实现元件之间的联动效果。用户可以根据需求选择相应的元件并将其放入到新建的初始页面中，如图2所示，在新建的初始页面中拉入了一个文本框，并且拖到每个元件到某个位置，基础操作平台也即对应的完成这些指令。

步骤108，基础操作平台接收用户的确认指令，完成页面开发，使得将完成开发的页面发布。

其中，在新建初始页面以及在初始页面中放入了全部满足需求的元件，并且调整了元件的区域位置后，该页面也即开发完成，当接收到用户的确认指令后，记录当前页面的所有内容。基于完成的页面可以发布到所需要该页面的目标系统中

上述页面开发方法，通过在基础操作平台中编辑已经有代码编写形成的元件，从而生成页面，整个编辑过程以及后续页面的修改过程不需要编码，只需要简单的对元件进行编辑，节省了大量时间，也提高了效率，并且不需要编码使得非开发人员也能完成页面开发。开发不同的页面都可采用同一套元件，减少了重复性开发。

在一个实施例中，开发指令还包括元件设值指令，在根据调取元件指令将元件库中元件调取到初始页面中的相应区域或位置的步骤之后，还包括：

基础操作平台根据元件设值指令对调取到初始页面中的元件设置相应的设置值。

其中，设置值是指对调取到初始页面中的元件相应设置的赋值、命名或函数关系等，设置值包括：基础设置值、扩展设置值、规则设置值、事件设置值中的一种或多种。基础设置值则是指一个元件的基础信息，包括名称、代号、属性等，扩展设置值是指元件内相关组成的参数限定，包括元件或元件内特定区域的大小、位置等，规则设置值是指需要满足了一个规定，事件设置值是指元件需执行的事件，包括与其他元件建立关联等。

通过对调取到初始页面中的元件分别设置相应的设置值，从而使得元件能够满足页面整体的组成，以及达到预设需求效果。

在一个实施例中，在基础操作平台接收用户的确认指令，完成页面开发的步骤之后，还包括：

基础操作平台根据完成开发的页面生成与完成开发的页面对应的唯一标识以及页面数据包，页面数据包包括完成开发的页面中元件的种类和数量、每个元件的设置值以及每个元件在页面中的位置信息。

其中，唯一标识是对应于页面的一个特定的代号，如对应于个人的身份证号，基于该唯一标识可以精准定位到对应页面。而页面数据包是指包含对应页面的所有信息的数据包，包括页面中元件的种类和数量、每个元件的设置值以及每个元件在页面中的位置信息等，页面数据包与唯一标识之间建立有联系，通过唯一标识可以获取到对应的页面数据包。

将完成开发的页面中的所有信息整合为数据包，与唯一标识建立联系，使得直接获取唯一标识对应的数据包，并且在后续需使用该页面时，只需调用该数据包，无须重复开发。其次也方便了将开发完成后的页面发布到相应设备的系统中

如图3所示，在一个实施例中，服务系统还包括：元件库，元件库包含有不同类型的元件，元件库还包括：渲染模板组件，页面开发系统还包括：目标系统，方法还包括：

步骤302，目标系统接收用户的接入元件库的指令。

其中，在基础操作平台上开发完成的页面需进一步的发布到目标设备的系统中，上述提到在基础操作平台完成开发的页面会生成与页面对应的唯一标识和页面数据包，元件库中设置有渲染模板组件，渲染模板组件可基于该页面数据包调用元件库中的元件进行渲染就可以得到对应页面。

步骤304，目标系统根据接入指令接入元件库。

其中，当需发布指定页面到目标系统时，则需要接入元件库，使得渲染模板组件可以调用元件库中的元件在目标系统中进行渲染页面。

步骤306，目标系统接收用户的发送唯一标识的指令。

其中，唯一标识是获取对应数据包的唯一代号，因此目标系统需要给渲染模板组件发送唯一标识。

步骤308，目标系统根据发送指令将获取到的所述唯一标识发送给渲染模板组件，以使得渲染模板组件在目标系统中渲染页面。

其中，唯一标识是以参数的形式发送给渲染模板组件，当渲染模板组件接收到唯一标识后，根据唯一标识可进行获取对应的页面数据包，从而完成渲染。

首先，通过目标系统发起，主动接入元件库，无须对外提供账号密码，保障了用户安全，使得目标系统不被污染。其次，通过接入元件库，只需获取页面数据包即可得到页面，整个过程高效快捷，且具有复用性，使得任何目标系统的系统需要该页面时都可以基于页面数据包得到。

在一个实施例中，目标系统根据接入指令接入元件库，包括：

目标系统根据接入指令将元件库添加为目标系统中目标仓库的子模块。

其中，目标系统接入元件库目的在于能够使元件库中的元件包含的所有代码能够调用到目标系统中，在一个实施例中，可以通过将元件库添加为目标系统中目标仓库的子模块的形式，例如，Git.Submodule(子模块允许你将一个Git仓库(代码托管的仓库)作为另一个Git仓库的子目录。它能让你将另一个仓库克隆到自己的项目中，同时还保持提交的独立。)使得可以获取到元件库中元件代码。当然，也可以通过其他形式来接入元件库。

通过添加子模块的形式接入元件库，简单且稳定，满足了调用元件代码的需求。

如图4所示，在一个实施例中，方法还包括：

步骤402，渲染模板组件根据唯一标识并通过基础操作平台提供的接口获取页面数据包。

其中，基础操作平台提供一个对外的接口，通过该接口可以查询唯一标识对应的页面数据包，渲染模板组件在获取到唯一标识后即可通过该接口在基础操作平台中对应项目的数据库中查找相应的页面数据包，并将查找到的页面数据包返回。

步骤404，渲染模板组件根据页面数据包在目标系统中渲染页面。

其中，获取到页面数据包后，选择模板组件根据页面数据包中具体数据信息，来调用元件库中相应元件代码到目标系统中并进行相应的调整和设置，最终完成渲染。

渲染模板组件只需获取对应页面的唯一标识即可在目标系统中完成渲染页面，简化了整个开发流程，提高了开发效率。

如图5所示，在一个实施例中，渲染模板组件根据页面数据包在目标系统中渲染页面，包括：

步骤502，渲染模板组件根据页面数据包将元件库中对应的种类和数量的元件调取到目标系统中。

其中，上述提到，页面数据包中包含有对应页面的所有数据信息，具体的包括页面用到的元件种类以及每种的数量，在渲染时则根据对应的种类和数量拉取元件库中相应的代码到目标系统中。

步骤504，渲染模板组件根据页面数据包中每个元件的设置值对调取到目标系统中的每个元件设置相应的设置值。

其中，页面数据包中具体还包括页面用到的元件对应的设置值，在渲染时则根据对应的设置值对每个元件进行设置。

步骤506，渲染模板组件根据页面数据包中每个元件的在页面中的位置信息调整调取到目标系统中的每个元件的位置。

其中，页面数据包中具体还包括每个元件的在页面中的位置信息，在渲染时则根据位置信息调整每个元件的位置。

如图6所示，在一个实施例中，提供一种页面开发系统，包括：服务系统，服务系统包括：

基础操作平台，用于接收用户的开发指令，开发指令包括：新建页面指令、调取元件指令，根据新建页面指令新建要进行开发的初始页面，根据调取元件指令将元件库中元件调取到初始页面中的相应区域位置，元件是指组成页面的最小单位，接收用户的确认指令，完成页面开发，使得将完成开发的页面发布。

在一个实施例中，开发指令还包括元件设值指令，基础操作平台还用于根据元件设值指令对调取到初始页面中的元件设置相应的设置值。

在一个实施例中，基础操作平台还用于根据完成开发的页面生成与完成开发的页面对应的唯一标识以及与唯一标识对应的页面数据包，页面数据包包括完成开发的页面中元件的种类和数量、每个元件的设置值以及每个元件在页面中的位置信息。

如图7所示，在一个实施例中，服务系统还包括：元件库，元件库包含有不同类型的元件，元件库还包括：渲染模板组件，页面开发系统还包括：

目标系统，用于接收用户的接入元件库的指令，根据接入指令接入元件库，接收用户的发送唯一标识的指令，根据发送指令将获取到的唯一标识发送给渲染模板组件，以使得渲染模板组件在目标系统中渲染页面。

在一个实施例中，目标系统还用于根据接入指令将元件库添加为目标系统中目标仓库的子模块。

在一个实施例中，渲染模板组件用于根据唯一标识并通过基础操作平台提供的接口获取页面数据包，根据页面数据包在目标系统中渲染页面。

在一个实施例中，渲染模板组件还用于根据页面数据包将元件库中对应的种类和数量的元件调取到目标系统中，根据页面数据包中每个元件的设置值对调取到目标系统中的每个元件设置相应的设置值，根据页面数据包中每个元件的在页面中的位置信息调整调取到目标系统中的每个元件的位置。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。请输入具体实施内容部分。

Claims (10)

1.一种页面开发方法，其特征在于，所述方法应用于页面开发系统，所述页面开发系统包括：服务系统，所述服务系统包括：基础操作平台，所述方法包括：

所述基础操作平台接收用户的开发指令，所述开发指令包括：新建页面指令、调取元件指令；

所述基础操作平台根据所述新建页面指令新建要进行开发的初始页面；

所述基础操作平台根据所述调取元件指令将元件调取到所述初始页面中的相应区域位置，所述元件是指组成页面的最小单位；

所述基础操作平台接收用户的确认指令，完成页面开发，使得将完成开发的页面发布。

2.根据权利要求1所述的方法，其特征在于，所述开发指令还包括元件设值指令，在所述根据所述调取元件指令将元件库中元件调取到所述初始页面中的相应区域或位置的步骤之后，还包括：

所述基础操作平台根据所述元件设值指令对调取到所述初始页面中的元件设置相应的设置值。

3.根据权利要求1所述的方法，其特征在于，在所述基础操作平台接收用户的确认指令，完成页面开发的步骤之后，还包括：

所述基础操作平台根据所述完成开发的页面生成与所述完成开发的页面对应的唯一标识以及与所述唯一标识对应的页面数据包，所述页面数据包包括所述完成开发的页面中元件的种类和数量、每个元件的设置值以及每个元件在页面中的位置信息。

4.根据权利要求3所述的方法，其特征在于，所述服务系统还包括：元件库，所述元件库包含有不同类型的元件，所述元件库还包括：渲染模板组件，所述页面开发系统还包括：目标系统，所述方法还包括：

所述目标系统接收用户的接入元件库的指令；

所述目标系统根据接入指令接入所述元件库；

所述目标系统接收用户的发送唯一标识的指令；

所述目标系统根据发送指令将获取到的所述唯一标识发送给所述渲染模板组件，以使得所述渲染模板组件在所述目标系统中渲染页面。

5.根据权利要求4所述的方法，其特征在于，所述目标系统根据接入指令接入所述元件库，包括：

所述目标系统根据所述接入指令将所述元件库添加为所述目标系统中目标仓库的子模块。

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

所述渲染模板组件根据所述唯一标识并通过所述基础操作平台提供的接口获取所述页面数据包；

所述渲染模板组件根据所述页面数据包在所述目标系统中渲染页面。

7.根据权利要求6所述的方法，其特征在于，所述渲染模板组件根据所述页面数据包在所述目标系统中渲染页面，包括：

所述渲染模板组件根据所述页面数据包将所述元件库中对应的种类和数量的元件调取到所述目标系统中；

所述渲染模板组件根据所述页面数据包中每个元件的设置值对调取到所述目标系统中的每个元件设置相应的设置值；

所述渲染模板组件根据所述页面数据包中每个元件的在页面中的位置信息调整调取到所述目标系统中的每个元件的位置。

8.一种页面开发系统，其特征在于，所述页面开发系统包括：服务系统，所述服务系统包括：

基础操作平台，用于接收用户的开发指令，所述开发指令包括：新建页面指令、调取元件指令，根据所述新建页面指令新建要进行开发的初始页面，根据所述调取元件指令将元件调取到所述初始页面中的相应区域位置，所述元件是指组成页面的最小单位，接收用户的确认指令，完成页面开发，使得将完成开发的页面发布。

9.根据权利要求8所述的页面开发系统，其特征在于：

所述基础操作平台还用于根据所述完成开发的页面生成与所述完成开发的页面对应的唯一标识以及与所述唯一标识对应的页面数据包，所述页面数据包包括所述完成开发的页面中元件的种类和数量、每个元件的设置值以及每个元件在页面中的位置信息。

10.根据权利要求9所述的页面开发系统，其特征在于，所述服务系统还包括：元件库，所述元件库包含有不同类型的元件，所述元件库还包括：渲染模板组件，所述页面开发系统还包括：

目标系统，用于接收用户的接入元件库的指令，根据接入指令接入所述元件库，接收用户的发送唯一标识的指令，根据发送指令将获取到的所述唯一标识发送给所述渲染模板组件，以使得所述渲染模板组件在所述目标系统中渲染页面。

Images