CN115686518A - 前端页面生成方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种前端页面生成方法、装置、计算机设备和存储介质。涉及人工智能技术领域。所述方法包括：获取前端页面图片；对所述前端页面图片进行识别处理，得到各特征图像、以及各所述特征图像的特征信息；所述特征信息包括所述特征图像的显示参数信息、以及所述特征图像在所述前端页面图片的布局信息；根据所述特征图像、以及所述特征图像的参数信息，生成所述特征图像的前端显示代码，并根据各所述特征图像的布局信息、以及各所述特征图像的参数信息，建立目标前端页面的布局代码；根据所述特征图像的前端显示代码、以及所述目标前端页面的布局代码，生成目标前端页面。采用本方法能够提高前端页面的开发效率。

Description

前端页面生成方法、装置、计算机设备和存储介质

技术领域

本申请涉及人工智能技术领域，特别是涉及一种前端页面生成方法、装置、计算机设备和存储介质。

背景技术

随着前端页面样式的更新迭代逐渐加快，各个终端需要对前端布局进行多次更新迭代，并有大量的前端布局需要开发人员开发，使得前端人员无法专注于开发前端业务逻辑代码。

然而，传统前端页面生成方法为前端人员根据需求中的原型图进行人工手动开发，但很多都是重复且需要消耗大量的时间投入到前端页面生成过程中，并且需要工作人员同时掌握多个页面样式的使用能力。同时，人工手动开发过程中存在大量的沟通、返工的工作量，导致前端页面开发效率较低。

发明内容

基于此，有必要针对上述技术问题，提供一种前端页面生成方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。

第一方面，本申请提供了一种前端页面生成方法。所述方法包括：

获取前端页面图片；

对所述前端页面图片进行识别处理，得到所述前端页面图片包含的各特征图像、以及各所述特征图像的特征信息；所述特征信息包括所述特征图像的显示参数信息、以及所述特征图像在所述前端页面图片的布局信息；

根据所述特征图像、以及所述特征图像的参数信息，生成所述特征图像的前端显示代码，并根据各所述特征图像的布局信息、以及各所述特征图像的参数信息，建立目标前端页面的布局代码；

根据所述特征图像的前端显示代码、以及所述目标前端页面的布局代码，生成目标前端页面。

可选的，所述获取前端页面图片，包括：

响应于用户的前端页面生成操作，获取前端页面样式、以及所述页面样式的布局信息；

根据各所述前端页面样式、以及各所述前端页面样式的布局信息，通过图片编辑程序，生成前端页面图片。

可选的，所述对所述前端页面图片进行识别处理，得到所述前端页面图片包含的各特征图像、以及各所述特征图像的特征信息，包括：

识别所述前端页面图片中的各特征图像边缘，并基于各所述特征图像边缘，确定所述特征图像边缘包围所形成的特征图像；

针对每个特征图像，根据所述特征图像对应的特征图像边缘，对所述特征图像进行识别处理，得到所述特征图像的参数信息；

根据所述前端页面图片、各所述特征图像、以及各所述特征图像的参数信息，确定所述前端页面图片中各所述特征图像的布局信息。

可选的，所述针对每个特征图像，根据所述特征图像对应的特征图像边缘，对所述特征图像进行识别处理，得到所述特征图像的参数信息，包括：

根据所述特征图像对应的特征图像边缘，识别所述特征图像的图像形状；

根据所述图像形状对应的参数识别策略对所述特征图像进行识别，得到所述特征图像的参数信息。

可选的，所述根据所述前端页面图片、各所述特征图像、以及各所述特征图像的参数信息，确定所述前端页面图片中各所述特征图像的布局信息，包括：

建立所述前端页面图片的坐标框架；

在所述前端页面图片的坐标框架中，确定每个特征图像的位置信息；

针对每个特征图像，根据所述特征图像的参数信息、以及所述特征图像的位置信息，确定所述特征图像的显示分布信息；

计算所述前端页面图片和所述特征图像之间的比例信息，并根据所述比例信息、以及所述特征图像的显示分布信息，确定每个特征图像的布局信息。

可选的，所述根据所述特征图像、以及所述特征图像的参数信息，生成所述特征图像的前端显示代码，并根据各所述特征图像的布局信息、以及各所述特征图像的参数信息，建立目标前端页面的布局代码，包括：

根据所述特征图像的形状参数信息对应的图像形状，确定所述特征图像的图像类别，并基于所述特征图像的图像类别对应的显示代码生成策略，生成所述特征图像的前端显示代码；

通过布局代码生成策略，根据所有所述特征图像在所述前端页面图片的布局信息，生成目标前端页面的初始布局代码，并根据每个特征图像的参数信息、调整所述初始布局代码中的参数值，得到目标前端页面的布局代码。

第二方面，本申请还提供了一种前端页面生成装置。所述装置包括：

获取模块，用于获取前端页面图片；

识别模块，用于对所述前端页面图片进行识别处理，得到所述前端页面图片包含的各特征图像、以及各所述特征图像的特征信息；所述特征信息包括所述特征图像的显示参数信息、以及所述特征图像在所述前端页面图片的布局信息；

