前端代码生成方法及装置制造方法及图纸

本公开涉及计算机技术领域，尤其涉及一种前端代码生成方法及装置。其中，该前端代码生成方法，包括：接收第二终端发送的已标记视觉稿，并对已标记视觉稿进行节点解析，得到至少一个节点信息，其中，已标记视觉稿包括至少一个已标记视觉组件，已标记视觉组件与节点信息一一对应，节点信息包括组件标识和节点标记信息；根据设计组件库与前端组件库之间的对应关系，从前端组件库中获取至少一个组件标识对应的前端组件代码，其中，组件标识和前端组件代码一一对应；根据至少一段前端组件代码和至少一个节点标记信息，生成已标记视觉稿对应的前端代码。采用本公开可以提高前端代码的开发效率。率。率。

【技术实现步骤摘要】
前端代码生成方法及装置


[0001]本公开涉及计算机
，尤其涉及一种前端代码生成方法及装置。

技术介绍

[0002]随着互联网技术的发展，互联网的应用越来越广泛，越来越多的用户可以通过互联网进行网页浏览。用户想要浏览某网页时，用户终端可以从服务器获取该网页的前端代码，用户终端运行该前端代码以展示该网页。
[0003]在获取前端代码时，需要技术人员针对网页中的每个内容元素，分别手动编写其对应的显示代码，得到该网页的前端代码，从而导致前端代码的开发效率较低。

技术实现思路

