CN109189391A - 一种页面开发方法及装置 - Google Patents

Abstract

本发明公开了一种页面开发及装置，该方法应用于原型设计平台，所述原型设计平台集成有原型创建功能和利用所述原型进行二次开发的功能；所述方法包括：创建与所述页面对应的目标原型；判断是否利用所述目标原型进行二次开发；若是，获取所述目标原型的原型代码，并利用所述原型代码创建前端页面。相对于现有技术，原型设计平台兼容了原型创建与页面开发两种功能，因此可以直接将原型代码转换为页面代码进行前端开发，实现了代码的二次利用，提高了代码的复用性。

Description

一种页面开发方法及装置

技术领域

本发明涉及软件技术领域，特别是涉及一种页面开发及装置。

背景技术

现有的原型设计技术方案中，使用率较高的是Axure。Axure是一款专业的快速原型设计工具，允许定义需求和规格。作为专业的原型设计工具，Axure能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。

发明人对现有技术的研究过程中发现，Auxre虽然提供了强大的原型设计功能，但由于Axure与页面前端开发平台的不兼容性导致Axure设计的原型不能直接转化为开发者的使用界面，因此难以实现原型代码的二次利用。

发明内容

为解决上述技术问题，本发明实施例提供了一种页面开发方法及装置，技术方案如下：

一种页面开发方法，应用于原型设计平台，所述原型设计平台集成有原型创建功能和利用所述原型进行二次开发的功能；

所述方法包括：

创建与所述页面对应的目标原型；

判断是否利用所述目标原型进行二次开发；

若是，获取所述目标原型的原型代码，并利用所述原型代码创建前端页面。

优选地，创建与所述页面对应的目标原型，包括：

判断是否需要选择模板创建所述目标原型；

若是，通过所述模板创建所述目标原型，所述模板包括原型模板和已创建的原型，否则通过空白模板创建所述目标原型。

优选地，还包括：

通过图形化用户界面在线修改所述目标原型的功能；

相应地，判断是否利用所述目标原型进行二次开发，包括：

判断是否利用修改功能的目标原型进行二次开发。

优选地，在判断是否利用修改功能的目标原型进行二次开发之前，还包括：

在线预览所述修改功能的目标原型；

当接收到用户对所述修改功能的目标原型的确认指令后，保存所述修改功能的目标原型。

优选地，当不利用所述目标原型进行二次开发时，还包括：

导出所述目标原型。

一种页面开发装置，应用于原型设计平台，所述原型设计平台集成有原型创建功能和利用所述原型进行二次开发的功能；

所述装置包括：

创建单元，用于创建与所述页面对应的目标原型；

第一判断单元，用于判断是否利用所述目标原型进行二次开发；

二次开发单元，用于当所述第一判断单元确定利用所述目标原型进行二次开发时，获取所述目标原型的原型代码，并利用所述原型代码创建前端页面。

优选地，所述创建单元，包括：

第二判断单元，用于判断是否需要选择模板创建所述目标原型；

创建子单元，用于当所述第二判断单元确定需要选择模板创建所述目标原型时，通过所述模板创建所述目标原型，所述模板包括原型模板和已创建的原型，否则通过空白模板创建所述目标原型。

优选地，还包括：

修改单元，用于通过图形化用户界面在线修改所述目标原型的功能；

相应地，第一判断单元，包括：

判断子单元，用于判断是否利用修改功能的目标原型进行二次开发。

优选地，还包括：

预览单元，用于在判断是否利用修改功能的目标原型进行二次开发之前，在线预览所述修改功能的目标原型；

保存单元，用于当接收到用户对所述修改功能的目标原型的确认指令后，保存所述修改功能的目标原型。

优选地，还包括：

导出单元，用于当不利用所述目标原型进行二次开发时，导出所述目标原型。

