CN111367507A - 页面代码生成方法、装置、设备及存储介质 - Google Patents

Abstract

本发明涉及计算机技术领域，公开了一种页面代码生成方法、装置、设备及存储介质，用于提高应用软件开发中的代码复用性和代码维护效率。页面代码生成方法包括：获取预设的页面配置数据，预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息；按照预置元素标识和预设元素标签对至少一个初始元素信息进行元素匹配并归类统计，得到每个页面的目标元素信息；从预置组件模中查询每个页面的目标元素信息对应的目标组件模板；从目标组件模板中抽取出每个页面的目标元素信息对应的初始组件模块，并按照预置页面标识对初始组件模块进行代码封装和数据集成，得到每个页面的页面源代码。

Description

页面代码生成方法、装置、设备及存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种页面代码生成方法、装置、设备及存储介质。

背景技术

互联网开发是为万维网或专用网络开发互联网站点所涉及的工作。互联网开发的范围很广，从开发简单的纯文本静态页面到复杂的互联网应用程序、电子商务和社交网络服务。互联网开发通常涉及更全面的任务列表，包括互联网工程、互联网设计、互联网内容开发、客户端联络、客户端/服务器端脚本、互联网服务器与网络安全配置以及电子商务开发。

而随着互联网技术的突飞猛进，客户端软件变得非常普遍，而现有的客户端软件包括网页版和移动版的应用软件，因此，通常情况下需要分别设计两种具有相同业务功能的代码，不仅增加了后期开发维护的成本，同时导致具有相同业务功能的代码的复用性较差。

发明内容

本发明的主要目的在于解决在现有的互联网应用软件开发中多个页面中相同业务功能的代码的复用性较差的问题。

本发明第一方面提供了一种页面代码生成方法，包括：获取预设的页面配置数据，所述预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，所述至少一个初始元素信息包括输入框信息、按钮信息和表格信息；按照预置元素标识和预设元素标签对所述至少一个初始元素信息进行元素匹配并归类统计，得到每个页面的目标元素信息；从预置组件模板库中查询所述每个页面的目标元素信息对应的目标组件模板；从所述目标组件模板中抽取出所述每个页面的目标元素信息对应的初始组件模块，并按照所述预置页面标识对所述初始组件模块进行代码封装和模块集成，得到所述每个页面的页面源代码。

可选的，在本发明第一方面的第一种实现方式中，所述获取预设的页面配置数据，所述预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，所述至少一个初始元素信息包括输入框信息、按钮信息和表格信息，包括：向目标服务器发送获取数据配置的请求，并接收所述目标服务器返回的响应数据；对所述访响应数据按照预置数据格式进行解析，得到预设的页面配置数据，所述预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，所述至少一个初始元素信息包括输入框信息、按钮信息和表格信息。

可选的，在本发明第一方面的第二种实现方式中，所述按照预置元素标识和预设元素标签对所述至少一个初始元素信息进行元素匹配并归类统计，得到每个页面的目标元素信息，包括：向所述目标服务器发送获取预置元素信息的请求，得到所述预置元素信息；从所述预设的页面配置数据中读取所述至少一个初始元素信息对应的预置元素标识和预设元素标签；通过所述预置元素标识从预置元素信息中匹配所述至少一个初始元素信息；对匹配后的初始元素信息按照所述预设元素标签进行归类统计，得到每个页面的目标元素信息，所述每个页面的目标元素信息包括目标元素在所述每个页面出现的次数以及对应的位置信息。

可选的，在本发明第一方面的第三种实现方式中，所述从预置组件模板库中查询所述每个页面的目标元素信息对应的目标组件模板，包括：从所述每个页面的目标元素信息中获取对应的预置元素类型；通过所述预置元素类型检索所述预置组件模板库，得到所述每个页面的目标元素信息对应的目标组件模板。