建立模块，用于根据所述特征图像、以及所述特征图像的参数信息，生成所述特征图像的前端显示代码，并根据各所述特征图像的布局信息、以及各所述特征图像的参数信息，建立目标前端页面的布局代码；

生成模块，用于根据所述特征图像的前端显示代码、以及所述目标前端页面的布局代码，生成目标前端页面。

可选的，所述获取模块，具体用于：

响应于用户的前端页面生成操作，获取前端页面样式、以及所述页面样式的布局信息；

根据各所述前端页面样式、以及各所述前端页面样式的布局信息，通过图片编辑程序，生成前端页面图片。

可选的，所述识别模块，具体用于：

识别所述前端页面图片中的各特征图像边缘，并基于各所述特征图像边缘，确定所述特征图像边缘包围所形成的特征图像；

针对每个特征图像，根据所述特征图像对应的特征图像边缘，对所述特征图像进行识别处理，得到所述特征图像的参数信息；

根据所述前端页面图片、各所述特征图像、以及各所述特征图像的参数信息，确定所述前端页面图片中各所述特征图像的布局信息。

可选的，所述识别模块，具体用于：

根据所述特征图像对应的特征图像边缘，识别所述特征图像的图像形状；

根据所述图像形状对应的参数识别策略对所述特征图像进行识别，得到所述特征图像的参数信息。

可选的，所述识别模块，具体用于：

建立所述前端页面图片的坐标框架；

在所述前端页面图片的坐标框架中，确定每个特征图像的位置信息；

针对每个特征图像，根据所述特征图像的参数信息、以及所述特征图像的位置信息，确定所述特征图像的显示分布信息；

计算所述前端页面图片和所述特征图像之间的比例信息，并根据所述比例信息、以及所述特征图像的显示分布信息，确定每个特征图像的布局信息。

可选的，所述建立模块，具体用于：

根据所述特征图像的形状参数信息对应的图像形状，确定所述特征图像的图像类别，并基于所述特征图像的图像类别对应的显示代码生成策略，生成所述特征图像的前端显示代码；

通过布局代码生成策略，根据所有所述特征图像在所述前端页面图片的布局信息，生成目标前端页面的初始布局代码，并根据每个特征图像的参数信息、调整所述初始布局代码中的参数值，得到目标前端页面的布局代码。

第三方面，本申请提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现第一方面中任一项所述的方法的步骤。

第四方面，本申请提供了一种计算机可读存储介质。其上存储有计算机程序，所述计算机程序被处理器执行时实现第一方面中任一项所述的方法的步骤。

第五方面，本申请提供了一种计算机程序产品。所述计算机程序产品包括计算机程序，该计算机程序被处理器执行时实现第一方面中任一项所述的方法的步骤。

上述前端页面生成方法、装置、计算机设备、存储介质和计算机程序产品，通过获取前端页面图片；对所述前端页面图片进行识别处理，得到所述前端页面图片包含的各特征图像、以及各所述特征图像的特征信息；所述特征信息包括所述特征图像的显示参数信息、以及所述特征图像在所述前端页面图片的布局信息；根据所述特征图像、以及所述特征图像的参数信息，生成所述特征图像的前端显示代码，并根据各所述特征图像的布局信息、以及各所述特征图像的参数信息，建立目标前端页面的布局代码；根据所述特征图像的前端显示代码、以及所述目标前端页面的布局代码，生成目标前端页面。通过分析前端页面图片的特征图像、以及各特征图像的特征信息、从而生成目标前端页面，避免了人工手动开发前端页面的过程，提高前端页面的开发效率。

附图说明

图1为一个实施例中前端页面生成方法的流程示意图；

图2为一个实施例中特征信息获取步骤的流程示意图；

图3为一个实施例中前端页面生成步骤的流程示意图；

图4为另一个实施例中前端页面生成示例的流程示意图；

图5为一个实施例中前端页面生成装置的结构框图；

图6为一个实施例中计算机设备的内部结构图。

具体实施方式

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

本申请实施例提供的前端页面生成方法，可以应用于终端中，也可以应用于服务器，还可以应用于包括终端和服务器的系统，并通过终端和服务器的交互实现。其中，终端可以包括但不限于是各种个人计算机、笔记本电脑、平板电脑等。该终端通过分析前端页面图片的特征图像、以及各特征图像的特征信息、从而生成目标前端页面，避免了人工手动开发前端页面的过程，提高前端页面的开发效率。

在一个实施例中，如图1所示，提供了一种前端页面生成方法，以该方法应用于终端为例进行说明，包括以下步骤：

步骤S101，获取前端页面图片。

本实施例中，终端基于用户需求的页面样式、以及各页面样式的布局信息，通过画图工具生成前端页面图片。其中，页面样式可以但不限于是任意一种布局于前端页面的样式，页面样式的布局信息为页面样式在该前端页面的布局情况。画图工具可以但不限于任意一种可以进行画图的软件或编辑器，例如Windows自带的画图工具，前端页面图片的格式可以但不限于是PNG(Portable Network Graphics，便携式网络图形)格式的图片。

