CN111966350A - Web前端界面生成方法及装置 - Google Patents

Abstract

本发明公开了Web前端界面生成方法及装置，其中所述方法包括：将Web前端的业务模板界面中业务模块相似度大于预设阈值的部分业务模板界面作为待调整业务模板；将所述待调整业务模板内置于预先开发的命令行工具中，待修改；接收用户操作所述命令行工具的指令修改所述待调整业务模板，并根据所述指令自动生成所述待调整业务模板修改后对应的新Web前端界面。解决了业务开发过程中的重复问题，提高了开发效率，提高了运营工作效率。

Description

Web前端界面生成方法及装置

技术领域

本发明涉及Web前端界面生成技术领域，尤其涉及Web前端界面生成方法及装置。

背景技术

在Web前端业务开发过程中，每新增一个业务模块，开发人员都要完成新建页面、配置模型(models)、配置服务(services)、配置路由表、配置菜单这一系列的工作，以生成Web前端界面。

在开发多个业务模块时，对开发人员来说这些流程都是重复的，会导致开发效率低下；多种代码书写逻辑思路，难以维护。由于各模块的相似度很高，为了提高开发效率，目前传统生成Web前端界面的方法是复制老模块代码进行修改。

但是，由于代码文件比较分散，复制老模块代码进行修改时，复制代码的工作量也并不小。而且，在修改代码或者样式的过程中，会产生多余的垃圾代码，还可能带来各种BUG(问题)。

因此现有技术还有待于进一步发展。

发明内容

针对上述技术问题，本发明提供了一种Web前端界面生成方法及装置，以解决相关技术问题。

本发明实施例的第一方面，提供一种Web前端界面生成方法，所述方法包括：

将Web前端的业务模板界面中业务模块相似度大于预设阈值的部分业务模板界面作为待调整业务模板；

将所述待调整业务模板内置于预先开发的命令行工具中，待修改；

接收用户操作所述命令行工具的指令修改所述待调整业务模板，并根据所述指令自动生成所述待调整业务模板修改后对应的新Web前端界面。

可选地，所述将Web前端的业务模板界面中业务模块相似度大于预设阈值的部分业务模板界面作为待调整业务模板，包括：

提取所述业务模板界面中的各个业务模块，将各个业务模块进行相似度比对，若部分所述业务模板界面中的各个业务模块的相似度大于预设阈值，则将所述部分所述业务模板界面作为待调整业务模板；

其中，所述相似度为模板样式以及交互方式的相似程度。

可选地，将所述待调整业务模板内置于预先开发的命令行工具中，包括：

提取所述待调整业务模板中有差异的页面参数作为所述命令行工具中内置的模块变量；

所述页面参数包括：页面标题、文件名称、组件名称、组件交互方式、组件默认对应的参数。

可选地，所述接收用户操作所述命令行工具的指令修改所述待调整业务模板，并根据所述指令自动生成所述待调整业务模板修改后对应的新Web前端界面，包括：

在所述命令行工具接收到增加业务模块的命令时，获取拖拽模块的代码参数，并对增加业务模块的参数进行规制校验。

可选地，所述的Web前端界面生成方法，还包括：

将用户输入得新增业务模块得参数替换工具中内置模块得变量，生成Web前端代码，并将生成得Web前端代码写入目标项目文件中。

本发明实施例的第二方面，提供一种Web前端界面生成装置，所述装置包括：

前置模块，用于将Web前端的业务模板界面中业务模块相似度大于预设阈值的部分业务模板界面作为待调整业务模板；

预置模块，用于将所述待调整业务模板内置于预先开发的命令行工具中，待修改；

生成模块，用于接收用户操作所述命令行工具的指令修改所述待调整业务模板，并根据所述指令自动生成所述待调整业务模板修改后对应的新Web前端界面。

可选地，所述前置模块包括：

提取单元，用于提取所述业务模板界面中的各个业务模块，将各个业务模块进行相似度比对，若部分所述业务模板界面中的各个业务模块的相似度大于预设阈值，则将所述部分所述业务模板界面作为待调整业务模板；

其中，所述相似度为模板样式以及交互方式的相似程度。

可选地，所述预置模块包括：

