前端代码生成方法、装置、设备及计算机可读存储介质与流程

1.本发明实施例涉及网页开发技术领域，具体涉及一种前端代码生成方法、装置、设备及计算机可读存储介质。


背景技术：

2.在前端网页开发技术中，代码是实现网页和应用程序基础。然而，手动编写代码需要花费大量时间和精力，代码编写过程也存在大部分的重复性工作，且在手动编写代码过程中容易出现错误、漏洞等。
3.目前，虽然开发人员可通过前端模块化技术，在可视化平台中拖拽、编辑模块组件完成对前端页面的定义，但这些组件也依赖开发人员进行编写，并且此种方法仅能简单地定义前端的页面布局等数据，对于前端页面的数据交互逻辑却很难进行完善，因此，当前的前端界面开发效率依然亟待提升。


技术实现要素：

4.鉴于上述问题，本发明实施例提供了一种前端代码生成方法、装置、设备及计算机可读存储介质，用于解决现有技术中存在前端界面开发效率低下的问题。
5.根据本发明实施例的一个方面，提供了一种前端代码生成方法，所述方法包括：获取接口开发文档和所述接口开发文档对应的参考页面；根据所述接口开发文档进行代码生成，得到接口代码文件；以及，基于所述参考页面中的页面信息生成页面代码文件；整合所述接口代码文件和所述页面代码文件，得到前端代码文件。
6.在一种可选的方式中，所述接口开发文档含有至少一个开发模块；所述根据所述接口开发文档进行代码生成，得到接口代码文件的步骤，进一步包括：获取所述接口开发文档含有的开发模块；对所述开发模块进行解析，得到所述开发模块对应的开发数据；基于预设代码生成规则将所述开发模块对应的开发数据进行代码转换，得到所述开发模块对应的代码片段；基于所述开发模块对应的代码片段得到所述接口代码文件。
7.在一种可选的方式中，所述基于预设代码生成规则将所述开发模块对应的开发数据进行代码转换，得到所述开发模块对应的代码片段的步骤，进一步包括：根据各开发模块的数据结构，分别提取所述各开发模块对应的开发数据的字段描述；基于各字段描述生成所述各开发模块对应的代码片段；所述基于所述开发模块对应的代码片段得到所述接口代码文件的步骤，进一步包括：将各代码片段进行整合，得到所述接口代码文件。
8.在一种可选的方式中，所述基于所述参考页面中的页面信息生成页面代码文件的步骤，进一步包括：解析所述参考页面，得到所述页面信息，所述页面信息包括页面布局和页面样式；根据所述页面布局生成页面布局代码；以及，根据所述页面样式生成页面样式代码；整合所述页面布局代码和所述页面样式代码，得到所述页面代码文件。
9.在一种可选的方式中，所述根据所述页面布局生成页面布局代码的步骤，进一步包括：遍历所述参考页面中的页面元素，提取各页面元素的元素信息；基于所述各页面元素
的元素信息确定所述各页面元素的代码嵌套关系；根据各元素信息和所述代码嵌套关系生成所述页面布局代码。
10.在一种可选的方式中，所述元素信息包括所述页面元素的元素坐标；所述遍历所述参考页面中的页面元素，提取各页面元素的元素信息的步骤，进一步包括：根据所述参考页面建立页面坐标系；基于所述页面坐标系提取所述各页面元素的元素坐标；所述基于各页面元素的元素信息确定所述各页面元素的代码嵌套关系的步骤，进一步包括：根据所述各页面元素的元素坐标确定所述各页面元素的元素尺寸；将所述各页面元素的元素尺寸进行对比；基于所述各页面元素的元素尺寸之间的对比结果和所述各页面元素的元素坐标确定所述各页面元素的代码嵌套关系。
11.在一种可选的方式中，所述根据所述页面样式生成页面样式代码的步骤，进一步包括：遍历所述参考页面中的页面元素；提取所述页面元素的元素信息；按照预设的样式解析算法将所述元素信息进行映射，得到所述页面样式代码。
12.根据本发明实施例的另一方面，提供了一种前端代码生成装置，包括：获取模块，用于获取接口开发文档和所述接口开发文档对应的参考页面；代码生成模块，用于根据所述接口开发文档进行代码生成，得到接口代码文件；以及，基于所述参考页面中的页面信息生成页面代码文件；代码整合模块，用于整合所述接口代码文件和所述页面代码文件，得到前端代码文件。
13.根据本发明实施例的另一方面，提供了一种电子设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行如权利要求1-7任意一项所述的前端代码生成方法的操作。
14.根据本发明实施例的又一方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一可执行指令，所述可执行指令在电子设备/前端代码生成装置上运行时，使得电子设备/前端代码生成装置执行如权利要求1-7任意一项所述的前端代码生成方法的操作。
15.本发明实施例获取接口开发文档和接口开发文档对应的参考页面；根据所述接口开发文档进行代码生成，得到接口代码文件；以及，基于所述参考页面中的页面信息生成页面代码文件，使前端开发过程中逻辑开发和页面开发分离，分别得到的代码文件的结构清晰，提升了代码文件的可维护性；通过整合所述接口代码文件和所述页面代码文件，得到前端代码文件，使得前端代码文件结构完整，根据前端代码文件能实现前端界面，本发明能够提升前端界面开发效率。
16.应当理解的是，上述说明仅是本发明实施例技术方案的概述，为了能够更清楚了解本发明实施例的技术手段，而可依照说明书的内容予以实施，并且为了让本发明实施例的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
17.附图仅用于示出实施方式，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
18.图1示出了本发明提供的前端代码生成方法的第一实施例的流程示意图；
19.图2示出了本发明提供的前端代码生成方法中前端和后端通过api进行交互的效果示意图；
20.图3示出了本发明提供的前端代码生成方法中根据接口开发文档进行代码生成的流程示意图；
21.图4示出了本发明提供的前端代码生成装置的结构示意图；
22.图5示出了本发明提供的电子设备的实施例的结构示意图。
具体实施方式
23.下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例所限制。
24.需要前提说明的是，在本技术的具体实施方式中，涉及到的接口开发文档、参考页面、页面信息以及用户数据等相关数据，当本技术以上实施例运用到具体产品或技术中时，需要获得用户许可或者同意，且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。
25.图1示出了本发明前端代码生成方法的第一实施例的流程图，该方法可由计算机设备执行。如图1所示，该方法包括以下步骤：
26.步骤110，获取接口开发文档和接口开发文档对应的参考页面。
27.其中，接口开发文档指的是应用程序编程接口(applicationprogramming interface，api)文档，是软件开发过程中后端开发阶段对应的产出文档，可参考图2，图2示出了前端和后端如何通过api进行交互的效果示意图，api中封装了一些预先定义的函数，使得开发人员无需访问源码就能调用api对应的功能，相当于api文档记载了在通过前端将数据传输至后端之后，后端如何从前端接收数据进行后端逻辑处理，是软件系统不同组成部分之间衔接的约定，需要说明的是，前端和后端需要通过api接口进行交互，才能在前端界面中实现更深层次的功能。
28.参考页面指的是在前端界面开发过程中用于提供参考的页面，参考页面可以包括但不限于交互设计图、页面图片、页面代码中的至少一种，其中，页面代码指的是如超文本标记语言(hypertextmark-uplanguage，html)等能够制作页面的代码。
29.示例性地，获取接口开发文档和参考页面的方式可以是从预设的开发数据库中进行获取，也可以是通过网络爬虫技术进行合法获取，尤其是参考页面，还可以通过网页快照等技术获取；其中，接口开发文档和参考页面相对应指的是接口开发文档应当和参考页面适配，即接口开发文档能够和参考页面关联并进行数据交互。
30.步骤120，根据接口开发文档进行代码生成，得到接口代码文件；以及，基于参考页面中的页面信息生成页面代码文件。
31.其中，接口代码文件指的是包含如javascript等代码语言的文件，通过运行接口代码文件可以获取文件中包含的接口，并能用于通过网络进行的数据请求和/或数据响应。
32.页面代码文件指的是包含如html、css(cascadingstylesheets)等代码语言的文件，通过运行页面代码文件可以得到由页面代码表征的前端页面。
33.具体地，接口代码文件和页面代码文件中的代码生成的过程可以分别基于预设的
代码生成脚本实现，其中，代码生成脚本可以有一个或多个，以多个代码生成脚本为例，接口代码生成脚本在接收到接口开发文档后，解析接口开发文档中的文本，将解析到的文本转换为对应的接口代码；页面代码生成脚本在接收到参考页面后，解析参考页面中的页面信息，将解析到的页面信息转换为对应的页面代码。
34.步骤130，整合接口代码文件和页面代码文件，得到前端代码文件。
35.前端代码文件指的是能够实现前端界面的代码文件，为便于说明，本技术中将前端界面和前端页面作出一定区别，前端界面指的是既能前端展示又能进行数据交互的界面，而前端页面指的是仅能前端展示的页面。
36.具体地，整合接口代码文件和页面代码文件的过程包括，通过接口代码文件确定接口信息，如接口名称、参数、返回值等，其中，通过接口将参数输入后端即能得到后端通过接口输出的返回值，此外，还需要考虑数据交互的格式和传递方式，如json(javascriptobjectnotation)、xml(extensible markuplanguage)等；基于接口输出的返回值在页面代码文件中确定前端页面中显示返回值的页面元素，其中，可以通过ajax(asynchronousjavascript andxml)、fetch等技术对前端页面进行处理，以使接口代码文件和页面代码文件关联；进一步地，还可以测试接口代码和页面代码之间的数据交互和数据处理是否异常，当测试通过后，得到整合成功的前端代码文件，即能将前端界面在服务器部署上线，通过前端代码文件显示前端界面；需要说明的是，在服务器部署上线过程中除了需要部署前端代码文件，还需要部署后端代码文件，此为本领域技术人员熟知技术且不为本技术所需重点说明的方案，因此，在此不再赘述。
37.可以看出，本技术通过获取接口开发文档和接口开发文档对应的参考页面；根据接口开发文档进行代码生成，得到接口代码文件；以及，基于参考页面中的页面信息生成页面代码文件，使前端开发过程中逻辑开发和页面开发分离，分别得到的代码文件的结构清晰，提升了代码文件的可维护性；通过整合接口代码文件和页面代码文件，得到前端代码文件，使得前端代码文件结构完整，根据前端代码文件能实现前端界面，本发明能够提升前端界面开发效率。
38.在上述实施例的基础上，本实施例对根据接口开发文档进行代码生成，得到接口代码文件的步骤进行示例性地说明，可参考图3，图3示出了本发明前端代码生成方法中根据接口开发文档进行代码生成，得到接口代码文件的流程图，其中，接口开发文档含有至少一个开发模块。具体而言，该方法包括以下步骤：
39.步骤310，获取接口开发文档含有的开发模块。
40.开发模块是接口开发文档在模块化开发过程中形成的模块，每个开发模块中的代码通常对应不同的代码功能，如数据请求模块、数据响应模块以及网络基本信息模块等。
41.具体地，在获取到接口开发文档后，对接口开发文档中的文本进行循环解析以识别接口开发文档中的开发模块，将识别出的开发模块进行分离。
42.步骤320，对开发模块进行解析，得到开发模块对应的开发数据。
43.其中，开发数据指的就是开发模块中用于实现代码功能的数据。
44.示例性地，分别抓取各开发模块中的文本，将文本通过预设的代码逻辑转换为生成代码所需要的开发数据，这些开发数据可以是json数据，json是一种轻量级的数据交换格式，便于机器对数据进行解析和生成，适用于进行数据交互的场景，如网站前端和后端之
间的数据交互，在javascript语言中，一切数据皆是对象，所以任何支持的数据类型都可以通过json来表示，如字符串、数字、对象、数组等。
45.步骤330，基于预设代码生成规则将开发模块对应的开发数据进行代码转换，得到开发模块对应的代码片段。
46.具体地，基于预设的代码生成规则将各开发模块对应的json数据分别转换为javascript代码，得到各开发模块对应的代码片段，其中预设的代码生成规则主要是根据json数据和所要生成的目标代码如javascript代码的主体内容确定，代码主体内容可以为：1.调用的方法名称，如http(hypertext transferprotocol)方法，用于为客户端和服务器之间提供请求和应答的协议；2.响应数据结构，响应是服务端回复客户端的内容，通常情况下响应数据结构包括状态行，响应头，响应正文；3.请求数据结构，请求是客户端发送给服务端的内容，通常情况下请求数据结构包括请求行，消息头，消息正文；不同的主体内容也正好将接口开发文档划分成了多个开发模块，将json数据按照javascript代码的不同主体内容进行转换，得到对应的代码片段。
47.步骤340，基于开发模块对应的代码片段得到接口代码文件。
48.接口代码文件指的就是基于代码片段得到完整的javascript接口代码文件，其中包含了根据各个开发模块生成的网络基本请求文件(包含网络协议、方法名等网络基本信息)、数据结构类型文件等。
49.可以看出，本实施例通过以上步骤将接口开发文档解析、转换成接口代码文件，以使所需开发的前端界面具备数据交互和数据处理的能力，从处理数据的角度提升了前端界面的开发效率。
50.在上述实施例的基础上，本实施例对基于预设代码生成规则将开发模块对应的开发数据进行代码转换，得到开发模块对应的代码片段的步骤进行示例性地说明，本实施例包括：
51.根据各开发模块的数据结构，分别提取各开发模块对应的开发数据的字段描述；基于各字段描述生成各开发模块对应的代码片段；基于开发模块对应的代码片段得到接口代码文件的步骤，进一步包括：将各代码片段进行整合，得到接口代码文件。
52.示例性地，可以利用遍历树的逻辑逐步遍历json数据；根据各开发模块的数据结构，如请求数据结构、响应数据结构以及网络基本信息，分别提取各开发模块对应的开发数据的字段描述；基于各字段描述生成包含代码片段的代码文本；通过调用系统文件系统，将各代码文本整合，即得到接口代码文件。
53.可以见得，本实施例基于不同的开发模块将从接口开发文档获取到的json数据分别进行解析和处理，降低了数据处理的复杂度；在处理完json数据得到各接口代码后，通过文件系统将代码片段整合，得到完整的接口代码文件，为前端、后端的数据交互提供条件。
54.在上述实施例的基础上，本实施例对基于参考页面中的页面信息生成页面代码文件的步骤进行示例性地说明，具体包括：解析参考页面，得到页面信息，页面信息包括页面布局和页面样式；根据页面布局生成页面布局代码；以及，根据页面样式生成页面样式代码；整合页面布局代码和页面样式代码，得到页面代码文件。
55.其中，页面信息指的是页面中页面元素的信息，页面元素指的是页面中所含有的对象，这些对象组成了页面，这些对象可以是文字、图片、视频等，能以导航栏、搜索框以及
页面横幅等组件进行表示，页面信息包括页面元素的布局和页面元素的样式，页面布局指的就是页面元素在页面中的排版布局，相当于html代码所表征的内容，页面样式指的就是页面元素外观，如颜色、大小、字体等，相当于css代码所表征的内容。
56.具体地，解析参考页面得到页面信息，其中解析的过程包括通过如opencv等图像处理技术对图像形式的参考页面进行识别，得到参考页面中的页面元素和页面元素的页面信息，或是通过爬虫技术和特征提取对代码形式的参考页面进行识别，得到参考页面中的页面元素和页面元素的页面信息，这些页面信息可以用imgjson的数据形式表示，包括但不限于页面元素在画布中的坐标、尺寸以及颜色等属性；根据页面信息的数据类型不同，基于页面布局生成页面布局代码以及基于页面样式生成页面样式代码；整合页面布局代码和页面样式代码，得到页面代码文件，页面代码文件就能够实现将前端页面进行显示。
57.由上可知，本技术将参考页面的页面元素从布局和样式两个维度进行解析和代码生成，分别得到页面布局代码和页面样式代码，基于页面布局代码和页面样式代码进行代码整合得到所开发的目标前端页面的页面代码文件，进而实现对前端页面的显示。
58.在上述实施例的基础上，本实施例对根据页面布局生成页面布局代码的步骤，进行进一步说明，具体包括：遍历参考页面中的页面元素，提取各页面元素的元素信息；基于各页面元素的元素信息确定各页面元素的代码嵌套关系；根据各元素信息和代码嵌套关系生成页面布局代码。
59.可以理解的是，以市面上各种网页、应用软件为例，其界面中页面元素通常不会全部呈现在同一层级上，即页面元素可能会存在嵌套关系、重叠关系等，对应地，各页面元素间的关系也会基于页面代码进行实现。
60.具体地，同样可以根据遍历树的逻辑对页面元素进行比那里，得到页面元素的元素信息，其元素信息可以通过数组对象的形式进行表示；基于各页面元素的元素信息，确定各页面元素的层级和各页面元素的位置坐标，进而确定各页面元素的嵌套关系，即相当于得到页面元素的代码嵌套关系；在生成页面布局代码时依据代码嵌套关系进行生成，则能得到具有嵌套层级显示效果的页面布局代码。
61.在上述实施例的基础上，本实施例对遍历参考页面中的页面元素，提取各页面元素的元素信息的步骤进行示例性地说明，其中，元素信息包括页面元素的元素坐标。具体而言，包括：根据参考页面建立页面坐标系；基于页面坐标系提取各页面元素的元素坐标；基于各页面元素的元素信息确定各页面元素的代码嵌套关系的步骤，进一步包括：根据各页面元素的元素坐标确定各页面元素的元素尺寸；将各页面元素的元素尺寸进行对比；基于各页面元素的元素尺寸之间的对比结果和各页面元素的元素坐标确定各页面元素的代码嵌套关系。
62.结合前述实施例进行说明，以元素坐标为例，以显示前端页面的画布为准建立页面坐标系；通过页面坐标系中各页面元素的元素坐标确定各页面元素的元素位置和元素尺寸；将各页面元素的元素尺寸进行对比，可选地，还可以是将元素位置匹配的页面元素的元素尺寸进行对比，可以理解的是，对于相匹配的元素位置的页面元素，元素尺寸较大的页面元素的层级应当处于元素尺寸较小的页面元素的下方，否则元素尺寸较大的页面元素会遮挡元素尺寸较小的页面元素；由此得以确定各页面元素的代码嵌套关系。
63.在上述实施例的基础上，本实施例对根据页面样式生成页面样式代码的步骤进行
说明。具体而言，本实施例包括：遍历参考页面中的页面元素；提取页面元素的元素信息；按照预设的样式解析算法将元素信息进行映射，得到页面样式代码。
64.示例性地，通过遍历参考页面中的页面元素，得到页面元素的元素信息；基于预设的样式解析算法，提取各元素信息对应的css样式代码；标记样式代码所属的页面元素的id标识，完成样式映射，得到页面样式代码；以页面元素的页面坐标为例，获取某一页面元素的x坐标和y坐标，将基于x坐标和y坐标确定页面元素的尺寸信息映射至页面元素的样式，如宽度width和高度height；后续将页面样式代码和页面布局代码进行整合，即依据页面样式代码中页面元素的id标识和页面布局代码中页面元素的id标识的对应关系，则能实现将页面样式代码中的样式表征在经过页面布局的页面元素中。
65.图4示出了本发明的前端代码生成装置的实施例的结构示意图。如图4所示，该装置400包括：获取模块410，用于获取接口开发文档和接口开发文档对应的参考页面；代码生成模块420，用于根据接口开发文档进行代码生成，得到接口代码文件；以及，基于参考页面中的页面信息生成页面代码文件；代码整合模块430，用于整合接口代码文件和页面代码文件，得到前端代码文件。
66.在一种可选的方式中，接口开发文档含有至少一个开发模块；根据接口开发文档进行代码生成，得到接口代码文件的步骤，进一步包括：获取接口开发文档含有的开发模块；对开发模块进行解析，得到开发模块对应的开发数据；基于预设代码生成规则将开发模块对应的开发数据进行代码转换，得到开发模块对应的代码片段；基于开发模块对应的代码片段得到接口代码文件。
67.在一种可选的方式中，基于预设代码生成规则将开发模块对应的开发数据进行代码转换，得到开发模块对应的代码片段的步骤，进一步包括：根据各开发模块的数据结构，分别提取各开发模块对应的开发数据的字段描述；基于各字段描述生成各开发模块对应的代码片段；基于开发模块对应的代码片段得到接口代码文件的步骤，进一步包括：将各代码片段进行整合，得到接口代码文件。
68.在一种可选的方式中，基于参考页面中的页面信息生成页面代码文件的步骤，进一步包括：解析参考页面，得到页面信息，页面信息包括页面布局和页面样式；根据页面布局生成页面布局代码；以及，根据页面样式生成页面样式代码；整合页面布局代码和页面样式代码，得到页面代码文件。
69.在一种可选的方式中，根据页面布局生成页面布局代码的步骤，进一步包括：遍历参考页面中的页面元素，提取各页面元素的元素信息；基于各页面元素的元素信息确定各页面元素的代码嵌套关系；根据各元素信息和代码嵌套关系生成页面布局代码。
70.在一种可选的方式中，元素信息包括页面元素的元素坐标；遍历参考页面中的页面元素，提取各页面元素的元素信息的步骤，进一步包括：根据参考页面建立页面坐标系；基于页面坐标系提取各页面元素的元素坐标；基于各页面元素的元素信息确定各页面元素的代码嵌套关系的步骤，进一步包括：根据各页面元素的元素坐标确定各页面元素的元素尺寸；将各页面元素的元素尺寸进行对比；基于各页面元素的元素尺寸之间的对比结果和各页面元素的元素坐标确定各页面元素的代码嵌套关系。
71.在一种可选的方式中，根据页面样式生成页面样式代码的步骤，进一步包括：遍历参考页面中的页面元素；提取页面元素的元素信息；按照预设的样式解析算法将元素信息
进行映射，得到页面样式代码。
72.上述方案，通过获取接口开发文档和接口开发文档对应的参考页面；根据接口开发文档进行代码生成，得到接口代码文件；以及，基于参考页面中的页面信息生成页面代码文件，使前端开发过程中逻辑开发和页面开发分离，分别得到的代码文件的结构清晰，提升了代码文件的可维护性；通过整合接口代码文件和页面代码文件，得到前端代码文件，使得前端代码文件结构完整，根据前端代码文件能实现前端界面，本发明能够提升前端界面开发效率。
73.图5示出了本发明电子设备的实施例的结构示意图，本发明具体实施例并不对电子设备的具体实现做限定。
74.如图5所示，该电子设备可以包括：处理器(processor)502、通信接口(communicationsinterface)505、存储器(memory)506、以及通信总线508。
75.其中：处理器502、通信接口505、以及存储器506通过通信总线508完成相互间的通信。通信接口505，用于与其它设备比如客户端或其它服务器等的网元通信。处理器502，用于执行程序510，具体可以执行上述用于前端代码生成方法实施例中的相关步骤。
76.具体地，程序510可以包括程序代码，该程序代码包括计算机可执行指令。
77.处理器502可能是中央处理器cpu，或者是特定集成电路asic(applicationspecificintegratedcircuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。电子设备包括的一个或多个处理器，可以是同一类型的处理器，如一个或多个cpu；也可以是不同类型的处理器，如一个或多个cpu以及一个或多个asic。
78.存储器506，用于存放程序510。存储器506可能包含高速ram存储器，也可能还包括非易失性存储器(non-volatilememory)，例如至少一个磁盘存储器。
79.程序510具体可以被处理器502调用使电子设备执行以下操作：
80.获取接口开发文档和接口开发文档对应的参考页面；根据接口开发文档进行代码生成，得到接口代码文件；以及，基于参考页面中的页面信息生成页面代码文件；整合接口代码文件和页面代码文件，得到前端代码文件。
81.在一种可选的方式中，接口开发文档含有至少一个开发模块；根据接口开发文档进行代码生成，得到接口代码文件的步骤，进一步包括：获取接口开发文档含有的开发模块；对开发模块进行解析，得到开发模块对应的开发数据；基于预设代码生成规则将开发模块对应的开发数据进行代码转换，得到开发模块对应的代码片段；基于开发模块对应的代码片段得到接口代码文件。
82.在一种可选的方式中，基于预设代码生成规则将开发模块对应的开发数据进行代码转换，得到开发模块对应的代码片段的步骤，进一步包括：根据各开发模块的数据结构，分别提取各开发模块对应的开发数据的字段描述；基于各字段描述生成各开发模块对应的代码片段；基于开发模块对应的代码片段得到接口代码文件的步骤，进一步包括：将各代码片段进行整合，得到接口代码文件。
83.在一种可选的方式中，基于参考页面中的页面信息生成页面代码文件的步骤，进一步包括：解析参考页面，得到页面信息，页面信息包括页面布局和页面样式；根据页面布局生成页面布局代码；以及，根据页面样式生成页面样式代码；整合页面布局代码和页面样式代码，得到页面代码文件。
84.在一种可选的方式中，根据页面布局生成页面布局代码的步骤，进一步包括：遍历参考页面中的页面元素，提取各页面元素的元素信息；基于各页面元素的元素信息确定各页面元素的代码嵌套关系；根据各元素信息和代码嵌套关系生成页面布局代码。
85.在一种可选的方式中，元素信息包括页面元素的元素坐标；遍历参考页面中的页面元素，提取各页面元素的元素信息的步骤，进一步包括：根据参考页面建立页面坐标系；基于页面坐标系提取各页面元素的元素坐标；基于各页面元素的元素信息确定各页面元素的代码嵌套关系的步骤，进一步包括：根据各页面元素的元素坐标确定各页面元素的元素尺寸；将各页面元素的元素尺寸进行对比；基于各页面元素的元素尺寸之间的对比结果和各页面元素的元素坐标确定各页面元素的代码嵌套关系。
86.在一种可选的方式中，根据页面样式生成页面样式代码的步骤，进一步包括：遍历参考页面中的页面元素；提取页面元素的元素信息；按照预设的样式解析算法将元素信息进行映射，得到页面样式代码。
87.上述方案，通过获取接口开发文档和接口开发文档对应的参考页面；根据接口开发文档进行代码生成，得到接口代码文件；以及，基于参考页面中的页面信息生成页面代码文件，使前端开发过程中逻辑开发和页面开发分离，分别得到的代码文件的结构清晰，提升了代码文件的可维护性；通过整合接口代码文件和页面代码文件，得到前端代码文件，使得前端代码文件结构完整，根据前端代码文件能实现前端界面，本发明能够提升前端界面开发效率。
88.本发明实施例提供了一种计算机可读存储介质，存储介质存储有至少一可执行指令，该可执行指令在电子设备/前端代码生成装置上运行时，使得电子设备/前端代码生成装置执行上述任意方法实施例中的前端代码生成方法。
89.可执行指令具体可以用于使电子设备/前端代码生成装置执行以下操作：
90.获取接口开发文档和接口开发文档对应的参考页面；根据接口开发文档进行代码生成，得到接口代码文件；以及，基于参考页面中的页面信息生成页面代码文件；整合接口代码文件和页面代码文件，得到前端代码文件。
91.在一种可选的方式中，接口开发文档含有至少一个开发模块；根据接口开发文档进行代码生成，得到接口代码文件的步骤，进一步包括：获取接口开发文档含有的开发模块；对开发模块进行解析，得到开发模块对应的开发数据；基于预设代码生成规则将开发模块对应的开发数据进行代码转换，得到开发模块对应的代码片段；基于开发模块对应的代码片段得到接口代码文件。
92.在一种可选的方式中，基于预设代码生成规则将开发模块对应的开发数据进行代码转换，得到开发模块对应的代码片段的步骤，进一步包括：根据各开发模块的数据结构，分别提取各开发模块对应的开发数据的字段描述；基于各字段描述生成各开发模块对应的代码片段；基于开发模块对应的代码片段得到接口代码文件的步骤，进一步包括：将各代码片段进行整合，得到接口代码文件。
93.在一种可选的方式中，基于参考页面中的页面信息生成页面代码文件的步骤，进一步包括：解析参考页面，得到页面信息，页面信息包括页面布局和页面样式；根据页面布局生成页面布局代码；以及，根据页面样式生成页面样式代码；整合页面布局代码和页面样式代码，得到页面代码文件。
94.在一种可选的方式中，根据页面布局生成页面布局代码的步骤，进一步包括：遍历参考页面中的页面元素，提取各页面元素的元素信息；基于各页面元素的元素信息确定各页面元素的代码嵌套关系；根据各元素信息和代码嵌套关系生成页面布局代码。
95.在一种可选的方式中，元素信息包括页面元素的元素坐标；遍历参考页面中的页面元素，提取各页面元素的元素信息的步骤，进一步包括：根据参考页面建立页面坐标系；基于页面坐标系提取各页面元素的元素坐标；基于各页面元素的元素信息确定各页面元素的代码嵌套关系的步骤，进一步包括：根据各页面元素的元素坐标确定各页面元素的元素尺寸；将各页面元素的元素尺寸进行对比；基于各页面元素的元素尺寸之间的对比结果和各页面元素的元素坐标确定各页面元素的代码嵌套关系。
96.在一种可选的方式中，根据页面样式生成页面样式代码的步骤，进一步包括：遍历参考页面中的页面元素；提取页面元素的元素信息；按照预设的样式解析算法将元素信息进行映射，得到页面样式代码。
97.上述方案，通过获取接口开发文档和接口开发文档对应的参考页面；根据接口开发文档进行代码生成，得到接口代码文件；以及，基于参考页面中的页面信息生成页面代码文件，使前端开发过程中逻辑开发和页面开发分离，分别得到的代码文件的结构清晰，提升了代码文件的可维护性；通过整合接口代码文件和页面代码文件，得到前端代码文件，使得前端代码文件结构完整，根据前端代码文件能实现前端界面，本发明能够提升前端界面开发效率。
98.在此提供的算法或显示不与任何特定计算机、虚拟系统或者其它设备固有相关。此外，本发明实施例也不针对任何特定编程语言。
99.在此处所提供的说明书中，说明了大量具体细节。然而能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。类似地，为了精简本发明并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明实施例的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。其中，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。
100.本领域技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外。
101.应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。上述实施例中的步骤，除有特殊说明外，不应理解为对执行顺序的限定。

技术特征：
1.一种前端代码生成方法，其特征在于，所述方法包括：获取接口开发文档和所述接口开发文档对应的参考页面；根据所述接口开发文档进行代码生成，得到接口代码文件；以及，基于所述参考页面中的页面信息生成页面代码文件；整合所述接口代码文件和所述页面代码文件，得到前端代码文件。2.根据权利要求1所述的方法，其特征在于，所述接口开发文档含有至少一个开发模块；所述根据所述接口开发文档进行代码生成，得到接口代码文件的步骤，进一步包括：获取所述接口开发文档含有的开发模块；对所述开发模块进行解析，得到所述开发模块对应的开发数据；基于预设代码生成规则将所述开发模块对应的开发数据进行代码转换，得到所述开发模块对应的代码片段；基于所述开发模块对应的代码片段得到所述接口代码文件。3.根据权利要求2所述的方法，其特征在于，所述基于预设代码生成规则将所述开发模块对应的开发数据进行代码转换，得到所述开发模块对应的代码片段的步骤，进一步包括：根据各开发模块的数据结构，分别提取所述各开发模块对应的开发数据的字段描述；基于各字段描述生成所述各开发模块对应的代码片段；所述基于所述开发模块对应的代码片段得到所述接口代码文件的步骤，进一步包括：将各代码片段进行整合，得到所述接口代码文件。4.根据权利要求1所述的方法，其特征在于，所述基于所述参考页面中的页面信息生成页面代码文件的步骤，进一步包括：解析所述参考页面，得到所述页面信息，所述页面信息包括页面布局和页面样式；根据所述页面布局生成页面布局代码；以及，根据所述页面样式生成页面样式代码；整合所述页面布局代码和所述页面样式代码，得到所述页面代码文件。5.根据权利要求4所述的方法，其特征在于，所述根据所述页面布局生成页面布局代码的步骤，进一步包括：遍历所述参考页面中的页面元素，提取各页面元素的元素信息；基于所述各页面元素的元素信息确定所述各页面元素的代码嵌套关系；根据各元素信息和所述代码嵌套关系生成所述页面布局代码。6.根据权利要求5所述的方法，其特征在于，所述元素信息包括所述页面元素的元素坐标；所述遍历所述参考页面中的页面元素，提取各页面元素的元素信息的步骤，进一步包括：根据所述参考页面建立页面坐标系；基于所述页面坐标系提取所述各页面元素的元素坐标；所述基于各页面元素的元素信息确定所述各页面元素的代码嵌套关系的步骤，进一步包括：根据所述各页面元素的元素坐标确定所述各页面元素的元素尺寸；将所述各页面元素的元素尺寸进行对比；基于所述各页面元素的元素尺寸之间的对比结果和所述各页面元素的元素坐标确定所述各页面元素的代码嵌套关系。
7.根据权利要求4所述的方法，其特征在于，所述根据所述页面样式生成页面样式代码的步骤，进一步包括：遍历所述参考页面中的页面元素；提取所述页面元素的元素信息；按照预设的样式解析算法将所述元素信息进行映射，得到所述页面样式代码。8.一种前端代码生成装置，其特征在于，所述装置包括：获取模块，用于获取接口开发文档和所述接口开发文档对应的参考页面；代码生成模块，用于根据所述接口开发文档进行代码生成，得到接口代码文件；以及，基于所述参考页面中的页面信息生成页面代码文件；代码整合模块，用于整合所述接口代码文件和所述页面代码文件，得到前端代码文件。9.一种电子设备，其特征在于，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行如权利要求1-7任意一项所述的前端代码生成方法的操作。10.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一可执行指令，所述可执行指令在电子设备/前端代码生成装置上运行时，使得电子设备/前端代码生成装置执行如权利要求1-7任意一项所述的前端代码生成方法的操作。

技术总结
本发明实施例涉及网页开发技术领域，公开了一种前端代码生成方法、装置、设备及计算机可读存储介质，该方法包括：获取接口开发文档和接口开发文档对应的参考页面；根据接口开发文档进行代码生成，得到接口代码文件；以及，基于参考页面中的页面信息生成页面代码文件；整合接口代码文件和页面代码文件，得到前端代码文件。应用本发明的技术方案，能够提高对前端界面的开发效率。界面的开发效率。界面的开发效率。


技术研发人员：聂尧 涂恒强 何浩 郭常立
受保护的技术使用者：重庆赛力斯新能源汽车设计院有限公司
技术研发日：2023.05.29
技术公布日：2023/8/23