代码生成方法、装置、服务器及计算机可读介质制造方法及图纸

本申请实施例公开了代码生成方法、装置、服务器及计算机可读介质。该方法的实施例包括：获取待处理的图片源文件；提取该图片源文件中的各元素和各元素的属性信息；对该属性信息进行解析，生成各元素的位置关系信息；基于该位置关系信息，对各元素进行布局；基于布局结果和该属性信息，生成用于还原图片的程序代码。该实施方式提高了网页的开发效率。

【技术实现步骤摘要】
代码生成方法、装置、服务器及计算机可读介质
本申请实施例涉及计算机
，具体涉及代码生成方法、装置、服务器及计算机可读介质。
技术介绍
用户界面(UserInterface，UI)一般可以认为是对软件或网页的人机交互、操作逻辑、界面美观的整体设计。优秀的用户界面不仅可以让软件或网页变得有个性有品位，还可以让软件或网页的操作更加舒适、简单、自然，进而充分体现软件或网页的定位和特点等等。在软件或网页的开发过程中，通常，需要先由视觉设计师对用户界面进行设计，形成图片源文件(即UI设计稿)，再由前端工程师按照用户界面设计稿完成从用户界面设计稿到代码的还原工作。该还原工作中对用户界面设计稿的解析工作尤为重要，往往需要消耗数小时甚至数天的时间，效率低，且对前端工程师的技能要求较高。
技术实现思路
本申请实施例提出了代码生成方法、装置、服务器及计算机可读介质，以解决现有技术中对图片源文件的解析工作效率低，且对前端工程师的技能要求较高的问题。第一方面，本申请实施例提供了一种代码生成方法，应用于服务器，该方法包括：获取待处理的图片源文件；提取图片源文件中的各元素和各元素的属性信息；对属性信息进行解析，生成元素间的位置关系信息；基于位置关系信息，对各元素进行布局；基于布局结果和属性信息，生成用于还原图片的程序代码。在一些实施例中，属性信息还包括元素位置信息和元素尺寸信息；以及对属性信息进行解析，生成元素间的位置关系信息，包括：基于元素位置信息和元素尺寸信息，生成各元素对应的盒子模型信息；基于盒子模型信息、元素位置信息和元素尺寸信息，生成元素间的位置关系信息，其中，位置关系信息包括元素对应的盒子模型间的距离。在一些实施例中，基于位置关系信息，确定每行待布局的元素的列数，包括：基于位置关系信息，确定每行待布局的元素是否存在重合关系，其中，重合关系包括全部重合关系和局部重合关系；将存在重合关系的元素作为一列，将每一个不存在重合关系的元素作为一列，统计每行待布局的元素的列数，按照所确定的列数对每行的元素进行布局。在一些实施例中，属性信息包括元素覆盖顺序；以及在基于位置关系信息，对各元素进行布局之后，方法还包括：按照元素覆盖顺序，对各元素的布局结果进行调整。在一些实施例中，提取图片源文件中的各元素和各元素的属性信息，包括：对图片源文件进行预处理，其中，预处理包括以下至少一项：对图片源文件中的各元素进行检查、对图片源文件中的各元素进行存储；提取各元素，并从图片源文件中提取各元素的属性信息。在一些实施例中，预处理还包括存储图片源文件对应的待还原图片；以及在生成用于还原图片的程序代码之后，该方法还包括：运行用于还原图片的程序代码，生成还原后图片；将还原后图片与待还原图片进行对比，确定还原后图片的还原度；基于还原度与预设数值的比较，确定用于还原图片的程序代码是否合格。在一些实施例中，在生成还原后图片之后，该方法还包括：确定还原后图片与待还原图片的像素差值。在一些实施例中，获取待处理的图片源文件，包括：响应于接收到存储服务器发送的解析任务消息，从存储服务器中获取待处理的图片源文件；以及在基于布局结果和属性信息，生成用于还原图片的程序代码之后，该方法还包括：将用于还原图片的程序代码发送至存储服务器。在一些实施例中，该方法还包括：按照预设维度对图片源文件的处理过程进行实时监控，其中，预设维度包括以下至少一项：异常状态、还原成功率、耗时信息。第二方面，本申请实施例提供了一种代码生成装置，应用于服务器，该装置包括：获取单元，被配置成获取待处理的图片源文件；提取单元，被配置成提取图片源文件中的各元素和各元素的属性信息；解析单元，被配置成对属性信息进行解析，生成元素间的位置关系信息；布局单元，被配置成基于位置关系信息，对各元素进行布局；代码生成单元，被配置成基于布局结果和属性信息，生成用于还原图片的程序代码。在一些实施例中，属性信息还包括元素位置信息和元素尺寸信息；以及解析单元，包括：第一生成模块，被配置成基于元素位置信息和元素尺寸信息，生成各元素对应的盒子模型信息；第二生成模块，被配置成基于盒子模型信息、元素位置信息和元素尺寸信息，生成元素间的位置关系信息，其中，位置关系信息包括元素对应的盒子模型间的距离。在一些实施例中，布局模块，包括：第一确定模块，被配置成基于位置关系信息，确定每行待布局的元素是否存在重合关系，其中，重合关系包括全部重合关系和局部重合关系；第二确定模块，被配置成将存在重合关系的元素作为一列，将每一个不存在重合关系的元素作为一列，统计每行待布局的元素的列数，按照所确定的列数对每行的元素进行布局。在一些实施例中，属性信息包括元素覆盖顺序；以及该装置还包括：调整单元，被配置成按照元素覆盖顺序，对各元素的布局结果进行调整。在一些实施例中，提取单元进一步被配置成：对图片源文件进行预处理，其中，预处理包括以下至少一项：对图片源文件中的各元素进行检查、对图片源文件中的各元素进行存储；提取各元素，并从图片源文件中提取各元素的属性信息。在一些实施例中，预处理还包括存储图片源文件对应的待还原图片；以及该装置还包括：运行单元，被配置成运行用于还原图片的程序代码，生成还原后图片；第一确定单元，被配置成将还原后图片与待还原图片进行对比，确定还原后图片的还原度；第二确定单元，被配置成基于还原度与预设数值的比较，确定用于还原图片的程序代码是否合格。在一些实施例中，该装置还包括：第三确定单元，被配置成确定还原后图片与待还原图片的像素差值。在一些实施例中，获取单元进一步被配置成：响应于接收到存储服务器发送的解析任务消息，从存储服务器中获取待处理的图片源文件；以及该装置还包括：存储单元，被配置成将用于还原图片的程序代码发送至存储服务器。在一些实施例中，该装置还包括：监控单元，被配置成按照预设维度对图片源文件的处理过程进行实时监控，其中，预设维度包括以下至少一项：异常状态、还原成功率、耗时信息。第三方面，本申请实施例提供了一种服务器，包括：一个或多个处理器；存储装置，其上存储有一个或多个程序，当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现如上述第一方面中任一实施例的方法。第四方面，本申请实施例提供了一种计算机可读介质，其上存储有计算机程序，该程序被处理器执行时实现如上述第一方面中任一实施例的方法。本申请实施例提供的代码生成方法和装置，在获取到待处理的图片源文件之后，可以提取图片源文件中的各元素和各元素的属性信息；而后，可以对属性信息进行解析，生成元素间的位置关系信息，以便基于位置关系信息，对各元素进行布局；最后，基于布局结果和属性信息，生成用于还原图片的程序代码。从而，可以无需人工完成对图片源文件的解析工作，减少了前端工程师的工作量、降低了前端工程师的技能要求；同时，提高了图片源文件的解析速度，提高了网页开发效率。附图说明通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：图1是根据本申请的代码生成方法的一个实施例的流程图；图2是根据本申请的代码生成方法的又一个实施例的流程图；图3是本申请中执行代码生成方法的服务器与存储服务器之间的交互示意图；图4是根据本申请的代码生成装置的一个实施例的本文档来自技高网...