本实施例中的原型设计平台集成有原型创建功能和利用原型进行二次开发的功能，因此原型设计平台除了可以创建原型，还可以利用创建的原型进行二次开发。相对于现有技术，原型设计平台兼容了原型创建与页面开发两种功能，因此可以直接将原型代码转换为页面代码进行前端开发，实现了代码的二次利用，提高了代码的复用性。

附图说明

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

图1为本发明实施例所提供的一种页面开发方法的一种流程示意图；

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

图3为本发明实施例所提供的一种页面开发装置的一种结构示意图；

图4为本发明实施例所提供的一种页面开发装置的另一种结构示意图。

具体实施方式

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

请参阅图1，图1为本发明实施例提供的一种页面开发方法的一种实现流程图，应用于原型设计平台，原型设计平台集成有原型创建功能和利用原型进行二次开发的功能，该方法包括：

步骤S101、创建与页面对应的目标原型。

步骤S102、判断是否利用目标原型进行二次开发，若是执行步骤S103。

步骤S103、获取目标原型的原型代码，并利用原型代码创建前端页面。

本实施例中的原型设计平台集成有原型创建功能和利用原型进行二次开发的功能，因此原型设计平台除了可以创建原型，还可以利用创建的原型进行二次开发。相对于现有技术，原型设计平台兼容了原型创建与页面开发两种功能，因此可以直接将原型代码转换为页面代码进行前端开发，实现了代码的二次利用，提高了代码的复用性。

请参阅图2，图2为本发明实施例提供的一种页面开发方法的另一种实现流程图，应用于原型设计平台，原型设计平台集成有原型创建功能和利用原型进行二次开发的功能，该方法包括：

步骤S201、判断是否需要选择模板创建与页面对应的目标原型，若是执行步骤202，否则执行步骤203。

步骤S202、通过模板创建目标原型。

模板包括原型模板和已创建的原型。

本发明实施例提供的原型设计平台通过融合bootstrap、javascript，jquery，freemarker、java等开源技术来实现。原型设计平台主要包含模板库、原型的预览和在线开发控制台等模块。原型设计平台的具体实现是通过freemarker模板语法实现原型模板及配置模板，通过bootstrap、javascript、jquery实现原型的预览，通过java技术实现原型设计平台的在线开发控制台。

其中，步骤S202中的模板从模板库中获取，模板库由展现模板和配置模板两部分组成：

a.展现模板：由freemarker、bootstrap、javascript等技术实现原型模板的展现定义，并预留动态展现的扩展点，和配置模板组合使用实现原型的动态展现。

b.配置模板：是json数据结构，定义了原型需动态展示部分的数据结构，并和展现模板组合使用来实现原型的动态展现。

展现模板是对于页面布局中的展现构建，配置模板是对展现模板中的元素进行规范定义。例如：在页面上需要一个表格模块，展现模块就是将表格展示出来，配置模板就是对表格的参数进行配置，比如表格的列的数量、是否进行排序、对其方式等。

实际应用中，针对项目需求可预定义模板库中的模板，且随着项目的积累，模板库资源会逐渐丰富，模板覆盖场景增多，以此降低了原型设计阶段的时间与成本。

步骤S203、通过空白模板创建所述目标原型。

步骤S204、通过图形化用户界面在线修改目标原型的功能。

在线修改目标原型的功能，包括对目标原型的功能的增加、删除等操作。

对目标原型的功能的修改由原型设计平台中的原型在线开发控制台实现，具体地通过在线开发控制台上的图形化用户界面由用户对原型页面进行修改。

步骤S205、在线预览修改功能的目标原型。

步骤S206、当接收到用户对修改功能的目标原型的确认指令后，保存修改功能的目标原型。

步骤S207、判断是否利用目标原型进行二次开发，若是，执行步骤S208，否则执行步骤S209。

步骤S208、获取目标原型的原型代码，并利用原型代码创建前端页面。

步骤S209、导出目标原型。

对目标原型的预览、导出都由预览测试控制台实现，即预览测试控制台提供原型的预览、导出及测试的功能。由于原型创建完成后生成的代码与开发员进行前端开发的代码为同一种代码。在将原型页面代码转换为开发员前端页面代码时，没有两者之间的转化成本，原型可以直接提供原型导出为html的功能或转化为开发者使用界面。可以实现代码的二次利用，提高代码的复用。

