页面代码生成方法、装置、计算机设备和存储介质制造方法及图纸

本申请涉及一种页面代码生成方法、装置、计算机设备和存储介质。方法包括：接收对目标页面的设计请求，根据设计请求展示设计窗口，设计窗口包括页面编辑区和多个缩略图标；捕获对缩略图标的拖拽操作，获取被拖拽的缩略图标对应的元素代码，基于元素代码生成缩略图标对应的页面元素；根据拖拽操作将页面元素添加至页面编辑区的相应位置，记录页面元素的添加顺序；当接收到页面保存指令时，根据页面保存指令获取预设的模板代码，根据页面编辑区中多个页面元素的添加顺序，将多个页面元素对应的元素代码分别添加至模板代码，得到目标页面及对应的页面代码，对目标页面及页面代码进行存储。采用本方法能够提高页面开发效率。

Page code generation method, device, computer equipment and storage medium

The application relates to a page code generation method, device, computer equipment and storage medium. The method includes: receiving the design request to the target page, displaying the design window according to the design request, the design window includes the page edit area and the multiple abbreviation icons, capture the drag and drop operation of the abbreviated icons, get the element code corresponding to the dragged abbreviated icons, and generate the page elements corresponding to the abbreviated icons based on the element code. The page element is added to the corresponding position of the page edit area according to the drag and drop operation, and the addition order of the page elements is recorded. When the page is saved, the default template code is obtained according to the page saving instruction, and the multiple page elements are corresponded to the page elements in the page edit area. The element code is added to the template code to get the target page and the corresponding page code. The target page and page code are stored. The use of this method can improve the efficiency of page development.

