一种页面组件封装方法技术

本申请涉及计算机领域，公开了一种页面组件封装方法

【技术实现步骤摘要】
一种页面组件封装方法、装置、设备和存储介质


[0001]本申请涉及计算机领域，尤其涉及一种页面组件封装方法
、
装置
、
设备和存储介质
。

技术介绍

[0002]前端各个框架的出现给开发者的开发工作带来了许多的便利，前端的相关技术也在不断发展
。
前端的主要作用是对数据进行展示，将接口获取到的数据展示给用户以进行信息交互
。
为了让用户更加方便地查看数据，通常会使用如表格等组件对数据进行编辑和展示，从而使用户获得更加清晰
、
直观的数据结果
。
[0003]然而，如应用于银行业务的传统的系统表格功能使用起来较为复杂且复用性不高，有多少表格功能就需要重新开发编码多少组件，代码量非常大，另外实现表格的灵活配置渲染也是比较复杂的
。

技术实现思路

[0004]有鉴于此，为了解决现有技术存在的问题，本申请提供了一种可应用于如金融科技等领域或其他领域的页面组件封装方法
、
装置
、
设备和存储介质
。
[0005]第一方面，本申请提供一种页面组件封装方法，包括：
[0006]接收用户需求，根据所述用户需求为每个预先定义的公共字段配置相关属性信息，得到字段数据；
[0007]从所述字段数据中筛选出目标字段，并确定与所述目标字段对应的展示内容；
[0008]根据所述目标字段对应的所述属性信息中的组件类型，对所述目标字段进行组件渲染，得到组件数据；
[0009]对所述组件数据与所述目标字段进行封装，生成前端页面组件；其中，所述前端页面组件用于显示所述展示内容
。
[0010]在可选的实施方式中，所述从所述字段数据中筛选出目标字段，并确定与所述目标字段对应的展示内容，包括：
[0011]从所述字段数据中筛选出支持添加字段作为目标字段；
[0012]识别所述支持添加字段的属性值，若所述支持添加字段的属性值为真，则将所述支持添加字段对应绑定的字段内容作为展示内容
。
[0013]在可选的实施方式中，所述从所述字段数据中筛选出目标字段，并确定与所述目标字段对应的展示内容，包括：
[0014]从所述字段数据中筛选出定义列字段作为目标字段；
[0015]识别所述定义列字段的属性值，若所述定义列字段的属性值为真，则将所述定义列字段对应绑定的字段内容作为展示内容
。
[0016]在可选的实施方式中，所述对所述组件数据与所述目标字段进行封装，生成前端页面组件，包括：
[0017]基于所述组件数据对应的组件类型，对所述目标字段对应封装为组件对象；其中，若所述组件类型为搜索栏位组件，进而将相应的所述目标字段封装为动态网页对象；若所述组件类型为检索列组件，进而将相应的所述目标字段封装为动态网格对象；若所述组件类型为详情组件，进而将相应的所述目标字段封装为动态表对象；
[0018]基于所述组件对象，生成前端页面组件
。
[0019]在可选的实施方式中，所述根据所述用户需求为每个预先定义的公共字段配置相关属性信息，得到字段数据，包括：
[0020]识别所述用户需求中的需求参数，根据所述需求参数，从多个预先定义的公共字段中确定待配置的公共字段及其对应的属性值；其中，所述属性值包括组件类别和组件展示类型；
[0021]根据所述属性值，更改所述待配置的公共字段的属性信息，以使得所述属性信息与所述属性值一致，进而得到字段数据
。
[0022]在可选的实施方式中，在所述生成前端页面组件之后，还包括：
[0023]接收所述用户的扩列需求，查找到所述前端页面组件的定义列字段对应的定义段代码位置；
[0024]在所述定义段代码位置内添加插槽定义代码，以生成所述前端页面组件的扩列功能
。
[0025]在可选的实施方式中，在所述生成前端页面组件之后，还包括：
[0026]在所述前端页面组件与后端对接字段之间构建关联关系，以使得所述前端页面组件通过所述后端对接字段来对接后端服务器，以读取所述后端服务器中的数据
。
[0027]第二方面，本申请提供一种页面组件封装装置，包括：
[0028]配置模块，用于接收用户需求，根据所述用户需求为每个预先定义的公共字段配置相关属性信息，得到字段数据；
[0029]筛选模块，用于从所述字段数据中筛选出目标字段，并确定与所述目标字段对应的展示内容；
[0030]渲染模块，用于根据所述目标字段对应的所述属性信息中的组件类型，对所述目标字段进行组件渲染，得到组件数据；
[0031]封装模块，用于对所述组件数据与所述目标字段进行封装，生成前端页面组件；所述前端页面组件用于显示所述展示内容
。
[0032]第三方面，本申请提供一种计算机设备，所述计算机设备包括存储器和至少一个处理器，所述存储器存储有计算机程序，所述处理器用于执行所述计算机程序以实施前述的页面组件封装方法
。
[0033]第四方面，本申请提供一种计算机存储介质，其存储有计算机程序，所述计算机程序被执行时，实施根据前述的页面组件封装方法
。
[0034]本申请实施例具有如下有益效果：
[0035]本申请实施例提供了一种页面组件封装方法，该方法包括接收用户需求，根据用户需求为每个预先定义的公共字段配置相关属性信息，得到字段数据；从字段数据中筛选出目标字段，并确定与目标字段对应的展示内容；根据目标字段对应的属性信息中的组件类型，对目标字段进行组件渲染，得到组件数据；对组件数据与目标字段进行封装，生成前
端页面组件；其中，前端页面组件用于显示展示内容
。
本申请实施例通过对预先定义的公共字段配置相关属性信息，即可封装成满足用户需求的组件，本实施例的组件生成的过程灵活度较高，避免在开发其他的网页功能时，重新开发编码相应的组件，提高组件开发效率，节省开发成本
。
附图说明
[0036]为了更清楚地说明本申请的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对本申请保护范围的限定
。
在各个附图中，类似的构成部分采用类似的编号
。
[0037]图1示出了本申请实施例中页面组件封装方法的第一个实施方式示意图；
[0038]图2示出了本申请实施例中页面组件封装方法的第二个实施方式示意图；
[0039]图3示出了本申请实施例中页面组件封装方法的第三个实施方式示意图；
[0040]图4示出了本申请实施例中页面组件封装方法的第四个实施方式示意图；
[0041]图5示出了本申请实施例中页面组件封装方法的第五个实施方式示意图；
[0042]图6示出了本申请实施例中页面组件封装方本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种页面组件封装方法，其特征在于，包括：接收用户需求，根据所述用户需求为每个预先定义的公共字段配置相关属性信息，得到字段数据；从所述字段数据中筛选出目标字段，并确定与所述目标字段对应的展示内容；根据所述目标字段对应的所述属性信息中的组件类型，对所述目标字段进行组件渲染，得到组件数据；对所述组件数据与所述目标字段进行封装，生成前端页面组件；其中，所述前端页面组件用于显示所述展示内容
。2.
根据权利要求1所述的页面组件封装方法，其特征在于，所述从所述字段数据中筛选出目标字段，并确定与所述目标字段对应的展示内容，包括：从所述字段数据中筛选出支持添加字段作为目标字段；识别所述支持添加字段的属性值，若所述支持添加字段的属性值为真，则将所述支持添加字段对应绑定的字段内容作为展示内容
。3.
根据权利要求1所述的页面组件封装方法，其特征在于，所述从所述字段数据中筛选出目标字段，并确定与所述目标字段对应的展示内容，包括：从所述字段数据中筛选出定义列字段作为目标字段；识别所述定义列字段的属性值，若所述定义列字段的属性值为真，则将所述定义列字段对应绑定的字段内容作为展示内容
。4.
根据权利要求1所述的页面组件封装方法，其特征在于，所述对所述组件数据与所述目标字段进行封装，生成前端页面组件，包括：基于所述组件数据对应的组件类型，对所述目标字段对应封装为组件对象；其中，若所述组件类型为搜索栏位组件，进而将相应的所述目标字段封装为动态网页对象；若所述组件类型为检索列组件，进而将相应的所述目标字段封装为动态网格对象；若所述组件类型为详情组件，进而将相应的所述目标字段封装为动态表对象；基于所述组件对象，生成前端页面组件
。5.
根据权利要求1所述的页面组件封装方法，其特征在于，所述根据所述用户需求为每个预先定义的公共字段配置相关属性信息，得到字段数据，包括：识...

【专利技术属性】
技术研发人员：张霞，
申请(专利权)人：平安银行股份有限公司，
类型：发明
国别省市：