CN110968311B - 前端页面构建方法、装置及电子设备 - Google Patents

Abstract

本发明实施例提供一种前端页面构建方法、装置及电子设备。所述前端页面构建方法，包括：运行工具载体启动命令，显示所述工具载体的多个模板页面对应的选项；接收在多个模板页面中进行选择的选择操作；显示所述选择操作对应的模板页面的参数设置界面；接收在所述参数设置界面设置的限定参数；以及根据所述限定参数加载对应的各个功能的代码，构建目标页面。

Description

前端页面构建方法、装置及电子设备

技术领域

本发明涉及计算机技术领域，具体而言，涉及一种前端页面构建方法、装置及电子设备。

背景技术

在前端日常开发中经常碰到的一个开发场景就是每个页面都可能会有很多类似的html、css、js的基础代码，如果一个工程中有多个包含有很多基础代码的页面，会花费大量的时间在重复的代码书写上。构建页面所需要花费的时间也比较多，开发效率较低。

发明内容

有鉴于此，本发明实施例的目的在于提供一种前端页面构建方法、装置及电子设备。

第一方面，本发明实施例提供的一种前端页面构建方法，包括：

运行工具载体启动命令，显示所述工具载体的多个模板页面对应的选项；

接收在多个模板页面中进行选择的选择操作；

显示所述选择操作对应的模板页面的参数设置界面；

接收在所述参数设置界面设置的限定参数；以及

根据所述限定参数加载对应的各个功能的代码，构建目标页面。

可选地，所述显示所述选择操作对应的模板页面的参数设置界面的步骤，包括：

在所述参数设置界面的第一区域显示标识设置区域，所述标识设置区域用于接收输入待构建页面的基本属性；

在所述参数设置界面的第二区域显示功能设置区域，所述功能设置区域用于接收输入待构建页面的功能属性。

可选地，所述在所述参数设置界面的第二区域显示功能设置区域的步骤，包括：

在所述第二区域显示子功能设置单元，以及与所述子功能设置单元对应的删除按钮；

在所述显示所述选择操作对应的模板页面的参数设置界面的步骤之后，所述方法还包括：

接收到对所述删除按钮的操作后，删除所述操作对应子功能设置单元。

可选地，所述在所述参数设置界面的第二区域显示功能设置区域的步骤，包括：

在所述第二区域显示添加按钮；

在所述显示所述选择操作对应的模板页面的参数设置界面的步骤之后，所述方法还包括：

接收到对所述添加按钮的操作后，生成目标子功能设置单元。

可选地，所述生成目标子功能设置单元的步骤，包括：

根据接收到的选择操作，获取子功能设置模板；

接收为所述子功能设置模板子功能名称，以形成子功能设置单元。

可选地，所述子功能设置单元还包括备注设置单元，所述生成目标子功能设置单元的步骤还包括：

生成备注设置框，形成所述备注设置单元，所述备注设置框用于接收所述目标页面的备注信息。

可选地，每个子功能设置单元包括多个用于接收输入的限定参数的参数接收部，所述生成目标子功能设置单元的步骤还包括：

接收对每个参数接收部设置的参数校验规则，所述参数校验规则用于对对应的所述参数接收部接收到的限定参数进行验证。

可选地，所述多个模板页面包括：完整的html页，表单和校验规则、单表格、单校验规则、表单列表页、对话框组件、后端dubbo接口、数据传输对象中的至少一种。

可选地，含有表单的模板页面中包括：用于生成表单子单元、用于设置分页子单元和用于设置查询功能。

可选地，所述接收在所述参数设置界面设置的限定参数的步骤，包括：

接收生成的所述目标页面所属表单的层级限定参数；

接收生成的所述目标页面表单内容限制的内容限定参数。

可选地，含有校验规则的模板页面中包括校验接收到的限定参数的校验功能。

可选地，根据含有数据传输对象的模板页面生成的所述目标页面中包括管理页面中表单的增加、删除、修改、查询的功能。

可选地，根据含有后端dubbo接口的模板页面生成的所述目标页面中包括：管理页面中表单增删改查的API接口，用于对数据库中真实数据进行操作。

可选地，每个模板页面的类型是html页面、js页面、css页面、node.js页面中的任意一种，或所述html页面、所述js页面、所述css页面、所述node.js页面的任意组合。

第二方面，本发明实施例还提供一种前端页面构建装置，包括：

启动模块，用于运行工具载体启动命令，显示所述工具载体的多个模板页面对应的选项；

选择模块，用于接收在多个模板页面中进行选择的选择操作；

显示模块，用于显示所述选择操作对应的模板页面的参数设置界面；

接收模块，用于接收在所述参数设置界面设置的限定参数；以及构建模块，用于根据所述限定参数加载对应的各个功能的代码，构建目标页面。

可选地，所述显示模块还用于：

在所述参数设置界面的第一区域显示标识设置区域，所述标识设置区域用于接收输入待构建页面的基本属性；

在所述参数设置界面的第二区域显示功能设置区域，所述功能设置区域用于接收输入待构建页面的功能属性。

可选地，所述显示模块还用于：

在所述第二区域显示子功能设置单元，以及与所述子功能设置单元对应的删除按钮；

