CN113485702A - 配置化生成前端页面的方法、装置、设备及存储介质 - Google Patents

Abstract

本发明公开了一种配置化生成前端页面的方法、装置、设备及存储介质，通过在前端页面生成代码中引用了filter渲染文件以及list渲染文件，并且分别传入了当前的filter配置文件(变量$filter)和list配置文件(变量$list)，然后filter渲染页面根据传入的filter配置项渲染出分类名称以及主档分类两个查询字段，并且根据是否带有查询字段自动渲染了查询和重置按钮。同样的，list渲染页面会根据传入的list配置文件中的list_url调用对应的方法获取到表格数据，然后根据list配置文件展示对应的字段，主要运用了layui的表格自动渲染的功能。最终通过整合filter渲染后的数据和list渲染后的数据得到前端页面，其中filter渲染文件和list渲染文件不需要重复编写，每次开发前端功能，直接调用即可。

Description

配置化生成前端页面的方法、装置、设备及存储介质

技术领域

本发明属于前端页面开发的技术领域，尤其涉及一种配置化生成前端页面的方法、装置、设备及存储介质。

背景技术

一般情况下开发一个软件系统可能前端风格都是差不多的，但是在不同的开发者开发之后可能前端的html以及css样式都是有各自的编码风格，虽然达到的页面效果是一样的，但是代码却是各有千秋，可能很多页面格式都是差不多的，但是每个页面都应用了各自单独的样式，这样就会造成重复代码冗余，并且也不利于后期页面的维护。

发明内容

本发明的目的是提供一种配置化生成前端页面的方法、装置、设备及存储介质，通过书写简单的配置文件filter(按钮以及查询条件等渲染)以及list(数据表格渲染)来达到相同的前端渲染效果，在前端数据表格的加载方面，只需要在配置文件中表明表格数据的来源，就可以按照传入的方法获取到数据来渲染表格，无需对页面单独编码表格数据，避免出现代码冗余及页面维护困难的现象。

为解决上述问题，本发明的技术方案为：

一种配置化生成前端页面的方法，包括：

将预先撰写的filter配置文件及其默认值作为参数传递给SlotFilterService类中的getDataByConfig方法，对filter配置文件中的配置信息做处理，得到变量$filter的数据结构；

将预先撰写的list配置文件及其默认值作为参数传递给SlotListService类中的getDataByConfig方法，对list配置文件中的配置信息做处理，得到变量$list的数据结构；

传递变量$filter及变量$list给前端页面生成代码，实现包括按钮、查询字段及数据表格在内的前端页面渲染。

根据本发明一实施例，所述filter配置文件中包括标题、按钮、隐藏字段及查询字段的配置信息，所述list配置文件中包括表格数据请求路径、初始页面显示记录数量、表格宽度及需要显示的表格字段的配置信息。

根据本发明一实施例，所述对filter配置文件中的配置信息做处理进一步包括：

对filter配置文件中的按钮进行处理，将每个按钮的访问路径进行解析，得到每个按钮点击后的请求路径；

对filter配置文件中查询字段进行处理，判断查询字段的类型是否为select选项，若是，则判定所述查询字段为下拉框，调用所述查询字段对应的方法，获取下拉框对应的下拉数据。

根据本发明一实施例，所述将每个按钮的访问路径进行解析，得到每个按钮点击后的请求路径进一步包括：

通过Config::get的方式获取filter配置文件中的内容，对filter配置文件中的按钮进行循环判断是否存在打开新窗口的请求路径及是否带有返回路径，若带有返回路径，则判断是否为复杂返回路径，若是，则将复杂返回路径进行拆分，解析出复杂返回路径的不同类型，根据类型返回相应的页面。

根据本发明一实施例，所述对filter配置文件中查询字段进行处理进一步包括：

判断查询字段的field是否与filter配置文件的默认值中的键相对应，若是，则对所述查询字段添加默认值，作为初始查询条件加载数据表格。