【技术实现步骤摘要】
页面代码生成方法、装置、计算机设备和存储介质
本申请涉及计算机
，特别是涉及一种页面代码生成方法、装置、计算机设备和存储介质。
技术介绍
随着互联网技术的发展，大量软件产品应运而生。页面开发是软件产品整个开发过程最为重要的环节之一，如APP页面、Web网页等的开发。传统的页面开发过程大致如下：设计工程师进行页面设计得到设计图；重构工程师对设计图进行切图，编写页面代码，如HTML(超文本标记语言)代码和CSS(层叠式样表)代码等。页面通常由多个页面元素组成，如按钮、图片、文本框等。但传统的设计工程师在利用PS(Photoshop)等图像处理软件进行页面设计时，需要时刻关注每个页面元素的显示位置、对齐方式等多种属性，使页面设计效率降低。同时，重构工程师需要对设计图进行手动切图及编写代码，也使得页面开发效率降低。
技术实现思路
基于此，有必要针对上述技术问题，提供一种能够提高页面开发效率的页面代码生成方法、装置、计算机设备和存储介质。一种页面代码生成方法，所述方法包括：接收对目标页面的设计请求，根据所述设计请求展示设计窗口，所述设计窗口包括页面编辑区和多个缩略图标；捕获对所述缩略图标的拖拽操作，获取被拖拽的缩略图标对应的元素代码，基于所述元素代码生成所述缩略图标对应的页面元素；根据所述拖拽操作将所述页面元素添加至所述页面编辑区的相应位置，记录所述页面元素的添加顺序；当接收到页面保存指令时，根据所述页面保存指令获取预设的模板代码，根据所述页面编辑区中多个页面元素的添加顺序，将多个页面元素对应的元素代码分别添加至所述模板代码，得到所述目标页面及对应的页面代码，对所述目标页面及所述页面代码进行存储。在其中一个实施例中，在捕获对所述缩略图标的拖拽操作之前，还包括：接收对目标页面的相似页面查询请求；根据所述相似页面查询请求，在目标数据库获取多个页面摘要进行展示；当获取到对所述页面摘要的选定操作时，根据所述选定操作获取相应页面摘要对应的详细页面和页面代码，将所述详细页面添加至所述页面编辑区，将获取的页面代码作为所述模板代码。在其中一个实施例中，根据所述拖拽操作将所述页面元素添加至所述页面编辑区的相应位置包括：根据所述拖拽操作，获取所述页面元素在所述页面编辑区的目标位置；检测所述目标位置是否存在其他页面元素；若存在，对所述目标位置对应的两个页面元素进行兼容性校验；当兼容性校验通过时，将所述页面元素添加至所述页面编辑区的目标位置；当兼容性校验失败时，生成禁止添加提示。在其中一个实施例中，对所述目标位置对应的两个页面元素进行兼容性校验包括：根据预设的多种元素类型之间的兼容关系；所述元素类型包括多种页面元素；获取所述其他页面元素对应的可兼容的元素类型；检测被拖拽的页面元素是否属于所述可兼容的元素类型；若属于，判定兼容性校验通过；根据所述兼容关系将所述目标位置对应的两个页面元素之间的图层关系确定并列关系或从属关系；基于所述图层关系对被拖拽的页面元素对应的元素代码进行变更；所述将多个页面元素分别对应的元素代码添加至所述模板代码包括：将多个页面元素分别对应的变更后的元素代码添加至所述模板代码。在其中一个实施例中，所述元素代码包括一个或多个属性参数；在将多个页面元素分别对应元素代码添加至所述模板代码之前，还包括：获取所述页面元素对应的属性配置操作，根据所述属性配置操作对所述元素代码中相应的属性参数进行变更；基于变更后的元素代码重新生成相应页面元素；将多个页面元素分别对应的元素代码添加至所述模板代码的步骤包括：将多个页面元素分别对应的变更后的元素代码添加至所述模板代码。在其中一个实施例中，所述属性配置操作包括颜色修改操作；所述属性参数包括颜色参数；根据所述属性配置操作对所述元素代码中相应的属性参数进行变更包括：根据所述颜色修改操作在所述设计窗口展示拾色器子窗口；获取在拾色器子窗口输入的初始颜色参数；所述拾色器子窗口包括色盘；将所述初始颜色参数转换为色盘定位参数；根据所述色盘定位参数在所述色盘中定位目标颜色；获取所述目标颜色对应的目标颜色参数，根据所述目标颜色参数对所述元素代码中相应的颜色参数进行变更。在其中一个实施例中，所述方法还包括：为所述页面代码分配一个代码标识；获取所述页面代码对应的存储地址链接，将所述代码标识与所述存储地址链接进行关联；根据所述存储地址链接生成二维码，将所述二维码推送至重构终端；使所述重构终端根据所述二维码获取对应的页面代码，对所述页面代码进行优化。一种页面代码生成装置，所述装置包括：元素展示模块，用于接收对目标页面的设计请求，根据所述设计请求展示设计窗口，所述设计窗口包括页面编辑区和多个缩略图标；元素拖拽模块，用于捕获对所述缩略图标的拖拽操作，获取被拖拽的缩略图标对应的元素代码，基于所述元素代码生成所述缩略图标对应的页面元素；根据所述拖拽操作将所述页面元素添加至所述页面编辑区的相应位置，记录所述页面元素的添加顺序；代码生成模块，用于当接收到页面保存指令时，根据所述页面保存指令获取预设的模板代码，根据所述页面编辑区中多个页面元素的添加顺序，将多个页面元素对应的元素代码分别添加至所述模板代码，得到所述目标页面及对应的页面代码，对所述目标页面及所述页面代码进行存储。一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：接收对目标页面的设计请求，根据所述设计请求展示设计窗口，所述设计窗口包括页面编辑区和多个缩略图标；捕获对所述缩略图标的拖拽操作，获取被拖拽的缩略图标对应的元素代码，基于所述元素代码生成所述缩略图标对应的页面元素；根据所述拖拽操作将所述页面元素添加至所述页面编辑区的相应位置，记录所述页面元素的添加顺序；当接收到页面保存指令时，根据所述页面保存指令获取预设的模板代码，根据所述页面编辑区中多个页面元素的添加顺序，将多个页面元素对应的元素代码分别添加至所述模板代码，得到所述目标页面及对应的页面代码，对所述目标页面及所述页面代码进行存储。一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：接收对目标页面的设计请求，根据所述设计请求展示设计窗口，所述设计窗口包括页面编辑区和多个缩略图标；捕获对所述缩略图标的拖拽操作，获取被拖拽的缩略图标对应的元素代码，基于所述元素代码生成所述缩略图标对应的页面元素；根据所述拖拽操作将所述页面元素添加至所述页面编辑区的相应位置，记录所述页面元素的添加顺序；当接收到页面保存指令时，根据所述页面保存指令获取预设的模板代码，根据所述页面编辑区中多个页面元素的添加顺序，将多个页面元素对应的元素代码分别添加至所述模板代码，得到所述目标页面及对应的页面代码，对所述目标页面及所述页面代码进行存储。上述页面代码生成方法、装置、计算机设备和存储介质，设计终端根据相关人员发起的对目标页面的设计请求，可以展示包括页面编辑区和多个缩略图标的设计窗口；通过捕获设计人员对缩略图标的拖拽操作，可以获取被拖拽的缩略图标对应的元素代码；基于所述元素代码，可以生成所述缩略图标对应的页面元素；根据所述拖拽操作，可以将所述页面元素添加至所述页面编辑区的相应位置，并确定所述页面元素的添加顺序；根据接收到的页面保存指令，可本文档来自技高网...