所述前端页面构建装置还包括：

删除模块，用于接收到对所述删除按钮的操作后，删除所述操作对应子功能设置单元。

可选地，所述显示模块还用于：

在所述第二区域显示添加按钮；

所述前端页面构建装置还包括：

生成模块，用于接收到对所述添加按钮的操作后，生成目标子功能设置单元。

可选地，所述生成模块还用于：

根据接收到的选择操作，获取子功能设置模板；

接收为所述子功能设置模板子功能名称，以形成子功能设置单元。

可选地，所述子功能设置单元还包括备注设置单元，所述生成模块还用于：

生成备注设置框，形成所述备注设置单元，所述备注设置框用于接收所述目标页面的备注信息。

可选地，每个子功能设置单元包括多个用于接收输入的限定参数的参数接收部，所述生成模块还用于：

接收对每个参数接收部设置的参数校验规则，所述参数校验规则用于对对应的所述参数接收部接收到的限定参数进行验证。

可选地，所述多个模板页面包括：完整的html页，表单和校验规则、单表格、单校验规则、表单列表页、对话框组件、后端dubbo接口、数据传输对象中的至少一种。

可选地，含有表单的模板页面中包括：用于生成表单子单元、用于设置分页子单元和用于设置查询功能。

可选地，所述接收模块还用于：

接收生成的所述目标页面所属表单的层级限定参数；

接收生成的所述目标页面表单内容限制的内容限定参数。

可选地，含有校验规则的模板页面中包括校验接收到的限定参数的校验功能。

可选地，根据含有数据传输对象的模板页面生成的所述目标页面中包括管理页面中表单的增加、删除、修改、查询的功能。

可选地，根据含有后端dubbo接口的模板页面生成的所述目标页面中包括：管理页面中表单增删改查的API接口，用于对数据库中真实数据进行操作。

可选地，每个模板页面的类型是html页面、js页面、css页面、node.js页面中的任意一种，或所述html页面、所述js页面、所述css页面、所述node.js页面的任意组合。

第三方面，本发明实施例还提供一种电子设备，包括：存储器以及处理器，所述存储器用于存储计算机程序，所述处理器用于从所述存储器中读取并运行所述计算机程序，以执行上述方法。

第四方面，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行上述的方法的步骤。

与现有技术相比，本发明实施例的前端页面构建方法、装置及电子设备，通过提供用于生成工具载体，通过为所述工具载体的模板页面设置限定参数，进一步地加载配置模板页面代码即可生成目标页面，可以有效地提高开发效率。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本发明实施例提供的服务器与电子设备进行交互的示意图。

图2为本发明实施例提供的电子设备的方框示意图。

图3为本发明实施例提供的前端页面构建方法的流程图。

图4为一个实例中的参数设置界面的示意图。

图5为另一个实例中的参数设置界面的示意图。

图6为再一个实例中的参数设置界面的示意图。

图7为又一个实例中的参数设置界面的示意图。

图8为还一个实例中的参数设置界面的示意图。

图9为本发明实施例提供的前端页面构建装置的功能模块示意图。

具体实施方式

下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本发明的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

在前端日常开发中经常碰到的一个开发场景就是每个页面都可能会有很多类似的html、css、js的基础代码，最常见的管理系统的页面中有大量table标签、list标签、搜索框、对话框和增删改查以及输入框校验的操作。如果一个工程中有多个包含有很多基础代码的页面，会花费大量的时间在重复的代码编写上。

正是基于开发中高频的痛点场景，本申请实施例构建了一套能够根据用户选择自动生成对应的管理系统页面模板的代码自动化工具，自动封装了表单的查询分页显示和增删改查操作接口，并对页面所有输入框集成了自动校验。本申请实施例中通过构建前端开发中的相关页面，大大节省了页面的构建时间，提升了前端开发的效率，对前端的日常开发有着十分重要的意义。

基于上述描述，本申请提供以下几个实施例可以有效地解决上述技术问题，具体描述如下。

实施例一

本实施例提供前端页面构建所需的运行环境，以及用于前端页面构建的电子设备。本实施例提供的前端页面构建可以使用电子设备在本地实现；也可以使用线上的模式，也就是通过电子设备与服务器进行数据交互的方式实现。

如图1所示，是本发明实施例提供的电子设备100与服务器200进行交互的示意图。服务器200通过网络与一个或多个电子设备100进行通信连接，以进行数据通信或交互。所述服务器200可以是网络服务器、数据库服务器等。电子设备100可以是个人电脑(personalcomputer，PC)、平板电脑、智能手机、个人数字助理(personal digital assistant，PDA)等。

本实施例中，服务器200提供用于目标前端的线上开发环境的服务。电子设备100可以通过用户账号登入服务器200获取服务器200提供的目标前端的线上开发环境的服务。在一种实施方式中，每个用户账号可以对应设置有相关权限，例如，相关权限可以是对所述目标前端的某一工程模块的更改权限。例如，电子设备100的用户账号A登入服务器200获得所述目标前端的线上开发环境的服务。用户账号A的权限是对第一工程模块的更改权限。则电子设备100可以对所述第一工程模块中的相关内容进行如下操作：上传更新代码至服务器200、上传新增第一工程模块中的功能代码至服务器200等与所述第一工程模块相关的代码变更操作。