可选的，在本发明第一方面的第四种实现方式中，所述从所述目标组件模板中抽取出所述每个页面的目标元素信息对应的初始组件模块，并按照所述预置页面标识对所述初始组件模块进行代码封装和模块集成，得到所述每个页面的页面源代码，包括：基于所述预置元素标识和所述预设元素标签从所述目标组件模板中抽取出所述每个页面的目标元素信息对应的初始组件模块，所述初始组件模块包括预置样式代码、预置超文本标记语言代码和预置脚本代码；按照预置元素标识和预设元素标签对所述预置样式代码、所述预置超文本标记语言代码和所述预置脚本代码分别进行代码占位符替换和封装，得到目标组件模块；按照所述预置页面标识对所述目标组件模块进行模块集成，得到所述每个页面的页面源代码。

可选的，在本发明第一方面的第五种实现方式中，按照预置元素标识和预设元素标签对所述预置样式代码、所述预置超文本标记语言代码和所述预置脚本代码分别进行代码占位符替换和封装，得到目标组件模块，包括：分别从所述预置样式代码、所述预置超文本标记语言代码和所述预置脚本代码提取对应的代码占位符；采用预置元素标识和预设元素标签查询所述代码占位符对应的预设配置规则；基于所述对应的预设配置规则进行代码占位符替换和封装，得到目标组件模块。

可选的，在本发明第一方面的第六种实现方式中，在所述获取预设的页面配置数据，所述预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，所述至少一个初始元素信息包括输入框信息、按钮信息和表格信息之前，所述页面代码生成方法还包括：预先设置所述预置元素信息，所述预置元素信息包括元素标识信息和元素区域信息；按照预设规则、所述元素标识信息和所述元素区域信息对预置元素信息分别添加层叠样式表、超文本标记语言和脚本指令，得到所述预置样式代码、所述预置超文本标记语言代码和所述预置脚本代码，所述预置样式代码用于采用不同的颜色标识预置元素信息。

本发明第二方面提供了一种页面代码生成装置，包括：获取模块，用于获取预设的页面配置数据，所述预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，所述至少一个初始元素信息包括输入框信息、按钮信息和表格信息；匹配模块，用于按照预置元素标识和预设元素标签对所述至少一个初始元素信息进行元素匹配并归类统计，得到每个页面的目标元素信息；查询模块，用于从预置组件模板库中查询所述每个页面的目标元素信息对应的目标组件模板；封装模块，用于从所述目标组件模板中抽取出所述每个页面的目标元素信息对应的初始组件模块，并按照所述预置页面标识对所述初始组件模块进行代码封装和模块集成，得到所述每个页面的页面源代码。

可选的，在本发明第二方面的第一种实现方式中，所述获取模块具体用于：向目标服务器发送获取数据配置的请求，并接收所述目标服务器返回的响应数据；对所述访响应数据按照预置数据格式进行解析，得到预设的页面配置数据，所述预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，所述至少一个初始元素信息包括输入框信息、按钮信息和表格信息。

可选的，在本发明第二方面的第二种实现方式中，所述匹配模块具体用于：向所述目标服务器发送获取预置元素信息的请求，得到所述预置元素信息；从所述预设的页面配置数据中读取所述至少一个初始元素信息对应的预置元素标识和预设元素标签；通过所述预置元素标识从预置元素信息中匹配所述至少一个初始元素信息；对匹配后的初始元素信息按照所述预设元素标签进行归类统计，得到每个页面的目标元素信息，所述每个页面的目标元素信息包括目标元素在所述每个页面出现的次数以及对应的位置信息。

可选的，在本发明第二方面的第三种实现方式中，所述查询模块具体用于：从所述每个页面的目标元素信息中获取对应的预置元素类型；通过所述预置元素类型检索所述预置组件模板库，得到所述每个页面的目标元素信息对应的目标组件模板。

可选的，在本发明第二方面的第四种实现方式中，所述封装模块包括：抽取单元，用于基于所述预置元素标识和所述预设元素标签从所述目标组件模板中抽取出所述每个页面的目标元素信息对应的初始组件模块，所述初始组件模块包括预置样式代码、预置超文本标记语言代码和预置脚本代码；替换单元，用于按照预置元素标识和预设元素标签对所述预置样式代码、所述预置超文本标记语言代码和所述预置脚本代码分别进行代码占位符替换和封装，得到目标组件模块；集成单元，用于按照所述预置页面标识对所述目标组件模块进行模块集成，得到所述每个页面的页面源代码。

