CN113987400A - 前端网页模板的设计与代码生成方法 - Google Patents

Abstract

本申请涉及一种前端网页模板的设计与代码生成方法，该方法包括：获取模板文件；其中，所述模板文件为基于预设设计稿和预设页面效果生成的；基于所述模板文件生成适用于前端的代码，得到并保存代码模板；接收开发者发送的模板下载请求，将与所述模板下载请求匹配的包括所述代码模板的数据发送给开发者。如此，通过预设系统平台将带有页面效果的模板文件生成可直接用于前端的代码，开发者将其下载到本地就可以直接进行开发，从而避免开发者利用原设计稿进行代码开发中，开发出的结果与预期有差距，还需要进行大量修改，解决了现有技术中，前端开发效果难于与原设计稿一致，开发效率低的问题。

Description

前端网页模板的设计与代码生成方法

技术领域

本申请涉及Web前端开发技术领域，尤其涉及一种前端网页模板的设计与代码生成方法。

背景技术

现有技术中，对于前端网页的开发中，一般是先由设计师通过设计完成设计稿，将设计稿发布到蓝湖等平台上，供开发者查看并根据设计稿开发。但在开发时，因为设计稿是图纸原因，无法根据浏览器等其他因素来实际达到设计预期，如因为屏幕大小、浏览器内核等因素，会造成不一致的情况，当存在不一致时，需要大量的时间进行修改，存在开发结果难以与原设计稿一致，并且开发效率低的问题。

发明内容

本申请提供一种前端网页模板的设计与代码生成方法，用于解决现有技术中，前端开发者在进行前端开发时，存在开发结果难以原设计稿一致，并且开发效率低的问题。

本申请的上述目的是通过以下技术方案实现的：

本申请实施例提供一种前端网页模板的设计与代码生成方法，包括：

获取模板文件；其中，所述模板文件为基于预设设计稿和预设页面效果生成的；

基于所述模板文件生成适用于前端的代码，得到并保存代码模板；

接收开发者发送的模板下载请求，将与所述模板下载请求匹配的包括所述代码模板的数据发送给开发者。

进一步的，所述模板文件为设计师与项目人员在预设设计稿的基础上，基于各浏览器和屏幕大小因素，完成页面样式属性设置后得到的模板文件。

进一步的，所述基于所述模板文件生成适用于前端的代码，得到并保存代码模板，包括：

选择对应组件库；

基于对应组件库和预设Web Worker进行自定义页面生成，得到代码模板；

将所述代码模板存储至预设服务器中。

进一步的，还包括：

基于所述预设服务器中存储的代码模板，通过指令形式创建项目，并将通用的配置创建配置项在项目中，得到带有通用配置的项目。

进一步的，所述接收开发者发送的模板下载请求，将与所述模板下载请求匹配的包括所述代码模板的数据发送给开发者，包括：

接收开发者发送的模板下载请求；其中所述模板下载请求中包括：路由信息和与路由对应文件的模板类型；

基于所述路由信息和与路由对应文件的代码模板，以及所述带有通用配置的项目，生成目标项目；

将所述目标项目打包，并发送给发送模板下载请求的开发者。

本申请的实施例提供的技术方案可以包括以下有益效果：

本申请涉及一种前端网页模板的设计与代码生成方法，该方法包括：获取模板文件；其中，所述模板文件为基于预设设计稿和预设页面效果生成的；基于所述模板文件生成适用于前端的代码，得到并保存代码模板；接收开发者发送的模板下载请求，将与所述模板下载请求匹配的包括所述代码模板的数据发送给开发者。如此，通过预设系统平台将带有页面效果的模板文件生成可直接用于前端的代码，开发者将其下载到本地就可以直接进行开发，从而避免开发者利用原设计稿进行代码开发中，开发出的结果与预期有差距，还需要进行大量修改，解决了现有技术中，前端开发效果难于与原设计稿一致，开发效率低的问题。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

图1为本申请实施例提供的一种前端网页模板的设计与代码生成方法的流程示意图；

图2为本申请另一实施例提供的一种前端网页模板的设计与代码生成方法的流程示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

目前前端开发基本都是根据设计师设计出的设计稿来进行开发，但大小、间距和一些交互效果等可能会因为屏幕大小、浏览器差异、组件库原有属性等因素造成视觉上的差异，并且项目初期的一些常规配置、常规样式等开发工作也是比较费些时间的，开发后期可能会出现因为这些情况而用大部分精力去修改，并有可能出现项目延期的风险。为了解决上述问题，本申请提供一种前端网页模板的设计与代码生成方法，以保证前端开发效果与原设计稿效果一致，避免开发人员在前端开发结果与原设计稿不一致时，花费大量时间和精力对开发结果进行修改，提高开发效率。

实施例

图1为本申请实施例提供的一种前端网页模板的设计与代码生成方法的流程示意图，图2为本申请另一实施例提供的一种前端网页模板的设计与代码生成方法的流程示意图，如图1和图2所示：本申请实施例提供的前端网页模板的设计与代码生成方法包括：

S101、获取模板文件；其中，所述模板文件为基于预设设计稿和预设页面效果生成的。

具体的，所述模板文件为设计师与项目人员在预设设计稿的基础上，基于各浏览器和屏幕大小因素，完成页面样式属性设置后得到的模板文件。

