信贷前端页面的配置化方法、计算机设备及可读存储介质与流程

1.本技术涉及金融前端技术领域，特别是信贷前端页面的配置化方法、计算机设备及可读存储介质。


背景技术：

2.目前现有的信贷系统前端页面开发大部分面临以下痛点：业务场景多，迭代频繁，开发很难跟上需求的节奏，规则可能由多人掌握，无法通过一个人了解全貌，界面交互也千变万化；后台系统的日常开发中，表单必不可少，当表单内容比较多，例如有上百个字段时，代码往往也变得复杂且难以维护；传统的纯手工开发模式耗费时间成本高、代码质量问题难以管控、上线风险大，人员成本高；很少系统做到完整信贷流程的页面配置，从开始到结束整个环节的打通；系统架构上还缺乏一套先进、灵活、易于扩展的系统架构设计，系统迭代缓慢、增强升级困难、快速扩展能力较弱，导致业务流程调整困难，产品创新难以快速支持。


技术实现要素：

3.本技术主要解决的技术问题是提供一种信贷前端页面的配置化方法、计算机设备及可读存储介质，能够代替传统手工开发模式。
4.为解决上述技术问题，本技术采用的第一个技术方案是：提供一种信贷前端页面的配置化方法，该方法包括：调用接口获取信贷前端页面的界面配置数据，以及根据模板编号获取对应的界面模板；利用界面配置数据和界面模板进行界面布局渲染；生成界面布局的各区域的组件；在界面布局进行表单默认数据初始化，以及利用模板编号和与模板编号对应的业务数据，生成业务数据与界面模板的关联数据；发送接口请求，在界面布局返回目标业务数据。
5.为解决上述技术问题，本技术采用的第二个技术方案是：利用界面配置数据和界面模板进行界面布局渲染之后，包括：遍历界面布局以及生成各区域，确认各区域是否嵌套页面，若嵌套有页面，则加载嵌套页面，并跳转至调用接口获取前端页面的界面配置数据步骤，以循环执行；否则执行生成所述界面布局的各区域组件步骤。
6.为解决上述技术问题，本技术采用的第三个技术方案是：提供一种信贷前端页面的配置化方法，该方法包括：调用接口获取前端页面的界面配置数据之后，包括：获取界面表格配置数据以及查询表单；基于查询表单对界面表格配置数据进行字段提取，得到更新后的配置数据；利用界面配置数据和界面模板进行界面布局渲染，包括：利用更新后的配置数据和界面模板进行界面布局渲染；基于查询表单对界面表格配置数据进行字段提取，得到更新后的配置数据，还包括：对界面表格配置数据进行表格字段合并、更新字段名以及字段关键字中的至少一种处理，并根据处理后的界面表格配置数据进行提取查询字段处理。
7.利用配置数据和界面模板进行界面布局渲染，包括：利用界面配置数据进行页面配置，得到生成标签和/或初始化数据；生成界面布局的各区域的组件，包括：利用表单属
性、生成按钮及表格属性生成表单元素、绑定默认按钮事件及生成表格属性，以得到各区域的组件；基于界面配置数据进行页面配置之后，包括：检测界面展示模式是否为第一预设模式；若界面展示模式为所述第一预设模式，遍历生成标签；否则，使用树组件初始化数据，利用初始化数据生成所述节点激活事件，通过节点激活事件跳转至所述第一预设模式；利用界面配置数据和界面模板进行界面布局渲染，还包括：基于界面配置数据依次进行表单区域配置、按钮区域配置及表格区域配置，得到表单属性、生成按钮及表格属性；生成界面布局的各区域的组件，包括：利用表单属性、生成按钮及表格属性生成表单元素、绑定默认按钮事件及生成表格属性，以得到各区域的组件。
8.利用模板编号和与模板编号对应的业务数据，生成业务数据与界面模板对应的关联数据，包括：将业务数据脚本导入数据库，以生成数据源；设置数据源中各业务数据对应的业务数据表名，建立模板编号与业务数据表名之间的对应关系；依据模板编号与界面模板的对应关系，以及模板编号与业务数据表名的对应关系，获取业务数据表名与界面模板的对应关系，生成界面模板与业务数据的关联数据。
9.为解决上述技术问题，本技术采用的第四个技术方案是：提供一种计算机设备，该计算机设备包括处理器、存储器和通信电路，通信电路用于通信连接，存储器存储有计算机程序，处理器用于执行计算机程序以实现如上述本技术第一个技术方案提供的方法。
10.为解决上述技术问题，本技术采用的第五个技术方案是：提供一种计算机可读的存储介质，该计算机可读的存储介质存储计算机程序，该计算机程序能够被处理器执行以实现如上述本技术第一个技术方案提供的方法。
11.本技术的有益效果是：区别于现有技术的情况，连通信贷前端页面的配置过程，通过动态配置模式实现前端页面快速生成，一方面有配套的页面可视化操作平台，代替传统手工开发模式，另一方面可以根据需求设计整个产品流程所需要的界面，做到大部分都可以自动生成，一部分通过定制化实现，快速满足业务需求，同时保证整个页面的配置过程的一致性，方便追踪问题。
附图说明
12.图1是本技术信贷前端页面的配置化方法第一实施例的流程示意图；图2是本技术信贷前端页面的配置化方法第二实施例的流程示意图；图3是本技术信贷前端页面的配置化方法第三实施例的流程示意图；图4是本技术信贷前端页面的配置化方法第四实施例的流程示意图；图5是本技术计算机设备实施例的结构示意框图；图6是本技术计算机可读的存储介质实施例的结构示意框图。
具体实施方式
13.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本技术的一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
14.若本技术技术方案涉及个人信息，应用本技术技术方案的产品在处理个人信息
前，已明确告知个人信息处理规则，并取得个人自主同意。若本技术技术方案涉及敏感个人信息，应用本技术技术方案的产品在处理敏感个人信息前，已取得个人单独同意，并且同时满足“明示同意”的要求。例如，在摄像头等个人信息采集装置处，设置明确显著的标识告知已进入个人信息采集范围，将会对个人信息进行采集，若个人自愿进入采集范围即视为同意对其个人信息进行采集；或者在个人信息处理的装置上，利用明显的标识/信息告知个人信息处理规则的情况下，通过弹窗信息或者请个人自行上传其个人信息等方式获得个人授权；其中，个人信息处理规则可包括个人信息处理者、个人信息处理目的、处理方式以及处理个人信息种类等信息。
15.具体可以参见如下本技术信贷前端页面的配置化方法实施例的描述。
16.请参阅图1，图1是本技术信贷前端页面的配置化方法第一实施例的流程示意图。本技术描述的信贷前端页面的配置化方法可以包括：s11：调用接口获取信贷前端页面的界面配置数据，以及根据模板编号获取对应的界面模板；s12：利用界面配置数据和界面模板进行界面布局渲染；s13：生成界面布局的各区域的组件；s14：在界面布局进行表单默认数据初始化，以及利用模板编号和与模板编号对应的业务数据，生成业务数据与界面模板的关联数据；s15:发送接口请求，在界面布局返回目标业务数据。
17.通过对信贷前端页面配置化步骤的描述，将信贷前端页面的生成过程串联起来，保证信贷前端页面生成过程的一致性，同时也可以实现信贷前端页面的快速配置，改进人工开发前端页面进程慢的缺点。
18.以下对本技术信贷前端页面的配置化方法第一实施例进行详细描述。
19.s11：调用接口获取信贷前端页面的界面配置数据，以及根据模板编号获取对应的界面模板。
20.每个信贷业务具有对应的产品类型和场景，用户选择一种信贷业务产品类型或场景后，根据选择的信贷业务产品类型或场景编码，调用接口获取目标信贷产品的界面配置数据。其中，界面配置数据包括各区域布局数据、各区域中组件布局数据及配置数据。
21.每个界面都有唯一的页面模版编号，根据页面模板编号与界面模板的对应关系可以获取与模板编号对应的界面模板。其中，上述的界面模板已经根据已知的全部信贷业务产品和场景设计完成后存放在模板数据库中。
22.s12：利用界面配置数据和界面模板进行界面布局渲染。
23.获取到界面配置数据以及界面模板后，可以得到对应的页面布局元素数据，利用得到的页面布局元素数据，可以确定待生成信贷前端页面的主体布局框架。
24.s13：生成界面布局的各区域的组件。
25.确定待生成信贷前端页面的主体布局框架后，需要调用多个组件，以完善页面主体内容，以及生成界面布局的各区域的组件后，需要依次访问生成的各个组件，确定所需要的各个组件是否完整且正确，以保证生成完整页面。
26.s14：在界面布局进行表单默认数据初始化，以及利用模板编号和与模板编号对应的业务数据，生成业务数据与界面模板的关联数据。
27.生成以及遍历完界面布局的各区域的组件后，需要加载并显示业务数据，以呈现给用户所选择的信贷业务产品。业务数据导入信贷前端页面主要是通过在业务数据与界面模板之间形成关联关系，可以通过建立界面模板的模板编号与业务数据之间的对应关系，以实现业务数据关联界面模板。
28.s15：发送接口请求，在界面布局返回目标业务数据。
29.发送接口请求后，利用上述生成的界面模板与业务数据的关联数据，存储业务数据的数据库会返回目标业务数据，且显示于对应界面布局。
30.通过上述步骤，利用提前生成好的界面模板代替开发多个单个页面，节省人工开发成本，同时连通从获取界面配置数据到加载并显示业务数据的信贷前端页面的配置流程，利用上述完整的信贷前端页面的配置流程代替利用人工将生成的单个页面进行串联，改进了前端开发人员需手工串联页面流程的缺点，提高前端页面开发速度。
31.请参阅图2，图2是本技术信贷前端页面的配置化方法第二实施例流程示意图。本实施例中，步骤s21~s22与前述第一实施例中的步骤s11~s12相对应，步骤s25~s27与前述第一实施例中的步骤s13~s15相对应，在此不再赘述。
32.其中，本实施例与第一实施例的区别在于增加了以下两个步骤：在前述第一实施例中的步骤s12：利用界面配置数据和界面模板进行界面布局渲染之后，为了确认进行界面布局渲染步骤后得到的界面布局以及生成的各区域是否存在嵌套的页面，而增加了步骤s23和步骤s24。
33.s23：遍历界面布局以及生成各区域，以及确认各区域是否嵌套页面。
34.s24：加载嵌套页面。
35.在利用界面配置数据和界面模板进行界面布局渲染后，需要依次访问生成的各区域，其目的在于确定上述生成的各区域是否嵌套页面。
36.若生成的区域嵌套有页面，则执行步骤s24，即加载嵌套页面，并跳转至步骤s21，即调用接口获取前端页面的界面配置数据，并且执行调用接口获取前端页面的界面配置数据后的步骤，否则执行步骤s25，即生成界面布局的各区域组件。
37.通过上述实施方式，判断生成的各区域是否嵌套页面。其目的在于判断页面是否需要交互，如果页面存在交互，则按照设定的步骤完成页面交互流程。
38.请参阅图3，图3是本技术信贷前端页面的配置化方法第三实施例的流程示意图。本实施例中，信贷前端页面的配置化方法包括：s31：调用接口获取信贷前端页面的界面配置数据。
39.根据用户所选择的信贷产品业务类型或者场景，根据选择的信贷业务产品类型或场景编码，调用接口获取目标信贷产品的界面配置数据。
40.s32：获取界面表格配置数据以及查询表单。
41.在获取到界面配置数据后，需对界面配置数据进行处理，包括获取界面表格配置数据以及利用界面表格配置数据获取到查询表单。
42.s33：基于查询表单对界面表格配置数据进行字段提取，得到更新后的配置数据。
43.具体地，获取到查询表单后，需要进行一系列的字段提取操作，以合成新的字段列表，从而完成界面配置数据的更新。
44.s34：对所述界面表格配置数据进行表格字段合并、更新字段名以及字段关键字中
的至少一种处理，并根据处理后的界面表格配置数据进行提取查询字段处理。
45.具体地，在获取到信贷前端页面的界面配置数据后，进一步地获取表格配置数据以及将表单中的各要素与表格字段进行分类合并，以更新字段名和字段关键字。
46.得到更新后的字段名和字段关键字后，可获取到与该表格关联的查询表单，同时需对上述查询表单进行一系列操作，以得到更新后的界面配置数据，具体包括：从表格字段列表中提取查询字段，合成查询字段列表；从表格字段列表中提取高级查询字段，合成查询字段列表；从表格字段列表中提取新增时需要录入字段列表，根据字段增加显示合成新增表单输入项列表；从表格字段列表中提取编辑时需要录入字段列表，根据字段编辑显示合成新增表单输入项列表；从表格字段列表中提取查看详情时字段列表，根据字段详情显示合成新增表单输入项列表。
47.s35:根据模板编号获取对应的界面模板。
48.每个界面都有唯一的页面模版编号，根据页面模板编号与界面模板的对应关系可以获取与模板编号对应的界面模板。其中，上述的界面模板已经根据已知的全部信贷业务产品和场景设计完成后存放在界面模板数据库中。
49.s36:利用界面配置数据和界面模板进行界面布局渲染。
50.具体地，是利用更新后的界面配置数据和界面模板进行界面布局渲染。获取到的界面配置数据完成更新后，则需要利用更新后的配置数据来确定页面的主体框架。
51.其中，利用界面配置数据和界面模板进行界面布局渲染的过程中，分别依据页面配置、表单区域配置、按钮区域配置及表格区域配置进行界面布局渲染。
52.步骤s361是对利用界面配置数据进行页面配置过程的具体描述。
53.s361：利用界面配置数据进行页面配置，得到生成标签和/或初始化数据。
54.具体地，对页面配置的过程，其目的在于可得到生成标签和/或初始化数据，以利于生成各区域的组件。
55.在利用界面配置数据进行页面配置的过程中，为了判断生成的页面展示模式是否为第一预设模式，需要对生成的界面展示模式进行判断。步骤s3611是对生成的界面展示模式进行判断的具体描述。
56.s3611:基于界面配置数据进行页面配置之后，检测界面展示模式是否为第一预设模式。
57.具体地，若界面展示模式为第一预设模式，遍历生成标签，其中，第一预设模式可以为横向；若界面展示模式不为第一预设模式，使用树组件初始化数据，利用初始化数据生成节点激活事件，通过生成的节点激活事件可跳转至第一预设模式。
58.其中，利用界面配置数据和界面模板进行界面布局渲染的过程中，分别从页面配置、表单区域配置、按钮区域配置及表格区域配置进行界面布局渲染。
59.步骤s362是对利用界面配置数据进行表单区域配置、按钮区域配置及表格区域配置过程的具体描述。
60.s362：基于界面配置数据依次进行表单区域配置、按钮区域配置及表格区域配置，得到表单属性、生成按钮及表格属性。
61.具体地，对表单区域、按钮区域及表格区域依次进行配置，可获取表单属性、生成按钮以及表格属性。
62.s37:生成界面布局的各区域的组件。
63.获取界面布局的主体框架形成后，需要调用多个组件，用来生成界面布局的各区域组件。利用生成的界面布局的各区域组件，用于完整界面内容。
64.基于上述利用界面配置数据和界面模板进行界面布局渲染的过程中，分别从页面配置区域、表单区域配置、按钮区域配置及表格区域配置进行界面布局渲染，对应地，也需在进行页面配置、表单区域配置、按钮区域配置及表格区域配置后，分别生成界面布局中与页面配置区域、表单区域、按钮区域及表格区域对应的多个组件。
65.步骤s371是生成与页面配置区域的各组件的具体过程的描述。
66.s371:利用生成标签和/或初始化数据绑定标签激活事件和/或绑定节点激活事件，以生成各区域的组件。
67.具体地，在页面配置的过程中，利用生成标签，可绑定标签激活事件，从而得到页面配置区域的各组件，或者，利用初始化数据，绑定节点激活事件，从而得到页面配置区域的各组件。
68.基于上述利用界面配置数据和界面模板进行界面布局渲染的过程中，分别从页面配置区域、表单区域配置、按钮区域配置及表格区域配置进行界面布局渲染，对应地，也需在进行页面配置、表单区域配置、按钮区域配置及表格区域配置后，分别生成界面布局中与页面配置区域、表单区域、按钮区域及表格区域对应的多个组件。
69.步骤s372是生成表单区域、按钮区域及表格区域的各组件的具体过程的描述。
70.s372:利用表单属性、生成按钮及表格属性，生成表单元素、绑定默认按钮事件及生成表格属性，以得到各区域的组件。
71.具体地，在表单区域配置的过程中，利用生成的表单属性，可生成表单元素，从而可得到表单区域的各组件；在按钮区域配置的过程中，利用生成按钮，可生成绑定默认按钮事件，从而可得到按钮区域的各组件；在表格区域配置的过程中，利用生成的表格属性，可生成表格元素，从而可得到表格区域的各组件。
72.s38:在界面布局进行表单默认数据初始化，以及利用模板编号和与模板编号对应的业务数据，生成业务数据与界面模板的关联数据。
73.在页面各区域以及各区域组件均生成完成后，需要加载并显示业务数据，此时，需要利用模板编号和与模板编号对应的业务数据，生成业务数据与界面模板的关联数据，通过上述关联数据，可以实现业务数据导入至生成的信贷前端页面中。
74.s39:将业务数据脚本导入数据库，以生成数据源；利用业务数据脚本导入数据库的方式，生成的数据源中包含所有类型的业务数据。
75.s310：设置数据源中各业务数据对应的业务数据表名，建立模板编号与业务数据表名之间的对应关系。
76.依据模板编号，对数据源中的每一个业务数据设置与模板编号相对应的业务数据表名，利用上述方式建立起模板编号与业务数据表名之间的对应关系。
77.s311:依据模板编号与界面模板的对应关系，以及模板编号与业务数据表名的对
应关系，获取业务数据表名与界面模板的对应关系，生成界面模板与业务数据的关联数据。
78.每个界面模板有唯一对应的模板编号，且模板编号也有与其对应的业务数据表名，通过上述两组对应关系，可以得到业务数据表名与界面模板之间的关联关系，依据上述关联关系，会生成新的一份数据，即界面模板与业务数据的关联数据。
79.s312：发送接口请求，在界面布局返回目标业务数据。
80.利用上述生成的界面模板与业务数据的关联数据，发送接口请求后，数据库会返回目标业务数据在生成的对应界面布局。
81.通过上述实施方式，以详细的页面配置流程描述对获取的界面配置数据进行处理更新，以及利用更新后的配置数据进行页面配置、表单区域配置、按钮区域配置以及表格区域配置。上述配置流程连通整个界面开发过程，加快界面配置的速度。
82.请参阅图4，图4是本技术信贷前端页面的配置化方法第四实施例的流程示意图。本实施例中，结合前述第一实施例、前述第二实施例以及前述第三实施例，对信贷前端页面的配置化方法进行详细描述。
83.与前述第一实施例中的步骤s11、前述第二实施例中的步骤s21以及前述第三实施例中的步骤s31对应，根据用户选择的信贷业务产品类型或场景编码，调用接口获取目标信贷产品的界面配置数据，以及对获取到的界面配置数据进行处理。其中，界面配置数据处理过程，包括：与前述第三实施例中的步骤s32以及步骤s34对应，获取界面表格配置数据后，将表单中的各要素与表格字段进行分类合并，以更新字段名和字段关键字，得到更新后的字段名和字段关键字后，可获取到与该表格关联的查询表单。其中，获取与该表格关联的查询表单，包括：从表格字段列表中提取查询字段，合成查询字段列表；从表格字段列表中提取高级查询字段，合成查询字段列表；从表格字段列表中提取新增时需要录入字段列表，根据字段增加显示合成新增表单输入项列表；从表格字段列表中提取编辑时需要录入字段列表，根据字段编辑显示合成新增表单输入项列表；从表格字段列表中提取查看详情时字段列表，根据字段详情显示合成新增表单输入项列表。
84.与前述第三实施例中的步骤s33对应。基于获取到的查询表单，得到更新后的配置数据，同时，还需对得到的配置数据进行遍历操作，以确定更新后的界面配置数据是否完整且正确。
85.在前述第一实施例中的步骤s21、前述第二实施例中的步骤s22以及前述第三实施例中的步骤s36后，与前述第三实施例中的步骤s361以及步骤362对应，利用更新完成的配置数据进行页面配置、表单区域配置、按钮区域配置及表格区域配置，包括：与前述第三实施例中的s361对应，基于界面配置数据进行页面配置，得到生成标签和/或初始化数据。其中，与前述第三实施例中的步骤s3611对应，进行页面配置后，需要判断界面展示模式是否横向，具体地，若界面展示模式为横向，则遍历生成标签，以及利用生成标签绑定标签激活事件；若界面展示模式不为横向，使用树组件初始化数据，利用初始化数据生成节点激活事件，通过节点激活事件跳转至横向展示模式。
86.与前述第三实施例中的步骤s362对应，基于界面配置数据依次进行表单区域配置、按钮区域配置及表格区域配置，得到表单属性、生成按钮及表格属性。
87.在前述第一实施例中的步骤s13、前述第二实施例中的步骤s25以及前述第三实施例中的步骤s37之后，与前述第三实施例中的步骤s371对应以及步骤s372对应，利用得到的生成标签和/或初始化数据、表单属性、生成按钮及表格属性，获取到绑定标签激活事件和/或绑定节点激活事件、生成表单元素、绑定默认按钮事件及生成表格属性，以得到各区域的组件。
88.通过上述实施方式，以及结合前述第一实施例、前述第二实施例以及前述第三实施例中对配置数据的处理以及页面的配置过程进行详细的描述，可实现信贷前端页面的配置化生成。
89.请参阅图5，图5是本技术计算机设备实施例的结构示意框图。计算机设备50包括相互耦接的存储器501和处理器502，处理器502用于执行存储器501存储的程序数据以实现上述任一方法实施例中的步骤或者上述任一方法实施例中计算机设备对应执行的步骤。该计算机设备50除包括上述处理器502和存储器501之外，还可根据需求包括通信电路、显示器、打印组件、数据采集组件等，在此不做限定。在一实施例中，通信电路可以用于与其他设备进行通信。在另一实施例中，显示器可以用于显示选择按钮，以及显示目标显示信息等，相应地，通信电路可以用于接收用户对选择按钮的选择操作。在又一实施例中，数据采集组件用于采集用户的第一预设操作数据和/或第二预设操作数据，其中，数据采集组件可以是语音采集组件和/或图像采集组件。
90.具体而言，处理器502用于控制其自身以及存储器501以实现上述信贷前端页面的配置化方法的任一实施例中的步骤。处理器502还可以称为cpu（central processing unit，中央处理单元）。处理器502可能是一种集成电路芯片，具有信号的处理能力。处理器502还可以是通用处理器、数字信号处理器（digital signal processor, dsp）、专用集成电路（application specific integrated circuit, asic）、现场可编程门阵列（field-programmable gate array, fpga）或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。另外，处理器502可以由多个集成电路芯片共同实现。
91.参阅图6，上述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在计算机可读存储介质60中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令/计算机程序用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）或处理器（processor）执行本发明各个实施方式方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器（rom，read-only memory）、随机存取存储器（ram，random access memory）、磁碟或者光盘等各种介质以及具有上述存储介质的电脑、手机、笔记本电脑、平板电脑、相机等电子设备。
92.关于计算机可读的存储介质中的程序数据的执行过程的阐述可以参照上述本技术信贷前端页面的配置化方法实施例中阐述，在此不再赘述。
93.以上所述仅为本技术的实施例，并非因此限制本技术的专利范围，凡是利用本技术说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本技术的专利保护范围内。