可选的，在本发明第二方面的第五种实现方式中，所述替换单元具体用于：分别从所述预置样式代码、所述预置超文本标记语言代码和所述预置脚本代码提取对应的代码占位符；采用预置元素标识和预设元素标签查询所述代码占位符对应的预设配置规则；基于所述对应的预设配置规则进行代码占位符替换和封装，得到目标组件模块。

可选的，在本发明第二方面的第六种实现方式中，所述页面代码生成装置还包括：设置模块，用于预先设置所述预置元素信息，所述预置元素信息包括元素标识信息和元素区域信息；添加模块，用于按照预设规则、所述元素标识信息和所述元素区域信息对预置元素信息分别添加层叠样式表、超文本标记语言和脚本指令，得到所述预置样式代码、所述预置超文本标记语言代码和所述预置脚本代码，所述预置样式代码用于采用不同的颜色标识预置元素信息。

本发明第三方面提供了一种页面代码生成设备，包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；所述至少一个处理器调用所述存储器中的所述指令，以使得所述页面代码生成设备执行上述的页面代码生成方法。

本发明的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述的页面代码生成方法。

本发明提供的技术方案中，获取预设的页面配置数据，所述预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，所述至少一个初始元素信息包括输入框信息、按钮信息和表格信息；按照预置元素标识和预设元素标签对所述至少一个初始元素信息进行元素匹配并归类统计，得到每个页面的目标元素信息；从预置组件模板库中查询所述每个页面的目标元素信息对应的目标组件模板；从所述目标组件模板中抽取出所述每个页面的目标元素信息对应的初始组件模块，并按照所述预置页面标识对所述初始组件模块进行代码封装和模块集成，得到所述每个页面的页面源代码。本发明实施例中，通过预置元素标识和预置元素标签检测到不同页面具有相同业务需求时，将组件模板中的同一组件模块按照预置页面标识转换为不同页面中的代码，降低了相同组件代码冗余，并提高应用软件开发中的代码复用性和代码维护效率。

附图说明

图1为本发明实施例中页面代码生成方法的一个实施例示意图；

图2为本发明实施例中页面代码生成方法的另一个实施例示意图；

图3为本发明实施例中页面代码生成装置的一个实施例示意图；

图4为本发明实施例中页面代码生成装置的另一个实施例示意图；

图5为本发明实施例中页面代码生成设备的一个实施例示意图。

具体实施方式

本发明实施例提供了一种页面代码生成方法、装置、设备及存储介质，通过预置元素标识和预置元素标签检测到不同页面具有相同业务需求时，将组件模板中的同一组件模块按照预置页面标识转换为不同页面中的代码，降低了相同组件代码冗余，并提高应用软件开发中的代码复用性和代码维护效率。

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

为便于理解，下面对本发明实施例的具体流程进行描述，请参阅图1，本发明实施例中页面代码生成方法的一个实施例包括：

101、获取预设的页面配置数据，预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，至少一个初始元素信息包括输入框信息、按钮信息和表格信息。

其中，预设的页面配置数据采用预置数据格式进行封装。具体的，当终端检测到目标用户输入获取配置数据的指令时，终端向目标服务器发送获取配置数据的请求，得到预设的页面配置数据。预设的配置数据为按照预置业务需求和预设规则配置的数据，预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，至少一个初始元素信息包括输入框信息、按钮信息和表格信息。

可以理解的是，本发明的执行主体可以为页面代码生成装置，还可以是终端或者服务器，具体此处不做限定。本发明实施例以终端为执行主体为例进行说明。

102、按照预置元素标识和预设元素标签对至少一个初始元素信息进行元素匹配并归类统计，得到每个页面的目标元素信息。