预置子单元，用于提取所述待调整业务模板中有差异的页面参数作为所述命令行工具中内置的模块变量；其中，所述页面参数包括：页面标题、文件名称、组件名称、组件交互方式、组件默认对应的参数。

可选地，所述生成模块包括：

第一生成子单元，用于在所述命令行工具接收到增加业务模块的命令时，获取拖拽模块的代码参数，并对增加业务模块的参数进行规制校验；

第二生成子单元，用于将用户输入得新增业务模块得参数替换工具中内置模块得变量，生成Web前端代码，并将生成得Web前端代码写入目标项目文件中。

本发明提供的技术方案中，能够快速、自动生成Web前端运营活动可视化页面。解决了业务开发过程中的重复问题，提高了开发效率、提高了运营工作效率。

附图说明

图1为本发明实施例中一种Web前端界面生成方法的流程示意图；

图2为本发明实施例中的一种Web前端界面生成装置的模块示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有作出创造性。

请参阅图1，图1为本发明实施例中一种Web前端界面生成方法的流程示意图。所述Web前端界面生成方法，包括以下步骤：

步骤S100:将Web前端的业务模板界面中业务模块相似度大于预设阈值的部分业务模板界面作为待调整业务模板。

由于在Web开发多个业务模块时，对开发人员来说这些开发流程都是重复的，因此可以将多中重发开发的流程作为模板，以模板作为基础做二次开发，则可以很好的解决开发重复的问题，也相应地提高了开发效率。

基于此，本发明首先获取所有Web前端开发涉及到的业务模板界面，所述业务模板界面可以理解为所述Web前端开发中涉及的不同业务需求的Web前端页面，每个业务模板界面包含多种业务模块，例如文本区域、图片区域、背景、形状、表单等组件......

而比对相似度则可以通过比对页面样式的差别、交互方式差别。因为各业务模块的页面样式及交互方式可以通过修改参数进行修改，通过修改后则可以形成新的业务模板界面。

具体可设置不同业务模块的阈值(可以根据实际情况制作所述预设阈值)，通过比对的相似度与预设阈值比较，若大于预设阈值则可以利用所述业务模板界面，做修改开发。

步骤S200:将所述待调整业务模板内置于预先开发的命令行工具中，待修改。

在具体应用中，所述命令行工具中内置有模板的变量，可以包括：页面标题、文件名称、组件名称、组件交互方式、组件默认参数等。与所述待调整业务模板中有差异的部分代码相对应，用户可以在所述命令行工具中修改所述待调整业务模板中的代码，从而实现对页面标题、文件名称、组件名称、组件交互方式、组件默认参数等的修改。

步骤S300:接收用户操作所述命令行工具的指令修改所述待调整业务模板，并根据所述指令自动生成所述待调整业务模板修改后对应的新Web前端界面。

用户可以对所述命令行工具做操作，具体可以修改前述待调整业务模板中的代码以及参数，从而修改Web页面。待用户修改完代码或参数后，命令行工具会自动生成底层代码以及可视化页面交互，作为对应所述待调整业务模板修改后的新Web前端界面。

本实施例提供一种Web前端快速搭建页面方法，将获取到的所有业务模板界面中相似度大于预设阈值的部分界面作为待调整业务模板。将所述待调整业务模板内置到预先开发的命令行工具中；在用户操作命令行工具增加模板时，可自动生成底层代码以及可视化页面交互。本发明实施例能够快速、自动生成Web前端管理平台，以及运营活动可视化页面。解决了业务开发过程中的重复问题，提高了开发效率、提高了运营工作效率。

进一步地，在所述的Web前端界面生成方法中，所述将Web前端的业务模板界面中业务模块相似度大于预设阈值的部分业务模板界面作为待调整业务模板，还包括以下内容：

提取所述业务模板界面中的各个业务模块的组件，例如组件包括：提取文本区域、图片区域、背景、形状、表单等......然后将提取的各文本区域、图片区域、背景、形状、表单等......各个业务模块进行相似度比对。其中，所述相似度为模板样式以及交互方式的相似程度。

Web页面显示会有不同显示需求，例如有的是显示文本、有的显示图片，也有文本与图片一起显示，当然还有一些背景、表单、选择等等。若目标Web页面是与某业务模板界面相似，则只需要修改该某业务模板界面即可达到目标Web页面的开发需求。

