页面代码转换方法、装置、计算机设备及可读存储介质制造方法及图纸

本申请公开了一种页面代码转换方法、装置、计算机设备及可读存储介质，涉及互联网技术领域，可以自动将UX设计稿中的页面元素全部转换为vue代码，直接用于页面搭建，避免了由人工转换代码而产生的失误，进而能够提高页面搭建的效率和速度。所述方法包括：接收第一参数，按照第一参数指示的路径，获取待转换文件；识别待转换文件，得到待转换文件中的全部页面元素；遍历全部页面元素，对每个页面元素进行转换，得到目标文件，目标文件为vue代码文件；将目标文件发送至展示终端进行页面展示。目标文件发送至展示终端进行页面展示。目标文件发送至展示终端进行页面展示。

【技术实现步骤摘要】
页面代码转换方法、装置、计算机设备及可读存储介质


[0001]本申请涉及互联网
，特别是涉及一种页面代码转换方法、装置、计算机设备及可读存储介质。

技术介绍

[0002]随着互联网技术的不断发展，一些页面通常采用vue框架编写，vue是一套用于构建用户界面的渐进式框架，使用JavaScript语言，能够更好地组织与简化Web开发。
[0003]相关技术中，设计人员通过Axure对页面进行设计，生成UX(User Experience，用户体验)设计稿，进一步地，页面搭建人员将Axure的稿件导出为html页面，按照html页面展示的样式进行代码编辑。
[0004]在实现本申请的过程中，申请人发现相关技术至少存在以下问题：
[0005]由于UX设计稿并不是采用JavaScript语言编写的，故并不能直接用于生成展示页面，需要大量的人工干预，也就是需要相关技术人员依据UX设计稿编写对应的展示页面，进而导致页面搭建的效率低、速度慢。

技术实现思路