具体的，终端获取预置元素标识和预设元素标签；终端按照预置元素标识对至少一个初始元素信息进行元素匹配；终端对已匹配的初始元素信息按照预设元素标签进行聚类处理，得到每个页面的目标元素信息，并记录目标元素信息。例如，目标元素信息包括语句输入框信息、命名生成按钮信息、复位按钮信息、推荐按钮信息以及缩略词输出框信息，可以预先存储在目标服务器的预置数据表中，具体此处不做限定。

103、从预置组件模板库中查询每个页面的目标元素信息对应的目标组件模板。

其中，预置组件模板库为预先存储在目标服务器中，进一步地，终端从目标服务器中获取预置模板库；终端查询每个页面的目标元素信息对应的标识信息，其中，标识信息包括元素名称和元素类型；终端根据标识信息读取预置组件模板库，得到对应的目标组件模板，例如，目标元素信息为输入框A，则终端查询预置组件模板库，得到目标组件模板B，目标组件模板B集成了全部输入框组件，也就是目标组件模板B包括输入框A对应的初始组件模块。

104、从目标组件模板中抽取出每个页面的目标元素信息对应的初始组件模块，并按照预置页面标识对初始组件模块进行代码封装和模块集成，得到每个页面的页面源代码。

具体的，终端获取每个页面的目标元素信息对应的标识信息；终端读取目标组件模板中的文件流数据；终端按照标识信息检索文件流数据，得到每个页面的目标元素信息对应的初始组件模块；终端对初始组件模块进行代码封装，并对封装的组件模块按照预置页面标识进行模块集成，得到每个页面的页面源代码，其中，封装的组件模块为目标元素信息对应的源代码。

需要说明的是，预置组件模板库中包括M个目标组件模板，其中M为正整数，每个目标组件模板为不同元素的各类型组件功能集合，每个目标组件模板包括N个初始组件模块，其中，N为正整数，初始组件模块的标识信息与目标元素信息中的标识信息一一对应。终端获得每个页面的目标元素信息的源代码，并对每个页面的目标元素信息的页面源代码进行拼装处理，得到每个页面的页面源代码，由于每个页面的页面源代码为按照预置指令自动生成的，提高了页面的开发效率。

本发明实施例中，通过预置元素标识和预置元素标签检测到不同页面具有相同业务需求时，将组件模板中的同一组件模块按照预置页面标识转换为不同页面中的代码，降低了相同组件代码冗余，并提高应用软件开发中的代码复用性和代码维护效率。

请参阅图2，本发明实施例中页面代码生成方法的另一个实施例包括：

201、获取预设的页面配置数据，预设的页面配置数据用于采用预置页面标识关联同一页面的至少一个初始元素信息，至少一个初始元素信息包括输入框信息、按钮信息和表格信息。

具体的，终端向目标服务器发送获取数据配置的请求，并接收目标服务器返回的响应数据；终端对访响应数据按照预置数据格式进行解析，得到预设的页面配置数据，预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，至少一个初始元素信息包括输入框信息、按钮信息和表格信息，例如，预设的页面配置数据包括页面A和页面B，各自对应的预置页面标识为page_01和page_02，其中，输入框信息、按钮信息和表格信息均包括各自对应的元素标识、元素标签和元素位置信息。

202、按照预置元素标识和预设元素标签对至少一个初始元素信息进行元素匹配并归类统计，得到每个页面的目标元素信息。

其中，预置元素标识与至少一个初始元素信息之间为一对一的关系，而预设元素标签则用于指示至少一个初始元素信息是否属于同一业务功能的元素。例如，预置元素标识为sitename，预置元素标签为site。

进一步地，终端向目标服务器发送获取预置元素信息的请求，得到预置元素信息；终端从预设的页面配置数据中读取至少一个初始元素信息对应的预置元素标识和预设元素标签；终端通过预置元素标识从预置元素信息中匹配至少一个初始元素信息；终端对匹配后的初始元素信息按照预设元素标签进行归类统计，得到每个页面的目标元素信息，每个页面的目标元素信息包括目标元素在每个页面出现的次数以及对应的位置信息，例如，将至少一个初始元素信息依次匹配并计算出每个页面包括的语句输入框、命名生成按钮、复位按钮、推荐按钮以及缩略词输出框，以及在每个页面中出现的次数，并以〈单词，文件ID[出现次数]〉的格式进行记录，而位置信息用于采用位置坐标标识目标元素的位置信息。