因此需要选出类似的业务模板界面作为待调整业务模板，然后进行修改；例如若部分所述业务模板界面中的各个业务模块的相似度大于预设阈值，则将所述部分所述业务模板界面作为待调整业务模板。

确定了所述待调整业务模板后，提取所述待调整业务模板中有差异的页面参数作为所述命令行工具中内置的模块变量。所述页面参数包括：页面标题、文件名称、组件名称、组件交互方式、组件默认对应的参数。

具体的，命令行工具中的代码相对应与所述待调整业务模板中有需要修改的部分对应，用户可以输入新增业务模块的参数替换所述命令行工具内置模块的变量，生成Web前端代码，并将生成的Web前端代码写入目标项目文件中。在所述命令行工具接收到增加业务模块的命令时，获取拖拽模块的代码参数，并对增加业务模块的参数进行规制校验。

更进一步地，还可以将用户输入得新增业务模块得参数替换工具中内置模块得变量，生成Web前端代码，并将生成得Web前端代码写入目标项目文件中。

具体的，若所述用户输入的新增业务模块的参数通过规则校验，则对所述命令行工具进行检测，在所述命令行工具的版本不是最新版本时，向用户展示第一提示信息，所述第一提示信息用于用户将所述工具的版本更新为最新版本。

在所述版本为最新版本时，读取所述命令行工具中内置的模板，将通过规则校验的用户输入的新增业务模块的参数替换所述命令行工具中内置的模块的变量，生成Web前端代码，并将生成的Web前端代码写入目标项目文件中。

综上所述，本发明基于业务开发过程中各业务模块的相似度很高，本将各业务模块中相似度大于预设阈值的部分页面看作相似度高得部分页面，将相似度高得部分页面内置到预先开发得工具中，将模板中有差异得部分参数作为命令行工具中内置模块得变量。在利用所述命令行工具增加业务模块时，将用户输入得新增业务模块得参数替换命令行工具中内置模块得变量，生成Web前端代码，并将生成得Web前端代码写入目标项目文件中。由此能够快速、自动生成Web前端代码，解决业务开发过程中工作量重复得问题，提供运营工作以及开发效率。

如图2所示，本发明还提供一种Web前端界面生成方法装置，包括：

前置模块100，用于将Web前端的业务模板界面中业务模块相似度大于预设阈值的部分业务模板界面作为待调整业务模板。

本发明首先获取所有Web前端开发涉及到的业务模板界面，所述业务模板界面可以理解为所述Web前端开发中涉及的不同业务需求的Web前端页面，每个业务模板界面包含多种业务模块，例如文本区域、图片区域、背景、形状、表单等组件......

具体可设置不同业务模块的阈值(可以根据实际情况制作所述预设阈值)，通过比对的相似度与预设阈值比较，若大于预设阈值则可以利用所述业务模板界面，做修改开发。

预置模块200，用于将所述待调整业务模板内置于预先开发的命令行工具中，待修改。

在具体应用中，所述命令行工具中内置有模板的变量，可以包括：页面标题、文件名称、组件名称、组件交互方式、组件默认参数等。与所述待调整业务模板中有差异的部分代码相对应，用户可以在所述命令行工具中修改所述待调整业务模板中的代码，从而实现对页面标题、文件名称、组件名称、组件交互方式、组件默认参数等的修改。

生成模块300，用于接收用户操作所述命令行工具的指令修改所述待调整业务模板，并根据所述指令自动生成所述待调整业务模板修改后对应的新Web前端界面。

用户可以对所述命令行工具做操作，具体可以修改前述待调整业务模板中的代码以及参数，从而修改Web页面。待用户修改完代码或参数后，命令行工具会自动生成底层代码以及可视化页面交互，作为对应所述待调整业务模板修改后的新Web前端界面。

进一步地：

所述前置模块100包括：

提取单元，用于提取所述业务模板界面中的各个业务模块，将各个业务模块进行相似度比对，若部分所述业务模板界面中的各个业务模块的相似度大于预设阈值，则将所述部分所述业务模板界面作为待调整业务模板；其中，所述相似度为模板样式以及交互方式的相似程度。