[0006]有鉴于此，本申请提供了一种页面代码转换方法、装置、计算机设备及可读存储介质，主要目的在于解决目前需要相关技术人员依据UX设计稿编写对应的展示页面，进而导致页面搭建的效率低、速度慢的问题。
[0007]依据本申请第一方面，提供了一种页面代码转换方法，该方法包括：
[0008]接收第一参数，按照所述第一参数指示的路径，获取待转换文件；
[0009]识别所述待转换文件，得到所述待转换文件中的全部页面元素；
[0010]遍历所述全部页面元素，对每个页面元素进行转换，得到目标文件，所述目标文件为vue代码文件；
[0011]将所述目标文件发送至展示终端进行页面展示。
[0012]依据本申请第二方面，提供了一种页面代码转换装置，该装置包括：
[0013]接收模块，用于接收第一参数，按照所述第一参数指示的路径，获取待转换文件；
[0014]识别模块，用于识别所述待转换文件，得到所述待转换文件中的全部页面元素；
[0015]转换模块，用于遍历所述全部页面元素，对每个页面元素进行转换，得到目标文件，所述目标文件为vue代码文件；
[0016]展示模块，用于将所述目标文件发送至展示终端进行页面展示。
[0017]依据本申请第三方面，提供了一种存储设备，其上存储有计算机程序，所述程序被处理器执行时实现上述第一方面中任一项所述方法的步骤。
[0018]依据本申请第四方面，提供了一种计算机可读存储介质，包括存储设备、处理器及存储在存储设备上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述第一方面中任一项所述方法的步骤。
[0019]借由上述技术方案，本申请提供的一种页面代码转换方法、装置、计算机设备及可读存储介质，本申请首先接收第一参数，按照第一参数指示的路径，获取待转换文件。随后，识别待转换文件，得到待转换文件中的全部页面元素。遍历全部页面元素，对每个页面元素进行转换，得到vue代码编写的目标文件。最后，将目标文件发送至展示终端进行页面展示。自动将UX设计稿中的页面元素全部转换为vue代码，直接用于页面搭建，避免了由人工转换代码而产生的失误，进而能够提高页面搭建的效率和速度。
[0020]上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。
附图说明
[0021]通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本申请的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
[0022]图1示出了本申请实施例提供的一种页面代码转换方法流程示意图；
[0023]图2A示出了本申请实施例提供的一种页面代码转换方法流程示意图；
[0024]图2B示出了本申请实施例提供的一种页面代码转换方法流程示意图；
[0025]图2C示出了本申请实施例提供的一种页面代码转换方法流程示意图；
[0026]图3A示出了本申请实施例提供的一种页面代码转换装置的结构示意图；
[0027]图3B示出了本申请实施例提供的一种页面代码转换装置的结构示意图；
[0028]图3C示出了本申请实施例提供的一种页面代码转换装置的结构示意图；
[0029]图4示出了本申请实施例提供的一种计算机设备的装置结构示意图。
具体实施方式
[0030]下面将参照附图更详细地描述本申请的示例性实施例。虽然附图中显示了本申请的示例性实施例，然而应当理解，可以以各种形式实现本申请而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本申请，并且能够将本申请的范围完整的传达给本领域的技术人员。
[0031]本申请实施例提供了一种页面代码转换方法，如图1所示，该方法包括：
[0032]101、接收第一参数，按照第一参数指示的路径，获取待转换文件。
[0033]本方法可以封装于代码转换插件，该插件的脚本程序可以采用Python语言编写。相关技术人员通过插件一键实现转换代码，将UX设计稿中的JS语言转换为搭建页面所需的vue语言。在实际运行过程中，代码转换插件需要先接收第一参数，其中，第一参数指示了存储路径，具体可以是某个稿件的存储路径，也可以是某个文件库(存储有多个UX设计稿的文件夹)的存储路径。在仅需对一个UX稿件进行转换时，由相关工作人员向插件输入某个待转换文件的文件路径的第一参数，插件根据第一参数指示的路径，获取待转换文件进行后续的代码转换。
[0034]另外，考虑到设计人员在对一个应用功能进行设计时，会产生多个设计稿，故本方法设计文件库，设计人员在使用Axure工具生成UX稿件后，将UX稿件存储至对应的文件库
中。需要说明的是Axure工具是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档，能够快速、高效的创建原型。进一步地，相关技术人员可以将目标文件库的存储路径作为第一参数发送至代码转换插件，代码转换插件根据第一参数指示的路径，从UX稿件库中提取多个待转换文件进行后续的代码转换。
[0035]102、识别待转换文件，得到待转换文件中的全部页面元素。
[0036]进一步地，代码转换插件需要对获取到的待转换文件进行识别，从待转换文件中获取设计稿中的全部页面元素，具体地，可以是列表元素、结构元素、分组元素、页面交互元素、文本元素等。例如，常见的文本元素还包括，<p>段落标签、<h>标题标签页面元素等，标题标签有六个元素标签——<h1>、本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面代码转换方法，其特征在于，包括：接收第一参数，按照所述第一参数指示的路径，获取待转换文件；识别所述待转换文件，得到所述待转换文件中的全部页面元素；遍历所述全部页面元素，对每个页面元素进行转换，得到目标文件，所述目标文件为vue代码文件；将所述目标文件发送至展示终端进行页面展示。2.根据权利要求1所述的方法，其特征在于，所述对每个页面元素进行转换，包括：接收语法转换表，所述语法转换表存储有页面元素与vue语法的映射关系；读取所述页面元素对应的元素标识，在所述语法转换表中，查询所述元素标识命中的目标语法，将所述页面元素转换成所述目标语法。3.根据权利要求1所述的方法，其特征在于，所述对每个页面元素进行转换，还包括：当所述页面元素中存在图片标号时，按照第二参数指示的路径，获取目标文件夹，所述第二参数用于指示所述待转换文件对应的图片文件夹的存储路径；读取所述目标文件夹中全部图片对应的全部图片文件名，将所述全部图片文件名与所述图片标号进行比对，得到比对结果；确定比对结果指示图片文件名与所述图片标号一致的目标图片，将所述目标图片设置于所述页面元素转换的目标语法中。4.根据权利要求1所述的方法，其特征在于，所述对每个页面元素进行转换，还包括：在样式映射表中查询所述页面元素的样式属性对应的目标页面属性，采用所述目标页面属性替换所述样式属性，所述目标页面属性为vue框架认可的样式属性。5.根据权利要求1所述的方法，其特征在于，所述按照所述第一参数指示的路径，获取待转换文件，包括：依据所述第一参数指示的路径，确定存储空间；按照可扩展标记语言xml格式，读取所述...

【专利技术属性】
技术研发人员：何辉，
申请(专利权)人：平安壹钱包电子商务有限公司，
类型：发明
国别省市：