203、从预置组件模板库中查询每个页面的目标元素信息对应的目标组件模板。

具体的，终端从每个页面的目标元素信息中获取对应的预置元素类型，其中，预置元素类型包括输入input、表格table以及按钮button；终端通过预置元素类型检索预置组件模板库，得到每个页面的目标元素信息对应的目标组件模板，例如，input对应的目标组件模板为template_input，table对应的目标组件模板为template_table，button对应的目标组件模板为template_button，具体此处不做限定。

需要说明的是，终端获取所有第一预设元素信息的初始代码；终端根据初始代码和预设视图参数生成第二预设元素信息的目标代码；终端获取第二预设元素信息的类别，并聚类目标代码得到预置组件模板库。

204、基于预置元素标识和预设元素标签从组件模板中抽取出每个页面的目标元素信息对应的初始组件模块，初始组件模块包括预置样式代码、预置超文本标记语言代码和预置脚本代码。

其中，初始组件模块中的预置样式代码、预置超文本标记语言代码和预置脚本代码均为包括代码占位符，代码占位符用于指示终端采用预设规则在页面中进行个性化的文本或者元素替换。具体的，终端按照预设元素标签从组件模板中查询总的功能模块；终端按照预置元素标识从总的功能模块中读取每个页面的目标元素信息对应的初始组件模块，初始组件模块包括预置样式代码、预置超文本标记语言代码和预置脚本代码，其中，预置样式代码用于指示元素的显示风格，例如，颜色和大小，预置超文本标记语言代码用于展示元素的结构，预置脚本代码用于指示对元素进行操作的事件指令，例如，显示show和隐藏hide。

205、按照预置元素标识和预设元素标签对预置样式代码、预置超文本标记语言代码和预置脚本代码分别进行代码占位符替换和封装，得到目标组件模块。

具体的，终端分别从预置样式代码、预置超文本标记语言代码和预置脚本代码提取对应的代码占位符。例如，代码占位符${name}；终端按照预置元素标识和预设元素标签查询代码占位符对应的预设配置规则，例如，${A_B}，其中，A与B可以按照优先级排序分别对应名称和文本；终端基于对应的预设配置规则进行代码占位符替换和封装，得到目标组件模块，需要说明的是，终端对初始组件模块进行代码封装时，还需要对应于目标元素信息在每个页面的出现次数，以及对应于目标元素信息的位置信息。

举例说明，终端将表格内操作行的显示文本数据替换成输入框〈input/〉，具体的，终端获取操作行的标识，并通过操作行的标识获取表格的行row对象，然后终端通过相应的索引来获取要修改的某列的文本值，终端再利用文本处理韩式innerHTML()将相应的列替换成输入框〈input/〉，终端设置输入框对应的名称name、标识id以及样式等相关属性，同时通过修改文本框的值来实现该列的文本值修改操作。

可以理解的是，目标组件模块包括样式切换后的页面显示代码、结构转换后的元素内容代码和事件操作代码，其中，页面显示代码也就是目标元素信息对应样式的属性标识语句；结构转换后的元素内容代码为采用超文本标记语言定义的多种数据类型的元素内容，如脚本数据和多个类型的属性值；事件操作代码包括触发事件代码和捕获事件代码。

206、按照预置页面标识对目标组件模块进行模块集成，得到每个页面的页面源代码。

终端将每个页面的目标元素信息对应的目标组件模块按照预置页面标识进行模块组合和拼装，最终得到每个页面的页面源代码，每个页面的页面源代码中相同业务功能均采用同一初始组件模块，降低了相同业务功能采用多种代码实现的冗余性。进一步地，每个页面展示中均显示了各模块切换的色彩变化，例如，将选项与按钮的颜色、层次及所属模块采用不用的样式，将可点击的元素，例如，连接和按钮；可选择的元素，例如，单选和多选框以及普通的文字明显区分开来。并将点击操作的元素设置为蓝色，选中的当前元素为黑色，也就是设置不同的初始组件模块，使得每个页面在各模块间切换时视觉上有所不同。