如图2所示，是电子设备100的方框示意图。电子设备包括前端页面构建装置110、存储器111、存储控制器112、处理器113、外设接口114、输入输出单元115、显示单元116。本领域普通技术人员可以理解，图2所示的结构仅为示意，其并不对电子设备100的结构造成限定。例如，电子设备100还可包括比图2中所示更多或者更少的组件，或者具有与图2所示不同的配置。

存储器111、存储控制器112、处理器113、外设接口114、输入输出单元115及显示单元116各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述前端页面构建装置110包括至少一个可以软件或固件(firmware)的形式存储于所述存储器111中或固化在所述电子设备100的操作系统(operating system，OS)中的软件功能模块。所述处理器113用于执行存储器中存储的可执行模块，例如所述前端页面构建装置110包括的软件功能模块或计算机程序。

其中，存储器111可以是，但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-OnlyMemory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。其中，存储器111用于存储程序，所述处理器113在接收到执行指令后，执行所述程序，本发明实施例任一实施例揭示的过程定义的电子设备100所执行的方法可以应用于处理器113中，或者由处理器113实现。

处理器113可能是一种集成电路芯片，具有信号的处理能力。上述的处理器113可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

外设接口114将各种输入/输出装置耦合至处理器113以及存储器111。在一些实施例中，外设接口114，处理器113以及存储控制器112可以在单个芯片中实现。在其他一些实例中，他们可以分别由独立的芯片实现。

输入输出单元115用于提供给用户输入数据。所述输入输出单元115可以是，但不限于，鼠标和键盘等。

显示单元116在所述电子设备100与用户之间提供一个交互界面(例如用户操作界面)或用于显示图像数据给用户参考。在本实施例中，所述显示单元可以是液晶显示器或触控显示器。若为触控显示器，其可为支持单点和多点触控操作的电容式触控屏或电阻式触控屏等。支持单点和多点触控操作是指触控显示器能感应到来自该触控显示器上一个或多个位置处同时产生的触控操作，并将该感应到的触控操作交由处理器进行计算和处理。

本实施例中，电子设备100中可以安装有前端页面构建装置110对应的开发应用程序。启动所述开发应用程序，可以展示一个用于前端页面构建的用户界面。进一步地，开发应用程序中的模板页面可以是基于vue组件化开发，生成的模板页面的代码耦合度低，复用度高。

实施例二

请参阅图3，是本发明实施例提供的前端页面构建方法的流程图。下面将对图3所示的具体流程进行详细阐述。

步骤S301，运行工具载体启动命令，显示所述工具载体的多个模板页面对应的选项。

本实施例中可以通过shell运动工具载体的启动命令，运行启动命令后可以显示界面中显示多个模板页面对应的选项。

本实施例中，所述多个模板页面包括：完整的html页，表单和校验规则、单表格、单校验规则、表单列表页、对话框组件、后端dubbo接口、数据传输对象中的至少一种。

通过设置不同页面可以满足制作不同的页面均可以使用本实施例中的方法实现前端页面的构建。

本实施例中，每个模板页面的类型可以是html页面、js页面、css页面、node.js页面，或html页面、js页面、css页面、node.js页面的任意组合。

本实施例中，根据含有数据传输对象的模板页面生成的所述目标页面中包括管理页面中表单的增加、删除、修改、查询的功能。

步骤S302，接收在多个模板页面中进行选择的选择操作。

显示界面中的选项可以响应鼠标点选、触碰点选等选择操作，以根据选择操作加载生成模板页面对应的代码。当然，也可以响应通过电子设备上的机械按键对各个模板页面对应的选项的选择操作。

步骤S303，显示所述选择操作对应的模板页面的参数设置界面。

如图4所示，图4示出了一个参数设置界面的示意图。图4所示的参数设置界面包括：validatemonths(验证程序)区域和Limited parameter(限定参数)区域。

其中，validatemonths区域设置了一个验证程序，也就是模板页面对应的模板代码的生效时间。在一种实施方式中，在生效时间后可以提供一个输入框，用于接收输入的时间限制。在其它实施方式中，也可以以下拉菜单的形式供用户选择时间。还可以是以其它可以实施的方式接收时间的限定。可以理解的是，在本实施例提供的参数设置界面中提供有validatemonths区域的基础上，可以根据具体使用需求设置更多或更少的验证程序，使生成的模板代码可以更多或更显的验证程序。

其中，Limited parameter区域设置了两组限定参数，分别为：限定参数1和限定参数2。图4所示的实例中，限定参数1和限定参数2后分别提供了一个输入框，用于接收输入的限定参数。在其它实施方式中，每组限定参数对应的输入参数的模式可以不同，例如，需要输入有限数量中的数值时，可以选择以下拉菜单的模式；再例如，需要输入的限定参数是人名、特征名、昵称等存在不定性的参数时，可以以提供输入框接收数据的模式；再例如，需要输入的是在有限项中进行选择的数据，可以提供多个选项供用户选择的模式，例如，选择内容可以是是或否等，可以提供“是”和“否”的两个选项。