[0004]本公开提供一种前端代码生成方法及装置，以至少解决相关技术中前端代码的开发效率较低的问题。本公开的技术方案如下：
[0005]根据本公开实施例的第一方面，提供一种前端代码生成方法，应用于第一终端，包括：
[0006]接收第二终端发送的已标记视觉稿，并对所述已标记视觉稿进行节点解析，得到至少一个节点信息，其中，所述已标记视觉稿包括至少一个已标记视觉组件，所述已标记视觉组件与所述节点信息一一对应，所述节点信息包括组件标识和节点标记信息；
[0007]根据设计组件库与前端组件库之间的对应关系，从所述前端组件库中获取至少一个组件标识对应的前端组件代码，其中，所述组件标识和所述前端组件代码一一对应；
[0008]根据至少一段前端组件代码和所述至少一个节点标记信息，生成所述已标记视觉稿对应的前端代码。
[0009]可选的，所述对所述已标记视觉稿进行节点解析，包括：
[0010]对所述已标记视觉稿进行校验；
[0011]在所述已标记视觉稿满足校验条件的情况下，对所述已标记视觉稿进行节点解析。
[0012]可选的，在所述对所述已标记视觉稿进行校验之后，还包括：
[0013]在所述已标记视觉稿不满足所述校验条件的情况下，发出提示信息，其中，所述提示信息用于指示所述已标记视觉稿未通过校验。
[0014]可选的，在所述根据设计组件库与前端组件库之间的对应关系，从所述前端组件库中获取至少一个组件名称对应的至少一段前端组件代码之前，还包括：
[0015]获取设计组件库中至少一个视觉组件对应的第一路径配置信息；
[0016]获取前端组件库中至少一个前端组件代码对应的第二路径配置信息；
[0017]接收针对任一第一路径配置信息的路径关联指令；
[0018]根据所述路径关联指令，在至少一个第二路径配置信息中确定与所述任一第一路径配置信息对应的第二路径配置信息；
[0019]对所述任一第一路径配置信息和所述任一第一路径配置信息对应的第二路径配置信息进行关联，得到所述设计组件库与前端组件库之间的对应关系。
[0020]可选的，所述根据所述至少一段前端组件代码和所述至少一个节点标记信息，生成所述已标记视觉稿对应的前端代码，包括：
[0021]确定所述至少一段前端组件代码和所述至少一个节点标记信息对应的抽象语法树；
[0022]获取初始前端框架，并将所述抽象语法树转换到所述初始前端框架中，得到所述已标记视觉稿对应的前端代码。
[0023]可选的，在所述生成所述已标记视觉稿对应的前端代码之后，还包括：
[0024]接收所述第二终端发送的所述已标记视觉稿中任一已标记视觉组件对应的替换组件；
[0025]获取所述任一已标记视觉组件对应的节点信息，并根据所述任一已标记视觉组件对应的节点信息对所述替换组件进行重命名，得到重命名后的替换组件；
[0026]根据所述任一已标记视觉组件对应的节点信息，将所述任一已标记视觉组件替换为所述重命名后的替换组件，得到资源替换后的前端代码。
[0027]根据本公开实施例的第二方面，提供一种前端代码生成方法，其特征在于，应用于第二终端，包括：
[0028]获取初始视觉稿，其中，所述初始视觉稿包括至少一个视觉组件；
[0029]对所述至少一个视觉组件中任一个视觉组件对应的组件标识按照节点类型进行标记，得到已标记视觉稿；
[0030]将所述已标记视觉稿发送至第一终端。
[0031]根据本公开实施例的第三方面，提供一种前端代码生成装置，包括：
[0032]节点解析单元，被配置为执行接收第二终端发送的已标记视觉稿，并对所述已标记视觉稿进行节点解析，得到至少一个节点信息，其中，所述已标记视觉稿包括至少一个已标记视觉组件，所述已标记视觉组件与所述节点信息一一对应，所述节点信息包括组件标识和节点标记信息；
[0033]代码获取单元，被配置为执行根据设计组件库与前端组件库之间的对应关系，从所述前端组件库中获取至少一个组件标识对应的前端组件代码，其中，所述组件标识和所述前端组件代码一一对应；
[0034]代码生成单元，被配置为执行根据至少一段前端组件代码和所述至少一个节点标记信息，生成所述已标记视觉稿对应的前端代码。
[0035]可选的，所述节点解析单元被配置为执行对所述已标记视觉稿进行节点解析时，具体被配置为执行：
[0036]对所述已标记视觉稿进行校验；
[0037]在所述已标记视觉稿满足校验条件的情况下，对所述已标记视觉稿进行节点解析。
[0038]可选的，所述节点解析单元被配置为执行在所述对所述已标记视觉稿进行校验之后，还被配置为执行：
[0039]在所述已标记视觉稿不满足所述校验条件的情况下，发出提示信息，其中，所述提
示信息用于指示所述已标记视觉稿未通过校验。
[0040]可选的，所述代码获取单元被配置为执行在所述根据设计组件库与前端组件库之间的对应关系，从所述前端组件库中获取至少一个组件名称对应的至少一段前端组件代码之前，还被配置为执行：
[0041]获取设计组件库中至少一个视觉组件对应的第一路径配置信息；
[0042]获取前端组件库中至少一个前端组件代码对应的第二路径配置信息；
[0043]接收针对任一第一路径配置信息的路径关联指令；
[0044]根据所述路径关联指令，在至少一个第二路径配置信息中确定与所述任一第一路径配置信息对应的第二路径配置信息；
[0045]对所述任一第一路径配置信息和所述任一第一路径配置信息对应的第二路径配置信息进行关联，得到所述设计组件库与前端组件库之间的对应关系。
[0046]可选的，所述代码生成单元被配置为执行根据所述至少一段前端组件代码和所述至少一个节点标记信息，生成所述已标记视觉稿对应的前端代码时，具体被配置为执行：
[0047]确定所述至少一段前端组件代码和所述至少一个节点标记信息对应的抽象语法树；
[0048]获取初始前端框架，并将所述抽象语法树转换到所述初始前端框架中，得到所述已标记视觉稿对应的前端代码。
[0049]可选的，代码生成单元，被配置为执行在所述生成所述已标记视觉稿对应的前端代码之后，还被配置为执行：
[0050]接收所述第二终端发送的所述已标本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端代码生成方法，其特征在于，应用于第一终端，包括：接收第二终端发送的已标记视觉稿，并对所述已标记视觉稿进行节点解析，得到至少一个节点信息，其中，所述已标记视觉稿包括至少一个已标记视觉组件，所述已标记视觉组件与所述节点信息一一对应，所述节点信息包括组件标识和节点标记信息；根据设计组件库与前端组件库之间的对应关系，从所述前端组件库中获取至少一个组件标识对应的前端组件代码，其中，所述组件标识和所述前端组件代码一一对应；根据至少一段前端组件代码和所述至少一个节点标记信息，生成所述已标记视觉稿对应的前端代码。2.根据权利要求1的方法，其特征在于，所述对所述已标记视觉稿进行节点解析，包括：对所述已标记视觉稿进行校验；在所述已标记视觉稿满足校验条件的情况下，对所述已标记视觉稿进行节点解析。3.根据权利要求2的方法，其特征在于，在所述对所述已标记视觉稿进行校验之后，还包括：在所述已标记视觉稿不满足所述校验条件的情况下，发出提示信息，其中，所述提示信息用于指示所述已标记视觉稿未通过校验。4.根据权利要求1的方法，其特征在于，在所述根据设计组件库与前端组件库之间的对应关系，从所述前端组件库中获取至少一个组件名称对应的至少一段前端组件代码之前，还包括：获取设计组件库中至少一个视觉组件对应的第一路径配置信息；获取前端组件库中至少一个前端组件代码对应的第二路径配置信息；接收针对任一第一路径配置信息的路径关联指令；根据所述路径关联指令，在至少一个第二路径配置信息中确定与所述任一第一路径配置信息对应的第二路径配置信息；对所述任一第一路径配置信息和所述任一第一路径配置信息对应的第二路径配置信息进行关联，得到所述设计组件库与前端组件库之间的对应关系。5.根据权利要求1的方法，其特征在于，所述根据所述至少一段前端组件代码和所述至少一个节点标记信息，生成所述已标记视觉稿对应的前端代码，包括：确定所述至少一段前端组件代码和所述至少一个节点标记信息对应的抽象语法树；获取初始前端框...

【专利技术属性】
技术研发人员：任跃华，李伟，史玉玉，
申请(专利权)人：北京达佳互联信息技术有限公司，
类型：发明
国别省市：