可选的，终端预先设置预置元素信息，预置元素信息包括元素标识信息和元素区域信息；终端按照预设规则、元素标识信息和元素区域信息对预置元素信息分别添加层叠样式表、超文本标记语言和脚本指令，得到预置样式代码、预置超文本标记语言代码和预置脚本代码，预置样式代码用于采用不同的颜色标识预置元素信息。其中，元素区域信息包括预置元素信息的左上角坐标和右下角坐标，终端按照预设的映射关系填充预置元素信息对应的元素标识的元素区域，也就是实现元素的配色。

本发明实施例中，通过预置元素标识和预置元素标签检测到不同页面具有相同业务需求时，将组件模板中的同一组件模块按照预置页面标识转换为不同页面中的代码，降低了相同组件代码冗余，并提高应用软件开发中的代码复用性和代码维护效率。

上面对本发明实施例中页面代码生成方法进行了描述，下面对本发明实施例中页面代码生成装置进行描述，请参阅图3，本发明实施例中页面代码生成装置一个实施例包括：

获取模块301，用于获取预设的页面配置数据，预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，至少一个初始元素信息包括输入框信息、按钮信息和表格信息；

匹配模块302，用于按照预置元素标识和预设元素标签对至少一个初始元素信息进行元素匹配并归类统计，得到每个页面的目标元素信息；

查询模块303，用于从预置组件模板库中查询每个页面的目标元素信息对应的目标组件模板；

封装模块304，用于从目标组件模板中抽取出每个页面的目标元素信息对应的初始组件模块，并按照预置页面标识对初始组件模块进行代码封装和模块集成，得到每个页面的页面源代码。

本发明实施例中，通过预置元素标识和预置元素标签检测到不同页面具有相同业务需求时，将组件模板中的同一组件模块按照预置页面标识转换为不同页面中的代码，降低了相同组件代码冗余，并提高应用软件开发中的代码复用性和代码维护效率。

请参阅图4，本发明实施例中页面代码生成装置的另一个实施例包括：

获取模块301，用于获取预设的页面配置数据，预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，至少一个初始元素信息包括输入框信息、按钮信息和表格信息；

匹配模块302，用于按照预置元素标识和预设元素标签对至少一个初始元素信息进行元素匹配并归类统计，得到每个页面的目标元素信息；

查询模块303，用于从预置组件模板库中查询每个页面的目标元素信息对应的目标组件模板；

封装模块304，用于从目标组件模板中抽取出每个页面的目标元素信息对应的初始组件模块，并按照预置页面标识对初始组件模块进行代码封装和模块集成，得到每个页面的页面源代码。

可选的，获取模块301还可以具体用于：

向目标服务器发送获取数据配置的请求，并接收目标服务器返回的响应数据；

对访响应数据按照预置数据格式进行解析，得到预设的页面配置数据，预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，至少一个初始元素信息包括输入框信息、按钮信息和表格信息。

可选的，匹配模块302还可以具体用于：

向目标服务器发送获取预置元素信息的请求，得到预置元素信息；

从预设的页面配置数据中读取至少一个初始元素信息对应的预置元素标识和预设元素标签；

通过预置元素标识从预置元素信息中匹配至少一个初始元素信息；

对匹配后的初始元素信息按照预设元素标签进行归类统计，得到每个页面的目标元素信息，每个页面的目标元素信息包括目标元素在每个页面出现的次数以及对应的位置信息。

可选的，查询模块303还可以具体用于：

从每个页面的目标元素信息中获取对应的预置元素类型；

通过预置元素类型检索预置组件模板库，得到每个页面的目标元素信息对应的组件模板。

可选的，封装模块304还包括：

抽取单元3041，用于基于预置元素标识和预设元素标签从组件模板中抽取出每个页面的目标元素信息对应的初始组件模块，初始组件模块包括预置样式代码、预置超文本标记语言代码和预置脚本代码；

