CN114115849A - 一种前端代码生成方法和装置 - Google Patents

Abstract

本发明提供了一种前端代码生成方法和装置，属于移动互联，该方法包括：在Web项目中嵌入前端设计工具；利用前端设计工具导入前端设计文件，生成UI设计页面；所述UI设计页面中包括多个UI拖拽按钮；响应于用户针对前端设计需求对UI拖拽按钮进行拖拽编辑操作而生成的UI编辑信息，确定前端素材缩略图；根据前端素材缩略图，生成前端代码。本发明优化前端开发过程，缩短开发周期，让前端开发者将更多的精力放在特性和功能的开发中，通过拖拽编辑即可实现前端的设计和对应前端代码的生成，避免大量的重复性劳动，缩短了开发周期，能够高质量高效率地完成前端项目的开发。

Description

一种前端代码生成方法和装置

技术领域

本发明涉及计算机数据处理技术领域，尤其涉及一种前端代码生成方法和装置。

背景技术

本部分旨在为权利要求书中陈述的本发明的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。

在前端开发项目中，从开始的UI设计，到前端代码开发完成，通常需要一个较长的开发周期。

在代码开发过程中存在大量重复性劳动，例如样式和特定功能的开发，导致整体效率低。

因此，如何提供一种新的方案，其能够解决上述技术问题是本领域亟待解决的技术难题。

发明内容

本发明实施例提供一种前端代码生成方法，优化前端开发过程，缩短开发周期，让前端开发者将更多的精力放在特性和功能的开发中，通过拖拽编辑即可实现前端的设计和对应前端代码的生成，避免大量的重复性劳动，缩短了开发周期，能够高质量高效率地完成前端项目的开发，包括：

在Web项目中嵌入前端设计工具；

利用前端设计工具导入前端设计文件，生成UI设计页面；所述UI设计页面中包括多个UI拖拽按钮；

响应于用户针对前端设计需求对UI拖拽按钮进行拖拽编辑操作而生成的UI编辑信息，确定前端素材缩略图；

根据前端素材缩略图，生成前端代码。

本发明实施例还提供一种前端代码生成装置，包括：

前端设计工具嵌入模块，用于在Web项目中嵌入前端设计工具；

UI设计页面生成模块，用于利用前端设计工具导入前端设计文件，生成UI设计页面；所述UI设计页面中包括多个UI拖拽按钮；

前端素材缩略图确定模块，用于响应于用户针对前端设计需求对UI拖拽按钮进行拖拽编辑操作而生成的UI编辑信息，确定前端素材缩略图；

前端代码生成模块，用于根据前端素材缩略图，生成前端代码。

本发明实施例还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述一种前端代码生成方法。

本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述一种前端代码生成方法。

本发明实施例还提供一种计算机程序产品，所述计算机程序产品包括计算机程序，所述计算机程序被处理器执行时实现上述一种前端代码生成方法。

本发明实施例提供的一种前端代码生成方法和装置，包括：在Web项目中嵌入前端设计工具；利用前端设计工具导入前端设计文件，生成UI设计页面；所述UI设计页面中包括多个UI拖拽按钮；响应于用户针对前端设计需求对UI拖拽按钮进行拖拽编辑操作而生成的UI编辑信息，确定前端素材缩略图；根据前端素材缩略图，生成前端代码。本发明旨在优化前端开发过程，缩短开发周期，让前端开发者将更多的精力放在特性和功能的开发中，通过拖拽编辑即可实现前端的设计和对应前端代码的生成，避免大量的重复性劳动，缩短了开发周期，能够高质量高效率地完成前端项目的开发。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1为本发明实施例一种前端代码生成方法示意图。

图2为本发明实施例一种前端代码生成方法的本地项目导入过程示意图。

图3为本发明实施例一种前端代码生成方法的示范模板导入过程示意图。

图4为本发明实施例一种前端代码生成方法的确定前端素材缩略图过程示意图。

图5为运行本发明实施的一种前端代码生成方法的计算机设备示意图。

图6为本发明实施例一种前端代码生成装置示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚明白，下面结合附图对本发明实施例做进一步详细说明。在此，本发明的示意性实施例及其说明用于解释本发明，但并不作为对本发明的限定。