在一种实施方式中，含有校验规则的模板页面中包括校验接收到的限定参数的校验功能。其中校验规则的模板页面的参数设置界面中可以包括可以是以输入框的方式显示，所述输入框用于接收输入的校验规则。

在另一种实施方式中，含有校验规则的模板页面对应的功能的代码可以设置有配置文件，配置文件中可以携带有校验规则。

步骤S304，接收在所述参数设置界面设置的限定参数。

用户更加想要设置页面的需求，在参数设置界面输入或者选择需要的限定参数。

步骤S305，根据所述限定参数加载对应的各个功能的代码，构建目标页面。

本实施例中，根据含有后端dubbo接口的模板页面生成的所述目标页面中包括：管理页面中表单增删改查的API接口，用于对数据库中真实数据进行操作。

本实施例中，每个模板页面中可以包含多个子功能，每个子功能的代码可以是预先存储，设置好限定参数后，加载各个子功能对应的代码，并将对应的限定参数传入对应的子功能的代码中，再将各个页面代码进行拼接，以构建目标页面。

本实施例中，参数设置界面可以包括多个区域，每个区域用于接收不同类型的参数。

其中，目标页面可以是PC(personal computer)端页面、手机h5页面、微信小程序等不同平台下的管理页面所需的代码。

本实施例中的前端页面构建方法可以是单机的形式，也就是在电子设备中完成页面的构建；也可以是以线上的形式，也可以理解为在构建页面时需要从服务器中获取资源。

本实施例中的各个功能模块的代码被存储在指定存储空间中，需要加载各个功能的代码时，从指定存储空间中获取各个功能的代码。其中，指定存储空间可以是运行工具载体的电子设备的一指定存储空间，也可以是与电子设备通信连接的服务器中。

在一种实施方式中，各个功能的代码可以被存储在运行工具载体的电子设备中，在设置好限定参数后，可以从电子设备的指定存储空间中加载各个功能的代码。

在一种实施方式中，在电子设备中设置好限定参数后，将设置好的限定参数发送给服务器，由服务器加载限定参数对应的各个功能的代码，构建目标页面，并将构建的目标页面返回到电子设备中。

在一种实施方式中，在电子设备中设置好限定参数后，从服务器中获取需要的各个功能的代码，然后使用获取的各个功能的代码构建目标页。

本发明实施例的前端页面构建方法，通过提供用于生成工具载体，通过为所述工具载体的模板页面设置限定参数，进一步地加载配置模板页面代码即可生成目标页面，可以有效地提高开发效率。

为了方便用户操作，本申请实施例提供一个可视化的设置界面，可视化的设置界面可以接收用户的选择操作，获取用户输入的各种字符串。因此本申请实施例在图3所示的基本流程的基础上，可以丰富图3所示的流程图中的各个步骤的实施方式，具体描述如下。

步骤S303还可以通过以下方式实施：

在所述参数设置界面的第一区域显示标识设置区域，所述标识设置区域用于接收输入待构建页面的基本属性；

在所述参数设置界面的第二区域显示功能设置区域，所述功能设置区域用于接收输入待构建页面的功能属性。

其中，第一区域用于显示标识设置区域，用户可以在第一区域中设置待构建的目标页面的基本属性，例如，基本属性可以包括生效时间、适用区域、适用人群、页面名称等信息。当然，第一区域还可以显示更多的设定区域，用于接收用户输入的更多的基本属性。

其中，第二区域用于显示功能设置区域，用户可以在第一区域中设置待构建的目标页面的功能属性，例如，功能属性可包括各个功能单元所需的参数。功能属性还可以包括预先存储的子功能的代码中待补充的参数等。

如图5所示，图5所示的参数设置界面的示意图是在图4的基础上增设了用于设置标识的标识设置区域。其中，图5增设的标识设置区域设置了两个标识单元，分别是：标识1单元和标识2单元。

标识1单元可以用于设置业务类型，标识2单元可以用于设置地区。其中，业务类型可以是在有限项中选择一项，则标识1后可以提供下拉选择菜单，下拉菜单中可以提供多个供选择的业务类型选项。在其它实施方式中，业务类型可以是不限定为指定选项中的一项，也就是用于可以随意命名设置，则标识1对应位置可以设置图5所示的输入框。

标识2单元可以用于设置地区，所述则标识2后可以提供下拉选择菜单，下拉菜单中提供多个供选择的地区名。关于图5其它区域的详细描述可以参考图4对应的描述内容。

通过设置标识设置区域供用户操作可以方便用户在需要的时候可以个性化设置需要生成的目标页面，以适应不同用户的需求，提高用户体验。

考虑不同的用户需要制作的页面可能有不同的功能模块，例如，用户在制作页面过程中可能不需要参数设置界面中已经存在的子功能设置单元对应的子功能；再例如，用户在制作页面是，可能需要更多参数设置界面中没有的子功能设置单元对应的子功能，基于上述问题的描述，本申请实施例还可以提供多个实施方式方便用户添加或删除子功能设置单元。

所述在所述参数设置界面的第二区域显示功能设置区域的步骤，包括：在所述第二区域显示子功能设置单元，以及与所述子功能设置单元对应的删除按钮。