替换单元3042，用于按照预置元素标识和预设元素标签对预置样式代码、预置超文本标记语言代码和预置脚本代码分别进行代码占位符替换和封装，得到目标组件模块；

集成单元3043，用于按照预置页面标识对目标组件模块进行模块集成，得到每个页面的页面源代码。

可选的，替换单元3042还可以具体用于：

分别从预置样式代码、预置超文本标记语言代码和预置脚本代码提取对应的代码占位符；

按照预置元素标识和预设元素标签查询代码占位符对应的预设配置规则；

基于对应的预设配置规则进行代码占位符替换和封装，得到目标组件模块。

可选的，页面代码生成装置还包括：

设置模块305，用于预先设置预置元素信息，预置元素信息包括元素标识信息和元素区域信息；

添加模块306，用于按照预设规则、元素标识信息和元素区域信息对预置元素信息分别添加层叠样式表、超文本标记语言和脚本指令，得到预置样式代码、预置超文本标记语言代码和预置脚本代码，预置样式代码用于采用不同的颜色标识预置元素信息。

本发明实施例中，通过预置元素标识和预置元素标签检测到不同页面具有相同业务需求时，将组件模板中的同一组件模块按照预置页面标识转换为不同页面中的代码，降低了相同组件代码冗余，并提高应用软件开发中的代码复用性和代码维护效率。

上面图3和图4从模块化功能实体的角度对本发明实施例中的页面代码生成装置进行详细描述，下面从硬件处理的角度对本发明实施例中页面代码生成设备进行详细描述。

图5是本发明实施例提供的一种页面代码生成设备的结构示意图，该页面代码生成设备500可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processing units，CPU)510(例如，一个或一个以上处理器)和存储器520，一个或一个以上存储应用程序533或数据532的存储介质530(例如一个或一个以上海量存储设备)。其中，存储器520和存储介质530可以是短暂存储或持久存储。存储在存储介质530的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对页面代码生成设备500中的一系列指令操作。更进一步地，处理器510可以设置为与存储介质530通信，在页面代码生成设备500上执行存储介质530中的一系列指令操作。

页面代码生成设备500还可以包括一个或一个以上电源540，一个或一个以上有线或无线网络接口550，一个或一个以上输入输出接口560，和/或，一个或一个以上操作系统531，例如Windows Serve，Mac OS X，Unix，Linux，FreeBSD等等。本领域技术人员可以理解，图5示出的页面代码生成设备结构并不构成对页面代码生成设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

本发明还提供一种计算机可读存储介质，该计算机可读存储介质可以为非易失性计算机可读存储介质，该计算机可读存储介质也可以为易失性计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在计算机上运行时，使得计算机执行所述页面代码生成方法的步骤。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

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

Claims (10)

1.一种页面代码生成方法，其特征在于，所述页面代码生成方法包括：

获取预设的页面配置数据，所述预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，所述至少一个初始元素信息包括输入框信息、按钮信息和表格信息；

按照预置元素标识和预设元素标签对所述至少一个初始元素信息进行元素匹配并归类统计，得到每个页面的目标元素信息；

从预置组件模板库中查询所述每个页面的目标元素信息对应的目标组件模板；

从所述目标组件模板中抽取出所述每个页面的目标元素信息对应的初始组件模块，并按照所述预置页面标识对所述初始组件模块进行代码封装和模块集成，得到所述每个页面的页面源代码。

2.根据权利要求1所述的页面代码生成方法，其特征在于，所述获取预设的页面配置数据，所述预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，所述至少一个初始元素信息包括输入框信息、按钮信息和表格信息，包括：

向目标服务器发送获取数据配置的请求，并接收所述目标服务器返回的响应数据；

对所述访响应数据按照预置数据格式进行解析，得到预设的页面配置数据，所述预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，所述至少一个初始元素信息包括输入框信息、按钮信息和表格信息。

3.根据权利要求2所述的页面代码生成方法，其特征在于，所述按照预置元素标识和预设元素标签对所述至少一个初始元素信息进行元素匹配并归类统计，得到每个页面的目标元素信息，包括：