根据本发明一实施例，所述对list配置文件中的配置信息做处理进一步包括：

通过Config::get的方式获取list配置文件中的内容，得到当前用户设置的初始页面显示记录数量，并对表格的表头及数据行内的按钮做中文翻译。

一种配置化生成前端页面的装置，包括：

第一变量生成模块，用于将预先撰写的filter配置文件及其默认值作为参数传递给SlotFilterService类中的getDataByConfig方法，对filter配置文件中的配置信息做处理，得到变量$filter的数据结构；

第二变量生成模块，用于将预先撰写的list配置文件及其默认值作为参数传递给SlotListService类中的getDataByConfig方法，对list配置文件中的配置信息做处理，得到变量$list的数据结构；

页面渲染模块，用于传递变量$filter及变量$list给前端页面生成代码，实现包括按钮、查询字段及数据表格在内的前端页面渲染。

根据本发明一实施例，所述第一变量生成模块中的filter配置文件包括标题、按钮、隐藏字段及查询字段的配置信息，所述第二变量生成模块中的list配置文件包括表格数据请求路径、初始页面显示记录数量、表格宽度及需要显示的表格字段的配置信息。

一种配置化生成前端页面的设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行计算机可读指令时，实现本发明一实施例中的配置化生成前端页面的方法。

一种计算机可读介质，存储计算机程序，所述计算机程序被一个或多个处理器执行时，实现本发明一实施例中的配置化生成前端页面的方法。

本发明由于采用以上技术方案，使其与现有技术相比具有以下的优点和积极效果：

本发明一实施例中的配置化生成前端页面的方法，针对在开发软件系统时，不同的开发者采用不同的代码实现相同的前端页面，从而造成代码冗余及页面维护难的问题，通过将预先撰写的filter配置文件及其默认值作为参数传递给SlotFilterService类中的getDataByConfig方法，对filter配置文件中的配置信息做处理，得到变量$filter的数据结构；将预先撰写的list配置文件及其默认值作为参数传递给SlotListService类中的getDataByConfig方法，对list配置文件中的配置信息做处理，得到变量$list的数据结构；传递变量$filter及变量$list给前端页面生成代码，实现包括按钮、查询字段及数据表格在内的前端页面渲染。通过配置化生成前端页面，即不同的开发者在开发页面格式相同或相似的前端页面时，只需调用相应的配置文件即可，无需单独编码，避免出现代码冗余及页面维护困难的现象。

附图说明

图1为本发明一实施例中的配置化生成前端页面的方法流图；

图2为本发明一实施例中的对filter配置文件中按钮进行处理的部分代码图；

图3为本发明一实施例中的对filter配置文件中按钮进行处理的另一部分代码图；

图4为本发明一实施例中的变量$filter的数据结构的代码图；

图5为本发明一实施例中的对list配置文件中数据表格处理的部分代码图；

图6为本发明一实施例中的变量$list的数据结构的代码图；

图7为本发明一实施例中的前端页面示意图；

图8为本发明一实施例中的配置化生成前端页面的装置的框图；

图9为本发明一实施例中的配置化生成前端页面的设备的示意图。

具体实施方式

以下结合附图和具体实施例对本发明提出的一种配置化生成前端页面的方法、装置、设备及存储介质作进一步详细说明。根据下面说明和权利要求书，本发明的优点和特征将更清楚。

实施例一

本实施例针对在开发软件系统时，不同的开发者采用不同的代码实现相同的前端页面，从而造成代码冗余及页面维护难的问题，提供了一种配置化生成前端页面的方法，通过书写简单的配置文件filter(按钮以及查询条件等渲染)以及list(数据表格渲染)来达到相同的前端渲染效果，在前端数据表格的加载方面，只需要在配置文件中表明表格数据的来源，就可以按照传入的方法获取到数据来渲染表格，无需对页面单独编码表格数据，避免出现代码冗余及页面维护困难的现象。