在所述显示所述选择操作对应的模板页面的参数设置界面的步骤之后，本实施例中的前端页面构建方法还包括：接收到对所述删除按钮的操作后，删除所述操作对应子功能设置单元。

请参阅图6，图6所示的参数设置界面的示意图是在图5的基础上增设了用于删除各个子功能设置单元的删除按钮。响应对删除按钮的点选操作，可以关于删除按钮对应的子功能设置单元。

例如，如图6所示的生效时间对应的子功能设置单元对应的删除按钮被点选后，生效时间对应的子功能设置单元被删除，最后被构建的目标页面中不包含关于生效时间的限定。

方便用户关于一些默认的或者已经显示在参数设置界面的子功能设置单元，个性化保留需要的子功能设置单元，从而满足用户的不同需求，提高用户体验。

所述在所述参数设置界面的第二区域显示功能设置区域的步骤还可以包括：在所述第二区域显示添加按钮。

为了满足更多用户对不同的页面的不同需求，还可以添加需要的子功能设置单元。所述前端页面构建方法还包括：接收到对所述添加按钮的操作后，生成目标子功能设置单元。

本实施例中，所述生成目标子功能设置单元的步骤，包括：根据接收到的选择操作，获取子功能设置模板；接收为所述子功能设置模板子功能名称，以形成子功能设置单元。

进一步地，响应对添加按钮的操作，可以显示多个不同功能的子功能设置单元的选项。每个选项可以对应一子功能设置单元，每个子功能设置单元对应预先存储有用于实现该子功能设置单元的代码。

进一步地，多个不同功能的子功能设置单元的选项的选择之后，还可以提供一个设置名称的显示界面，可以接收用户对该子功能设置单元进行命名。

请参阅图6，图6所示的参数设置界面的示意图是在图5的基础上增设了用于添加子功能设置单元的添加按钮。响应对添加按钮的点选操作，添加设置对应的子功能设置单元。例如，点选图6所示的validatemonths区域对应的添加按钮后，可弹出多个待选的子功能设置单元的选项，可以进一步接收用户的选择，以添加子功能设置单元。

通过设置添加按钮供用户操作，从而实现不同用户对不同的子功能的需求，从而进一步地满足用户的不同的需求，提高用户体验。

本实施例中，所述子功能设置单元还包括备注设置单元，所述生成目标子功能设置单元的步骤还包括：生成备注设置框，形成所述备注设置单元，所述备注设置框用于接收所述目标页面的备注信息。

本实施例中，备注信息可以是提示用户操作流程的备注信息；也指导用户操作规则的备注信息等。备注信息可以提供给用户一些参考信息，方便用户操作或使用通过本申请实施例的前端页面构建方法生成的页面。

在一种实施方式中，请参阅图7，图7所示的参数设置界面的示意图是在图6的基础上增设了用于接收待生成的目标页面的备注信息的备注框。如图所示，在validatemonths区域和Limited parameter区域之间设置备注区域，备注区域包括：名称“备注”和设置在名称后的输入框。在另一种实施方式中，可以预先存储与预先存储的子功能代码对应的备注信息，则备注区域中可包括：名称“备注”和以下拉菜单的形式展示多个待选择的备注信息选项。

在其它实施方式中，备注信息可以是根据子功能设置单元对应的子功能对应的，因此，当子功能设置单元确定时，其对应的备注信息也就确定，这种情况下，不需要用户手动输入备注信息，可以直接生成备注信息。例如，每个子功能设置单元对应的子功能可以对应有具体的操作需求，每个子功能设置单元被加载时，可以自动加载用于解释该子功能设置单元对应的子功能的操作流程、注意事项等备注信息。子功能设置单元可以在多种条件下被加载，例如，通过添加按钮添加一子功能设置单元时，该子功能设置单元被加载；再例如，在接收到多个模板页面中进行选择的选择操作后，加载该模板页面对应的参数设置界面时，可以加载该模板页面多个子功能设置单元。

通过为待生成的目标页面设置备注信息，可以方便使用生成的目标页面的用户能够更好地更快地使用目标页面，从而使用目标页面更容易被接受使用，另外设置一些需要注意事项等提示消息，可以方便制作方能够更好地了解目标页面的注意事项，通过增设备注区域可以为多方用户提供方便，提高用户体验。

本实施例中，每个子功能设置单元包括多个用于接收输入的限定参数的参数接收部，所述生成目标子功能设置单元的步骤还包括：接收对每个参数接收部设置的参数校验规则，所述参数校验规则用于对对应的所述参数接收部接收到的限定参数进行验证。

本实施例中，校验方式可以是预先通过在配置文件中自定义的校验规则进行校验的，也可以用户可以动态进行配置。进一步地，校验规则还可以按照需求删除。

具体来说，校验规则的数量可以配任意条。可以根据校验规则对应限定的数据进行校验。

校验的模式可以包括以下两种：输入类型的校验和自定义函数的校验。其中，输入类型的校验是指校验参数设置界面中的输入框接收到的输入的文本类型：如整数、小数、时间、手机号码、邮件地址等。其中，自定义函数的校验是指根据用户的实际需要制定较为复杂的校验函数，例如，校验一个用户输入的值是否是一个5-50之间的偶数，且能被5整除，那么就需要输入校验函数作为规则进行校验。