本发明属于移动互联技术。图1为本发明实施例一种前端代码生成方法示意图，如图1所示，本发明实施例提供一种前端代码生成方法，优化前端开发过程，缩短开发周期，让前端开发者将更多的精力放在特性和功能的开发中，通过拖拽编辑即可实现前端的设计和对应前端代码的生成，避免大量的重复性劳动，缩短了开发周期，能够高质量高效率地完成前端项目的开发，包括：

步骤101：在Web项目中嵌入前端设计工具；

步骤102：利用前端设计工具导入前端设计文件，生成UI设计页面；所述UI设计页面中包括多个UI拖拽按钮；

步骤103：响应于用户针对前端设计需求对UI拖拽按钮进行拖拽编辑操作而生成的UI编辑信息，确定前端素材缩略图；

步骤104：根据前端素材缩略图，生成前端代码。

本发明实施例提供的一种前端代码生成方法和装置，包括：在Web项目中嵌入前端设计工具；利用前端设计工具导入前端设计文件，生成UI设计页面；所述UI设计页面中包括多个UI拖拽按钮；响应于用户针对前端设计需求对UI拖拽按钮进行拖拽编辑操作而生成的UI编辑信息，确定前端素材缩略图；根据前端素材缩略图，生成前端代码。本发明旨在优化前端开发过程，缩短开发周期，让前端开发者将更多的精力放在特性和功能的开发中，通过拖拽编辑即可实现前端的设计和对应前端代码的生成，避免大量的重复性劳动，缩短了开发周期，能够高质量高效率地完成前端项目的开发。

在现有技术中，存在部分前端代码生成工具，但这些前端代码生成工具开发出来的代码规范性、可移植性较差，数据交互无法保证，同时可能存在大量的重复代码，这些又需要前端开发者进行优化，因此，这些前端代码生成工具在生产中是否具有适用性和可移植性，以及数据的正确性都有待验证。因此，真正的痛点在于如何提高开发效率，提高项目的交付质量。

本发明实施例旨在优化前端开发过程，缩短开发周期，让前端开发者将更多的精力放在特性和功能的开发中，避免大量的重复性劳动，能够高质量高效率地完成前端项目。

具体实施本发明实施例提供的一种前端代码生成方法时，在一个实施例中，可以包括：

在Web项目中嵌入前端设计工具；

利用前端设计工具导入前端设计文件，生成UI设计页面；所述UI设计页面中包括多个UI拖拽按钮；

响应于用户针对前端设计需求对UI拖拽按钮进行拖拽编辑操作而生成的UI编辑信息，确定前端素材缩略图；

根据前端素材缩略图，生成前端代码。

本发明通过拖拽编辑即可实现前端的设计和对应前端代码的生成，避免大量的重复性劳动，缩短了开发周期，能够高质量高效率地完成前端项目的开发。

本发明实施例基于Vue2.x构建的可视化搭建、拖拽快速生成移动端的前端设计工具，

优点在于功能强大，可以基于各种设备响应式设计布局，可以自由嵌入各种web项目，可以利用前端设计文件生成UI设计页面。所述前端设计工具，可以自由嵌入Web项目，用于将前端设计文件生成UI设计页面。在Web项目中嵌入前端设计工具，属于Web应用方式。

图2为本发明实施例一种前端代码生成方法的本地项目导入过程示意图，如图2所示，具体实施本发明实施例提供的一种前端代码生成方法时，在一个实施例中，在前端设计文件为本地项目时，利用前端设计工具导入前端设计文件，包括：

步骤201：响应于用户的上传本地项目需求的操作，生成用户上传本地项目需求信息；

步骤202：根据用户上传本地项目需求信息，建立本地项目上传路径，利用前端设计工具导入本地项目。

实施例中，前端设计文件可以是本地项目，在上传本地项目时，具体过程包括：

首先，用户想要上传本地项目时，响应于用户的上传本地项目需求的操作，生成用户上传本地项目需求信息；然后，根据用户上传本地项目需求信息，建立本地项目上传路径，利用前端设计工具根据本地项目上传路径导入本地项目。

图3为本发明实施例一种前端代码生成方法的示范模板导入过程示意图，如图3所示，具体实施本发明实施例提供的一种前端代码生成方法时，在一个实施例中，在前端设计文件为示范模板时，利用前端设计工具导入前端设计文件，包括：