具体的，请参看图1，该配置化生成前端页面的方法包括：

S1：将预先撰写的filter配置文件及其默认值($filter_default_value)作为参数传递给SlotFilterService类中的getDataByConfig方法，对filter配置文件中的配置信息做处理，得到变量$filter的数据结构；

S2：将预先撰写的list配置文件及其默认值作为参数传递给SlotListService类中的getDataByConfig方法，对list配置文件中的配置信息做处理，得到变量$list的数据结构；

S3：传递变量$filter及变量$list给前端页面生成代码，实现包括按钮、查询字段及数据表格在内的前端页面渲染。

在步骤S1中，filter配置文件中包括标题、按钮、隐藏字段及查询字段的配置信息，对filter配置文件中的配置信息做处理进一步包括：

对filter配置文件中的按钮进行处理，将每个按钮的访问路径进行解析，得到每个按钮点击后的请求路径；

对filter配置文件中查询字段进行处理，判断查询字段的类型是否为select选项，若是，则判定所述查询字段为下拉框，调用所述查询字段对应的方法，获取下拉框对应的下拉数据；

对隐藏字段进行处理，将filter配置文件的默认值中的键与隐藏字段进行匹配，经匹配上的隐藏字段进行赋值。

其中，对filter配置文件中的按钮进行处理，将每个按钮的访问路径进行解析，得到每个按钮点击后的请求路径，请参看图2。通过Config::get的方式获取filter配置文件中的内容，对filter配置文件中的按钮进行循环判断是否存在打开新窗口的请求路径及是否带有返回路径，若带有返回路径，则判断是否为复杂返回路径，若是，则将复杂返回路径进行拆分，解析出复杂返回路径的不同类型，根据类型返回相应的页面。这里的复杂返回路径是指需要根据不同的页面入口返回不同的主页面的路径，在对复杂返回路径进行拆分时，可按照特定符合采用explode拆分，解析出不同类型的参数。

对于按钮的处理上，还包括对fixed类型的按钮的处理。对于该类型的按钮，需要浮动在页面底部。具体实现如下所示：

请参看图3，在步骤S1中，对filter配置文件中查询字段进行处理，判断查询字段的类型是否为select选项，若是，则判定所述查询字段为下拉框，调用所述查询字段对应的方法，获取下拉框对应的下拉数据。

判断查询字段的field是否与filter配置文件的默认值中的键相对应，若是，则对所述查询字段添加默认值，作为初始查询条件加载数据表格。

也就是说，对filter配置文件传入的查询按钮，首先需判断其类型，根据不同的类型，进行不同的处理。如果查询按钮是select类型那么就会根据传入的类和方法名执行对应的程序获取到下拉框对应的选项，如果查询按钮传入了默认值,那么进入页面的时候就会给对应的查询条件赋上初始值。

在步骤S1中，对于隐藏字段的处理，也就是对一些隐藏信息的处理，可将信息隐藏在html页面，以备后续的功能需要。具体实现如下所示：

上述步骤S1将预先撰写的filter配置文件及其默认值($filter_default_value)作为参数传递给SlotFilterService类中的getDataByConfig方法，对filter配置文件中的配置信息做处理，得到变量$filter的数据结构，该变量$filter的数据结构应用到具体的软件系统开发中，如对天猫的前端开发，请参看图4。

在步骤S2中，将预先撰写的list配置文件及其默认值作为参数传递给SlotListService类中的getDataByConfig方法，对list配置文件中的配置信息做处理，得到变量$list的数据结构；其中，list配置文件中包括表格数据请求路径、初始页面显示记录数量、表格宽度及需要显示的表格字段的配置信息。对list配置文件中的配置信息做处理进一步包括：

通过Config::get的方式获取list配置文件中的内容，得到当前用户设置的初始页面显示记录数量，并对表格的表头及数据行内的按钮做中文翻译。

