文件处理方法以及装置与流程

1.本说明书实施例涉及计算机技术领域，特别涉及一种文件处理方法。


背景技术：

2.随着互联网的发展，页面非常多，并且每一次的页面都有特定的设计风格，有的页面设计会较为复杂，以至于开发人员在开发的过程中，很容易出现设计师期望的设计页面效果和实际运行的页面效果不一致的情况。
3.目前，为了能够实现将两种页面效果进行比对，在人工比对的基础上，还增加了坐标轴能力，方便比对设计页面效果和实际运行的页面效果之间的还原度。但采用人工比对，会导致比对内容覆盖度不高，有些细节性差异无法反馈，无法快速准确地检测出开发人员开发的页面效果与设计页面效果的异同，影响页面设计还原的效率。


技术实现要素：

4.有鉴于此，本说明书实施例提供了一种文件处理方法。本说明书一个或者多个实施例同时涉及一种文件处理装置，一种计算设备，一种计算机可读存储介质以及一种计算机程序，以解决现有技术中存在的技术缺陷。
5.根据本说明书实施例的第一方面，提供了一种文件处理方法，包括：
6.获取视觉稿源文件对应的目标结构文件；
7.接收用户针对所述视觉稿源文件生成的初始代码文件，并对所述初始代码文件进行解析，获得待处理结构文件；
8.比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息，获得比对结果；
9.基于所述比对结果，调整所述待处理结构文件，生成所述视觉稿源文件对应的目标代码文件。
10.根据本说明书实施例的第二方面，提供了一种文件处理装置，包括：
11.文件获取模块，被配置为获取视觉稿源文件对应的目标结构文件；
12.文件解析模块，被配置为接收用户针对所述视觉稿源文件生成的初始代码文件，并对所述初始代码文件进行解析，获得待处理结构文件；
13.节点比对模块，被配置为比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息，获得比对结果；
14.文件生成模块，被配置为基于所述比对结果，调整所述待处理结构文件，生成所述视觉稿源文件对应的目标代码文件。
15.根据本说明书实施例的第三方面，提供了一种计算设备，包括：
16.存储器和处理器；
17.所述存储器用于存储计算机可执行指令，所述处理器用于执行所述计算机可执行指令，该计算机可执行指令被处理器执行时实现上述文件处理方法的步骤。
18.根据本说明书实施例的第四方面，提供了一种计算机可读存储介质，其存储有计算机可执行指令，该指令被处理器执行时实现上述文件处理方法的步骤。
19.根据本说明书实施例的第五方面，提供了一种计算机程序，其中，当所述计算机程序在计算机中执行时，令计算机执行上述文件处理方法的步骤。
20.本说明书一个实施例提供的文件处理方法，包括：获取视觉稿源文件对应的目标结构文件；接收用户针对所述视觉稿源文件生成的初始代码文件，并对所述初始代码文件进行解析，获得待处理结构文件；比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息，获得比对结果；基于所述比对结果，调整所述待处理结构文件，生成所述视觉稿源文件对应的目标代码文件。
21.具体实施时，通过获取视觉稿源文件对应的目标结构文件，并对接收到的视觉稿文件生成的初始代码文件进行解析，获得待处理结构文件，将目标结构文件和待处理结构文件进行比对，再根据比对结果对待处理结构文件进行调整，以获得目标代码文件；该种方式不仅能够实现对用户开发生成的初始代码文件进行自动化调整，以使得目标代码文件所渲染出的视觉界面能够符合视觉稿源文件渲染出的视觉界面，不采用人工比对页面效果之间的差异，自动化比对的覆盖度较高，对于细节性差异也可进行比对，以能够快速准确地检测出用户生成的初始代码文件所渲染出的页面设计效果与视觉稿源文件的区别，便于对视觉稿源文件的页面设计进行还原。
附图说明
22.图1是本说明书一个实施例提供的一种文件处理方法的流程示意图；
23.图2是本说明书一个实施例提供的一种文件处理方法的流程图；
24.图3是本说明书一个实施例提供的一种文件处理方法中比对结果的界面展示示意图；
25.图4是本说明书一个实施例提供的一种文件处理方法的处理过程流程图；
26.图5是本说明书一个实施例提供的一种文件处理装置的结构示意图；
27.图6是本说明书一个实施例提供的一种计算设备的结构框图。
具体实施方式
28.在下面的描述中阐述了很多具体细节以便于充分理解本说明书。但是本说明书能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本说明书内涵的情况下做类似推广，因此本说明书不受下面公开的具体实施的限制。
29.在本说明书一个或多个实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本说明书一个或多个实施例。在本说明书一个或多个实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本说明书一个或多个实施例中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
30.应当理解，尽管在本说明书一个或多个实施例中可能采用术语第一、第二等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本说明书一个或多个实施例范围的情况下，第一也可以被称为第二，类
似地，第二也可以被称为第一。取决于语境，如在此所使用的词语“如果”可以被解释成为“在
……
时”或“当
……
时”或“响应于确定”。
31.此外，需要说明的是，本说明书一个或多个实施例所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据，并且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准，并提供有相应的操作入口，供用户选择授权或者拒绝。
32.首先，对本说明书一个或多个实施例涉及的名词术语进行解释。
33.视觉稿源文件：是指把设计师用设计工具所绘制的图形组织起来的视觉稿。
34.实际页面展示效果图：是指前端代码生成的网页在浏览器上的视觉效果展示图，这里指的是html+css+js生成的页面经过浏览器的渲染展示的图片效果。
35.还原度：是指从设计稿源文件中抽取数据，并正确实现到实际页面展示效果图中的程度，表现形式可以通过分数来体现，数值越高表现两者之间的还原度越高。
36.nsview：用于在应用程序中渲染、打印以及处理事件的基础容器。
37.无头浏览器：是指没有图形用户界面的浏览器。“无头浏览器”的“无头”元素与它们确实缺少一个关键元素(即图形用户界面(gui))有关。浏览器本身会定期运行(联系目标网站、上传/下载文档、显示信息等)，但所有这些顺序操作都发生在后端，没有任何图形用户显示(例如图标、图片或搜索栏元素)。
38.dom(documentobjectmodel，文档对象模型)：是html文档的对象表示，同时也是外部内容(例如javascript)与html元素之间的接口。
39.随着互联网技术的发展，网页的外观呈现也与日俱增，每个的页面都有特定的设计风格，有的甚至是极其复杂的，以致于在开发的过程中，很容易出现设计师期望的效果和实际运行的结果不一致的情况，因此，如何能更准确、更快捷地从视觉稿源文件中把网页样式准确地实现，给网页提供更佳的用户体验，才能有效提高设计和开发之间的配合效率和节省开发时间成本。
40.基于此，本说明书实施例提出了一种基于视觉稿源文件和实际页面展示效果图解析的还原度对比方案，实现了准确、快捷的从视觉稿源文件中解析出网页样式，实现了视觉稿源文件和实际页面展示效果图的无缝对接，并且可以通过还原度的对比，更好的评估出网页展示的质量，实现快速准确地设计还原和提高视觉效果。
41.在本说明书中，提供了一种文件处理方法，本说明书同时涉及一种文件处理装置，一种计算设备，以及一种计算机可读存储介质，在下面的实施例中逐一进行详细说明。
42.参见图1，图1示出了根据本说明书一个实施例提供的一种文件处理方法的流程示意图。
43.需要说明的是，本说明书实施例提供的文件处理方法，可应用于文件处理系统，该文件处理系统可实现将开发人员开发的页面效果图和设计人员设计的页面效果进行自动化比对，以实现快速准确地检测页面异同，对设计页面进行还原和提高视觉效果。
44.实际应用中，文件处理系统100接收视觉稿源文件，并对视觉稿源文件进行解析，确定目标结构文件；再接收到初始代码文件，其中，该初始代码文件为开发人员开发的，且针对视觉稿源文件的代码文件，对初始代码文件进行解析，获得待处理结构文件；进一步
地，比对目标结构文件和待处理结构文件，确定比对结果，其中，该比对结果可以理解为对视觉稿源文件的展示页面效果和开发人员开发的展示页面效果之间的差异结果；最后，可根据比对结果对待处理结构文件进行调整，生成目标代码文件，其中，该目标代码文件可以理解为能够还原出视觉稿源文件页面效果图的代码文件；后续对该目标代码文件进行渲染，以生成与视觉稿源文件还原度较高的页面视图。
45.综上，本说明书实施例提供的文件处理方法，能够自动化对视觉稿源文件的展示页面效果和开发人员开发的展示页面效果进行比对，能够快速准确地检测出设计稿与实际页面的异同，便于后续准确地对视觉稿源文件的展示页面效果进行还原。
46.参见图2，图2示出了根据本说明书一个实施例提供的一种文件处理方法的流程图，具体包括以下步骤。
47.步骤202：获取视觉稿源文件对应的目标结构文件。
48.其中，视觉稿源文件可以理解为ui设计师用设计工具所绘制的图形组织起来的视觉稿，即在显示界面中所展示的视图文件。
49.实际应用中，执行主体可获取视觉稿源文件，并获取该视觉稿源文件对应的目标结构文件，其中，目标结构文件可以理解为能够表征视觉稿源文件的界面展示结构的文件，比如html中的dom树等，本实施例对此不作限定。
50.进一步地，本实施例还可通过对视觉稿源文件中的图层信息进行解析，以获得目标结构文件；具体的，所述获取视觉稿源文件对应的目标结构文件，包括：
51.接收视觉稿源文件；
52.解析所述视觉稿源文件中的图层信息，获得视觉稿代码文件；
53.基于所述视觉稿代码文件，确定目标结构文件。
54.其中，视觉稿代码文件可以理解为用于渲染出视觉稿对应的视觉效果图的代码文件，比如html文件。
55.实际应用中，执行主体可对接收到的视觉稿源文件进行解析，解析视觉稿源文件中的图层信息，以获得视觉稿代码文件，并从视觉稿代码文件中再解析出目标结构文件；需要说明的是，对视觉稿源文件的解析过程，本实施例中还可提供插件机制来实现，进而，可调用解析插件，对视觉稿源文件进行解析，可先对sketch文件下载，sketchtool拉起bkcodego插件，可执行元数据导出、页面遍历、图板遍历、图层遍历、图层过滤、属性转换、结构导出，最后获得视觉稿源文件的视觉稿代码文件；对于视觉稿源文件进行解析的过程，本实施例不作限定，还可参考其他解析处理方式。
56.通过对视觉稿源文件进行解析，获得目标结构文件，便于后续与该目标结构文件进行比对，以确定对视觉稿源文件的页面效果图的还原度。
57.更进一步地，为了能够准确地获得视觉稿源文件显示页面的内容，还可通过获得视觉稿代码文件对应的节点树确定；具体的，所述基于所述视觉稿代码文件，确定目标结构文件，包括：
58.解析所述视觉稿代码文件，生成所述视觉稿代码文件对应的节点结构树；
59.将所述节点结构树中的节点信息，确定为目标结构文件。
60.其中，节点结构树可以理解为树形的数据结构，包括多个节点，各节点之间具有相应的关联关系，整个属性的数据结构构成视觉稿代码文件的数据内容。
61.实际应用中，执行主体可解析该视觉稿代码文件，并生成该视觉稿代码文件对应的节点结构树，节点结构树中的各个节点信息构成了目标结构文件；例如，html文件描述一个页面的结构，但是浏览器无法直接理解和使用html，所以需要通过html解析器将html转换成浏览器能够理解的结构dom树，因此，利用chromedriver无头浏览器提取dom节点信息，对文字和图片的分类，将图层转换成html标签，实现视觉稿精准解析(将html文档解析成一个个token，再根据token构建dom树)，即将dom节点中的节点信息确定为目标结构文件。
62.需要说明的是，本说明书实施例中对视觉稿代码文件解析为目标结构文件的过程不作限定，上述仅作为示例性描述。
63.步骤204：接收用户针对所述视觉稿源文件生成的初始代码文件，并对所述初始代码文件进行解析，获得待处理结构文件。
64.其中，初始代码文件可以理解为开发人员针对视觉稿源文件自主开发的代码文件，在前端开发的过程中，页面代码文件可理解为开发的html文件。
65.实际应用中，执行主体在接收到开发人员开发的html文件之后，可对该html文件进行解析，以获得html文件中的dom树结构文件，包括dom节点中的节点信息。
66.进一步地，所述对所述初始代码文件进行解析，获得待处理结构文件，包括：
67.解析所述初始代码文件，生成所述初始代码文件对应的节点结构树；
68.将所述节点结构树中的节点信息，确定为待处理结构文件。
69.实际应用中，执行主体同样也需要对初始代码文件进行解析，以确定初始代码文件对应的节点dom树，并将各个dom节点对应的节点信息确定为待处理结构文件；需要说明的是，对于初始代码文件进行解析的过程可参考上述实施例的描述，本实施例中对此不作限定。
70.步骤206：比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息，获得比对结果。
71.实际应用中，执行主体在确定了目标结构文件和待处理结构文件之后，还可比对这两个结构文件中的节点信息，以确定两者之间的节点信息是否存在差异，以及存在差异的内容是什么，进而确定比对结果。
72.进一步地，为了提高系统的比对效率，在对节点信息进行比对之前，还可采用比对效果图的方式，先进行比对筛选，以避免毫无关系的结构文件的节点信息进行比较，浪费系统的计算资源；具体的，所述比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息，包括：
73.基于所述目标结构文件，确定所述视觉稿源文件对应的目标界面图像；
74.基于所述待处理结构文件，确定所述视觉稿源文件对应的待比对界面图像；
75.计算所述目标界面图像和所述待比对界面图像之间的图像相似度；
76.基于所述图像相似度，比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息。
77.其中，目标界面图像可以理解为通过解析器解析视觉稿源文件对应的页面效果图，由于利用解析器直接对图层信息进行解析，故该目标界面图像可以理解为期望开发人员开发的页面效果图；待比对界面图像可以理解为开发人员根据开发的代码文件渲染出的页面效果图。
78.实际应用中，执行主体根据目标结构文件，可以使用无头浏览器确定出视觉稿源文件对应的目标界面图像，还可根据待处理结构文件，确定出视觉稿源文件对应的待比对界面图像；通过计算目标界面图像和待比对界面图像之间的图像相似度，并根据图像相似度来比对目标结构文件的节点信息和待处理结构文件的节点信息；需要说明的是，本实施例中确定图像之间的相似度，是为了筛选出图像基本不相似或者基本相似的情况，在实际应用中，图像之间基本不相似说明这两个页面效果图没有可比对的价值，因此无需执行后续的节点信息比对，另外，若图像之间基本相似，说明开发人员开发的页面效果图已经能够还原出目标界面图像的效果，也可无需再执行后的节点信息比对过程。
79.需要说明的是，上述的图像相似度计算的过程，可利用图像计算哈希均值的方式，确定哈希相似度，也可参考目前的其他图像计算方式，本实施例对此不作限定。
80.通过对两个视觉效果图进行相似度计算，根据相似度来执行后续的节点信息比对过程，可适应于各种比对的应用场景，在一定程度上可以提高系统的比对效率，节省计算资源。
81.进一步地，本实施例中还可根据不同的应用场景提供预设阈值区间，并根据预设阈值区间确定比对节点信息的过程；具体的，所述基于所述图像相似度，比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息，包括：
82.在确定所述图像相似度满足预设阈值区间的情况下，比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息。
83.其中，预设阈值区间可理解为根据不同的使用场景设置的相似度阈值范围，比如0.5-0.99之间。
84.实际应用中，执行主体在确定图像相似度满足预设阈值区间的情况下，即可对目标结构文件的节点信息和待处理结构文件的节点信息进行比对，以确定节点信息之间是否存在信息差异；比如，预设阈值区间0.5-0.99，在确定图像相似度为0.80时，说明当前的两张图像展示效果还有一部分内容有差异，可通过后续的比对，明确具体的差异内容。
85.更进一步地，通过比对两个图像中的节点信息，明确两个图像中是否有数据差异和/或界面样式差异；具体的，所述比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息，获得比对结果，包括：
86.获取所述目标结构文件中的目标节点信息、以及所述待处理结构文件的待处理节点信息，其中，所述目标节点信息与所述待处理节点信息之间相关联；
87.比对所述目标节点信息和所述待处理节点信息，获得比对结果，其中，所述比对结果包括数据差异结果和/或界面样式差异结果。
88.实际应用中，执行主体可先获取到目标结构文件中的目标节点信息和待处理结构文件中的待处理节点信息，需要说明的是，目标节点信息和待处理节点信息之间是具有相应的关联关系，比如节点结构树之间的节点具有一一对应的关系；可通过遍历节点树中的节点信息，执行信息匹配，获得比对结果；节点比对结果可包括数据差异结果和/或界面样式差异结果，即节点数据信息的有所差异，和/或界面的展示样式之间的差异，比如字体、字号、位置、大小、颜色等差异。
89.需要说明的是，本实施例在进行节点匹配之前，还可对dom节点进行清洗、去重、合并、重建，使得比对的dom树之间的结构相近似，进而，可比对页面展示效果的样式差异，还
可比对页面展示数据内容上的差异，比如样式差异，可通过获取在结构树中的css样式数据，比对css样式数据之间的差异，来确定界面样式差异结果；具体的比对方式本实施例对此不作限定，还可包括根据神经网络算法实现节点匹配，比如采用opencv+mobilenetv2神经网络算法对两种类型节点属性进行匹配，实现智能化设计比对。
90.参见图3，图3示出了根据本说明书一个实施例提供的一种文件处理方法中比对结果的界面展示示意图。
91.图3为比对结果展示的示意图，图3中在最上方可展示像素比例为750*1207，下一栏可展示比对结果，以比对两框的相似度为例，对于相似度在99％以上的，则不过多显示比对内容，如两框相似度为98％，可在界面中展示比对细节，例如图3中显示位置偏差、大小偏差、透明度、字体、代码建议等，通过在该展示界面中展示详细的比对细节，可明确开发人员开发的页面效果展示图和视觉稿源文件的效果展示图之间的差异。
92.需要说明的是，图3中示例的比对结果的展示界面图中展示的各项元素作为示例，可根据不同的应用场景，对元素展示内容进行调整，本实施例对此不作限定。
93.步骤208：基于所述比对结果，调整所述待处理结构文件，生成所述视觉稿源文件对应的目标代码文件。
94.实际应用中，执行主体可根据比对结果的内容，调整待处理结构文件，进而，生成视觉稿源文件对应的目标代码文件；需要说明的是，本实施例中可提供自动修改代码的过程，也可将比对结果发送至开发人员，由开发人员手动修改；为了提高处理效率，优选地可根据比对结果自动地调整待处理结构文件，比如调整html文档中的dom树结构的节点信息等，获得目标代码文件。
95.进一步地，所述基于所述比对结果，调整所述待处理结构文件，包括：
96.基于所述比对结果，获取针对所述待处理结构文件的待调整信息；
97.根据所述待调整信息调整所述待处理结构文件。
98.实际应用中，执行主体可获取到比对结果中的待调整信息，并根据待调整信息调整待处理结构文件，需要说明的是，待调整信息在比对结果可有多个，比如修改条目较多，包括修改文字大小、位置偏差等，本实施例对此不作限定。例如，根据比对结果中的代码建议，更新初始代码文件中的代码，获得目标代码文件。
99.综上，本技术实施例提供的文件处理方法，通过获取视觉稿源文件对应的目标结构文件，并对接收到的视觉稿文件生成的初始代码文件进行解析，获得待处理结构文件，将目标结构文件和待处理结构文件进行比对，再根据比对结果对待处理结构文件进行调整，以获得目标代码文件；不仅能够实现对用户开发生成的初始代码文件进行自动化调整，以使得目标代码文件所渲染出的视觉界面能够符合视觉稿源文件渲染出的视觉界面，不采用人工比对页面效果之间的差异，自动化比对的覆盖度较高，对于细节性差异也可进行比对，以能够快速准确地检测出用户生成的初始代码文件所渲染出的页面设计效果与视觉稿源文件的区别，便于对视觉稿源文件的页面设计进行还原。
100.参见图4，图4示出了根据本说明书一个实施例提供的一种文件处理方法的处理过程流程图，具体包括以下步骤。
101.需要说明的是，本实施例的执行主体可理解为文件处理系统，与上述实施例中描述的执行主体相同，在此不做过多赘述。
102.步骤402：接收ui视觉稿。
103.步骤404：利用插件解析ui视觉稿，获得解析html文件。
104.步骤406：利用插件解析ui视觉稿，获得根据视觉稿渲染的界面图像。
105.步骤408：接收开发人员开发的针对ui视觉稿的html文件。
106.步骤410：接收开发界面图像。
107.步骤412：根据解析htnl文件，获得第一dom树。
108.步骤414：根据开发人员开发的html文件，获得第二dom树。
109.步骤416：将视觉稿渲染的界面图像和开发界面图像之间计算哈希值，获得图像相似度，判断图像相似度是否在0.5-0.99之间，若是，则执行步骤420，若否，则执行步骤418。
110.步骤418：不作后续节点匹配。
111.步骤420：第一dom树和第二dom树之间交叉遍历。
112.步骤422：分别在两颗dom树中选择相对应的dom节点，获取两个dom节点中的css样式进行比对。
113.步骤424：获得比对结果。
114.步骤426：生成比对报告。
115.综上，本实施例提供的文件处理方法，提出一种基于设计稿源文件和实际页面展示效果图解析的视觉还原度对比方案，实现一次设计图和实际页面效果对比，精准解析页面未解决的问题，从而提高设计和开发的配合效率，克服人工视觉走查中难以解决的反复标注、反复沟通问题，以及手动修改代码费时费力的问题，本实施例提供的方法更加智能，节省开发人员的重复劳动，提升工作效率，确保了用户体验和品牌形象。
116.与上述方法实施例相对应，本说明书还提供了文件处理装置实施例，图5示出了本说明书一个实施例提供的一种文件处理装置的结构示意图。如图5所示，该装置包括：
117.文件获取模块502，被配置为获取视觉稿源文件对应的目标结构文件；
118.文件解析模块504，被配置为接收用户针对所述视觉稿源文件生成的初始代码文件，并对所述初始代码文件进行解析，获得待处理结构文件；
119.节点比对模块506，被配置为比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息，获得比对结果；
120.文件生成模块508，被配置为基于所述比对结果，调整所述待处理结构文件，生成所述视觉稿源文件对应的目标代码文件。
121.可选地，所述文件获取模块502，进一步被配置为：接收视觉稿源文件；解析所述视觉稿源文件中的图层信息，获得视觉稿代码文件；基于所述视觉稿代码文件，确定目标结构文件。
122.可选地，所述文件获取模块502，进一步被配置为：解析所述视觉稿代码文件，生成所述视觉稿代码文件对应的节点结构树；将所述节点结构树中的节点信息，确定为目标结构文件。
123.可选地，所述文件解析模块504，进一步被配置为：解析所述初始代码文件，生成所述初始代码文件对应的节点结构树；将所述节点结构树中的节点信息，确定为待处理结构文件。
124.可选地，所述节点比对模块506，进一步被配置为：基于所述目标结构文件，确定所
述视觉稿源文件对应的目标界面图像；基于所述待处理结构文件，确定所述视觉稿源文件对应的待比对界面图像；计算所述目标界面图像和所述待比对界面图像之间的图像相似度；基于所述图像相似度，比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息。
125.可选地，所述节点比对模块506，进一步被配置为：在确定所述图像相似度满足预设阈值区间的情况下，比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息。
126.可选地，所述节点比对模块506，进一步被配置为：获取所述目标结构文件中的目标节点信息、以及所述待处理结构文件的待处理节点信息，其中，所述目标节点信息与所述待处理节点信息之间相关联；比对所述目标节点信息和所述待处理节点信息，获得比对结果，其中，所述比对结果包括数据差异结果和/或界面样式差异结果。
127.可选地，所述文件生成模块508，进一步被配置为：基于所述比对结果，获取针对所述待处理结构文件的待调整信息；根据所述待调整信息调整所述待处理结构文件。
128.本技术实施例提供的文件处理装置，通过获取视觉稿源文件对应的目标结构文件，并对接收到的视觉稿文件生成的初始代码文件进行解析，获得待处理结构文件，将目标结构文件和待处理结构文件进行比对，再根据比对结果对待处理结构文件进行调整，以获得目标代码文件；该种方式不仅能够实现对用户开发生成的初始代码文件进行自动化调整，以使得目标代码文件所渲染出的视觉界面能够符合视觉稿源文件渲染出的视觉界面，不采用人工比对页面效果之间的差异，自动化比对的覆盖度较高，对于细节性差异也可进行比对，以能够快速准确地检测出用户生成的初始代码文件所渲染出的页面设计效果与视觉稿源文件的区别，便于对视觉稿源文件的页面设计进行还原。
129.本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于文件处理装置而言，由于其基本相似于文件处理方法实施例，所以描述的比较简单，相关之处参见文件处理方法实施例的部分说明即可。
130.图6示出了根据本说明书一个实施例提供的一种计算设备600的结构框图。该计算设备600的部件包括但不限于存储器610和处理器620。处理器620与存储器610通过总线630相连接，数据库650用于保存数据。
131.计算设备600还包括接入设备640，接入设备640使得计算设备600能够经由一个或多个网络660通信。这些网络的示例包括公用交换电话网(pstn，publicswitchedtelephone network)、局域网(lan，localareanetwork)、广域网(wan，wideareanetwork)、个域网(pan，personalareanetwork)或诸如因特网的通信网络的组合。接入设备540可以包括有线或无线的任何类型的网络接口(例如，网络接口卡(nic，networkinterfacecontroller))中的一个或多个，诸如ieee802.11无线局域网(wlan，wirelesslocalareanetwork)无线接口、全球微波互联接入(wi-max，worldwideinteroperabilityformicrowaveaccess)接口、以太网接口、通用串行总线(usb，universalserialbus)接口、蜂窝网络接口、蓝牙接口、近场通信(nfc，nearfieldcommunication)。
132.在本说明书的一个实施例中，计算设备600的上述部件以及图6中未示出的其他部件也可以彼此相连接，例如通过总线。应当理解，图6所示的计算设备结构框图仅仅是出于
示例的目的，而不是对本说明书范围的限制。本领域技术人员可以根据需要，增添或替换其他部件。
133.计算设备600可以是任何类型的静止或移动计算设备，包括移动计算机或移动计算设备(例如，平板计算机、个人数字助理、膝上型计算机、笔记本计算机、上网本等)、移动电话(例如，智能手机)、可佩戴的计算设备(例如，智能手表、智能眼镜等)或其他类型的移动设备，或者诸如台式计算机或个人计算机(pc，personalcomputer)的静止计算设备。计算设备600还可以是移动式或静止式的服务器。
134.其中，处理器620用于执行如下计算机可执行指令，该计算机可执行指令被处理器执行时实现上述文件处理方法的步骤。
135.本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于计算设备实施例而言，由于其基本相似于文件处理方法实施例，所以描述的比较简单，相关之处参见文件处理方法实施例的部分说明即可。
136.本说明书一实施例还提供一种计算机可读存储介质，其存储有计算机可执行指令，该计算机可执行指令被处理器执行时实现上述文件处理方法的步骤。
137.本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于计算机可读存储介质实施例而言，由于其基本相似于文件处理方法实施例，所以描述的比较简单，相关之处参见文件处理方法实施例的部分说明即可。
138.本说明书一实施例还提供一种计算机程序，其中，当所述计算机程序在计算机中执行时，令计算机执行上述文件处理方法的步骤。
139.本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于计算机程序实施例而言，由于其基本相似于文件处理方法实施例，所以描述的比较简单，相关之处参见文件处理方法实施例的部分说明即可。
140.上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。
141.所述计算机指令包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、u盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(rom，read-onlymemory)、随机存取存储器(ram，randomaccessmemory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。
142.需要说明的是，上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施
例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定都是本说明书实施例所必须的。
143.在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。
144.以上公开的本说明书优选实施例只是用于帮助阐述本说明书。可选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本说明书实施例的内容，可作很多的修改和变化。本说明书选取并具体描述这些实施例，是为了更好地解释本说明书实施例的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本说明书。本说明书仅受权利要求书及其全部范围和等效物的限制。

技术特征：
1.一种文件处理方法，包括：获取视觉稿源文件对应的目标结构文件；接收用户针对所述视觉稿源文件生成的初始代码文件，并对所述初始代码文件进行解析，获得待处理结构文件；比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息，获得比对结果；基于所述比对结果，调整所述待处理结构文件，生成所述视觉稿源文件对应的目标代码文件。2.根据权利要求1所述的方法，所述获取视觉稿源文件对应的目标结构文件，包括：接收视觉稿源文件；解析所述视觉稿源文件中的图层信息，获得视觉稿代码文件；基于所述视觉稿代码文件，确定目标结构文件。3.根据权利要求2所述的方法，所述基于所述视觉稿代码文件，确定目标结构文件，包括：解析所述视觉稿代码文件，生成所述视觉稿代码文件对应的节点结构树；将所述节点结构树中的节点信息，确定为目标结构文件。4.根据权利要求1所述的方法，所述对所述初始代码文件进行解析，获得待处理结构文件，包括：解析所述初始代码文件，生成所述初始代码文件对应的节点结构树；将所述节点结构树中的节点信息，确定为待处理结构文件。5.根据权利要求1所述的方法，所述比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息，包括：基于所述目标结构文件，确定所述视觉稿源文件对应的目标界面图像；基于所述待处理结构文件，确定所述视觉稿源文件对应的待比对界面图像；计算所述目标界面图像和所述待比对界面图像之间的图像相似度；基于所述图像相似度，比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息。6.根据权利要求5所述的方法，所述基于所述图像相似度，比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息，包括：在确定所述图像相似度满足预设阈值区间的情况下，比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息。7.根据权利要求1所述的方法，所述比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息，获得比对结果，包括：获取所述目标结构文件中的目标节点信息、以及所述待处理结构文件的待处理节点信息，其中，所述目标节点信息与所述待处理节点信息之间相关联；比对所述目标节点信息和所述待处理节点信息，获得比对结果，其中，所述比对结果包括数据差异结果和/或界面样式差异结果。8.根据权利要求1所述的方法，所述基于所述比对结果，调整所述待处理结构文件，包括：
基于所述比对结果，获取针对所述待处理结构文件的待调整信息；根据所述待调整信息调整所述待处理结构文件。9.一种文件处理装置，包括：文件获取模块，被配置为获取视觉稿源文件对应的目标结构文件；文件解析模块，被配置为接收用户针对所述视觉稿源文件生成的初始代码文件，并对所述初始代码文件进行解析，获得待处理结构文件；节点比对模块，被配置为比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息，获得比对结果；文件生成模块，被配置为基于所述比对结果，调整所述待处理结构文件，生成所述视觉稿源文件对应的目标代码文件。10.根据权利要求9所述的装置，所述文件获取模块，进一步被配置为：接收视觉稿源文件；解析所述视觉稿源文件中的图层信息，获得视觉稿代码文件；基于所述视觉稿代码文件，确定目标结构文件。11.根据权利要求10所述的装置，所述文件获取模块，进一步被配置为：解析所述视觉稿代码文件，生成所述视觉稿代码文件对应的节点结构树；将所述节点结构树中的节点信息，确定为目标结构文件。12.根据权利要求9所述的装置，所述文件解析模块，进一步被配置为：解析所述初始代码文件，生成所述初始代码文件对应的节点结构树；将所述节点结构树中的节点信息，确定为待处理结构文件。13.根据权利要求9所述的装置，所述节点比对模块，进一步被配置为：基于所述目标结构文件，确定所述视觉稿源文件对应的目标界面图像；基于所述待处理结构文件，确定所述视觉稿源文件对应的待比对界面图像；计算所述目标界面图像和所述待比对界面图像之间的图像相似度；基于所述图像相似度，比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息。14.根据权利要求13所述的装置，所述节点比对模块，进一步被配置为：在确定所述图像相似度满足预设阈值区间的情况下，比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息。15.根据权利要求9所述的装置，所述节点比对模块，进一步被配置为：获取所述目标结构文件中的目标节点信息、以及所述待处理结构文件的待处理节点信息，其中，所述目标节点信息与所述待处理节点信息之间相关联；比对所述目标节点信息和所述待处理节点信息，获得比对结果，其中，所述比对结果包括数据差异结果和/或界面样式差异结果。16.根据权利要求9所述的装置，所述文件生成模块，进一步被配置为：基于所述比对结果，获取针对所述待处理结构文件的待调整信息；根据所述待调整信息调整所述待处理结构文件。17.一种计算设备，包括：存储器和处理器；所述存储器用于存储计算机可执行指令，所述处理器用于执行所述计算机可执行指令，该计算机可执行指令被处理器执行时实现权利要求1至8任意一项所述文件处理方法的步骤。
18.一种计算机可读存储介质，其存储有计算机可执行指令，该计算机可执行指令被处理器执行时实现权利要求1至8任意一项所述文件处理方法的步骤。

技术总结
本说明书实施例提供文件处理方法以及装置，其中所述文件处理方法包括：获取视觉稿源文件对应的目标结构文件；接收用户针对所述视觉稿源文件生成的初始代码文件，并对所述初始代码文件进行解析，获得待处理结构文件；比对所述目标结构文件的节点信息和所述待处理结构文件的节点信息，获得比对结果；基于所述比对结果，调整所述待处理结构文件，生成所述视觉稿源文件对应的目标代码文件；该种方式能够快速准确地检测出用户生成的初始代码文件所渲染出的页面设计效果与视觉稿源文件的区别，便于对视觉稿源文件的页面设计进行还原。便于对视觉稿源文件的页面设计进行还原。便于对视觉稿源文件的页面设计进行还原。


技术研发人员：余盛褚 甘文鹏
受保护的技术使用者：浙江网商银行股份有限公司
技术研发日：2023.04.07
技术公布日：2023/7/13