所述预置模块200包括：

预置子单元，用于提取所述待调整业务模板中有差异的页面参数作为所述命令行工具中内置的模块变量；其中，所述页面参数包括：页面标题、文件名称、组件名称、组件交互方式、组件默认对应的参数。

所述生成模块300包括：

第一生成子单元，用于在所述命令行工具接收到增加业务模块的命令时，获取拖拽模块的代码参数，并对增加业务模块的参数进行规制校验；

第二生成子单元，用于将用户输入得新增业务模块得参数替换工具中内置模块得变量，生成Web前端代码，并将生成得Web前端代码写入目标项目文件中。

以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (9)

1.一种Web前端界面生成方法，其特征在于，所述方法包括：

将Web前端的业务模板界面中业务模块相似度大于预设阈值的部分业务模板界面作为待调整业务模板；

将所述待调整业务模板内置于预先开发的命令行工具中，待修改；

接收用户操作所述命令行工具的指令修改所述待调整业务模板，并根据所述指令自动生成所述待调整业务模板修改后对应的新Web前端界面。

2.根据权利要求1所述的Web前端界面生成方法，其特征在于，所述将Web前端的业务模板界面中业务模块相似度大于预设阈值的部分业务模板界面作为待调整业务模板，包括：

提取所述业务模板界面中的各个业务模块，将各个业务模块进行相似度比对，若部分所述业务模板界面中的各个业务模块的相似度大于预设阈值，则将所述部分所述业务模板界面作为待调整业务模板；

其中，所述相似度为模板样式以及交互方式的相似程度。

3.根据权利要求1所述的Web前端界面生成方法，其特征在于，将所述待调整业务模板内置于预先开发的命令行工具中，包括：

提取所述待调整业务模板中有差异的页面参数作为所述命令行工具中内置的模块变量；

所述页面参数包括：页面标题、文件名称、组件名称、组件交互方式、组件默认对应的参数。

4.根据权利要求1所述的Web前端界面生成方法，其特征在于，所述接收用户操作所述命令行工具的指令修改所述待调整业务模板，并根据所述指令自动生成所述待调整业务模板修改后对应的新Web前端界面，包括：

在所述命令行工具接收到增加业务模块的命令时，获取拖拽模块的代码参数，并对增加业务模块的参数进行规制校验。

5.根据权利要求1所述的Web前端界面生成方法，其特征在于，还包括：

将用户输入得新增业务模块得参数替换工具中内置模块得变量，生成Web前端代码，并将生成得Web前端代码写入目标项目文件中。

6.一种Web前端界面生成方法装置，其特征在于，包括：

前置模块，用于将Web前端的业务模板界面中业务模块相似度大于预设阈值的部分业务模板界面作为待调整业务模板；

预置模块，用于将所述待调整业务模板内置于预先开发的命令行工具中，待修改；

生成模块，用于接收用户操作所述命令行工具的指令修改所述待调整业务模板，并根据所述指令自动生成所述待调整业务模板修改后对应的新Web前端界面。

7.根据权利要求6所述的Web前端界面生成装置，其特征在于，所述前置模块包括：

提取单元，用于提取所述业务模板界面中的各个业务模块，将各个业务模块进行相似度比对，若部分所述业务模板界面中的各个业务模块的相似度大于预设阈值，则将所述部分所述业务模板界面作为待调整业务模板；

其中，所述相似度为模板样式以及交互方式的相似程度。

8.根据权利要求6所述的Web前端界面生成装置，其特征在于，所述预置模块包括：

预置子单元，用于提取所述待调整业务模板中有差异的页面参数作为所述命令行工具中内置的模块变量；其中，所述页面参数包括：页面标题、文件名称、组件名称、组件交互方式、组件默认对应的参数。

9.根据权利要求6所述的Web前端界面生成装置，其特征在于，所述生成模块包括：

第一生成子单元，用于在所述命令行工具接收到增加业务模块的命令时，获取拖拽模块的代码参数，并对增加业务模块的参数进行规制校验；

第二生成子单元，用于将用户输入得新增业务模块得参数替换工具中内置模块得变量，生成Web前端代码，并将生成得Web前端代码写入目标项目文件中。

Images