页面代码生成方法、装置、电子设备及存储介质与流程

本申请涉及计算机，尤其涉及一种页面代码生成方法、装置、电子设备及存储介质。

背景技术：

1、目前，在进行页面开发时，前端技术人员获取需求文档(用于记录当前需求对应的开发时间，上线时间，当前需求所需的各种文档以及对当前需求的简要解释等)和原型文档(用于记录当前需求的具体交互以及实现方式)后，根据需求文档及原型文档开发出适配的、用户可交互的前端页面。

2、在开发过程中，需要用到各类前端框架及打包工具，且技术人员采用手动方式进行编码，此种处理方式会耗费人力，导致人力成本过高，且耗时较长、效率低，进而影响页面开发的效率。

技术实现思路

1、鉴于上述问题，本申请实施例提供一种克服上述问题或者至少部分地解决上述问题的页面代码生成方法、装置、电子设备及存储介质。

2、第一方面，本申请实施例提供了一种页面代码生成方法，应用于服务端，包括：

3、接收前端设备提交的表征页面开发详情的表单信息，所述表单信息包括前端框架名称、代码存放路径、项目名、代码生成规则、原型交互图以及多个用户界面ui图，所述原型交互图用于指示多个ui图对应的ui页面之间的交互情况；

4、根据所述前端框架名称、所述代码存放路径和所述项目名，进行前端项目初始化；

5、根据所述代码生成规则、所述原型交互图和所述多个ui图，生成支持事件交互功能且可进行编译构建的前端项目代码；

6、基于所述多个ui图对所述前端项目代码进行调整，生成与所述多个ui图匹配的目标前端代码，所述目标前端代码对应于多个待开发ui页面。

7、第二方面，本申请实施例提供了一种页面代码生成装置，应用于服务端，包括：

8、接收模块，用于接收前端设备提交的表征页面开发详情的表单信息，所述表单信息包括前端框架名称、代码存放路径、项目名、代码生成规则、原型交互图以及多个用户界面ui图，所述原型交互图用于指示多个ui图对应的ui页面之间的交互情况；

9、处理模块，用于根据所述前端框架名称、所述代码存放路径和所述项目名，进行前端项目初始化；

10、生成模块，用于根据所述代码生成规则、所述原型交互图和所述多个ui图，生成支持事件交互功能且可进行编译构建的前端项目代码；

11、调整生成模块，用于基于所述多个ui图对所述前端项目代码进行调整，生成与所述多个ui图匹配的目标前端代码，所述目标前端代码对应于多个待开发ui页面。

12、第三方面，本申请实施例提供了一种电子设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如上述第一方面所述的页面代码生成方法的步骤。

13、第四方面，本申请实施例提供了一种计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如上述第一方面所述的页面代码生成方法的步骤。

14、本申请实施例技术方案，接收前端设备提供的表征页面开发详情的表单信息后，基于表单信息中的前端框架名称、代码存放路径和项目名，进行前端项目初始化，以生成前端项目；在构建前端项目之后，基于表单信息中的代码生成规则、原型交互图和多个ui图，生成支持事件交互功能且可进行编译构建的前端项目代码，根据多个ui图对前端项目代码进行调整，生成对应的ui页面与ui图相适配的目标前端代码，可以基于自动化的代码生成，节约人力成本、提升页面开发效率，且所生成的目标前端代码为未经过压缩构建的代码，允许代码前端开发者对其进行修改，以保证页面开发效果。

技术特征：

1.一种页面代码生成方法，应用于服务端，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，所述接收前端设备提交的表征页面开发详情的表单信息，包括：

3.根据权利要求1所述的方法，其特征在于，所述根据所述前端框架名称、所述代码存放路径和所述项目名，进行前端项目初始化，包括：

4.根据权利要求1或3所述的方法，其特征在于，所述代码生成规则包括所述原型交互图对应的多个功能模块和所述多个功能模块对应的模块介绍，每个模块对应至少一交互事件；

5.根据权利要求4所述的方法，其特征在于，所述基于所述待检测代码生成所述前端项目代码，包括：

6.根据权利要求4所述的方法，其特征在于，在生成所述前端项目代码的过程中，还包括：

7.根据权利要求4所述的方法，其特征在于，所述前端项目代码包括js代码和层叠样式表css代码，所述基于所述多个ui图对所述前端项目代码进行调整，生成与所述多个ui图匹配的目标前端代码，包括：

8.根据权利要求1所述的方法，其特征在于，在生成与所述多个ui图匹配的目标前端代码后，还包括：

9.一种页面代码生成装置，应用于服务端，其特征在于，包括：

10.一种电子设备，其特征在于，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1至8中任一项所述的页面代码生成方法的步骤。

11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如权利要求1至8任一项所述的页面代码生成方法的步骤。

技术总结
本申请提供一种页面代码生成方法、装置、电子设备及存储介质，该方法包括：接收前端设备提交的表征页面开发详情的表单信息，表单信息包括前端框架名称、代码存放路径、项目名、代码生成规则、原型交互图以及多个用户界面UI图，原型交互图用于指示多个UI图对应的UI页面之间的交互情况；根据前端框架名称、代码存放路径和项目名进行前端项目初始化；根据代码生成规则、原型交互图和多个UI图，生成支持事件交互功能且可进行编译构建的前端项目代码；基于多个UI图对前端项目代码进行调整，生成目标前端代码。本申请可基于自动化的代码生成，节约人力成本、提升页面开发效率，且允许代码前端开发者对其进行修改，以保证页面开发效果。

技术研发人员：李馨馨,刘海涛
受保护的技术使用者：五八畅生活（北京）信息技术有限公司
技术研发日：
技术公布日：2024/11/14