一种页面的生成方法、相关装置及前端页面与流程

本发明涉及计算机程序开发领域，特别涉及一种页面的生成方法、相关装置及前端页面。

背景技术：

现在开发前端页面为了提高开发速度降低维护成本都会使用前端框架，比如react、vue和rax等，同一个页面使用不同前端框架开发的代码是不一样的，不同的前端框架优缺点和各自适应的场景也不一样，需要平衡选择，互联网业务中基于业务特点、时间、页面性能要求等出发点，经常需要将同一个页面以不同的前端框架来开发以满足目标需求，此时就需要进行重复开发，成本较高，后期页面修改多个不同框架下的页面代码修改成本也较高。

一方面，目前前端框架有好多种，优缺点及适应场景都不一样，有些开发速度更快，有些生成的页面代码性能更高，有些开发门槛更低等等，另一方面，实际业务场景比较复杂，同一个页面可能使用a框架开发后上线无问题，过一段时间该页面使用a框架开发的页面代码在另一个应用场景中不适用了，可能有需要使用b框架把页面重新开发一遍，这样，同一个页面因为业务场景、应用目标等因素的影响，可能针对同一个页面，开发团队会使用多个不同前端框架分别开发出多个不同框架下的页面代码。这样，同一个页面开发了多遍，且多个不同框架下的页面代码在后期产品迭代修改过程中，多份代码都需要统一修改，开发效率低，维护成本高。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

技术实现要素：

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的一种页面的生成方法、相关装置及前端页面。

第一方面，本发明实施例提供一种页面的生成方法，包括：

将页面对应的页面描述数据以及所述页面使用的至少一个框架对应的框架模板，传送给模板引擎；

接收所述模板引擎输出的所述页面在所述至少一个框架下的页面代码；所述页面代码是通过所述页面描述数据和对应的框架模板合成得到的。

在一个实施例中，将页面描述数据和所述框架模板，传送给模板引擎，包括：

调用所述模板引擎的编写接口，将所述页面描述数据和所述至少一个框架对应的框架模板作为编写接口参数传递给所述模板引擎的编程接口。

在一个实施例中，所述框架模板，包括：与框架相关的、用于描述所述页面的且符合所述框架规定格式的代码。

在一个实施例中，所述模板引擎，是预先通过所述页面使用的至少一个框架确定得到的。

在一个实施例中，所述页面描述数据，包括下述一项或多项：

页面布局的信息、页面样式的信息、页面的数据关联关系信息和页面交互的信息。

在一个实施例中，所述数据关联关系，包括：页面上的内容数据、所述内容数据与页面布局和/或页面样式之间关联关系；

所述页面交互的信息，为所述页面交互逻辑的信息。

在一个实施例中，所述框架模板，为下述任一项框架所对应的模板：

react框架、vue框架和rax框架。

第二方面，本发明实施例提供一种页面的生成装置，包括：

传送模块，用于将所述页面对应的页面描述数据以及所述页面使用的至少一个框架对应的框架模板，传送给模板引擎；

模板引擎模块，用于将所述页面描述数据和对应的框架模板合成，得到框架下的页面代码；

接收模块，用于接收所述模板引擎输出的所述页面在所述至少一个框架下的页面代码。

第三方面，本发明实施例提供的一种服务器，包括：存储器和处理器；其中，所述存储器存储有计算机程序，所述程序被处理器执行时能够实现前述页面的生成方法。

第四方面，本发明实施例提供的一种计算机可读存储介质，其上存储有计算机指令，该指令被处理器执行时实现前述页面的生成方法。

第五方面，本发明实施例提供的一种前端页面，所述页面的代码是通过页面描述数据和所述页面所使用的框架下的框架模板合成得到的。

本发明实施例提供的上述技术方案的有益效果至少包括：

本发明实施例提供的上述页面的生成方法；针对每个页面，都编写了对应的页面描述数据，并且，针对页面可能使用到的每种前端框架，也分别编写了对应的框架模板，在进行页面开发时，只需要将每个页面的页面描述数据与对应的框架模板使用模板引擎进行自动合成即可，对于大量页面的开发工作而言，由于框架模板是互通的，可以大大减少开发的工作量，并且，不管有多少新的页面需要上线，也只需要自动地执行页面的页面描述数据与对应的框架模板使用模板引擎的步骤。类似地，在页面根据业务情况需要进行修改时，由于也不必去修改框架模板，将修改后的页面描述数据与框架模板进行自动合成即可，大大提升了前端页面开发和修改的效率，并降低了人工编写代码的工作量。