本实施例中的原型设计平台集成有原型创建功能和利用原型进行二次开发的功能，因此原型设计平台除了可以创建原型，还可以利用创建的原型进行二次开发。相对于现有技术，原型设计平台兼容了原型创建与页面开发两种功能，因此可以直接将原型代码转换为页面代码进行前端开发，实现了代码的二次利用，提高了代码的复用性。

请参阅图3，图3为本发明实施例提供的一种页面开发装置的一种结构示意图，应用于原型设计平台，原型设计平台集成有原型创建功能和利用原型进行二次开发的功能，该装置包括：

创建单元310，用于创建与所述页面对应的目标原型。

第一判断单元320，用于判断是否利用所述目标原型进行二次开发。

二次开发单元330，用于当所述第一判断单元确定利用所述目标原型进行二次开发时，获取所述目标原型的原型代码，并利用所述原型代码创建前端页面。

本实施例中的原型设计平台集成有原型创建功能和利用原型进行二次开发的功能，因此原型设计平台除了可以创建原型，还可以利用创建的原型进行二次开发。相对于现有技术，原型设计平台兼容了原型创建与页面开发两种功能，因此可以直接将原型代码转换为页面代码进行前端开发，实现了代码的二次利用，提高了代码的复用性。

请参阅图4，图4为本发明实施例提供的一种页面开发装置的另一种结构示意图，应用于原型设计平台，原型设计平台集成有原型创建功能和利用原型进行二次开发的功能，该装置包括：

第二判断单元410，用于判断是否需要选择模板创建所述目标原型。

创建子单元420，用于当所述第二判断单元确定需要选择模板创建所述目标原型时，通过所述模板创建所述目标原型，所述模板包括原型模板和已创建的原型，否则通过空白模板创建所述目标原型。

本发明实施例提供的原型设计平台通过融合bootstrap、javascript，jquery，freemarker、java等开源技术来实现。原型设计平台主要包含模板库、原型的预览和在线开发控制台等模块。原型设计平台的具体实现是通过freemarker模板语法实现原型模板及配置模板，通过bootstrap、javascript、jquery实现原型的预览，通过java技术实现原型设计平台的在线开发控制台。

其中，创建子单元420中的模板从模板库中获取，模板库由展现模板和配置模板两部分组成：

a.展现模板：由freemarker、bootstrap、javascript等技术实现原型模板的展现定义，并预留动态展现的扩展点，和配置模板组合使用实现原型的动态展现。

b.配置模板：是json数据结构，定义了原型需动态展示部分的数据结构，并和展现模板组合使用来实现原型的动态展现。

实际应用中，针对项目需求可预定义模板库中的模板，且随着项目的积累，模板库资源会逐渐丰富，模板覆盖场景增多，以此降低了原型设计阶段的时间与成本。

修改单元430，用于通过图形化用户界面在线修改所述目标原型的功能。

在线修改目标原型的功能，包括对目标原型的功能的增加、删除等操作。

修改单元430由原型设计平台中的原型在线开发控制台实现，具体地通过在线开发控制台上的图形化用户界面由用户对原型页面进行修改。

预览单元440，用于在判断是否利用修改功能的目标原型进行二次开发之前，在线预览所述修改功能的目标原型。

保存单元450，用于当接收到用户对所述修改功能的目标原型的确认指令后，保存所述修改功能的目标原型。

判断子单元460，用于判断是否利用修改功能的目标原型进行二次开发。

二次开发单元470，用于当所述第一判断单元确定利用所述目标原型进行二次开发时，获取所述目标原型的原型代码，并利用所述原型代码创建前端页面。

导出单元480，用于当不利用所述目标原型进行二次开发时，导出所述目标原型。