步骤S102，对前端页面图片进行识别处理，得到所述前端页面图片包含的各特征图像、以及各特征图像的特征信息。

其中，特征信息包括特征图像的显示参数信息、以及特征图像在前端页面图片的布局信息。

本实施例中，终端通过边缘图像识别技术，识别前端页面图片中的各特征图像，并分析每个特征图像的显示参数信息和布局信息，得到各特征图像的特征信息。其中边缘图像识别技术可以但不限于任意一种可以实现上述步骤的边缘图像识别算法，例如，人脸边缘识别算法等。

具体的，终端处理图片识别过程为，终端可通过python语言实现图片ocr功能，将图片中的模块形状、颜色、位置、大小等参数分析出来。图片ocr(Optical CharacterRecognition，光学字符识别，用于将图片中的内容翻译成用户想要的文字内容)：利用计算机对图片进行处理、分析，是应用深度学习算法的一种时间应用。主要步骤为四步，图片采集、图片预处理、特征提取、图片识别。本发明主要依靠python强大的图像计算生态环境，使用tensorflow、numpy、scipy、opencv、matplotlib、h5py、keras等库经过模型多次训练最终形成成熟图片ocr模型，其中opencv主要用于实现图片轮廓识别、tensorflow用于算法编程的实现、numpy是python的一种开源数值计算扩展，主要应用上述三大模块。

步骤S103，根据特征图像、以及特征图像的参数信息，生成特征图像的前端显示代码，并根据各特征图像的布局信息、以及各特征图像的参数信息，建立目标前端页面的布局代码。

本实施例中，终端针对识别出的每个特征图像，根据该特征图像、以及该特征图像的参数信息，通过代码生成策略，生成该特征图像的前端限时代码，并根据该特征图像的布局信息、以及该特征图像的参数信息，建立目标前段页面中每个特征图像的布局代码。同样的，重复上述步骤，直到得到所有特征图像的前端显示代码，以及所有特征图像的布局代码，终端根据所有特征图像的布局代码，基于前端布局框架，建立目标前端页面的布局代码。具体的建立目标前段页面的布局代码的过程，后续将详细说明。其中，前端布局框架可以但不限是flex(Flexible Box，弹性布局)、element-ui(是由国内团队开发并开源的一套为开发者、设计师和产品经理准备的桌面端组件库。)

具体的，终端生成代码的过程为，通过java语言将图片中的模块形状、颜色、位置、大小等参数结合事先录入终端的参数表生成最终html、css代码。例如，将参数表、ocr分析出的数据作为入参，通过预先写好的java类将两个入参结合，将图片中的各模块对应生成可供前端开发人员使用的html、css代码。注：主要使用4个java类：入参拦截类、参数分析类、ocr数据分析类、前端代码生成类。

步骤S104，根据特征图像的前端显示代码、以及目标前端页面的布局代码，生成目标前端页面。

本实施例中，终端根据特征图像的前端显示代码、以及目标前端页面的布局代码，通过前端页面样式整合策略，将上述代码进行调整、整合处理，得到目标前端页面的前端代码。终端通过前端显示端口基于前端代码对目标前端页面进行展示，得到目标前端页面。

基于上述方案，通过分析前端页面图片的特征图像、以及各特征图像的特征信息、从而生成目标前端页面，避免了人工手动开发前端页面的过程，提高前端页面的开发效率。

可选的，获取前端页面图片，包括：响应于用户的前端页面生成操作，获取前端页面样式、以及页面样式的布局信息；根据各前端页面样式、以及各前端页面样式的布局信息，通过图片编辑程序，生成前端页面图片。

本实施例中，终端响应于用户的前端页面生成操作，获取用户传输的前端页面样式，以及各页面样式的布局信息。其中，用户传输的页面样式可以是页面样式数据、页面样式参数信息、又或者是页面样式的边缘信息和页面样式的填充信息。终端通过图片编辑程序，根据用户传输的页面样式，编辑为页面样式图像，并按照用户传输的页面样式的布局信息，对各页面样式进行布局，从而得到前端页面图片。

基于上述方案，通过图片编辑程序，生成前端页面图片，为后续生成前端页面图片对应的代码，提供数据基础。

可选的，如图2所示，对前端页面图片进行识别处理，得到前端页面图片包含的各特征图像、以及各特征图像的特征信息，包括：

步骤S201，识别前端页面图片中的各特征图像边缘，并基于各特征图像边缘，确定特征图像边缘包围所形成的特征图像。

步骤S202，针对每个特征图像，根据特征图像对应的特征图像边缘，对特征图像进行识别处理，得到特征图像的参数信息。

步骤S203，根据前端页面图片、各特征图像、以及各特征图像的参数信息，确定前端页面图片中各特征图像的布局信息。