向所述目标服务器发送获取预置元素信息的请求，得到所述预置元素信息；

从所述预设的页面配置数据中读取所述至少一个初始元素信息对应的预置元素标识和预设元素标签；

通过所述预置元素标识从预置元素信息中匹配所述至少一个初始元素信息；

对匹配后的初始元素信息按照所述预设元素标签进行归类统计，得到每个页面的目标元素信息，所述每个页面的目标元素信息包括目标元素在所述每个页面出现的次数以及对应的位置信息。

4.根据权利要求1所述的页面代码生成方法，其特征在于，所述从预置组件模板库中查询所述每个页面的目标元素信息对应的目标组件模板，包括：

从所述每个页面的目标元素信息中获取对应的预置元素类型；

通过所述预置元素类型检索所述预置组件模板库，得到所述每个页面的目标元素信息对应的目标组件模板。

5.根据权利要求1所述的页面代码生成方法，其特征在于，所述从所述目标组件模板中抽取出所述每个页面的目标元素信息对应的初始组件模块，并按照所述预置页面标识对所述初始组件模块进行代码封装和模块集成，得到所述每个页面的页面源代码，包括：

基于所述预置元素标识和所述预设元素标签从所述目标组件模板中抽取出所述每个页面的目标元素信息对应的初始组件模块，所述初始组件模块包括预置样式代码、预置超文本标记语言代码和预置脚本代码；

按照预置元素标识和预设元素标签对所述预置样式代码、所述预置超文本标记语言代码和所述预置脚本代码分别进行代码占位符替换和封装，得到目标组件模块；

采用所述预置页面标识对所述目标组件模块进行模块集成，得到所述每个页面的页面源代码。

6.根据权利要求5所述的页面代码生成方法，其特征在于，所述按照预置元素标识和预设元素标签对所述预置样式代码、所述预置超文本标记语言代码和所述预置脚本代码分别进行代码占位符替换和封装，得到目标组件模块，包括：

分别从所述预置样式代码、所述预置超文本标记语言代码和所述预置脚本代码提取对应的代码占位符；

按照预置元素标识和预设元素标签查询所述代码占位符对应的预设配置规则；

基于所述对应的预设配置规则进行代码占位符替换和封装，得到目标组件模块。

7.根据权利要求1-6中任一项所述的页面代码生成方法，其特征在于，在所述获取预设的页面配置数据，所述预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，所述至少一个初始元素信息包括输入框信息、按钮信息和表格信息之前，所述页面代码生成方法还包括：

预先设置所述预置元素信息，所述预置元素信息包括元素标识信息和元素区域信息；

按照预设规则、所述元素标识信息和所述元素区域信息对预置元素信息分别添加层叠样式表、超文本标记语言和脚本指令，得到所述预置样式代码、所述预置超文本标记语言代码和所述预置脚本代码，所述预置样式代码用于采用不同的颜色标识预置元素信息。

8.一种页面代码生成装置，其特征在于，所述页面代码生成装置包括：

获取模块，用于获取预设的页面配置数据，所述预设的页面配置数据用于采用预置页面标识关联同一页面中的至少一个初始元素信息，所述至少一个初始元素信息包括输入框信息、按钮信息和表格信息；

匹配模块，用于按照预置元素标识和预设元素标签对所述至少一个初始元素信息进行元素匹配并归类统计，得到每个页面的目标元素信息；

查询模块，用于从预置组件模板库中查询所述每个页面的目标元素信息对应的目标组件模板；

封装模块，用于从所述目标组件模板中抽取出所述每个页面的目标元素信息对应的初始组件模块，并按照所述预置页面标识对所述初始组件模块进行代码封装和模块集成，得到所述每个页面的页面源代码。

9.一种页面代码生成设备，其特征在于，所述页面代码生成设备包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；

所述至少一个处理器调用所述存储器中的所述指令，以使得所述页面代码生成设备执行如权利要求1-7中任意一项所述的页面代码生成方法。

10.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-7中任一项所述页面代码生成方法。

Images