步骤301：通过Web项目连接云端数据库，加载云数据库端的示范模板；

步骤302：响应于用户选定的示范模板的操作，生成示范模板下载指令；

步骤303：根据示范模板下载指令，将该选定的示范模板从云端数据库下载至Web项目，利用前端设计工具导入该示范模板。

实施例中，由于本地项目存在独立性较强的特点，无法与多种开发情况适配，因此需要从云端数据库中下载示范模板；示范模板，也叫demo模板，是由开发者预先上传至云端数据库中，具有多种样式类型。在云端数据库中，提供了大量的示范模板供用户选择，包括：政企官网、电商平台、新媒体广告、校园官网等多个种类。用户可以根据自己的需求下载模板，进行修改，也可以将自己设计好的方案上传至素材库当做模板共享。当需要从云端数据库下载示范模板时，主要过程包括：

在将本地项目或示范模板导入后，根据本地项目或示范模板，利用前端设计工具生成UI设计页面。UI设计页面中包括多个UI拖拽按钮，可以实现UI设计页面中的拖拽编辑操作。

通过Web项目连接云端数据库，加载云数据库端的示范模板；加载出的示范模板，具备模板的简介和主要结构信息；

用户根据项目开发需求选择对应的示范模板，响应于用户选定的示范模板的操作，生成示范模板下载指令；

根据示范模板下载指令，将该选定的示范模板从云端数据库下载至Web项目，利用前端设计工具导入该示范模板。

云端数据量存储的示范模板，属于开源项目，相关开发人员可以参与其中，持续开发和改进。因此在规范性，素材多样性，功能多样性等都有较大的优势。并且越来越多的前端开发者参与进来，持续改进和优化。同时使用者也会越来越多，使用者不再需要手敲每一行代码，不需要大量的重复性劳动，不再苦恼UI方案的选定，前端开发效率将会大幅提升。

通过云端数据库实现示范模板的存储和预览下载，可以给用户带来良好的产品体验，实现示范模板的快速加载和下载。

图4为本发明实施例一种前端代码生成方法的确定前端素材缩略图过程示意图，如图4所示，具体实施本发明实施例提供的一种前端代码生成方法时，在一个实施例中，响应于用户针对前端设计需求对UI拖拽按钮进行拖拽编辑操作而生成的UI编辑信息，确定前端素材缩略图，包括：

步骤401：响应于用户针对前端设计需求对UI拖拽按钮进行的拖拽编辑操作，获取该拖拽编辑操作对应生成的UI编辑信息；

步骤402：根据前端设计需求，对UI编辑信息赋予样式和动态信息，生成前端素材缩略图。

实施例中，当用户在UI设计页面中进行操作时，响应于用户针对前端设计需求对UI拖拽按钮进行的拖拽编辑操作，获取该拖拽编辑操作对应生成的UI编辑信息；然后根据前端设计需求，对UI编辑信息赋予样式和动态信息，生成前端素材缩略图；随后，可以根据前端素材缩略图进行代码解析，生成前端设计代码。

本发明实施例通过拖拽方式组合生成UI，并生成对应的代码。在多数场景下生成的代码是可以直接使用的，某些特殊场景下，生成的代码可以当做demo供前端开发者参考。这样就能极大提高前端开发效率。

使用者通过拖拽组合UI，生成对应的前端代码，在UI模块中可以直接右击选择模块的样式和动态。进一步的，通过UI拖拽编辑操作，可以实现UI的选择拼凑组合；可以在拖拽UI的同时，选择页面模块的样式和动态；素材缩略图具备点击按钮，点击按钮可以查看详细的素材分类，并设置download和upload按钮。用户可以下载素材通过UI拖拽模块实现自己的定制化。

在用户拖拽UI时会自动生成代码，并配备了编辑器窗口，让用户可以自行在线编辑代码。

同样也可将自己的代码导入工具中，生成UI，编辑UI模块选择样式和动态表现，同时自动修改源代码。

本发明实施例还包括：整个项目代码的download与upload共呢个，用户可以上传代码，进行ui拖拽调试好样式与动态后，再下载。

本发明实施例还包括：存储功能，对于用户来说是不需要透明的，用户只需要快速的下载，上传，浏览，编辑的体验感。后台存储对接到高性能云存储产品。