请参看图5，SlotListService下的getDataByConfig的方法的具体实现，主要是获取session中客户设置的每页展示的记录数量，对表格的表头和每一行最后操作的按钮进行中文翻译，最终得到变量$list的数据结构，请参看图6。

在步骤S3中，传递变量$filter及变量$list给前端页面生成代码，实现包括按钮、查询字段及数据表格在内的前端页面渲染。

其中，前端页面生成代码中引用了filter渲染文件以及list渲染文件，并且分别传入了当前的filter配置文件(变量$filter)和list配置文件(变量$list)，然后filter渲染页面根据传入的filter配置项渲染出分类名称以及主档分类两个查询字段，并且根据是否带有查询字段自动渲染了查询和重置按钮。同样的，list渲染页面会根据传入的list配置文件中的list_url调用对应的方法获取到表格数据，然后根据list配置文件展示对应的字段，主要运用了layui的表格自动渲染的功能。最终通过整合filter渲染后的数据和list渲染后的数据得到如图7所示的前端页面，其中filter渲染文件和list渲染文件不需要重复编写，每次开发前端功能，直接调用即可。

实施例二

本实施例提供了一种配置化生成前端页面的装置，请参看图8，该配置化生成前端页面的装置包括：

第一变量生成模块1，用于将预先撰写的filter配置文件及其默认值作为参数传递给SlotFilterService类中的getDataByConfig方法，对filter配置文件中的配置信息做处理，得到变量$filter的数据结构；

第二变量生成模块2，用于将预先撰写的list配置文件及其默认值作为参数传递给SlotListService类中的getDataByConfig方法，对list配置文件中的配置信息做处理，得到变量$list的数据结构；

页面渲染模块3，用于传递变量$filter及变量$list给前端页面生成代码，实现包括按钮、查询字段及数据表格在内的前端页面渲染。

其中，第一变量生成模块1中的filter配置文件包括标题、按钮、隐藏字段及查询字段的配置信息，第二变量生成模块2中的list配置文件包括表格数据请求路径、初始页面显示记录数量、表格宽度及需要显示的表格字段的配置信息。

上述第一变量生成模块1、第二变量生成模块2及页面渲染模块3的功能及实现方法均如上述实施例一中所述，在此不再赘述。

实施例三

上述实施例二从模块化功能实体的角度对本发明配置化生成前端页面的装置进行描述，下面从硬件处理的角度对本发明配置化生成前端页面的设备进行详细描述。

请参看图9，该配置化生成前端页面的设备500可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(centralprocessingunits，CPU)510(例如，一个或一个以上处理器)和存储器520，一个或一个以上存储应用程序533或数据532的存储介质530(例如一个或一个以上海量存储设备)。其中，存储器520和存储介质530可以是短暂存储或持久存储。存储在存储介质530的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对配置化生成前端页面的设备500中的一系列指令操作。

进一步地，处理器510可以设置为与存储介质530通信，在配置化生成前端页面的设备500上执行存储介质530中的一系列指令操作。

配置化生成前端页面的设备500还可以包括一个或一个以上电源540，一个或一个以上有线或无线网络接口550，一个或一个以上输入输出接口560，和/或，一个或一个以上操作系统531，例如WindowsServe、Vista等等。

本领域技术人员可以理解，图9示出的配置化生成前端页面的设备结构并不构成对配置化生成前端页面的设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

本发明还提供一种计算机可读存储介质，该计算机可读存储介质可以为非易失性计算机可读存储介质，该计算机可读存储介质也可以为易失性计算机可读存储介质。该计算机可读存储介质中存储有指令，当该指令在计算机上运行时，使得计算机执行实施例一中的配置化生成前端页面的方法中的步骤。