进一步地，校验的触发场景也可以是自定义的，如是在用户完成输入之后，还是用户改变上一次输入，还是输入框失去焦点等场景。

进一步地，校验的提示文字和提示方式也是可以自定义的，例如，校验失败后提示的文案模板。其中，提示文案模板的方式可以是弹窗提示，也可以是输入框的后面显示文字提示。当然，还可以是其它提示方式。

本实施例中，含有表单的模板页面中包括：用于生成表单子单元、用于设置分页子单元和用于设置查询功能。

本实施例中，所述接收在所述参数设置界面设置的限定参数的步骤，包括：接收生成的所述目标页面所属表单的层级限定参数；接收生成的所述目标页面表单内容限制的内容限定参数。

下面在一个实例中描述一个参数页面的各个区域的功能作用。

如图8所示，其中图8所示的参数设置界面包括显示标识设置区域的第一区域，本实例中的标识设置区域包括用于设置业务类型的“业务”栏，和用于设置适用城市的“城市”栏。在一个实例中，“业务”栏可以以图示所示的方式设置下拉菜单，下拉菜单中可以显示多个业务类型的选项，用户可以按照需求进行选择。在一个实例中，“城市”栏可以以图示所示的方式设置下拉菜单，下拉菜单中可以显示多个城市的选项，用户可以按照需求进行选择。

其中图8所示的参数设置界面包括显示功能设置区域的第二区域，图示中的第二区域包括：validatemonths区域、操作备注区域以及levelArr区域。其中，validatemonths区域包括“生效时间”栏，用于设置生效时间。当然，validatemonths区域还可以设置更多的栏，用于接收其它需要限制的参数。操作备注可以用于接收提示用户操作注意事项、操作指南等内容。LevelArr区域可以用于设置输入对应功能代码中的参数。其中，LevelArr区域包括“级别名称”栏，用于设置当前设置的子功能的级别，例如，当前子功能可以对应生成表单，则“级别名称”栏可以用于生成第几层表单；例如，当前子功能可以对应生成HTML页面，则“级别名称”栏可以用于生成第几级页面，其中，第一级页面表示通过页面链接启动的首页显示页面，第二级页面表示在首页中通过选择指令或者触发按钮启动的页面。其中，LevelArr区域包括“LevelmArr”栏，用于添加功能代码中需要限定的参数，其中，图8所示的实例中，“LevelmArr”栏中还包括“服务分”栏和“月份”栏。图中所示的“服务分”栏和“月份”栏分别以下拉菜单的形式接收用户的选择。在其它实例中“服务分”栏和“月份”栏可以以输入框的形式接收用户输入的参数。

本申请实施例通过构建了一套能够根据用户选择生成对应的管理系统页面模板的代码自动化工具，可以实现前端页面构建，从而可以解决以下技术问题：

代码自动生成：针对前端日常开发中管理系统页面的重复代码，本申请实施例根据用户选择的模板页面能够一键自动生成所需的模板代码，节省页面的构建时间。

代码自动校验：针对管理系统页面中大量的输入框校验，本发明对生成的模板代码中的输入框进行了自动校验，避免了表单提交时繁琐的校验代码。

自动封装了页面中表单的查询、分页和数据列表显示：针对表单页面基本的查询、分页和数据列表显示功能，本申请实施例封装了表单的这些基本功能，保证了表单功能的独立性和完整性。

自动封装了页面中表单的增删改查功能：针对表单页面常用的增删改查操作，本申请实施例封装了表单增删改查的API接口，实际使用中只需要配置好API接口的路径就能自动完成表单的增删改查，提高了开发效率。

实施例三

请参阅图9，是本发明实施例提供的图2所示的前端页面构建装置的功能模块示意图。本实施例中的前端页面构建装置中的模块用于执行上述方法实施例中的各个步骤。所述前端页面构建装置包括以下模块。

启动模块401，用于运行工具载体启动命令，显示所述工具载体的多个模板页面对应的选项。

选择模块402，用于接收在多个模板页面中进行选择的选择操作。

显示模块403，用于显示所述选择操作对应的模板页面的参数设置界面。

接收模块404，用于接收在所述参数设置界面设置的限定参数。

构建模块405，用于根据所述限定参数加载对应的各个功能的代码，构建目标页面。

本实施例中，所述显示模块还用于：

在所述参数设置界面的第一区域显示标识设置区域，所述标识设置区域用于接收输入待构建页面的基本属性；

在所述参数设置界面的第二区域显示功能设置区域，所述功能设置区域用于接收输入待构建页面的功能属性。

本实施例中，所述显示模块还用于：

在所述第二区域显示子功能设置单元，以及与所述子功能设置单元对应的删除按钮；

所述前端页面构建装置还包括：

删除模块，用于接收到对所述删除按钮的操作后，删除所述操作对应子功能设置单元。

本实施例中，所述显示模块还用于：

在所述第二区域显示添加按钮；

所述前端页面构建装置还包括：

生成模块，用于接收到对所述添加按钮的操作后，生成目标子功能设置单元。

本实施例中，所述生成模块还用于：

根据接收到的选择操作，获取子功能设置模板；