本实施例中，终端通过图像边缘识别算法，对前端页面图片进行识别处理，得到前端页面图片中特征图像的特征图像边缘。终端将每个特征图像边缘所包围的图像作为特征图像。终端针对每个特征图像，对该特征图像进行参数识别处理，得到该特征图像的各参数信息。同样的，终端通过上述步骤，识别所有特征图像的各参数信息。其中，特征图像的参数信息包括特征图像的形状参数、颜色参数、大小参数、在前端页面图片中的位置参数、填充图片参数等图像参数。终端根据前端页面图片中，每个特征图像的参数信息，在前端页面图片的三维结构中，确定每个特征图像的布局信息。其中，各特征图像的布局信息为个特征图像在前端页面图片中的位置、以及分布信息。三维结构可以但不限于是三维坐标系。具体的确定各特征图像的布局信息的过程，后续将详细说明。

基于上述方案，通过确定各特征图像的参数信息、以及各特征图像的布局信息，为后续生成各特征图像的前端显示代码、和前端页面图片的布局代码提供数据基础。

可选的，针对每个特征图像，根据特征图像对应的特征图像边缘，对特征图像进行识别处理，得到特征图像的参数信息，包括：根据特征图像对应的特征图像边缘，识别特征图像的图像形状；根据图像形状对应的参数识别策略对特征图像进行识别，得到特征图像的参数信息。

本实施例中，终端针对每个特征图像，通过该特征图像的特征图像边缘，以及终端预设的图像形状识别策略，识别该特征图像对应的图像形状。其中图像可以但不限于是矩形、圆角矩形、椭圆、正方形、三角、横线等图像形状。终端预设每种图像形状与参数识别策略的对应关系，根据识别出的图像形状，查询该图像形状对应的参数识别策略，并根据该参数识别策略，对该特征图像进行参数识别，得到该特征图像的参数信息。其中每种图像形状对应的参数识别策略中的区别点在于各图像的形状参数的识别，例如，特征图像的形状为矩形、三角形、圆形等。在特征图像为矩形的情况下，终端通过识别该特征图像的长度和宽度，确定该特征图像的形状参数。特征图像为三角形的情况下，终端通过识别该特征图像的底长和高度，确定该特征图像的形状参数。特征图像为圆形的情况下，终端通过识别该特征图像的半径，确定该特征图像的形状参数。参数识别策略中，除形状参数的识别方式不同以外，其他各参数的识别方式均相同。

基于上述方案，终端通过不用的参数识别策略，识别各特征图像的参数信息，为后续生成各特征图像的前端显示代码提供数据基础。

可选的，根据前端页面图片、各特征图像、以及各特征图像的参数信息，确定前端页面图片中各特征图像的布局信息，包括：建立前端页面图片的坐标框架；在前端页面图片的坐标框架中，确定每个特征图像的位置信息；针对每个特征图像，根据特征图像的参数信息、以及特征图像的位置信息，确定特征图像的显示分布信息；计算前端页面图片和特征图像之间的比例信息，并根据比例信息、以及特征图像的显示分布信息，确定每个特征图像的布局信息。

本实施例中，终端在前端页面图片上，建立该前端页面图片的坐标框架。其中，坐标框架可以但不限于是二维坐标系、三维坐标系、或矩阵框架等。终端在前端页面图片的坐标框架中，确定每个特征图像的位置信息。其中，在坐标框架为二维坐标系的情况下，特征图像的位置信息为二维位置坐标。在坐标框架为三维坐标系的情况下，特征图像的位置信息为三维位置坐标。在坐标框架为矩阵的情况下，特征图像的位置信息为矩阵元素点。终端根据特征图像的形状参数信息、以及特征图像的位置信息，确定每个特征图像在前端页面图片中的位置、以及该特征图像所覆盖的范围。终端将每个该特征图像在前端页面图片中的位置、以及该特征图像所覆盖的范围，作为每个特征图像的显示分布信息。终端通过每个特征图像的显示分布信息，计算前端页面图片和特征图像之间的比例信息。其中，比例信息为前端页面图像与各特征图像的比例大小，用于在调整前端页面图像大小的情况下，同步调整各特征图像的大小。终端根据前端页面图片和特征图像之间的比例信息、以及特征图像的显示分布信息，确定每个特征图像在前端页面图片的布局信息。其中布局信息为特征图像在前端页面的分布情况。

基于上述方案，通过确定每个特征图像的布局信息，为后续确定前端页面的布局代码，提供数据基础。

可选的，如图3所示，根据特征图像、以及特征图像的参数信息，生成特征图像的前端显示代码，并根据各特征图像的布局信息、以及各特征图像的参数信息，建立目标前端页面的布局代码，包括：

步骤S301，根据特征图像的形状参数信息对应的图像形状，确定特征图像的图像类别，并基于特征图像的图像类别对应的显示代码生成策略，生成特征图像的前端显示代码。

步骤S302，通过布局代码生成策略，根据所有特征图像在前端页面图片的布局信息，生成目标前端页面的初始布局代码，并根据每个特征图像的参数信息、调整初始布局代码中的参数值，得到目标前端页面的布局代码。