【技术保护点】
1.一种页面代码生成方法，所述方法包括：接收对目标页面的设计请求，根据所述设计请求展示设计窗口，所述设计窗口包括页面编辑区和多个缩略图标；捕获对所述缩略图标的拖拽操作，获取被拖拽的缩略图标对应的元素代码，基于所述元素代码生成所述缩略图标对应的页面元素；根据所述拖拽操作将所述页面元素添加至所述页面编辑区的相应位置，记录所述页面元素的添加顺序；当接收到页面保存指令时，根据所述页面保存指令获取预设的模板代码，根据所述页面编辑区中多个页面元素的添加顺序，将多个页面元素对应的元素代码分别添加至所述模板代码，得到所述目标页面及对应的页面代码，对所述目标页面及所述页面代码进行存储。

【技术特征摘要】
1.一种页面代码生成方法，所述方法包括：接收对目标页面的设计请求，根据所述设计请求展示设计窗口，所述设计窗口包括页面编辑区和多个缩略图标；捕获对所述缩略图标的拖拽操作，获取被拖拽的缩略图标对应的元素代码，基于所述元素代码生成所述缩略图标对应的页面元素；根据所述拖拽操作将所述页面元素添加至所述页面编辑区的相应位置，记录所述页面元素的添加顺序；当接收到页面保存指令时，根据所述页面保存指令获取预设的模板代码，根据所述页面编辑区中多个页面元素的添加顺序，将多个页面元素对应的元素代码分别添加至所述模板代码，得到所述目标页面及对应的页面代码，对所述目标页面及所述页面代码进行存储。2.根据权利要求1所述的方法，其特征在于，在捕获对所述缩略图标的拖拽操作之前，还包括：接收对目标页面的相似页面查询请求；根据所述相似页面查询请求，在目标数据库获取多个页面摘要进行展示；当获取到对所述页面摘要的选定操作时，根据所述选定操作获取相应页面摘要对应的详细页面和页面代码，将所述详细页面添加至所述页面编辑区，将获取的页面代码作为所述模板代码。3.根据权利要求1所述的方法，其特征在于，根据所述拖拽操作将所述页面元素添加至所述页面编辑区的相应位置包括：根据所述拖拽操作，获取所述页面元素在所述页面编辑区的目标位置；检测所述目标位置是否存在其他页面元素；若存在，对所述目标位置对应的两个页面元素进行兼容性校验；当兼容性校验通过时，将所述页面元素添加至所述页面编辑区的目标位置；当兼容性校验失败时，生成禁止添加提示。4.根据权利要求3所述的方法，其特征在于，对所述目标位置对应的两个页面元素进行兼容性校验包括：根据预设的多种元素类型之间的兼容关系；所述元素类型包括多种页面元素；获取所述其他页面元素对应的可兼容的元素类型；检测被拖拽的页面元素是否属于所述可兼容的元素类型；若属于，判定兼容性校验通过；根据所述兼容关系将所述目标位置对应的两个页面元素之间的图层关系确定并列关系或从属关系；基于所述图层关系对被拖拽的页面元素对应的元素代码进行变更；所述将多个页面元素分别对应的元素代码添加至所述模板代码包括：将多个页面元素分别对应的变更后的元素代码添加至所述模板代码。5.根据权利要求1～4任意一项所述的方法，其特征在于，所述元素代码包括一个或多个属性参数；在将多个页面元素分别对应元素代码添加...

【专利技术属性】
技术研发人员：段然，
申请(专利权)人：平安普惠企业管理有限公司，
类型：发明
国别省市：广东,44