本发明实施例中，预先编写好的页面描述数据，包括描述页面的设计信息，包括页面布局的信息、页面样式的信息、页面的数据关联关系信息和页面交互的信息，这些信息与页面自身相关，与框架无关，而框架模板中包含与框架相关的、符合框架规定格式的用于描述页面的那部分设计信息，将这两者通过框架模板进行自动合成，最终生成页面的代码，由于大量页面可以通用若干个前端框架，这样的分离开发，然后进行自动合成的方式，可有效地减少人工开发的工作量，提高页面开发效率。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1为本发明实施例提供的页面的生成方法的流程图；

图2a为现有开发方式开发n个框架下的m个页面的页面代码的示意图；

图2b为本发明实施例提供的页面的生成方法生成m个页面在n个框架下的页面代码的示意图；

图3为本发明实施例提供的页面的生成装置的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

为了解决现有技术中同一个页面例如前端页面在不同的框架下，需要重复开发多遍，并且在后续产品迭代过程中，修改代码存在的开发工作量大，维护成本高的问题，本发明实施例提供了一种页面的生成方法，下面结合附图，对该方法的实现流程进行详细的说明。

本发明实施例提供的页面的生成方法，参照图1所示，包括：

s11、将页面对应的页面描述数据以及所述页面使用的至少一个框架对应的框架模板，传送给模板引擎；

在本发明实施例中，前端页面通常会根据业务需求，例如为了适应于多种不同类型的设备终端，可能需要使用多种前端框架(以下简称框架)进行开发，例如已有的可以降低前端页面开发、维护成本的javascript框架，前端框架对进行前端页面开发所需的底层应用程序编程接口(api，applicationprogramminginterface)进行了一层封装拓展，提供了前端页面开发新的api以及页面控制方式；目前比较流行的前端框架有下述几种例如react框架、vue框架和rax框架等。

上述预设的模板引擎，可以根据页面开发所需的框架的类型来选择，可以多个框架使用同一模板引擎；也可以多个框架分别使用不同的模板引擎，具体采用何种模板引擎可以根据实际需要来选择。使用不同模板引擎时，本发明实施例提供的页面的生成方法，可以通过不同的模板引擎来输出对应的模板下的页面代码，具体实施方式类似，下面以多种不同框架采用同一个模板引擎为例进行说明。

在本步骤中，对于同一个页面，可以预先编写一套页面描述数据；

在页面需要使用多个框架进行开发的情况下，针对不同框架，编写对应的框架模板，框架模板与框架是一一对应的关系。

s12、接收模板引擎输出的页面在至少一个框架下的页面代码；上述页面代码是通过页面描述数据和对应的框架模板合成得到的。

模板引擎可针对输入的页面描述数据和对应的框架模板，合成该框架模板对应的框架下的页面代码。

下面分别对上述页面的生成方法的具体实施方式进行详细说明。

在一个实施例中，预先编写的页面描述数据，可以包括下述一项或多项：

页面布局的信息；

页面样式的信息；

页面的数据关联关系信息；

页面交互的信息。

页面描述数据的作用是为了描述页面的相关设计信息。

其中，页面布局是指以合适浏览的方式将页面的内容例如图片和文字、视频、动画等排放在页面的不同位置的布置方式。不同的设计者会有不同的布局设计。

页面样式是指布局中各种布局的容器、标签等使用的宽度、高度、背景、字体大小等等。

上述页面的数据关联信息，包含了页面的内容数据，例如文本数据、图片数据、视频数据、动画数据等等多媒体数据等，又包含了这些内容数据与页面布局、与页面样式之间的关联关系，例如哪些内容数据是位于布局的哪些位置，内容数据采用何种样式等。

页面交互的信息，例如可以为页面的交互逻辑的信息，页面的交互逻辑，可以是用户交互界面采用何种逻辑进行交互，例如点击图标或按钮、左右上下滑动等等。

上述页面描述数据例如可以为json格式的数据，或者其他格式的数据，本发明实施例不做限定，能够记录下自身业务场景下页面可能包含的上述页面布局的信息、页面样式的信息、页面的数据关联关系信息和页面交互的信息的皆可。页面描述数据的内容，因不同页面的设计不同而不同，每个页面分别与一份页面描述数据一一对应，对于采用相同框架的不同页面而言，其页面描述数据是不同的，却可以采用相同的框架模板。