本实施例中，终端根据每个特征图像的形状参数信息对应的图像形状，确定每个特征图像的显示代码生成策略，并基于该显示代码生成策略，生成每个特征图像的前端显示代码。例如，矩形代表容器，对应html的显示代码生成策略可以通过<div>来标记；圆角矩形代表输入框，对应html的显示代码生成策略可以通过<input>来标记；椭圆代表按钮，对应html的显示代码生成策略可以通过<button>来标记；正方形代表图片，正方形内文字描述为图片地址，对应html的显示代码生成策略可以通过<img>来标记；三角代表超链接，三角内文字描述为超链接地址，对应html的显示代码生成策略可以通过<a>来标记；横线代表段落文本，横线上文本描述为文本内容，对应html的显示代码生成策略可以通过<p>来标记。终端通过上述标记确定各特征图像的显示代码生成策略。显示代码生成策略可以通过python实现，终端通过python将特征图像对应的参数信息转化为html格式的代码(即前端显示代码)。

终端通过布局代码生成策略，根据所有特征图像在前端页面图片的布局信息，生成目标前端页面的初始布局代码，并根据每个特征图像的参数信息、调整初始布局代码中的参数值，得到目标前端页面的布局代码。其中，布局代码生层策略可以但不限于是前端局部框架flex、element-ui对应的生成策略，该生成策略通过将各特征图像的参数信息对应的代码、添加至初始布局代码中，并购根据前端页面图片与各特征图像之前的比例关系，调整初始布局代码中每个特征图像和目标前端页面中关于大小参数的参数值，得到目标前端页面的布局代码。

基于上述方案，通过分析前端页面图片的特征图像、以及各特征图像的特征信息、从而生成目标前端页面，避免了人工手动开发前端页面的过程，提高前端页面的开发效率。

本申请还提供了一种前端页面生成示例，如4所示，具体处理过程包括以下步骤：

步骤S401，响应于用户的前端页面生成操作，获取前端页面样式、以及页面样式的布局信息。

步骤S402，根据各前端页面样式、以及各前端页面样式的布局信息，通过图片编辑程序，生成前端页面图片。

步骤S403，识别前端页面图片中的各特征图像边缘，并基于各特征图像边缘，确定特征图像边缘包围所形成的特征图像。

步骤S404，根据特征图像对应的特征图像边缘，识别特征图像的图像形状。

步骤S405，根据图像形状对应的参数识别策略对特征图像进行识别，得到特征图像的参数信息。

步骤S406，建立前端页面图片的坐标框架。

步骤S407，在前端页面图片的坐标框架中，确定每个特征图像的位置信息。

步骤S408，针对每个特征图像，根据特征图像的参数信息、以及特征图像的位置信息，确定特征图像的显示分布信息。

步骤S409，计算前端页面图片和特征图像之间的比例信息，并根据比例信息、以及特征图像的显示分布信息，确定每个特征图像的布局信息。

步骤S410，根据特征图像的形状参数信息对应的图像形状，确定特征图像的图像类别，并基于特征图像的图像类别对应的显示代码生成策略，生成特征图像的前端显示代码。

步骤S411，通过布局代码生成策略，根据所有特征图像在前端页面图片的布局信息，生成目标前端页面的初始布局代码，并根据每个特征图像的参数信息、调整初始布局代码中的参数值，得到目标前端页面的布局代码。

步骤S412，根据特征图像的前端显示代码、以及目标前端页面的布局代码，生成目标前端页面。

应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的前端页面生成方法的前端页面生成装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个前端页面生成装置实施例中的具体限定可以参见上文中对于前端页面生成方法的限定，在此不再赘述。

在一个实施例中，如图5所示，提供了一种前端页面生成装置，包括：获取模块510、识别模块520、建立模块530和生成模块540，其中：

获取模块510，用于获取前端页面图片；

识别模块520，用于对所述前端页面图片进行识别处理，得到各特征图像、以及各所述特征图像的特征信息；所述特征信息包括所述特征图像的显示参数信息、以及所述特征图像在所述前端页面图片的布局信息；

建立模块530，用于根据所述特征图像、以及所述特征图像的参数信息，生成所述特征图像的前端显示代码，并根据各所述特征图像的布局信息、以及各所述特征图像的参数信息，建立目标前端页面的布局代码；

生成模块540，用于根据所述特征图像的前端显示代码、以及所述目标前端页面的布局代码，生成目标前端页面。

可选的，所述获取模块510，具体用于：

响应于用户的前端页面生成操作，获取前端页面样式、以及所述页面样式的布局信息；

根据各所述前端页面样式、以及各所述前端页面样式的布局信息，通过图片编辑程序，生成前端页面图片。

可选的，所述识别模块520，具体用于：

识别所述前端页面图片中的各特征图像边缘，并基于各所述特征图像边缘，确定所述特征图像边缘包围所形成的特征图像；

针对每个特征图像，根据所述特征图像对应的特征图像边缘，对所述特征图像进行识别处理，得到所述特征图像的参数信息；