在前端代码生成后，还包括：对前端代码进行健康检查；进一步的，在前端代码生成后，还包括：对前端代码进行编辑修改，编辑完成后，可以选择保存到线上云端，也可以下载代码至本地。

代码的上传及模板的选择，肯定不需要每次都进行操作。当上传一个项目，或者是选择一个模板后，必须是需要支持多次修改的。每次登出的时候会自动保存最后一次修改的状态(当然也支持回滚到之前更早的修改状态，默认支持存储十个版本快照)。上传和模板选择是低频操作，一次上传多次编辑修改，不需要也不应该每次都进行上传，这是基础功能。

用户上传项目，或者选择模板后，通过拖拽UI组件的方式实现生成前端代码，同时可以针对细节以及场景需要进行编辑修改，此平台可以作为开源社区进行维护，并且将后台的数据上云，运用云数据库去维护数据，而且平台包含大量的demo，用户可以下载使用，并对demo进行编辑和修改，极大地提高了前端开发的效率。

使用本工具后，可以避免大量的重复性劳动，缩短了开发周期，提升了效率。并且节省了开发耗费，降低了成本。

下面结合具体场景，对本发明实施例提供的一种前端代码生成方法进行简要描述：

本发明旨在优化前端开发过程，缩短开发周期，让前端开发者将更多的精力放在特性和功能的开发中，避免大量的重复性劳动，能够高质量高效率地完成前端项目。

本发明基于Vue2.x构建的可视化搭建、拖拽快速生成移动端的前端设计工具。优点在于功能强大，可以基于各种设备响应式设计布局，可以自由嵌入各种web项目。Web应用方式，用户通过拖拽方式组合生成UI，并生成对应的代码。当然在多数场景下生成的代码是可以直接使用的，某些特殊场景下，生成的代码可以当做demo供前端开发者参考。这样就能极大提高前端开发效率。

使用者通过拖拽组合UI，生成对应的前端代码，在UI模块中可以直接右击选择模块的样式和动态。同样也可将自己的代码导入工具中，生成UI，编辑UI模块选择样式和动态表现，同时自动修改源代码。同时也提供了大量的模板供用户选择，政企官网、电商平台、新媒体广告、校园官网等种类。用户可以根据自己的需求下载模板，进行修改。用户也可以将自己设计好的方案上传至素材库当做模板共享。

本方案除了提供完备的基础功能，同时是作为一个开源项目，会有大量的专业人员参与进来，持续开发和改进。因此在规范性，素材多样性，功能多样性等都有较大的优势。并且越来越多的前端开发者参与进来，持续改进和优化。同时使用者也会越来越多，使用者不再需要手敲每一行代码，不需要大量的重复性劳动，不再苦恼UI方案的选定，前端开发效率将会大幅提升。

本发明实施例具有UI拖拽功能、动态demo选择功能、自动生成代码功能、素材检索分类功能。代码download与upload，代码健康检查(规范性检查)。同时需要考虑存储方案选型，存储方案是整个项目的难点，我们需要存储海量的用户数据及素材，同时又要带给用户良好的产品体验感，不能出现demo模板加载速度慢等情况。因此最优解是和云计算相结合。

本发明实施例还包括一种前端代码生成方法的模块化示例，包括：

UI拖拽模块：实现UI的选择拼凑组合；

动态选择模块：用户可以在拖拽UI的同时，选择页面模块的样式和动态；

素材显示模块：显示素材缩略图，点击按钮可以查看详细的素材分类，并设置download和upload按钮。用户可以下载素材通过UI拖拽模块实现自己的定制化；

自动生成代码模块：在用户拖拽UI时会自动生成代码，并配备了编辑器窗口，让用户可以自行在线编辑代码；

项目编辑模块：整个项目代码的download与upload。用户可以上传代码，进行ui拖拽调试好样式与动态后，再下载；

存储模块：这个对于用户来说是不需要透明的，用户只需要快速的下载，上传，浏览，编辑的体验感。后台存储对接到高性能云存储产品。

上述一种前端代码生成方法的模块化示例的使用流程，包括：

用户登录后，点击按钮选择导入本地项目，或者点击模板库按钮筛选模板；

当本地项目上传之后，或者是下载好模板之后。用户可以点击右侧拖拽按钮，进行ui组件的拖拽编辑；