在实际应用中，设计师设计出稿件之后，可与产品经理、前端开发等项目人员一同设置模板、并通过各浏览器、各大小来确定项目页面的样式属性，并将模板文件发布到预设系统平台直接生成项目。并且通过预设系统，实现当前项目开放权限只有项目参与人员，并且有设置记录。

需要说明的是，在设计模板过程中，可以根据实际情况结合设计稿来设置模板，并且模板可预览，做到常规浏览器兼容，将模板保存到平台中，由平台根据项目中用到的组件库来生成前端可用的代码。

S102、基于所述模板文件生成适用于前端的代码，得到并保存代码模板。

具体的，预设系统前端结合公司使用vue框架开发，系统集成element-ui、z-ui等常用组件库，创建模板可以结合拖动组件、源码等的形式创建。先根据项目中用到的组件库进行选择，选择合适的组件库，选择完成后利用Web Worker实现自定义表单等页面的生成，并将自定义生成的代码创建对应的文件存储到服务器中。另外，保存后，还可以通过指令形式创建项目，并将通用的配置创建配置项在项目中，生成项目。

S103、接收开发者发送的模板下载请求，将与所述模板下载请求匹配的包括所述代码模板的数据发送给开发者。

该过程包括：接收开发者发送的模板下载请求；其中所述模板下载请求中包括：路由信息和与路由对应文件的模板类型；然后基于所述路由信息和与路由对应文件的代码模板，以及所述带有通用配置的项目，生成目标项目；最后将所述目标项目打包，并发送给发送模板下载请求的开发者。

具体的，开发者首次要下载项目，首次下载项目之前需要设置项目对应的路由，并选择路由对应的文件使用的模板类型(表单页、列表页等)，并将路由地址、文件名等一并设置，系统根据这些配置来创建对应的文件和路由信息，并将信息存储于数据库中。创建完成指令将项目打包，点击下载项目到本地进行开发。

需要说明的是，如模板文件或代码模板内容有更新，开发者可本地根据更新内容进行收到更改，也可选择对应更新的文件进行下载到本地进行替换。

另外，通过设计师设计出稿件后，也可以通过系统平台来自行设置网页效果并可进行查看，能够在开发进行前大致了解页面实际效果，并将此模板发布到平台，开发者可进行下载模板到项目中，大部分样式、交互等无需再次开发，提升了开发效率，也可达到与设计稿一致的情况，避免修改，提高开发效率。

在实际应用中，对于模板的设置和使用，可自定义设置模板，也可以复制其他项目模板到当前项目使用，可自定义模板，也可使用组件库自带的样式设置个性化模板。

本申请提供的前端网页模板的设计与代码生成方法，由设计师等人员根据设计稿和浏览器兼容设置好前端模板发布到预设系统平台上；预设系统平台根据项目配置的组件库自动生成前端可用的组件代码并进行存储；前端开发者在进行前端开发时，通过下载或其他形式将项目或样式文件、配置文件添加到项目中，然后进行开发使用。如此，通过设置模板上传到平台，由平台根据组件库类型生成前端可用的组件代码，开发者下载到本地进行开发。前端前期开发中无需过渡关注项目整体样式问题、项目配置信息等，项目参与者可共同设置项目样式等，开发者有更多时间关注项目性能等，提高开发效率，避免了因这些情况造成的项目延期风险，也可以使开发者有更多精力去提高项目性能。

可以理解的是，上述各实施例中相同或相似部分可以相互参考，在一些实施例中未详细说明的内容可以参见其他实施例中相同或相似的内容。

需要说明的是，在本申请的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本申请的描述中，除非另有说明，“多个”的含义是指至少两个。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本申请的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本申请的实施例所属技术领域的技术人员所理解。

应当理解，本申请的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本申请各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本申请的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管上面已经示出和描述了本申请的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本申请的限制，本领域的普通技术人员在本申请的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (5)

1.一种前端网页模板的设计与代码生成方法，其特征在于，包括：

获取模板文件；其中，所述模板文件为基于预设设计稿和预设页面效果生成的；

基于所述模板文件生成适用于前端的代码，得到并保存代码模板；

接收开发者发送的模板下载请求，将与所述模板下载请求匹配的包括所述代码模板的数据发送给开发者。

2.根据权利要求1所述的前端网页模板的设计与代码生成方法，其特征在于，所述模板文件为设计师与项目人员在预设设计稿的基础上，基于各浏览器和屏幕大小因素，完成页面样式属性设置后得到的模板文件。

3.根据权利要求1所述的前端网页模板的设计与代码生成方法，其特征在于，所述基于所述模板文件生成适用于前端的代码，得到并保存代码模板，包括：

选择对应组件库；

基于对应组件库和预设Web Worker进行自定义页面生成，得到代码模板；

将所述代码模板存储至预设服务器中。

4.根据权利要求1所述的前端网页模板的设计与代码生成方法，其特征在于，还包括：

基于所述预设服务器中存储的代码模板，通过指令形式创建项目，并将通用的配置创建配置项在项目中，得到带有通用配置的项目。

5.根据权利要求4所述的前端网页模板的设计与代码生成方法，其特征在于，所述接收开发者发送的模板下载请求，将与所述模板下载请求匹配的包括所述代码模板的数据发送给开发者，包括：

接收开发者发送的模板下载请求；其中所述模板下载请求中包括：路由信息和与路由对应文件的模板类型；

基于所述路由信息和与路由对应文件的代码模板，以及所述带有通用配置的项目，生成目标项目；

将所述目标项目打包，并发送给发送模板下载请求的开发者。

Images