根据所述前端页面图片、各所述特征图像、以及各所述特征图像的参数信息，确定所述前端页面图片中各所述特征图像的布局信息。

可选的，所述识别模块520，具体用于：

根据所述特征图像对应的特征图像边缘，识别所述特征图像的图像形状；

根据所述图像形状对应的参数识别策略对所述特征图像进行识别，得到所述特征图像的参数信息。

可选的，所述识别模块520，具体用于：

建立所述前端页面图片的坐标框架；

在所述前端页面图片的坐标框架中，确定每个特征图像的位置信息；

针对每个特征图像，根据所述特征图像的参数信息、以及所述特征图像的位置信息，确定所述特征图像的显示分布信息；

计算所述前端页面图片和所述特征图像之间的比例信息，并根据所述比例信息、以及所述特征图像的显示分布信息，确定每个特征图像的布局信息。

可选的，所述建立模块530，具体用于：

根据所述特征图像的形状参数信息对应的图像形状，确定所述特征图像的图像类别，并基于所述特征图像的图像类别对应的显示代码生成策略，生成所述特征图像的前端显示代码；

通过布局代码生成策略，根据所有所述特征图像在所述前端页面图片的布局信息，生成目标前端页面的初始布局代码，并根据每个特征图像的参数信息、调整所述初始布局代码中的参数值，得到目标前端页面的布局代码。

上述前端页面生成装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图6所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种前端页面生成方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图6中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现以下步骤：

获取前端页面图片；

对所述前端页面图片进行识别处理，得到所述前端页面图片包含的各特征图像、以及各所述特征图像的特征信息；所述特征信息包括所述特征图像的显示参数信息、以及所述特征图像在所述前端页面图片的布局信息；

根据所述特征图像、以及所述特征图像的参数信息，生成所述特征图像的前端显示代码，并根据各所述特征图像的布局信息、以及各所述特征图像的参数信息，建立目标前端页面的布局代码；

根据所述特征图像的前端显示代码、以及所述目标前端页面的布局代码，生成目标前端页面。

可选的，所述获取前端页面图片，包括：

响应于用户的前端页面生成操作，获取前端页面样式、以及所述页面样式的布局信息；

根据各所述前端页面样式、以及各所述前端页面样式的布局信息，通过图片编辑程序，生成前端页面图片。

可选的，所述对所述前端页面图片进行识别处理，得到所述前端页面图片包含的各特征图像、以及各所述特征图像的特征信息，包括：

识别所述前端页面图片中的各特征图像边缘，并基于各所述特征图像边缘，确定所述特征图像边缘包围所形成的特征图像；

针对每个特征图像，根据所述特征图像对应的特征图像边缘，对所述特征图像进行识别处理，得到所述特征图像的参数信息；

根据所述前端页面图片、各所述特征图像、以及各所述特征图像的参数信息，确定所述前端页面图片中各所述特征图像的布局信息。

可选的，所述针对每个特征图像，根据所述特征图像对应的特征图像边缘，对所述特征图像进行识别处理，得到所述特征图像的参数信息，包括：

根据所述特征图像对应的特征图像边缘，识别所述特征图像的图像形状；

根据所述图像形状对应的参数识别策略对所述特征图像进行识别，得到所述特征图像的参数信息。

可选的，所述根据所述前端页面图片、各所述特征图像、以及各所述特征图像的参数信息，确定所述前端页面图片中各所述特征图像的布局信息，包括：

建立所述前端页面图片的坐标框架；

在所述前端页面图片的坐标框架中，确定每个特征图像的位置信息；

针对每个特征图像，根据所述特征图像的参数信息、以及所述特征图像的位置信息，确定所述特征图像的显示分布信息；

计算所述前端页面图片和所述特征图像之间的比例信息，并根据所述比例信息、以及所述特征图像的显示分布信息，确定每个特征图像的布局信息。

可选的，所述根据所述特征图像、以及所述特征图像的参数信息，生成所述特征图像的前端显示代码，并根据各所述特征图像的布局信息、以及各所述特征图像的参数信息，建立目标前端页面的布局代码，包括：

根据所述特征图像的形状参数信息对应的图像形状，确定所述特征图像的图像类别，并基于所述特征图像的图像类别对应的显示代码生成策略，生成所述特征图像的前端显示代码；

通过布局代码生成策略，根据所有所述特征图像在所述前端页面图片的布局信息，生成目标前端页面的初始布局代码，并根据每个特征图像的参数信息、调整所述初始布局代码中的参数值，得到目标前端页面的布局代码。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

获取前端页面图片；

对所述前端页面图片进行识别处理，得到所述前端页面图片包含的各特征图像、以及各所述特征图像的特征信息；所述特征信息包括所述特征图像的显示参数信息、以及所述特征图像在所述前端页面图片的布局信息；

根据所述特征图像、以及所述特征图像的参数信息，生成所述特征图像的前端显示代码，并根据各所述特征图像的布局信息、以及各所述特征图像的参数信息，建立目标前端页面的布局代码；