同时可以进行页面内模块的动态选择，点击动态编辑按钮，查看对应的demo动态效果，根据需求选择想使用的动态；

用户也可以打开代码编辑窗口，自行对代码进行修改调试；

代码健康检查；

编辑完成后，可以选择保存到线上云端，也可以下载代码至本地。

代码的上传及模板的选择，肯定不需要每次都进行操作。当上传一个项目，或者是选择一个模板后，必须是需要支持多次修改的。每次登出的时候会自动保存最后一次修改的状态(当然也支持回滚到之前更早的修改状态，默认支持存储十个版本快照)。上传和模板选择是低频操作，一次上传多次编辑修改，不需要也不应该每次都进行上传，这是基础功能。

UI拖拽模块，可以自主选择UI的动态表现，提供对应的demo来展示。素材展示模块—提供素材模板，显示素材缩略图，用户可以根据场景需求进行下载。因为该工具作为一个开源项目来运营，有专业的从业者，爱好者参与进来，素材库涵盖政企、电商，新媒体，博客等各种场景。几乎能够满足所有用户场景需求，并且所有的模板都是免费。现有的模板库大多都存在场景不足，并且收费高的现象。

用户上传本地项目，或者选择模板后，通过拖拽UI组件的方式实现生成前端代码，同时可以针对细节以及场景需要进行编辑修改，此平台可以作为开源社区进行维护，并且将后台的数据上云，运用云数据库去维护数据，而且平台包含大量的demo，用户可以下载使用，并对demo进行编辑和修改，极大地提高了前端开发的效率。

使用本工具后，可以避免大量的重复性劳动，缩短了开发周期，提升了效率。并且节省了开发耗费，降低了成本。

图5为运行本发明实施的一种前端代码生成方法的计算机设备示意图，如图5所示，本发明实施例还提供一种计算机设备500，包括存储器510、处理器520及存储在存储器上并可在处理器上运行的计算机程序530，所述处理器执行所述计算机程序时实现上述一种前端代码生成方法。

本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述一种前端代码生成方法。

本发明实施例还提供一种计算机程序产品，所述计算机程序产品包括计算机程序，所述计算机程序被处理器执行时实现上述一种前端代码生成方法。

本发明实施例中还提供了一种前端代码生成装置，如下面的实施例所述。由于该装置解决问题的原理与一种前端代码生成方法相似，因此该装置的实施可以参见一种前端代码生成方法的实施，重复之处不再赘述。

图6为本发明实施例一种前端代码生成装置示意图，如图6所示，本发明实施例还提供一种前端代码生成装置，具体实施时可以包括：

前端设计工具嵌入模块601，用于在Web项目中嵌入前端设计工具；

UI设计页面生成模块602，用于利用前端设计工具导入前端设计文件，生成UI设计页面；所述UI设计页面中包括多个UI拖拽按钮；

前端素材缩略图确定模块603，用于响应于用户针对前端设计需求对UI拖拽按钮进行拖拽编辑操作而生成的UI编辑信息，确定前端素材缩略图；

前端代码生成模块604，用于根据前端素材缩略图，生成前端代码。

具体实施本发明实施例提供的一种前端代码生成装置时，在一个实施例中，在前端设计文件为本地项目时，UI设计页面生成模块，具体用于：

响应于用户的上传本地项目需求的操作，生成用户上传本地项目需求信息；

根据用户上传本地项目需求信息，建立本地项目上传路径，利用前端设计工具导入本地项目。

具体实施本发明实施例提供的一种前端代码生成装置时，在一个实施例中，在前端设计文件为示范模板时，UI设计页面生成模块，具体用于：

通过Web项目连接云端数据库，加载云数据库端的示范模板；

响应于用户选定的示范模板的操作，生成示范模板下载指令；

根据示范模板下载指令，将该选定的示范模板从云端数据库下载至Web项目，利用前端设计工具导入该示范模板。

具体实施本发明实施例提供的一种前端代码生成装置时，在一个实施例中，前端素材缩略图确定模块，具体用于：

响应于用户针对前端设计需求对UI拖拽按钮进行的拖拽编辑操作，获取该拖拽编辑操作对应生成的UI编辑信息；

