页面代码转换方法、装置、计算机设备及可读存储介质与流程

1.本技术涉及互联网技术领域，特别是涉及一种页面代码转换方法、装置、计算机设备及可读存储介质。


背景技术：

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


技术实现要素：

6.有鉴于此，本技术提供了一种页面代码转换方法、装置、计算机设备及可读存储介质，主要目的在于解决目前需要相关技术人员依据ux设计稿编写对应的展示页面，进而导致页面搭建的效率低、速度慢的问题。
7.依据本技术第一方面，提供了一种页面代码转换方法，该方法包括：
8.接收第一参数，按照所述第一参数指示的路径，获取待转换文件；
9.识别所述待转换文件，得到所述待转换文件中的全部页面元素；
10.遍历所述全部页面元素，对每个页面元素进行转换，得到目标文件，所述目标文件为vue代码文件；
11.将所述目标文件发送至展示终端进行页面展示。
12.依据本技术第二方面，提供了一种页面代码转换装置，该装置包括：
13.接收模块，用于接收第一参数，按照所述第一参数指示的路径，获取待转换文件；
14.识别模块，用于识别所述待转换文件，得到所述待转换文件中的全部页面元素；
15.转换模块，用于遍历所述全部页面元素，对每个页面元素进行转换，得到目标文件，所述目标文件为vue代码文件；
16.展示模块，用于将所述目标文件发送至展示终端进行页面展示。
17.依据本技术第三方面，提供了一种存储设备，其上存储有计算机程序，所述程序被处理器执行时实现上述第一方面中任一项所述方法的步骤。
18.依据本技术第四方面，提供了一种计算机可读存储介质，包括存储设备、处理器及存储在存储设备上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述第一方面中任一项所述方法的步骤。
19.借由上述技术方案，本技术提供的一种页面代码转换方法、装置、计算机设备及可读存储介质，本技术首先接收第一参数，按照第一参数指示的路径，获取待转换文件。随后，识别待转换文件，得到待转换文件中的全部页面元素。遍历全部页面元素，对每个页面元素进行转换，得到vue代码编写的目标文件。最后，将目标文件发送至展示终端进行页面展示。自动将ux设计稿中的页面元素全部转换为vue代码，直接用于页面搭建，避免了由人工转换代码而产生的失误，进而能够提高页面搭建的效率和速度。
20.上述说明仅是本技术技术方案的概述，为了能够更清楚了解本技术的技术手段，而可依照说明书的内容予以实施，并且为了让本技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本技术的具体实施方式。
附图说明
21.通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本技术的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
22.图1示出了本技术实施例提供的一种页面代码转换方法流程示意图；
23.图2a示出了本技术实施例提供的一种页面代码转换方法流程示意图；
24.图2b示出了本技术实施例提供的一种页面代码转换方法流程示意图；
25.图2c示出了本技术实施例提供的一种页面代码转换方法流程示意图；
26.图3a示出了本技术实施例提供的一种页面代码转换装置的结构示意图；
27.图3b示出了本技术实施例提供的一种页面代码转换装置的结构示意图；
28.图3c示出了本技术实施例提供的一种页面代码转换装置的结构示意图；
29.图4示出了本技术实施例提供的一种计算机设备的装置结构示意图。
具体实施方式
30.下面将参照附图更详细地描述本技术的示例性实施例。虽然附图中显示了本技术的示例性实施例，然而应当理解，可以以各种形式实现本技术而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本技术，并且能够将本技术的范围完整的传达给本领域的技术人员。
31.本技术实施例提供了一种页面代码转换方法，如图1所示，该方法包括：
32.101、接收第一参数，按照第一参数指示的路径，获取待转换文件。
33.本方法可以封装于代码转换插件，该插件的脚本程序可以采用python语言编写。相关技术人员通过插件一键实现转换代码，将ux设计稿中的js语言转换为搭建页面所需的vue语言。在实际运行过程中，代码转换插件需要先接收第一参数，其中，第一参数指示了存储路径，具体可以是某个稿件的存储路径，也可以是某个文件库(存储有多个ux设计稿的文件夹)的存储路径。在仅需对一个ux稿件进行转换时，由相关工作人员向插件输入某个待转换文件的文件路径的第一参数，插件根据第一参数指示的路径，获取待转换文件进行后续的代码转换。
34.另外，考虑到设计人员在对一个应用功能进行设计时，会产生多个设计稿，故本方法设计文件库，设计人员在使用axure工具生成ux稿件后，将ux稿件存储至对应的文件库
中。需要说明的是axure工具是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或web网站的线框图、流程图、原型和规格说明文档，能够快速、高效的创建原型。进一步地，相关技术人员可以将目标文件库的存储路径作为第一参数发送至代码转换插件，代码转换插件根据第一参数指示的路径，从ux稿件库中提取多个待转换文件进行后续的代码转换。
35.102、识别待转换文件，得到待转换文件中的全部页面元素。
36.进一步地，代码转换插件需要对获取到的待转换文件进行识别，从待转换文件中获取设计稿中的全部页面元素，具体地，可以是列表元素、结构元素、分组元素、页面交互元素、文本元素等。例如，常见的文本元素还包括，《p》段落标签、《h》标题标签页面元素等，标题标签有六个元素标签——《h1》、《h2》、《h3》、《h4》、《h5》、《h6》每个元素代表文档中不同级别的内容，并且字体大小会依次递减，类似于一级标题，二级标题，三级标题的关系。
37.103、遍历全部页面元素，对每个页面元素进行转换，得到目标文件，目标文件为vue代码文件。
38.接下来，代码转换插件会遍历ux设计稿件中的全部页面元素，将每个页面元素转换成能够进行页面搭建的代码，进而得到一个能够进行编译的vue代码文件，也就是目标文件。
39.104、将目标文件发送至展示终端进行页面展示。
40.最后，将目标文件，也就是能够进行编译的vue代码文件发送至展示终端，由展示终端对目标文件中的每个组件进行渲染搭建，得到最终的展示页面。需要说明的是，展示终端可以是手机、平板电脑、电脑等带有显示屏的智能设备，本技术对展示终端的类型不进行具体限定。
41.本技术实施例提供的方法，首先接收第一参数，按照第一参数指示的路径，获取待转换文件。随后，识别待转换文件，得到待转换文件中的全部页面元素。遍历全部页面元素，对每个页面元素进行转换，得到vue代码编写的目标文件。最后，将目标文件发送至展示终端进行页面展示。自动将ux设计稿中的页面元素全部转换为vue代码，直接用于页面搭建，避免了由人工转换代码而产生的失误，进而能够提高页面搭建的效率和速度。
42.本技术实施例提供了一种页面代码转换方法，如图2a所示，该方法包括：
43.201、依据第一参数指示的路径，确定存储空间，按照可扩展标记语言xml格式，读取存储空间内的文件，得到待转换文件。
44.随着互联网技术的不断发展，一些页面通常采用vue框架编写，vue是一套用于构建用户界面的渐进式框架，使用javascript语言，能够更好地组织与简化web开发。目前，设计人员通过axure对页面进行设计，生成ux(user experience，用户体验)设计稿，进一步地，页面搭建人员将axure的稿件导出为html页面，按照html页面展示的样式进行代码编辑。但是申请人认识到，由于ux设计稿并不是采用javascript语言编写的，故并不能直接用于生成展示页面，需要大量的人工干预，也就是需要相关技术人员依据ux设计稿编写对应的展示页面，进而导致页面搭建的效率低、速度慢。
45.因此，本技术提供了一种页面代码转换方法、装置、计算机设备及可读存储介质，本技术首先接收第一参数，按照第一参数指示的路径，获取待转换文件。随后，识别待转换文件，得到待转换文件中的全部页面元素。遍历全部页面元素，对每个页面元素进行转换，
得到vue代码编写的目标文件。最后，将目标文件发送至展示终端进行页面展示。自动将ux设计稿中的页面元素全部转换为vue代码，直接用于页面搭建，避免了由人工转换代码而产生的失误，进而能够提高页面搭建的效率和速度。
46.本方法可以封装于代码转换插件，该插件的脚本程序可以采用python语言编写。相关技术人员通过插件一键实现转换代码，将ux设计稿中的js语言转换为搭建页面所需的vue语言。在实际运行过程中，代码转换插件需要先接收第一参数，其中，第一参数指示了存储路径，具体可以是某个稿件的存储路径，也可以是某个文件库(存储有多个ux设计稿的文件夹)的存储路径。在仅需对一个ux稿件进行转换时，由相关工作人员向插件输入某个待转换文件的文件路径的第一参数，插件根据第一参数指示的路径，获取待转换文件进行后续的代码转换。
47.另外，考虑到设计人员在对一个应用功能进行设计时，会产生多个设计稿，故本方法设计文件库，设计人员在使用axure工具生成ux稿件后，将ux稿件存储至对应的文件库中。需要说明的是axure工具是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或web网站的线框图、流程图、原型和规格说明文档，能够快速、高效的创建原型。进一步地，相关技术人员可以将目标文件库的存储路径作为第一参数发送至代码转换插件，代码转换插件根据第一参数指示的路径，从ux稿件库中提取多个待转换文件进行后续的代码转换。需要说明的是，多个待转换文件所使用的图片应处于同一文件夹下，也就是说，如果多个axure稿件和图片文件夹认为是一组的话，这一组里面多个axure中所有页面元素的标号的图片都必须得是这组中图片文件夹中的，那么把这一组看成一个整体，通过代码转换插件axure-to-vue.py处理后就能得到想要的多个vue文件结果了。把组与组用不同的整体文件夹区分开来，那么也就能得到不同组下的vue文件了。
48.在实际运行过程中，代码转换插件首先依据第一参数指示的路径，确定存储空间。随后，按照可扩展标记语言xml格式，读取存储空间内的文件，得到待转换文件。需要说明的是，可扩展标记语言xml(标准通用标记语言的子集)是一种简单的数据存储语言。使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然可扩展标记语言占用的空间比二进制数据要占用更多的空间，但可扩展标记语言极其简单易于掌握和使用。
49.202、识别待转换文件，得到待转换文件中的全部页面元素。
50.进一步地，代码转换插件需要对获取到的待转换文件进行识别，从待转换文件中获取设计稿中的全部页面元素，具体地，可以是列表元素、结构元素、分组元素、页面交互元素、文本元素等。
51.例如，列表页面元素包括：ul元素，ul无序列表各个列表项之间没有顺序级别之分，通常是并列的；ol元素，ol有序列表的各个列表按照一定顺序排序，在html中该元素还拥有start属性和reversed属性，其中start属性可以更改列表编号得起始值，reversed属性表示是否对列表进行反向排序；dl元素，dl定于列表常用于对术语或名词进行解释和描述，列表项前没有项目符号，dl标记用于指定定义列表，dt标记和dd标记并列嵌套在dl标记中，其中，dt标记用于指定术语名词，dd标记用于对名词进行解释和描述。
52.203、遍历全部页面元素，对每个页面元素进行转换，得到目标文件，目标文件为vue代码文件。
53.接下来，代码转换插件会遍历ux设计稿件中的全部页面元素，将每个页面元素转换成能够进行页面搭建的代码语言，进而得到一个能够进行编译的vue代码文件，也就是目标文件。具体转换过程可以分为三个方面：
54.一、语法转换
55.首先，相关技术人员会预先定义每种页面元素的标签语言与vue语法之间的映射关系，将这些映射关系存储至语法转换表中，将语法转换表存储至对应的文件夹中。当代码转换插件识别到一个页面元素后，在对应的文件夹中调取语法转换表，在接收到语法转换表后，在语法转换表中查询该页面元素对应的目标语法。
56.具体地，读取页面元素对应的元素标识，如段落标签、一级标题标签等等，根据语法转换表中的映射关系，在其中查询元素标识命中的目标语法，将页面元素转换成目标语法。
57.二、图片嵌入
58.进一步地，代码转换插件还需要接收相关工作人员上传的第二参数，第二参数用于指示待转换文件所调用的图片文件夹的存储路径。当页面元素不存在图片标号时，仅执行语法和样式的转换即可，如文字类的段落标签就无需调用图片，仅需将段落标签的语法转换成目标语法，替换段落标签的样式属性即可。
59.当页面元素中存在图片标号时，按照第二参数指示的路径，获取待转换文件对应的目标文件夹，也就是待转换文件对应的图片文件夹。进一步地，读取目标文件夹中全部图片对应的全部图片文件名，将全部图片文件名与图片标号进行比对，得到比对结果。具体地，若图片文件名与图片标号一致，则生成用于指示图片文件名与图片标号一致的比对结果，反之，则生成用于指示图片文件名与图片标号不一致的比对结果。在全部比对结果中，确定比对结果指示图片文件名与图片标号一致的目标图片，将目标图片设置于页面元素转换的目标语法中。
60.例如，待转换文件a的某个页面控件元素携带图片标号12，那么就去待转换文件a对应的目标文件夹中找寻图片文件名为12的图片，将该图片设置于该页面控件元素转换的目标语法中。
61.三、样式替换
62.最后，对页面元素的样式属性进行替换，样式属性允许设置控件中各个元素的颜色和字体等外观，也就是说，若要更改元素的外观就需要设置适当样式对象的属性。具体地，页面属性包括：字体属性，例如，font设置字体的所有的样式属性、font-family字体类型、font-size字体大小、font-weight字体的粗细、color字体颜色、font:bold 12px宋体，字体粗细、大小、类型；文本属性，例如，line-height行高、text-align对齐方式、letter-spacing字符间距、text-decoration文本修饰，underline(下划线)、none；边距属性，例如margin-top(上)、margin-left(左)、margin-right(右)、margin-bottom(下)；填充属性，例如，padding-top(上)、padding-left(左)、padding-right(右)、padding-bottom(下)等等。
63.本技术需要对这些样式属性进行替换，具体地，在样式映射表中查询页面元素的样式属性对应的目标页面属性，采用目标页面属性替换样式属性，其中，目标页面属性为vue框架认可的样式属性。
64.204、将目标文件发送到前端的代码工程中进行代码编译，若编译过程中产生报
错，则将报错信息发送至后台终端进行展示，报错信息用于触发对目标文件的修改指令。
65.在本技术实施例中，系统需要将生成的vue文件发送到前段的代码工程中进行编译，查看目标文件是否出现错误，或者有没有出现展示错位的问题。若存在报错情况，则将报错信息发送至后台重点进行展示。需要说明的是，本技术中编译过程中存产生的报错可以是代码运行错误，也可以是展示错误。若报错为代码运行报错，则将报错内容作为报错信息发送至后台终端进行展示。若报错为展示错误，则将编译后的预览页面作为报错信息发送至后台终端进行展示。
66.相关工作人员可以基于后台终端看到报错信息，依据报错信息触发对模板文件的修改指令，进一步地，插件响应于后台终端触发对目标文件的修改指令，识别修改指令，得到修改位置和修改内容。在目标文件中，确定修改位置对应的指定内容，将指定内容替换成修改内容，完成对目标文件的更新。将目标文件发送到前端的代码工程中进行代码编译。
67.205、若编译过程中未产生报错，则将目标文件发送至展示终端，进行页面展示。
68.最后，若编译过程中未产生报错，则将目标文件，也就是能够进行编译的vue代码文件发送至展示终端，由展示终端对目标文件中的每个组件进行渲染搭建，得到最终的展示页面。
69.需要说明的是，展示终端可以是手机、平板电脑、电脑等带有显示屏的智能设备，本技术对展示终端的类型不进行具体限定。
70.综上所述，如图2b所示，本技术需要获取两个参数，第一参数为待转换的设计稿的文件存储路径，第二参数为待转换的设计稿所使用的图片文件夹的存储路径。将两个参数输入至代码转换插件(axure-to-vue.py)，由代码转换插件对设计稿进行转换，生成目标文件，即vue代码文件。具体地，如图2c所示，代码转换插件在接收到两个参数之后，根据第一参数，按照xml的格式读取设计稿。进一步地，在设计稿中读取到页面元素的语法时，将其转换为对应的vue语法。在设计稿中读取到页面元素的图片标号时，从对应的图片文件夹中寻找图片文件名与图片标号一致的图片，将其设置到对应的vue代码中。在设计稿中读取到页面元素的样式属性时，将样式属性替换为vue默认的页面样式属性。直至将设计稿中全部的页面元素转换完成，得到目标文件。
71.本技术实施例提供的方法，首先接收第一参数，按照第一参数指示的路径，获取待转换文件。随后，识别待转换文件，得到待转换文件中的全部页面元素。遍历全部页面元素，对每个页面元素进行转换，得到vue代码编写的目标文件。最后，将目标文件发送至展示终端进行页面展示。自动将ux设计稿中的页面元素全部转换为vue代码，直接用于页面搭建，避免了由人工转换代码而产生的失误，进而能够提高页面搭建的效率和速度。
72.进一步地，作为图1所述方法的具体实现，本技术实施例提供了一种页面代码转换装置，如图3a所示，所述装置包括：接收模块301、识别模块302、转换模块303、第一展示模块304。
73.该接收模块301，用于接收第一参数，按照所述第一参数指示的路径，获取待转换文件；
74.该识别模块302，用于识别所述待转换文件，得到所述待转换文件中的全部页面元素；
75.该转换模块303，用于遍历所述全部页面元素，对每个页面元素进行转换，得到目
标文件，所述目标文件为vue代码文件；
76.该第一展示模块304，用于将所述目标文件发送至展示终端进行页面展示。
77.在具体的应用场景中，该转换模块303，用于接收语法转换表，所述语法转换表存储有页面元素与vue语法的映射关系；读取所述页面元素对应的元素标识，在所述语法转换表中，查询所述元素标识命中的目标语法，将所述页面元素转换成所述目标语法。
78.在具体的应用场景中，该转换模块303，还用于当所述页面元素中存在图片标号时，按照第二参数指示的路径，获取目标文件夹，所述第二参数用于指示所述待转换文件对应的图片文件夹的存储路径；读取所述目标文件夹中全部图片对应的全部图片文件名，将所述全部图片文件名与所述图片标号进行比对，得到比对结果；确定比对结果指示图片文件名与所述图片标号一致的目标图片，将所述目标图片设置于所述页面元素转换的目标语法中。
79.在具体的应用场景中，该转换模块303，还用于在样式映射表中查询所述页面元素的样式属性对应的目标页面属性，采用所述目标页面属性替换所述样式属性，所述目标页面属性为vue框架认可的样式属性。
80.在具体的应用场景中，接收模块301，用于依据所述第一参数指示的路径，确定存储空间；按照可扩展标记语言xml格式，读取所述存储空间内的文件，得到所述待转换文件。
81.在具体的应用场景中，如图3b所示，所述装置还包括：编译模块305、第一发送模块306、第二展示模块307。
82.该编译模块305，用于将目标文件发送到前端的代码工程中进行代码编译；
83.该第一发送模块306，用于若编译过程中未产生报错，则将所述目标文件发送至展示终端；
84.该第二展示模块307，用于若编译过程中产生报错，则将报错信息发送至后台终端进行展示，所述报错信息用于触发对所述目标文件的修改指令。
85.在具体的应用场景中，如图3c所示，所述装置还包括：获取模块308、修改模块309、第二发送模块310。
86.该获取模块308，用于响应于后台终端触发对所述目标文件的修改指令，识别所述修改指令，得到修改位置和修改内容；
87.该修改模块309，用于在所述目标文件中，确定所述修改位置对应的指定内容，将所述指定内容替换成所述修改内容，完成对所述目标文件的更新；
88.该第二发送模块310，用于将目标文件发送到前端的代码工程中进行代码编译。
89.本技术实施例提供的装置，首先接收第一参数，按照第一参数指示的路径，获取待转换文件。随后，识别待转换文件，得到待转换文件中的全部页面元素。遍历全部页面元素，对每个页面元素进行转换，得到vue代码编写的目标文件。最后，将目标文件发送至展示终端进行页面展示。自动将ux设计稿中的页面元素全部转换为vue代码，直接用于页面搭建，避免了由人工转换代码而产生的失误，进而能够提高页面搭建的效率和速度。
90.需要说明的是，本技术实施例提供的一种页面代码转换装置所涉及各功能单元的其他相应描述，可以参考图1和图2a至图2c中的对应描述，在此不再赘述。
91.在示例性实施例中，参见图4，还提供了一种设备，该设备包括通信总线、处理器、存储器和通信接口，还可以包括输入输出接口和显示设备，其中，各个功能单元之间可以通
过总线完成相互间的通信。该存储器存储有计算机程序，处理器，用于执行存储器上所存放的程序，执行上述实施例中的页面代码转换方法。
92.一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现所述的页面代码转换方法的步骤。
93.通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本技术可以通过硬件实现，也可以借助软件加必要的通用硬件平台的方式来实现。基于这样的理解，本技术的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是cd-rom，u盘，移动硬盘等)中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施场景所述的方法。
94.本领域技术人员可以理解附图只是一个优选实施场景的示意图，附图中的模块或流程并不一定是实施本技术所必须的。
95.本领域技术人员可以理解实施场景中的装置中的模块可以按照实施场景描述进行分布于实施场景的装置中，也可以进行相应变化位于不同于本实施场景的一个或多个装置中。上述实施场景的模块可以合并为一个模块，也可以进一步拆分成多个子模块。
96.上述本技术序号仅仅为了描述，不代表实施场景的优劣。
97.以上公开的仅为本技术的几个具体实施场景，但是，本技术并非局限于此，任何本领域的技术人员能思之的变化都应落入本技术的保护范围。