根据所述特征图像的前端显示代码、以及所述目标前端页面的布局代码，生成目标前端页面。

可选的，所述获取前端页面图片，包括：

响应于用户的前端页面生成操作，获取前端页面样式、以及所述页面样式的布局信息；

根据各所述前端页面样式、以及各所述前端页面样式的布局信息，通过图片编辑程序，生成前端页面图片。

可选的，所述对所述前端页面图片进行识别处理，得到所述前端页面图片包含的各特征图像、以及各所述特征图像的特征信息，包括：

识别所述前端页面图片中的各特征图像边缘，并基于各所述特征图像边缘，确定所述特征图像边缘包围所形成的特征图像；

针对每个特征图像，根据所述特征图像对应的特征图像边缘，对所述特征图像进行识别处理，得到所述特征图像的参数信息；

根据所述前端页面图片、各所述特征图像、以及各所述特征图像的参数信息，确定所述前端页面图片中各所述特征图像的布局信息。

可选的，所述针对每个特征图像，根据所述特征图像对应的特征图像边缘，对所述特征图像进行识别处理，得到所述特征图像的参数信息，包括：

根据所述特征图像对应的特征图像边缘，识别所述特征图像的图像形状；

根据所述图像形状对应的参数识别策略对所述特征图像进行识别，得到所述特征图像的参数信息。

可选的，所述根据所述前端页面图片、各所述特征图像、以及各所述特征图像的参数信息，确定所述前端页面图片中各所述特征图像的布局信息，包括：

建立所述前端页面图片的坐标框架；

在所述前端页面图片的坐标框架中，确定每个特征图像的位置信息；

针对每个特征图像，根据所述特征图像的参数信息、以及所述特征图像的位置信息，确定所述特征图像的显示分布信息；

计算所述前端页面图片和所述特征图像之间的比例信息，并根据所述比例信息、以及所述特征图像的显示分布信息，确定每个特征图像的布局信息。

可选的，所述根据所述特征图像、以及所述特征图像的参数信息，生成所述特征图像的前端显示代码，并根据各所述特征图像的布局信息、以及各所述特征图像的参数信息，建立目标前端页面的布局代码，包括：

根据所述特征图像的形状参数信息对应的图像形状，确定所述特征图像的图像类别，并基于所述特征图像的图像类别对应的显示代码生成策略，生成所述特征图像的前端显示代码；

通过布局代码生成策略，根据所有所述特征图像在所述前端页面图片的布局信息，生成目标前端页面的初始布局代码，并根据每个特征图像的参数信息、调整所述初始布局代码中的参数值，得到目标前端页面的布局代码。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

获取前端页面图片；

对所述前端页面图片进行识别处理，得到所述前端页面图片包含的各特征图像、以及各所述特征图像的特征信息；所述特征信息包括所述特征图像的显示参数信息、以及所述特征图像在所述前端页面图片的布局信息；

根据所述特征图像、以及所述特征图像的参数信息，生成所述特征图像的前端显示代码，并根据各所述特征图像的布局信息、以及各所述特征图像的参数信息，建立目标前端页面的布局代码；

根据所述特征图像的前端显示代码、以及所述目标前端页面的布局代码，生成目标前端页面。

可选的，所述获取前端页面图片，包括：

响应于用户的前端页面生成操作，获取前端页面样式、以及所述页面样式的布局信息；

根据各所述前端页面样式、以及各所述前端页面样式的布局信息，通过图片编辑程序，生成前端页面图片。

可选的，所述对所述前端页面图片进行识别处理，得到所述前端页面图片包含的各特征图像、以及各所述特征图像的特征信息，包括：

识别所述前端页面图片中的各特征图像边缘，并基于各所述特征图像边缘，确定所述特征图像边缘包围所形成的特征图像；

针对每个特征图像，根据所述特征图像对应的特征图像边缘，对所述特征图像进行识别处理，得到所述特征图像的参数信息；

根据所述前端页面图片、各所述特征图像、以及各所述特征图像的参数信息，确定所述前端页面图片中各所述特征图像的布局信息。

可选的，所述针对每个特征图像，根据所述特征图像对应的特征图像边缘，对所述特征图像进行识别处理，得到所述特征图像的参数信息，包括：

根据所述特征图像对应的特征图像边缘，识别所述特征图像的图像形状；

根据所述图像形状对应的参数识别策略对所述特征图像进行识别，得到所述特征图像的参数信息。

可选的，所述根据所述前端页面图片、各所述特征图像、以及各所述特征图像的参数信息，确定所述前端页面图片中各所述特征图像的布局信息，包括：

建立所述前端页面图片的坐标框架；

在所述前端页面图片的坐标框架中，确定每个特征图像的位置信息；

针对每个特征图像，根据所述特征图像的参数信息、以及所述特征图像的位置信息，确定所述特征图像的显示分布信息；

计算所述前端页面图片和所述特征图像之间的比例信息，并根据所述比例信息、以及所述特征图像的显示分布信息，确定每个特征图像的布局信息。