【技术保护点】
1.一种代码生成方法，其特征在于，应用于服务器，所述方法包括：获取待处理的图片源文件；提取所述图片源文件中的各元素和所述各元素的属性信息；对所述属性信息进行解析，生成元素间的位置关系信息；基于所述位置关系信息，对所述各元素进行布局；基于布局结果和所述属性信息，生成用于还原图片的程序代码。

【技术特征摘要】
1.一种代码生成方法，其特征在于，应用于服务器，所述方法包括：获取待处理的图片源文件；提取所述图片源文件中的各元素和所述各元素的属性信息；对所述属性信息进行解析，生成元素间的位置关系信息；基于所述位置关系信息，对所述各元素进行布局；基于布局结果和所述属性信息，生成用于还原图片的程序代码。2.根据权利要求1所述的代码生成方法，其特征在于，所述属性信息还包括元素位置信息和元素尺寸信息；以及所述对所述属性信息进行解析，生成元素间的位置关系信息，包括：基于所述元素位置信息和所述元素尺寸信息，生成所述各元素对应的盒子模型信息；基于所述盒子模型信息、所述元素位置信息和所述元素尺寸信息，生成元素间的位置关系信息，其中，所述位置关系信息包括元素对应的盒子模型间的距离。3.根据权利要求1所述的代码生成方法，其特征在于，所述基于所述位置关系信息，确定每行待布局的元素的列数，包括：基于所述位置关系信息，确定每行待布局的元素是否存在重合关系，其中，所述重合关系包括全部重合关系和局部重合关系；将存在重合关系的元素作为一列，将每一个不存在重合关系的元素作为一列，统计每行待布局的元素的列数，按照所确定的列数对每行的元素进行布局。4.根据权利要求1所述的代码生成方法，其特征在于，所述属性信息包括元素覆盖顺序；以及在所述基于所述位置关系信息，对所述各元素进行布局之后，所述方法还包括：按照所述元素覆盖顺序，对所述各元素的布局结果进行调整。5.根据权利要求1所述的代码生成方法，其特征在于，所述提取所述图片源文件中的各元素和所述各元素的属性信息，包括：对所述图片源文件进行预处理，其中，所述预处理包括以下至少一项：对所述图片源文件中的各元素进行检查、对所述图片源文件中的各元素进行存储；提取所述各元素，并从所述图片源文件中提取所述各元素的属性信息。6.根据权利要求5所述的代码生成方法，其特征在于，所述预处理还包括存储所述图片源文件对应的待还原图片；以及在所述生成用于还原图片的程序代码之后，所述方法还包括：运行所述用于还原图片的程序代码，生成还原后图片；将所述还原后图片与所述待还原图片进行对比，确定所述还原后图片的还原度；基于所述还原度与预设数值的比较，确定所述用于还原图片的程序代码是否合格。7.根据权利要求6所述的代码生成方法，其特征在于，在所述生成还原后图片之后，所述方法还包括：确定所述还原后图片与所述待还原图片的像素差值。8.根据权利要求1所述的代码生成方法，其特征在于，所述获取待处理的图片源文件，包括：响应于接收到存储服务器发送的解析任务消息，从所述存储服务器中获取待处理的图片源文件；以及在所述基于布局结果和所述属性信息，生成用于还原图片的程序代码之后，所述方法还包括：将所述用于还原图片的程序代码发送至所述存储服务器。9.根据权利要求1所述的代码生成方法，其特征在于，所述方法还包括：按照预设维度对图片源文件的处理过程进行实时监控，其中，所述预设维度包括以下至少一项：异常状态、还原成功率、耗时信息。10.一种代码生成装置，其特征在于，应用于服务器，所述装置包括：获取单元，被配置成获取待处理的图片源文件；提取单元，被配置成提取所述图片源文件中的各元素和所述各元素的属性信息；解析单元...

【专利技术属性】
技术研发人员：李健，吴鹏丽，黄文存，
申请(专利权)人：北京城市网邻信息技术有限公司，
类型：发明
国别省市：北京,11