采用页面描述数据，记载了页面可能存在的所有设计信息，这些设计信息与所采用的框架不相关，包括：布局的信息、样式的信息、数据关联关系和页面交互信息等等。这部分内容可以根据页面来自定义编写。

一个json格式的页面描述数据的例子的部分内容如下：

{

id:”,//页面id，字符串类型，可选字段

name:”,//页面名称，字符串类型，必填字段

filename:”,//页面文件名称，不包括文件路径和后缀，字符串类型，必填字段

bundle:{//页面所处bundle信息，必填字段，对象类型

name:”//bundle名称，比如'amap_bundle_feedback'，必填字段，字符串类型

},

上述例子中，定义了页面名称和bundle的字段类型和格式等。

又例如：

//页面状态信息，可选字段，对象数组类型，数组中的每个元素用来描述状态对象中的1个字段

state:[{

name:”,//字段名，必填字段，字符串类型

defaultvalue:null,//字段默认值，可选字段，可以是字符串、数字、布尔、数组、对象等数值类型

type:”,//字段类型，可选字段，如果当前字段是对象或数组类型，则type为'object'、'array'

subtype:”,//当type为'array'时subtype字段用来描述数组元素类型，可选值为'object'

上述例子中，记录了页面的状态信息的对象数组类型等等。

在本发明实施例中，如果页面需要使用多个框架，那么，还需要针对页面可能使用到的每个框架，分别编写对应的框架模板，有多少个框架，那么就需要预先编写好多少个对应的框架模板，框架模板与框架是一一对应的关系，但是不同页面采用相同框架时，可以共用同一个框架模板。

由于框架的不同，每个框架所对应的页面代码的格式特点是固定的，因此，可以参照对应的框架开发编写规范所定义的页面代码的格式特点，预先编写好前端页面的框架模板。

每种框架对应的框架模板，只需要编写一次即可。不论后续需要开发多少个页面，都不需要重复编写框架模板。

具体而言，框架模板中主要记录的是与框架相关的，用于描述所述页面的且符合框架规定格式的代码。

框架模板中，记录是虽然也是用于描述页面的相关设计信息，但是由于这些内容仅与框架相关，所以不论页面如何不同，使用相同框架的那部分代码，则存在与该框架模板中。

框架模板中包含的描述页面的设计信息的代码，从用户的角度来看，是可以直接运行和直接看到效果的那部分代码，而前述页面描述数据的记录的页面的设计信息的内容，虽然也描述了页面的效果，但是只能作为记录，无法独立运行和看到效果。使用相同框架的不同页面代码之间，共通的部分存在于框架模板中，而不共通的部分则存在于页面各自对应的页面描述数据中。因此需要将两者结合，方能最终得到页面的代码。

本发明实施例中，预先编写好的页面描述数据，包括描述页面的设计信息，包括页面布局的信息、页面样式的信息、页面的数据关联关系信息和页面交互的信息，这些信息与页面自身相关，与框架无关，而框架模板中包含与框架相关的、符合框架规定格式的用于描述页面的那部分设计信息，将这两者通过框架模板进行自动合成，最终生成页面的代码，由于大量页面可以通用若干个前端框架，这样的分离开发，然后进行自动合成的方式，可有效地减少人工开发的工作量，提高页面开发效率。

在一个实施例中，上述s11中，可以通过下述方式来将页面对应的页面描述数据以及页面使用的至少一个框架对应的框架模板传送给预设的模板引擎：

通过调用模板引擎的编写接口，将页面描述数据和至少一个框架对应的框架模板作为编写接口参数传递给模板引擎的编程接口。

模板引擎的作用，就是将框架模板与页面描述数据进行合成，生成最终的页面代码，本质是将代码按照规则进行拼接，例如采用下述流程合成代码：利用正则表达式分解出普通字符串和模板标识符，将模板标识符转换成普通的语言表达式，生成待执行语句，将数据填入执行，生成最终的字符串。目前比较常见的模板引擎例如可以包括：jquery、react、angular等，可以根据实际需求进行选择，本发明实施例对采用何种模板引擎不做限定。

现有技术中，在确定了页面使用的框架之后，就使用框架的规范直接进行页面的代码的开发，这样会针对每一个页面，分别开发不同框架下的网页代码，修改也必须对同一个页面下不同框架的代码分别进行修改。不同于这种方式，本发明实施例提供的上述页面的生成方法；针对每个页面，都编写了对应的页面描述数据，并且，针对页面可能使用到的每种前端框架，也分别编写了对应的框架模板，在进行页面开发时，只需要将每个页面的页面描述数据与对应的框架模板使用模板引擎进行自动合成即可，对于大量页面的开发工作而言，由于框架模板是互通的，可以大大减少开发的工作量，并且，不管有多少新的页面需要上线，也只需要自动地执行页面的页面描述数据与对应的框架模板使用模板引擎的步骤。类似地，在页面根据业务情况需要进行修改时，由于也不必去修改框架模板，将修改后的页面描述数据与框架模板进行自动合成即可，大大提升了前端页面开发和修改的效率，并降低了人工编写代码的工作量。

举例来说，参照图2a所示，假设需要开发m个页面，每个页面所使用的框架的种类为n，那么，按照现有技术中的开发方式，每个页面都需要使用对应的前端框架开发一次，那么总共需要开发m*n次页面代码。假设两个页面即页面a和页面b，每个页面都需要使用前端框架react、vue开发一次，结果就是需要开发4次页面代码。

一般前端框架种类不会特别多，但是在业务需求驱动下，如果需要源源不断地开发新的页面上线，那么这里的m的值就会比较大，开发页面的总投入就比较高，另一个缺点就是2个页面上线后，如果2个页面都需要维护修改，那么修改页面代码的次数也是4，即和第一次开发时编写页面次数一致，维护成本非常高。

参照图2b所示，而采用本发明实施例提供的页面的生成方法，有多少个页面，需要编写多少个描述页面的页面描述数据(例如json格式数据)，再针对n个框架分别编写n个框架模板即可，但是因为编写对应前端框架下的框架模板和调用模板引擎自动生成对应前端框架下的页面代码工作都是自动完成的、一次性的，与需要人工开发的页面数量没有关系，那么，如果开发m个页面，只需要编写m个描述页面的json格式数据即可，不会因为又有新的页面，又需要增加除编写json数据之外的工作量，人工的工作量大大降低。而且在开发完毕描述页面的json数据自动生成对应前端框架的页面代码上线后，如果后期需要修改页面，只需要修改对应的json数据即可。不管是初次开发页面还是后期修改以前开发完毕的页面，人工参与的编写页面或修改页面的次数都是m，而现有技术中人工参与的次数为m*n，大大节省了页面开发和维护时间以及人力成本，并且提高了页面开发效率。

基于同一发明构思，本发明实施例还提供了一种页面的生成装置、服务器和计算机可读存储介质，由于这些装置和服务器等所解决问题的原理与前述页面的生成方法相似，因此该装置和服务器的实施可以参见前述方法的实施，重复之处不再赘述。

本发明实施例提供的一种页面的生成装置，参照图3所示，包括：

传送模块31，用于将页面对应的页面描述数据以及页面使用的至少一个框架对应的框架模板，传送给模板引擎；

模板引擎模块32，用于将页面描述数据和对应的框架模板合成，得到框架下的页面代码；

接收模块33，用于接收模板引擎输出的所述页面在至少一个框架下的页面代码。

在一个实施例中，上述传送模块31，进一步用于调用所述模板引擎的编写接口，将所述页面描述数据和所述至少一个框架对应的框架模板作为编写接口参数传递给所述模板引擎的编程接口。

在一个实施例中，在上述页面的生成装置中，页面描述数据，例如可以包括下述一项或多项：

页面布局的信息、页面样式的信息、页面的数据关联关系信息和页面交互的信息。

在一个实施例中，上述数据关联关系，包括：页面上的内容数据、所述内容数据与页面布局和/或页面样式之间关联关系；

页面交互的信息，为所述页面交互逻辑的信息。

在一个实施例中，上述框架模板，为下述任一项框架所对应的模板：

react框架、vue框架和rax框架。

本发明实施例还提供了一种服务器，包括：存储器和处理器；其中，存储器存储有计算机程序，该计算机程序被处理器执行时能够实现前述页面的生成方法。

本发明实施例提供的服务器，能够基于开发人员编写的页面描述数据和至少一个框架对应的框架模板，利用模板引擎，自动输出所需的各框架下的页面代码，可大大提高页面代码的开发和修改效率，尤其在需要数据巨大页面支撑的业务而言，可有效地缩短页面上线的时间，降低人力成本。

上述服务器在硬件上可以采用任何一种方式，在软件上，可以实现上述页面的生成方法的流程的各个步骤即可。

本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机指令，该指令被处理器执行时实现前述页面的生成方法。

本发明实施例还提供了一种前端页面，该页面的代码是通过页面描述数据和页面所使用的框架下的框架模板合成得到的。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。