可选的，所述根据所述特征图像、以及所述特征图像的参数信息，生成所述特征图像的前端显示代码，并根据各所述特征图像的布局信息、以及各所述特征图像的参数信息，建立目标前端页面的布局代码，包括：

根据所述特征图像的形状参数信息对应的图像形状，确定所述特征图像的图像类别，并基于所述特征图像的图像类别对应的显示代码生成策略，生成所述特征图像的前端显示代码；

通过布局代码生成策略，根据所有所述特征图像在所述前端页面图片的布局信息，生成目标前端页面的初始布局代码，并根据每个特征图像的参数信息、调整所述初始布局代码中的参数值，得到目标前端页面的布局代码。

需要说明的是，本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory，MRAM)、铁电存储器(Ferroelectric Random Access Memory，FRAM)、相变存储器(Phase Change Memory，PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

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

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

Claims (10)

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

获取前端页面图片；

对所述前端页面图片进行识别处理，得到所述前端页面图片包含的各特征图像、以及各所述特征图像的特征信息；所述特征信息包括所述特征图像的显示参数信息、以及所述特征图像在所述前端页面图片的布局信息；

根据所述特征图像、以及所述特征图像的参数信息，生成所述特征图像的前端显示代码，并根据各所述特征图像的布局信息、以及各所述特征图像的参数信息，建立目标前端页面的布局代码；

根据所述特征图像的前端显示代码、以及所述目标前端页面的布局代码，生成目标前端页面。

2.根据权利要求1所述的方法，其特征在于，所述获取前端页面图片，包括：

响应于用户的前端页面生成操作，获取前端页面样式、以及所述页面样式的布局信息；

根据各所述前端页面样式、以及各所述前端页面样式的布局信息，通过图片编辑程序，生成前端页面图片。

3.根据权利要求1所述的方法，其特征在于，所述对所述前端页面图片进行识别处理，得到所述前端页面图片包含的各特征图像、以及各所述特征图像的特征信息，包括：

识别所述前端页面图片中的各特征图像边缘，并基于各所述特征图像边缘，确定所述特征图像边缘包围所形成的特征图像；

针对每个特征图像，根据所述特征图像对应的特征图像边缘，对所述特征图像进行识别处理，得到所述特征图像的参数信息；

根据所述前端页面图片、各所述特征图像、以及各所述特征图像的参数信息，确定所述前端页面图片中各所述特征图像的布局信息。

4.根据权利要求3所述的方法，其特征在于，所述针对每个特征图像，根据所述特征图像对应的特征图像边缘，对所述特征图像进行识别处理，得到所述特征图像的参数信息，包括：

根据所述特征图像对应的特征图像边缘，识别所述特征图像的图像形状；

根据所述图像形状对应的参数识别策略对所述特征图像进行识别，得到所述特征图像的参数信息。

5.根据权利要求3所述的方法，其特征在于，所述根据所述前端页面图片、各所述特征图像、以及各所述特征图像的参数信息，确定所述前端页面图片中各所述特征图像的布局信息，包括：

建立所述前端页面图片的坐标框架；

在所述前端页面图片的坐标框架中，确定每个特征图像的位置信息；

针对每个特征图像，根据所述特征图像的参数信息、以及所述特征图像的位置信息，确定所述特征图像的显示分布信息；

计算所述前端页面图片和所述特征图像之间的比例信息，并根据所述比例信息、以及所述特征图像的显示分布信息，确定每个特征图像的布局信息。

6.根据权利要求1所述的方法，其特征在于，所述根据所述特征图像、以及所述特征图像的参数信息，生成所述特征图像的前端显示代码，并根据各所述特征图像的布局信息、以及各所述特征图像的参数信息，建立目标前端页面的布局代码，包括：

根据所述特征图像的形状参数信息对应的图像形状，确定所述特征图像的图像类别，并基于所述特征图像的图像类别对应的显示代码生成策略，生成所述特征图像的前端显示代码；

通过布局代码生成策略，根据所有所述特征图像在所述前端页面图片的布局信息，生成目标前端页面的初始布局代码，并根据每个特征图像的参数信息、调整所述初始布局代码中的参数值，得到目标前端页面的布局代码。

7.一种前端页面生成装置，其特征在于，所述装置包括：

获取模块，用于获取前端页面图片；

识别模块，用于对所述前端页面图片进行识别处理，得到所述前端页面图片包含的各特征图像、以及各所述特征图像的特征信息；所述特征信息包括所述特征图像的显示参数信息、以及所述特征图像在所述前端页面图片的布局信息；

建立模块，用于根据所述特征图像、以及所述特征图像的参数信息，生成所述特征图像的前端显示代码，并根据各所述特征图像的布局信息、以及各所述特征图像的参数信息，建立目标前端页面的布局代码；

生成模块，用于根据所述特征图像的前端显示代码、以及所述目标前端页面的布局代码，生成目标前端页面。

8.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述的方法的步骤。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。

10.一种计算机程序产品，包括计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。

Images