实施例二中的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件的形式体现出来，该计算机软件存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-onlymemory，ROM)、随机存取存储器(Randomaccessmemory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的装置及设备的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

上面结合附图对本发明的实施方式作了详细说明，但是本发明并不限于上述实施方式。即使对本发明作出各种变化，倘若这些变化属于本发明权利要求及其等同技术的范围之内，则仍落入在本发明的保护范围之中。

Claims (10)

1.一种配置化生成前端页面的方法，其特征在于，包括：

将预先撰写的filter配置文件及其默认值作为参数传递给SlotFilterService类中的getDataByConfig方法，对filter配置文件中的配置信息做处理，得到变量$filter的数据结构；

将预先撰写的list配置文件及其默认值作为参数传递给SlotListService类中的getDataByConfig方法，对list配置文件中的配置信息做处理，得到变量$list的数据结构；

传递变量$filter及变量$list给前端页面生成代码，实现包括按钮、查询字段及数据表格在内的前端页面渲染。

2.如权利要求1所述的配置化生成前端页面的方法，其特征在于，所述filter配置文件中包括标题、按钮、隐藏字段及查询字段的配置信息，所述list配置文件中包括表格数据请求路径、初始页面显示记录数量、表格宽度及需要显示的表格字段的配置信息。

3.如权利要求1所述的配置化生成前端页面的方法，其特征在于，所述对filter配置文件中的配置信息做处理进一步包括：

对filter配置文件中的按钮进行处理，将每个按钮的访问路径进行解析，得到每个按钮点击后的请求路径；

对filter配置文件中查询字段进行处理，判断查询字段的类型是否为select选项，若是，则判定所述查询字段为下拉框，调用所述查询字段对应的方法，获取下拉框对应的下拉数据。

4.如权利要求3所述的配置化生成前端页面的方法，其特征在于，所述将每个按钮的访问路径进行解析，得到每个按钮点击后的请求路径进一步包括：

通过Config::get的方式获取filter配置文件中的内容，对filter配置文件中的按钮进行循环判断是否存在打开新窗口的请求路径及是否带有返回路径，若带有返回路径，则判断是否为复杂返回路径，若是，则将复杂返回路径进行拆分，解析出复杂返回路径的不同类型，根据类型返回相应的页面。

5.如权利要求3所述的配置化生成前端页面的方法，其特征在于，所述对filter配置文件中查询字段进行处理进一步包括：

判断查询字段的field是否与filter配置文件的默认值中的键相对应，若是，则对所述查询字段添加默认值，作为初始查询条件加载数据表格。

6.如权利要求1所述的配置化生成前端页面的方法，其特征在于，所述对list配置文件中的配置信息做处理进一步包括：

通过Config::get的方式获取list配置文件中的内容，得到当前用户设置的初始页面显示记录数量，并对表格的表头及数据行内的按钮做中文翻译。

7.一种配置化生成前端页面的装置，其特征在于，包括：

第一变量生成模块，用于将预先撰写的filter配置文件及其默认值作为参数传递给SlotFilterService类中的getDataByConfig方法，对filter配置文件中的配置信息做处理，得到变量$filter的数据结构；

第二变量生成模块，用于将预先撰写的list配置文件及其默认值作为参数传递给SlotListService类中的getDataByConfig方法，对list配置文件中的配置信息做处理，得到变量$list的数据结构；

页面渲染模块，用于传递变量$filter及变量$list给前端页面生成代码，实现包括按钮、查询字段及数据表格在内的前端页面渲染。

8.如权利要求7所述的配置化生成前端页面的装置，其特征在于，所述第一变量生成模块中的filter配置文件包括标题、按钮、隐藏字段及查询字段的配置信息，所述第二变量生成模块中的list配置文件包括表格数据请求路径、初始页面显示记录数量、表格宽度及需要显示的表格字段的配置信息。

9.一种配置化生成前端页面的设备，其特征在于，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行计算机可读指令时，实现如权利要求1至6中任意一项所述的配置化生成前端页面的方法。

10.一种计算机可读介质，存储计算机程序，其特征在于，所述计算机程序被一个或多个处理器执行时，实现如权利要求1至6中任意一项所述的配置化生成前端页面的方法。

Images