接收为所述子功能设置模板子功能名称，以形成子功能设置单元。

本实施例中，所述子功能设置单元还包括备注设置单元，所述生成模块还用于：

生成备注设置框，形成所述备注设置单元，所述备注设置框用于接收所述目标页面的备注信息。

本实施例中，每个子功能设置单元包括多个用于接收输入的限定参数的参数接收部，所述生成模块还用于：

接收对每个参数接收部设置的参数校验规则，所述参数校验规则用于对对应的所述参数接收部接收到的限定参数进行验证。

本实施例中，所述多个模板页面包括：完整的html页，表单和校验规则、单表格、单校验规则、表单列表页、对话框组件、后端dubbo接口、数据传输对象中的至少一种。

本实施例中，含有表单的模板页面中包括：用于生成表单子单元、用于设置分页子单元和用于设置查询功能。

本实施例中，所述接收模块还用于：

接收生成的所述目标页面所属表单的层级限定参数；

接收生成的所述目标页面表单内容限制的内容限定参数。

本实施例中，含有校验规则的模板页面中包括校验接收到的限定参数的校验功能。

本实施例中，根据含有数据传输对象的模板页面生成的所述目标页面中包括管理页面中表单的增加、删除、修改、查询的功能。

本实施例中，根据含有后端dubbo接口的模板页面生成的所述目标页面中包括：管理页面中表单增删改查的API接口，用于对数据库中真实数据进行操作。

本实施例中，每个模板页面的类型是html页面、js页面、css页面、node.js页面中的任意一种，或所述html页面、所述js页面、所述css页面、所述node.js页面的任意组合。

本发明实施例的前端页面构建装置，通过提供用于生成工具载体，通过为所述工具载体的模板页面设置限定参数，进一步地加载配置模板页面代码即可生成目标页面，可以有效地提高开发效率。

本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行上述的方法的步骤。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (28)

1.一种前端页面构建方法，其特征在于，包括：

运行工具载体启动命令，显示所述工具载体的多个模板页面对应的选项；

接收在多个模板页面中进行选择的选择操作；

显示所述选择操作对应的模板页面的参数设置界面，所述参数设置界面中包括参数接收部以及用于设置模板页面对应的模板代码的生效时间的区域；

接收在所述参数设置界面设置的限定参数；

接收对每个参数接收部设置的参数校验规则，所述参数校验规则用于对对应的所述参数接收部接收到的限定参数进行验证，其中，所述参数校验规则的校验模式包括：输入类型的校验和自定义函数的校验，所述输入类型的校验包括校验参数设置界面中的输入框接收到的输入的文本类型，所述自定义函数的校验包括根据需要制定的校验函数；所述参数校验规则在用户完成输入后、改变上一次输入或输入框失去焦点中任意场景下被触发；以及

根据所述限定参数加载对应的各个功能的代码，构建目标页面。

2.如权利要求1所述的前端页面构建方法，其特征在于，所述显示所述选择操作对应的模板页面的参数设置界面的步骤，包括：

在所述参数设置界面的第一区域显示标识设置区域，所述标识设置区域用于接收输入待构建页面的基本属性；

在所述参数设置界面的第二区域显示功能设置区域，所述功能设置区域用于接收输入待构建页面的功能属性。

3.如权利要求2所述的前端页面构建方法，其特征在于，所述在所述参数设置界面的第二区域显示功能设置区域的步骤，包括：

在所述第二区域显示子功能设置单元，以及与所述子功能设置单元对应的删除按钮；

在所述显示所述选择操作对应的模板页面的参数设置界面的步骤之后，所述方法还包括：

接收到对所述删除按钮的操作后，删除所述操作对应子功能设置单元。

4.如权利要求2所述的前端页面构建方法，其特征在于，所述在所述参数设置界面的第二区域显示功能设置区域的步骤，包括：

在所述第二区域显示添加按钮；

在所述显示所述选择操作对应的模板页面的参数设置界面的步骤之后，所述方法还包括：

接收到对所述添加按钮的操作后，生成目标子功能设置单元。

5.如权利要求4所述的前端页面构建方法，其特征在于，所述生成目标子功能设置单元的步骤，包括：

根据接收到的选择操作，获取子功能设置模板；

接收所述子功能设置模板的子功能名称，以形成子功能设置单元。

6.如权利要求5所述的前端页面构建方法，其特征在于，所述子功能设置单元还包括备注设置单元，所述生成目标子功能设置单元的步骤还包括：

生成备注设置框，形成所述备注设置单元，所述备注设置框用于接收所述目标页面的备注信息。

7.如权利要求1-6任意一项所述的前端页面构建方法，其特征在于，所述多个模板页面中每个模板页面包括：完整的html页，表单和校验规则、单表格、单校验规则、表单列表页、对话框组件、后端dubbo接口、数据传输对象中的至少一种。

8.如权利要求7所述的前端页面构建方法，其特征在于，含有表单的模板页面中包括：用于生成表单子单元、用于设置分页子单元和用于设置查询功能。

9.如权利要求8所述的前端页面构建方法，其特征在于，所述接收在所述参数设置界面设置的限定参数的步骤，包括：

接收生成的所述目标页面所属表单的层级限定参数；