预览单元和导出单元都由预览测试控制台实现，即预览测试控制台提供原型的预览、导出及测试的功能。由于原型创建完成后生成的代码与开发员进行前端开发的代码为同一种代码。在将原型页面代码转换为开发员前端页面代码时，没有两者之间的转化成本，原型可以直接提供原型导出为html的功能或转化为开发者使用界面。可以实现代码的二次利用，提高代码的复用。

本实施例中的原型设计平台集成有原型创建功能和利用原型进行二次开发的功能，因此原型设计平台除了可以创建原型，还可以利用创建的原型进行二次开发。相对于现有技术，原型设计平台兼容了原型创建与页面开发两种功能，因此可以直接将原型代码转换为页面代码进行前端开发，实现了代码的二次利用，提高了代码的复用性。

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

对于装置或系统实施例而言，由于其基本相应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置或系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

在本发明所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，在没有超过本发明的精神和范围内，可以通过其他的方式实现。当前的实施例只是一种示范性的例子，不应该作为限制，所给出的具体内容不应该限制本发明的目的。例如，所述单元或子单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或多个子单元结合一起。另外，多个单元可以或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。

另外，所描述系统，装置和方法以及不同实施例的示意图，在不超出本发明的范围内，可以与其它系统，模块，技术或方法结合或集成。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

以上所述仅是本发明的具体实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (10)

1.一种页面开发方法，其特征在于，应用于原型设计平台，所述原型设计平台集成有原型创建功能和利用所述原型进行二次开发的功能；

所述方法包括：

创建与所述页面对应的目标原型；

判断是否利用所述目标原型进行二次开发；

若是，获取所述目标原型的原型代码，并利用所述原型代码创建前端页面。

2.根据权利要求1所述的方法，其特征在于，创建与所述页面对应的目标原型，包括：

判断是否需要选择模板创建所述目标原型；

若是，通过所述模板创建所述目标原型，所述模板包括原型模板和已创建的原型，否则通过空白模板创建所述目标原型。

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

通过图形化用户界面在线修改所述目标原型的功能；

相应地，判断是否利用所述目标原型进行二次开发，包括：

判断是否利用修改功能的目标原型进行二次开发。

4.根据权利要求3所述的方法，其特征在于，在判断是否利用修改功能的目标原型进行二次开发之前，还包括：

在线预览所述修改功能的目标原型；

当接收到用户对所述修改功能的目标原型的确认指令后，保存所述修改功能的目标原型。

5.根据权利要求1或2所述的方法，其特征在于，当不利用所述目标原型进行二次开发时，还包括：

导出所述目标原型。

6.一种页面开发装置，其特征在于，应用于原型设计平台，所述原型设计平台集成有原型创建功能和利用所述原型进行二次开发的功能；

所述装置包括：

创建单元，用于创建与所述页面对应的目标原型；

第一判断单元，用于判断是否利用所述目标原型进行二次开发；

二次开发单元，用于当所述第一判断单元确定利用所述目标原型进行二次开发时，获取所述目标原型的原型代码，并利用所述原型代码创建前端页面。

7.根据权利要求6所述的装置，其特征在于，所述创建单元，包括：

第二判断单元，用于判断是否需要选择模板创建所述目标原型；

创建子单元，用于当所述第二判断单元确定需要选择模板创建所述目标原型时，通过所述模板创建所述目标原型，所述模板包括原型模板和已创建的原型，否则通过空白模板创建所述目标原型。

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

修改单元，用于通过图形化用户界面在线修改所述目标原型的功能；

相应地，第一判断单元，包括：

判断子单元，用于判断是否利用修改功能的目标原型进行二次开发。

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

预览单元，用于在判断是否利用修改功能的目标原型进行二次开发之前，在线预览所述修改功能的目标原型；

保存单元，用于当接收到用户对所述修改功能的目标原型的确认指令后，保存所述修改功能的目标原型。

10.根据权利要求6或7所述的装置，其特征在于，还包括：

导出单元，用于当不利用所述目标原型进行二次开发时，导出所述目标原型。