根据前端设计需求，对UI编辑信息赋予样式和动态信息，生成前端素材缩略图。

综上，本发明实施例提供的一种前端代码生成方法和装置，包括：在Web项目中嵌入前端设计工具；利用前端设计工具导入前端设计文件，生成UI设计页面；所述UI设计页面中包括多个UI拖拽按钮；响应于用户针对前端设计需求对UI拖拽按钮进行拖拽编辑操作而生成的UI编辑信息，确定前端素材缩略图；根据前端素材缩略图，生成前端代码。本发明旨在优化前端开发过程，缩短开发周期，让前端开发者将更多的精力放在特性和功能的开发中，通过拖拽编辑即可实现前端的设计和对应前端代码的生成，避免大量的重复性劳动，缩短了开发周期，能够高质量高效率地完成前端项目的开发。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (11)

1.一种前端代码生成方法，其特征在于，包括：

在Web项目中嵌入前端设计工具；

利用前端设计工具导入前端设计文件，生成UI设计页面；所述UI设计页面中包括多个UI拖拽按钮；

响应于用户针对前端设计需求对UI拖拽按钮进行拖拽编辑操作而生成的UI编辑信息，确定前端素材缩略图；

根据前端素材缩略图，生成前端代码。

2.如权利要求1所述的方法，其特征在于，在前端设计文件为本地项目时，利用前端设计工具导入前端设计文件，包括：

响应于用户的上传本地项目需求的操作，生成用户上传本地项目需求信息；

根据用户上传本地项目需求信息，建立本地项目上传路径，利用前端设计工具导入本地项目。

3.如权利要求1所述的方法，其特征在于，在前端设计文件为示范模板时，利用前端设计工具导入前端设计文件，包括：

通过Web项目连接云端数据库，加载云数据库端的示范模板；

响应于用户选定的示范模板的操作，生成示范模板下载指令；

根据示范模板下载指令，将该选定的示范模板从云端数据库下载至Web项目，利用前端设计工具导入该示范模板。

4.如权利要求1所述的方法，其特征在于，响应于用户针对前端设计需求对UI拖拽按钮进行拖拽编辑操作而生成的UI编辑信息，确定前端素材缩略图，包括：

响应于用户针对前端设计需求对UI拖拽按钮进行的拖拽编辑操作，获取该拖拽编辑操作对应生成的UI编辑信息；

根据前端设计需求，对UI编辑信息赋予样式和动态信息，生成前端素材缩略图。

5.一种前端代码生成装置，其特征在于，包括：

前端设计工具嵌入模块，用于在Web项目中嵌入前端设计工具；

UI设计页面生成模块，用于利用前端设计工具导入前端设计文件，生成UI设计页面；所述UI设计页面中包括多个UI拖拽按钮；

前端素材缩略图确定模块，用于响应于用户针对前端设计需求对UI拖拽按钮进行拖拽编辑操作而生成的UI编辑信息，确定前端素材缩略图；

前端代码生成模块，用于根据前端素材缩略图，生成前端代码。

6.如权利要求5所述的装置，其特征在于，在前端设计文件为本地项目时，UI设计页面生成模块，具体用于：

响应于用户的上传本地项目需求的操作，生成用户上传本地项目需求信息；

根据用户上传本地项目需求信息，建立本地项目上传路径，利用前端设计工具导入本地项目。

7.如权利要求5所述的装置，其特征在于，在前端设计文件为示范模板时，UI设计页面生成模块，具体用于：

通过Web项目连接云端数据库，加载云数据库端的示范模板；

响应于用户选定的示范模板的操作，生成示范模板下载指令；

根据示范模板下载指令，将该选定的示范模板从云端数据库下载至Web项目，利用前端设计工具导入该示范模板。

8.如权利要求5所述的装置，其特征在于，前端素材缩略图确定模块，具体用于：

响应于用户针对前端设计需求对UI拖拽按钮进行的拖拽编辑操作，获取该拖拽编辑操作对应生成的UI编辑信息；

根据前端设计需求，对UI编辑信息赋予样式和动态信息，生成前端素材缩略图。

9.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至4任一项所述方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1至4任一所述方法。

11.一种计算机程序产品，其特征在于，所述计算机程序产品包括计算机程序，所述计算机程序被处理器执行时实现权利要求1至4任一所述方法。

Images