接收生成的所述目标页面表单内容限制的内容限定参数。

10.如权利要求7所述的前端页面构建方法，其特征在于，含有校验规则的模板页面中包括校验接收到的限定参数的校验功能。

11.如权利要求7所述的前端页面构建方法，其特征在于，根据含有数据传输对象的模板页面生成的所述目标页面中包括管理页面中表单的增加、删除、修改、查询的功能。

12.如权利要求7所述的前端页面构建方法，其特征在于，根据含有后端dubbo接口的模板页面生成的所述目标页面中包括：管理页面中表单增删改查的API接口，用于对数据库中真实数据进行操作。

13.如权利要求1-6任意一项所述的前端页面构建方法，其特征在于，每个模板页面的类型是html页面、js页面、css页面、node.js页面中的任意一种，或所述html页面、所述js页面、所述css页面、所述node.js页面的任意组合。

14.一种前端页面构建装置，其特征在于，包括：

启动模块，用于运行工具载体启动命令，显示所述工具载体的多个模板页面对应的选项；

选择模块，用于接收在多个模板页面中进行选择的选择操作；

显示模块，用于显示所述选择操作对应的模板页面的参数设置界面，所述参数设置界面中包括参数接收部以及用于设置模板页面对应的模板代码的生效时间的区域；

接收模块，用于接收在所述参数设置界面设置的限定参数；

生成模块，用于接收对每个参数接收部设置的参数校验规则，所述参数校验规则用于对对应的所述参数接收部接收到的限定参数进行验证，其中，所述参数校验规则的校验模式包括：输入类型的校验和自定义函数的校验，所述输入类型的校验包括校验参数设置界面中的输入框接收到的输入的文本类型，所述自定义函数的校验包括根据需要制定的校验函数；所述参数校验规则在用户完成输入后、改变上一次输入或输入框失去焦点中任意场景下被触发；以及

构建模块，用于根据所述限定参数加载对应的各个功能的代码，构建目标页面。

15.如权利要求14所述的前端页面构建装置，其特征在于，所述显示模块还用于：

在所述参数设置界面的第一区域显示标识设置区域，所述标识设置区域用于接收输入待构建页面的基本属性；

在所述参数设置界面的第二区域显示功能设置区域，所述功能设置区域用于接收输入待构建页面的功能属性。

16.如权利要求15所述的前端页面构建装置，其特征在于，所述显示模块还用于：

在所述第二区域显示子功能设置单元，以及与所述子功能设置单元对应的删除按钮；

所述前端页面构建装置还包括：

删除模块，用于接收到对所述删除按钮的操作后，删除所述操作对应子功能设置单元。

17.如权利要求15所述的前端页面构建装置，其特征在于，所述显示模块还用于：

在所述第二区域显示添加按钮；

所述前端页面构建装置还包括：

生成模块，用于接收到对所述添加按钮的操作后，生成目标子功能设置单元。

18.如权利要求17所述的前端页面构建装置，其特征在于，所述生成模块还用于：

根据接收到的选择操作，获取子功能设置模板；

接收所述子功能设置模板的子功能名称，以形成子功能设置单元。

19.如权利要求18所述的前端页面构建装置，其特征在于，所述子功能设置单元还包括备注设置单元，所述生成模块还用于：

生成备注设置框，形成所述备注设置单元，所述备注设置框用于接收所述目标页面的备注信息。

20.如权利要求14-19任意一项所述的前端页面构建装置，其特征在于，所述多个模板页面中每个模板页面包括：完整的html页，表单和校验规则、单表格、单校验规则、表单列表页、对话框组件、后端dubbo接口、数据传输对象中的至少一种。

21.如权利要求20所述的前端页面构建装置，其特征在于，含有表单的模板页面中包括：用于生成表单子单元、用于设置分页子单元和用于设置查询功能。

22.如权利要求21所述的前端页面构建装置，其特征在于，所述接收模块还用于：

接收生成的所述目标页面所属表单的层级限定参数；

接收生成的所述目标页面表单内容限制的内容限定参数。

23.如权利要求20所述的前端页面构建装置，其特征在于，含有校验规则的模板页面中包括校验接收到的限定参数的校验功能。

24.如权利要求20所述的前端页面构建装置，其特征在于，根据含有数据传输对象的模板页面生成的所述目标页面中包括管理页面中表单的增加、删除、修改、查询的功能。

25.如权利要求20所述的前端页面构建装置，其特征在于，根据含有后端dubbo接口的模板页面生成的所述目标页面中包括：管理页面中表单增删改查的API接口，用于对数据库中真实数据进行操作。

26.如权利要求14-19任意一项所述的前端页面构建装置，其特征在于，每个模板页面的类型是html页面、js页面、css页面、node.js页面中的任意一种，或所述html页面、所述js页面、所述css页面、所述node.js页面的任意组合。

27.一种电子设备，其特征在于，包括：存储器以及处理器，所述存储器用于存储计算机程序，所述处理器用于从所述存储器中读取并运行所述计算机程序，以执行权利要求1～13任一项所述方法。

28.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其特征在于，所述计算机程序被处理器运行时执行上述的权利要求1～13中任一项所述的方法的步骤。