CN117111892A - 一种前端页面处理方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本申请公开一种前端页面处理方法、装置、计算机设备及存储介质，属于研发管理技术领域和金融科技领域。本申请通过获取需求开发文档，从需求开发文档中获取与前端页面相关的业务属性；基于业务属性对前端页面进行划分，得到若干个前端页面子模块；为每一个前端页面子模块配置一个数据表单；在每一个数据表单中配置异步处理机制，生成每一个数据表单对应的异步处理对象，其中，异步处理对象用于实现不同数据表单之间的数据异步处理。本申请还涉及区块链技术领域，需求开发文档存储在区块链节点上。本申请通过为每一个前端页面子模块配置数据表单和异步处理机制，可以减少代码的冗余性，提高代码的可读性和可维护性，简化了代码的编写和维护过程。

Description

一种前端页面处理方法、装置、计算机设备及存储介质

技术领域

本申请属于研发管理技术领域和金融科技领域，具体涉及一种前端页面处理方法、装置、计算机设备及存储介质。

背景技术

在设计Web页面时，为了满足业务需求，Web页面通常会被划分成多个小模块，每个模块负责展示和处理特定的业务属性。当用户提交表单数据后，这些数据需要保存到后端数据库中的不同表中。而在此之前，前端需要将这些数据组装成一个对象或数组，其中包含多个子对象或子数组，以便传递给后端进行保存。

例如，在保险业务***的Web页面设计时，为了满足保险业务的需求，通常需要将Web页面划分成多个小模块，比如用户信息模块、保单信息模块、理赔申请模块、保险产品模块、支付模块等等，每个模块专注于特定的业务属性，可以提高Web页面的可维护性和可扩展性。每个模块可以独立开发、测试和维护，同时还可以在不同的页面中组合和重用，以满足不同保险业务场景的需求。

针对上述需求，以往的做法是在前端使用一个单一的表单(即form表单)来容纳所有的前端数据，然后在提交保存时，根据后端接口文档所要求的参数格式，将这个大表单的数据划分为多个子对象，然后依次发送给后端进行保存。但这种做法需要编写额外的代码来手动处理数据的拆分和组装，导致了冗余的代码。此外，当数据需要在页面上进行回显时，需要编写额外的代码来将多个子对象的数据进行合并，并将其渲染到表单中，这又增加了额外的冗余代码，而冗余代码会导致代码可读性和维护性较差，容易出错。

发明内容

本申请实施例的目的在于提出一种前端页面处理方法、装置、计算机设备及存储介质，以解决现有前端页面处理方案存在的冗余代码，导致代码可读性和维护性较差，容易出错的技术问题。

为了解决上述技术问题，本申请实施例提供一种前端页面处理方法，采用了如下所述的技术方案：

一种前端页面处理方法，包括：

获取需求开发文档，从需求开发文档中获取与前端页面相关的业务属性；

基于业务属性对前端页面进行划分，得到若干个前端页面子模块；

为每一个前端页面子模块配置一个数据表单；

在每一个数据表单中配置异步处理机制，生成每一个数据表单对应的异步处理对象，其中，异步处理对象用于实现不同数据表单之间的数据异步处理。

进一步地，在每一个数据表单中配置异步处理机制，生成每一个数据表单对应的异步处理对象，具体包括：

获取每一个数据表单对应的数据处理逻辑；

根据数据处理逻辑确定数据表单之间的处理逻辑依赖关系；

根据处理逻辑依赖关系配置匹配的异步处理机制；

调用预设的构造函数将异步处理机制加载到对应的数据表单，生成异步处理对象。

进一步地，异步处理机制为promise处理机制，异步处理对象为promise对象，根据处理逻辑依赖关系配置匹配的异步处理机制，具体包括：

将每一个数据表单对应的数据处理逻辑封装成promise异步操作；

调用promise处理机制中的'.then()'方法，并基于处理逻辑依赖关系建立数据表单之间的链式操作链接；

构造函数为'fetchData()'函数，调用预设的构造函数将异步处理机制加载到对应的数据表单，生成异步处理对象，具体包括：

调用'fetchData()'构造函数将promise处理机制加载到对应的数据表单，生成promise对象。

进一步地，在在每一个数据表单中配置异步处理机制，生成每一个数据表单对应的异步处理对象之后，还包括：

监听前端页面的操作事件，调用异步处理对象获取操作事件对应的页面数据，其中，操作事件包括提交事件和/或点击事件；

在异步处理对象中执行对应的数据处理逻辑，以对页面数据进行异步处理，生成数据异步处理结果；

将数据异步处理结果提交到后端数据库进行存储。

进一步地，对页面数据进行异步处理为基于'.then()'方法的链式调用异步操作，在异步处理对象中执行对应的数据处理逻辑，以对页面数据进行异步处理，生成数据异步处理结果，具体包括：

定义一个'processData'方法，其中，'processData'方法用于执行数据处理逻辑并返回一个新的Promise对象；

在异步处理对象中执行'processData'方法，以对页面数据进行数据处理逻辑，生成逻辑处理结果，并返回新的Promise对象；

调用基于'.then()'方法的链式调用异步操作对逻辑处理结果进行异步处理，得到数据异步处理结果。

进一步地，在调用基于'.then()'方法的链式调用异步操作对逻辑处理结果进行异步处理，得到数据异步处理结果之前，还包括：

判断数据处理逻辑是否执行成功；

若数据处理逻辑执行成功，则调用'resolve()'函数将新的Promise对象的状态标记为“成功”；

若数据处理逻辑执行失败，则调用'reject()'函数将新的Promise对象的状态标记为“失败”。

进一步地，为每一个前端页面子模块配置一个数据表单，具体包括：

确定每个前端页面子模块所需的数据字段类型和表单控件类型；

根据每个前端页面子模块所需的数据字段类型和表单控件类型确定每个前端页面子模块的数据表单结构和数据表单组件；

在前端页面中引入每个前端页面子模块的数据表单结构和数据表单组件，构建每个前端页面子模块的数据表单。

为了解决上述技术问题，本申请实施例还提供一种前端页面处理装置，采用了如下所述的技术方案：

一种前端页面处理装置，其特征在于，包括：

业务属性获取模块，用于获取需求开发文档，从需求开发文档中获取与前端页面相关的业务属性；

前端页面划分模块，用于基于业务属性对前端页面进行划分，得到若干个前端页面子模块；

数据表单配置模块，用于为每一个前端页面子模块配置一个数据表单；

数据异步处理模块，用于在每一个数据表单中配置异步处理机制，生成每一个数据表单对应的异步处理对象，其中，异步处理对象用于实现不同数据表单之间的数据异步处理。

为了解决上述技术问题，本申请实施例还提供一种计算机设备，采用了如下所述的技术方案：

一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如上述任一项所述的前端页面处理方法的步骤。

为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，采用了如下所述的技术方案：

一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如上述中任一项所述的前端页面处理方法的步骤。

与现有技术相比，本申请实施例主要有以下有益效果：

本申请公开一种前端页面处理方法、装置、计算机设备及存储介质，属于研发管理技术领域和金融科技领域。本申请通过获取需求开发文档，从需求开发文档中获取与前端页面相关的业务属性；基于业务属性对前端页面进行划分，得到若干个前端页面子模块；为每一个前端页面子模块配置一个数据表单；在每一个数据表单中配置异步处理机制，生成每一个数据表单对应的异步处理对象，其中，异步处理对象用于实现不同数据表单之间的数据异步处理。本申请根据业务属性将前端页面划分为多个小模块，每个模块都有独立的数据表单和异步处理机制，这样可以减少代码的冗余性，提高代码的可读性和维护性。同时，当数据需要在页面上进行回显时，只需要处理特定的子模块数据，而不需要处理整个大表单的数据，从而简化了代码的编写和维护过程。

附图说明

为了更清楚地说明本申请中的方案，下面将对本申请实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1示出了本申请可以应用于其中的示例性***架构图；

图2示出了根据本申请的前端页面处理方法的一个实施例的流程图；

图3示出了根据本申请的前端页面处理装置的一个实施例的结构示意图；

图4示出了根据本申请的计算机设备的一个实施例的结构示意图。

具体实施方式

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。

如图1所示，***架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器，服务器可以是独立的服务器，也可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(Content Delivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。

需要说明的是，本申请实施例所提供的前端页面处理方法一般由服务器执行，相应地，前端页面处理装置一般设置于服务器中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

继续参考图2，示出了根据本申请的前端页面处理方法的一个实施例的流程图。本申请实施例可以基于人工智能技术对相关的数据进行获取和处理。其中，人工智能(Artificial Intelligence，AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用***。

人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互***、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、机器人技术、生物识别技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。

在保险业务***的Web页面设计时，为了满足保险业务的需求，通常需要将Web页面划分成多个小模块，比如用户信息模块、保单信息模块、理赔申请模块、保险产品模块、支付模块等等，其中，用户信息模块负责展示和处理用户的个人信息，例如姓名、地址、联系方式等，用户可以在该模块中查看和编辑个人信息，以保持其最新状态。保单信息模块负责展示和处理用户的保单信息，包括保单号、保险类型、保险期限等，用户可以在该模块中查看其保单的详细信息，并进行相关操作，如查看保单状态、下载保单文件等。理赔申请模块负责展示和处理用户的理赔申请，用户可以在该模块中提交理赔申请，并提供相关信息，如事故描述、损失金额等，该模块还可以提供查看理赔进度和处理结果的功能。保险产品模块展示不同的保险产品信息，如汽车保险、家庭保险、旅行保险等，用户可以在该模块中查看各个保险产品的特点、保费计算方式和购买流程，并进行在线购买。支付模块负责处理用户的保险费用支付，用户可以在该模块中选择支付方式，如***、支付宝等，并完成支付操作。每个模块专注于特定的业务属性，可以提高Web页面的可维护性和可扩展性，每个模块可以独立开发、测试和维护，同时还可以在不同的页面中组合和重用，以满足不同保险业务场景的需求。

针对上述需求，以往的做法是在前端使用一个单一的表单(即form表单)来容纳所有的前端数据，然后在提交保存时，根据后端接口文档所要求的参数格式，将这个大表单的数据划分为多个子对象，然后依次发送给后端进行保存。但这种做法需要编写额外的代码来手动处理数据的拆分和组装，导致了冗余的代码。此外，当数据需要在页面上进行回显时，需要编写额外的代码来将多个子对象的数据进行合并，并将其渲染到表单中，这又增加了额外的冗余代码，而冗余代码会导致代码可读性和维护性较差，容易出错。

为了解决上述技术问题，本申请根据业务属性将前端页面划分为多个小模块，每个模块都有独立的数据表单和异步处理机制，这样可以减少代码的冗余性，提高代码的可读性和维护性。同时，当数据需要在页面上进行回显时，只需要处理特定的子模块数据，而不需要处理整个大表单的数据，从而简化了代码的编写和维护过程。

所述的前端页面处理方法，包括以下步骤：

S201，获取需求开发文档，从需求开发文档中获取与前端页面相关的业务属性；

在本实施例中，从需求开发文档中获取获取与前端页面相关的业务属性，需求开发文档可以是业务需求文档、接口文档或其他相关文档，需求开发文档包含了前端页面的相关需求信息。

S202，基于业务属性对前端页面进行划分，得到若干个前端页面子模块；

在本实施例中，根据需求开发文档中的业务属性，将前端页面划分为多个小模块，每个小模块负责展示和处理特定的业务属性，这样可以提高代码的可读性和维护性，使得每个模块的功能更加清晰。

例如，在保险业务***的Web页面设计时，为了满足保险业务的需求，通常需要将Web页面划分成多个小模块，比如用户信息模块、保单信息模块、理赔申请模块、保险产品模块、支付模块等等。

S203，为每一个前端页面子模块配置一个数据表单；

在本实施例中，针对每个前端页面子模块，配置一个数据表单，数据表单可以是HTML表单元素，也可以是其他形式的数据收集组件，为每一个前端页面子模块配置一个数据表单这样可以方便用户在前端页面上输入和编辑数据。

进一步地，为每一个前端页面子模块配置一个数据表单，具体包括：

确定每个前端页面子模块所需的数据字段类型和表单控件类型；

根据每个前端页面子模块所需的数据字段类型和表单控件类型确定每个前端页面子模块的数据表单结构和数据表单组件；

在前端页面中引入每个前端页面子模块的数据表单结构和数据表单组件，构建每个前端页面子模块的数据表单。

在本实施例中，在设计每个前端页面子模块的数据表单之前，需要明确该模块所需的数据字段以及相应的数据类型。例如，假如一个子模块需要姓名和年龄两个字段，那么姓名字段的数据类型可以是字符串，年龄字段的数据类型可以是整数，根据字段类型，选择适当的表单控件类型，例如文本框、下拉列表、单选按钮等。

根据每个前端页面子模块所需的数据字段类型和表单控件类型，确定数据表单的结构和组件，这包括创建表单组件的布局、样式和逻辑，以及定义数据绑定和事件处理逻辑，可以使用HTML表单元素、UI库的表单组件或自定义组件来创建数据表单，以满足业务需求。

在每个前端页面的子模块中，引入相应的数据表单结构和数据表单组件，可以通过组件化的方式实现，将数据表单组件作为子组件嵌入到前端页面的相应位置，根据需要，可以给数据表单组件传递初始化数据、表单配置参数或其他相关属性。

根据数据表单组件的结构和属性，渲染表单元素或表单组件，并绑定相应的数据和事件处理逻辑，这样每个前端页面子模块就具备了相应的数据表单功能。

在上述实施例中，本申请可以按照确定数据字段类型和表单控件类型、定义数据表单结构和数据表单组件、在前端页面中引入和构建数据表单的步骤，为每个前端页面子模块配置一个数据表单，这样可以使前端页面的不同子模块具备独立的数据输入和交互能力，满足业务需求并提升用户体验。

S204，在每一个数据表单中配置异步处理机制，生成每一个数据表单对应的异步处理对象，其中，异步处理对象用于实现不同数据表单之间的数据异步处理。

在本实施例中，为每个数据表单配置异步处理机制，以实现数据的异步处理，异步处理可以通过promise处理机制、AJAX请求、Fetch API或其他前端技术来实现，通过异步处理，可以将表单数据发送给后端进行保存，而无需刷新整个页面。为每个数据表单生成一个异步处理对象，这个异步处理对象可以包含发送表单数据的功能，以及处理后端响应的功能，通过这个异步处理对象，可以实现不同数据表单之间的数据异步处理，提高代码的复用性和可维护性。

通过以上的前端页面处理方法，可以减少冗余的代码，提高代码的可读性和维护性。同时，通过配置数据表单和异步处理机制，可以方便地将表单数据发送给后端进行保存，并在需要时进行回显和渲染，这样可以提高开发效率，减少错误和重复工作。

进一步地，在每一个数据表单中配置异步处理机制，生成每一个数据表单对应的异步处理对象，具体包括：

获取每一个数据表单对应的数据处理逻辑；

根据数据处理逻辑确定数据表单之间的处理逻辑依赖关系；

根据处理逻辑依赖关系配置匹配的异步处理机制；

调用预设的构造函数将异步处理机制加载到对应的数据表单，生成异步处理对象。

在本实施例中，针对每个数据表单，确定需要进行的数据处理逻辑，数据处理逻辑可以包括数据的验证、转换、格式化等操作，根据具体需求，编写相应的处理函数或方法。根据数据处理逻辑确定数据表单之间的处理逻辑依赖关系，在某些情况下，不同的数据表单之间可能存在处理逻辑的依赖关系，例如，某个表单的数据需要依赖于另一个表单的数据进行处理，根据具体的依赖关系，确定数据表单之间的处理顺序和流程。

根据数据表单之间的处理逻辑依赖关系，选择合适的异步处理机制，例如，可以使用promise处理机制、AJAX请求、Fetch API或其他前端技术来实现数据的异步处理，根据具体的需求，配置相应的异步处理机制。根据配置的异步处理机制，调用预设的构造函数或方法，将异步处理机制加载到对应的数据表单中，生成一个异步处理对象，用于处理该数据表单的数据。

通过以上步骤，可以为每个数据表单配置异步处理机制，并生成相应的异步处理对象，实现数据的异步处理和保存，提高前端页面的交互性和用户体验。同时，根据处理逻辑的依赖关系，可以保证数据的正确处理顺序，提高代码的可维护性和可扩展性。

进一步地，异步处理机制为promise处理机制，异步处理对象为promise对象，根据处理逻辑依赖关系配置匹配的异步处理机制，具体包括：

将每一个数据表单对应的数据处理逻辑封装成promise异步操作；

调用promise处理机制中的'.then()'方法，并基于处理逻辑依赖关系建立数据表单之间的链式操作链接；

构造函数为'fetchData()'函数，调用预设的构造函数将异步处理机制加载到对应的数据表单，生成异步处理对象，具体包括：

调用'fetchData()'构造函数将promise处理机制加载到对应的数据表单，生成promise对象。

具体来说，本申请的异步处理机制为promise处理机制，异步处理对象为promise对象，Promise处理机制是一种用于处理异步操作的编程模式，Promise是JavaScript中的一种对象，用于表示一个异步操作的最终完成(或失败)及其结果的表示。Promise提供了一种结构化的方式来处理异步操作，以避免回调地狱(callback hell)和层层嵌套的回调函数。

在本实施例中，根据每个数据表单的数据处理逻辑，将其封装成一个promise对象，promise对象可以通过构造函数或其他方式创建，并在其中定义数据处理逻辑，根据处理逻辑依赖关系，使用promise的'.then()'方法来建立数据表单之间的链式操作链接，可以确保数据的处理顺序和流程，在每个'.then()'方法中，可以调用下一个数据表单的数据处理逻辑。构造函数为'fetchData()'函数，根据提供的'fetchData()'函数，调用该函数将promise处理机制加载到对应的数据表单中，生成一个promise对象，该promise对象可以用于处理该数据表单的数据。

其中，'.then()'方法是Promise对象的方法之一，用于注册在Promise对象成功(已完成)状态时执行回调函数，并且提供了对异步操作结果的处理和后续操作的衔接，使得异步代码更加清晰和可读。

通过以上步骤，可以使用Promise处理机制将数据处理逻辑封装成异步操作，并通过'.then()'方法建立数据表单之间的链式操作链接，然后使用'fetchData()'构造函数将异步处理机制加载到对应的数据表单，生成异步处理对象，这样就可以在每个数据表单上执行异步操作，并根据处理逻辑依赖关系正确处理数据并进行数据的异步通信。

进一步地，在在每一个数据表单中配置异步处理机制，生成每一个数据表单对应的异步处理对象之后，还包括：

监听前端页面的操作事件，调用异步处理对象获取操作事件对应的页面数据，其中，操作事件包括提交事件和/或点击事件；

在异步处理对象中执行对应的数据处理逻辑，以对页面数据进行异步处理，生成数据异步处理结果；

将数据异步处理结果提交到后端数据库进行存储。

在本实施例中，根据需求监听前端页面的提交事件和/或点击事件，可以使用事件***或其他前端技术来实现。在操作事件发生时，调用相应的异步处理对象，获取操作事件对应的页面数据，可以通过异步处理对象的方法或属性来获取页面数据。将获取到的页面数据传递给异步处理对象，在对象中执行对应的数据处理逻辑，将获取到的页面数据传递给异步处理对象，在对象中执行对应的数据处理逻辑，根据具体的需求，可以使用异步处理对象的方法或属性来处理数据。将数据异步处理结果提交到后端数据库进行存储，可以使用Promise处理机制、AJAX请求、Fetch API或其他前端技术将数据发送到后端，并由后端进行存储处理。

通过以上步骤，可以实现监听前端页面的操作事件，并将操作事件对应的页面数据传递给异步处理对象进行处理，最后将处理结果提交到后端数据库进行存储，这样可以实现前端页面的数据异步处理和后端数据存储，提高用户体验和数据的可持久化。

进一步地，对页面数据进行异步处理为基于'.then()'方法的链式调用异步操作，在异步处理对象中执行对应的数据处理逻辑，以对页面数据进行异步处理，生成数据异步处理结果，具体包括：

定义一个'processData'方法，其中，'processData'方法用于执行数据处理逻辑并返回一个新的Promise对象；

在异步处理对象中执行'processData'方法，以对页面数据进行数据处理逻辑，生成逻辑处理结果，并返回新的Promise对象；

调用基于'.then()'方法的链式调用异步操作对逻辑处理结果进行异步处理，得到数据异步处理结果。

基于'.then()'方法的链式调用是指在Promise对象上连续调用多个.then()方法，形成一个异步操作的链条，这种链式调用的方式可以在每个'.then()'方法中指定不同的回调函数，以便依次处理异步操作的结果或错误。通过链式调用，可以使异步操作的流程更加清晰和可读，避免回调地狱(callback hell)和层层嵌套的回调函数。

在本实施例中，对页面数据进行异步处理为基于'.then()'方法的链式调用异步操作，首先定义一个'processData'方法，其中，'processData'方法用于执行数据处理逻辑并返回一个新的Promise对象，在异步处理对象中，调用'processData'方法，以对页面数据进行数据处理逻辑。这个方法会返回一个新的Promise对象，用于表示数据处理操作的异步执行。然后使用'.then()'方法来对上一步返回的Promise对象进行链式调用异步操作，每个'.then()'方法可以接收上一步处理结果，并在其中执行特定的异步操作，这样可以形成一个链式调用，确保数据处理的顺序和流程。最后通过链式调用异步操作，最终得到数据的异步处理结果，可以在最后一个'.then()'方法中处理最终的结果，或者返回一个新的Promise对象来表示最终的异步处理结果。

通过以上步骤，可以使用基于'.then()'方法的链式调用异步操作，在异步处理对象中执行数据处理逻辑，并生成数据异步处理结果，这样可以实现对页面数据的异步处理，并通过链式调用来确保数据处理的顺序和流程。同时，可以根据具体需求在链式调用中执行其他异步操作，以获取最终的数据异步处理结果。

进一步地，在调用基于'.then()'方法的链式调用异步操作对逻辑处理结果进行异步处理，得到数据异步处理结果之前，还包括：

判断数据处理逻辑是否执行成功；

若数据处理逻辑执行成功，则调用'resolve()'函数将新的Promise对象的状态标记为“成功”；

若数据处理逻辑执行失败，则调用'reject()'函数将新的Promise对象的状态标记为“失败”。

在本实施例中，在每个'.then()'方法中，可以通过判断数据处理逻辑的执行结果来确定是否成功，这个判断可以根据具体的业务逻辑和需求来进行，比如判断返回的数据是否符合预期，是否出现错误等。

如果数据处理逻辑执行成功，即满足预期的条件，可以调用'resolve()'函数将新的Promise对象的状态标记为“成功”，这样后续的'.then()'方法中的回调函数就可以继续处理成功的结果。

如果数据处理逻辑执行失败，即不满足预期的条件，可以调用'reject()'函数将新的Promise对象的状态标记为“失败”，通过'.catch()'方法中的回调函数就可以处理失败的情况，并进行相应的错误处理。

通过以上步骤，可以在基于'.then()'方法的链式调用异步操作中判断数据处理逻辑的执行结果，并根据结果调用'resolve()'或'reject()'函数来标记新的Promise对象的状态，这样可以在异步操作的链条中处理成功和失败的情况，并进行相应的后续操作。

在上述实施例中，本申请公开一种前端页面处理方法，属于研发管理技术领域和金融科技领域。本申请通过获取需求开发文档，从需求开发文档中获取与前端页面相关的业务属性；基于业务属性对前端页面进行划分，得到若干个前端页面子模块；为每一个前端页面子模块配置一个数据表单；在每一个数据表单中配置异步处理机制，生成每一个数据表单对应的异步处理对象，其中，异步处理对象用于实现不同数据表单之间的数据异步处理。本申请根据业务属性将前端页面划分为多个小模块，每个模块都有独立的数据表单和异步处理机制，这样可以减少代码的冗余性，提高代码的可读性和维护性。同时，当数据需要在页面上进行回显时，只需要处理特定的子模块数据，而不需要处理整个大表单的数据，从而简化了代码的编写和维护过程。

在本实施例中，前端页面处理方法运行于其上的电子设备(例如图1所示的服务器)可以通过有线连接方式或者无线连接方式接收指令或者获取数据。需要指出的是，上述无线连接方式可以包括但不限于3G/4G连接、WiFi连接、蓝牙连接、WiMAX连接、Zigbee连接、UWB(ultra wideband)连接、以及其他现在已知或将来开发的无线连接方式。

需要强调的是，为进一步保证上述需求开发文档的私密和安全性，上述需求开发文档还可以存储于一区块链的节点中。

本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该计算机可读指令在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

进一步参考图3，作为对上述图2所示方法的实现，本申请提供了一种前端页面处理装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图3所示，本实施例所述的前端页面处理装置300，其特征在于，包括：

业务属性获取模块301，用于获取需求开发文档，从需求开发文档中获取与前端页面相关的业务属性；

前端页面划分模块302，用于基于业务属性对前端页面进行划分，得到若干个前端页面子模块；

数据表单配置模块303，用于为每一个前端页面子模块配置一个数据表单；

数据异步处理模块304，用于在每一个数据表单中配置异步处理机制，生成每一个数据表单对应的异步处理对象，其中，异步处理对象用于实现不同数据表单之间的数据异步处理。

进一步地，数据异步处理模块304具体包括：

处理逻辑子模块，用于获取每一个数据表单对应的数据处理逻辑；

依赖关系子模块，用于根据数据处理逻辑确定数据表单之间的处理逻辑依赖关系；

异步处理子模块，用于根据处理逻辑依赖关系配置匹配的异步处理机制；

异步加载子模块，用于调用预设的构造函数将异步处理机制加载到对应的数据表单，生成异步处理对象。

进一步地，异步处理机制为promise处理机制，异步处理对象为promise对象，异步处理子模块具体包括：

逻辑封装单元，用于将每一个数据表单对应的数据处理逻辑封装成promise异步操作；

链式操作链接单元，用于调用promise处理机制中的'.then()'方法，并基于处理逻辑依赖关系建立数据表单之间的链式操作链接；

异步加载子模块具体包括：

第一promise对象生成单元，用于调用'fetchData()'构造函数将promise处理机制加载到对应的数据表单，生成promise对象。

进一步地，前端页面处理装置300还包括：

操作事件监听模块，用于监听前端页面的操作事件，调用异步处理对象获取操作事件对应的页面数据，其中，操作事件包括提交事件和/或点击事件；

数据处理逻辑模块，用于在异步处理对象中执行对应的数据处理逻辑，以对页面数据进行异步处理，生成数据异步处理结果；

处理结果提交模块，用于将数据异步处理结果提交到后端数据库进行存储。

进一步地，对页面数据进行异步处理为基于'.then()'方法的链式调用异步操作，数据处理逻辑模块具体包括：

处理逻辑执行单元，用于定义一个'processData'方法，其中，'processData'方法用于执行数据处理逻辑并返回一个新的Promise对象；

第二Promise对象生成单元，用于在异步处理对象中执行'processData'方法，以对页面数据进行数据处理逻辑，生成逻辑处理结果，并返回新的Promise对象；

结果异步处理单元，用于调用基于'.then()'方法的链式调用异步操作对逻辑处理结果进行异步处理，得到数据异步处理结果。

进一步地，数据处理逻辑模块还包括：

处理逻辑判断单元，用于判断数据处理逻辑是否执行成功；

第一标记单元，用于当数据处理逻辑执行成功时，则调用'resolve()'函数将新的Promise对象的状态标记为“成功”；

第二标记单元，用于当数据处理逻辑执行失败时，则调用'reject()'函数将新的Promise对象的状态标记为“失败”。

进一步地，数据表单配置模块303具体包括：

类型确定子模块，用于确定每个前端页面子模块所需的数据字段类型和表单控件类型；

结构和组件确定子模块，用于根据每个前端页面子模块所需的数据字段类型和表单控件类型确定每个前端页面子模块的数据表单结构和数据表单组件；

数据表单构建子模块，用于在前端页面中引入每个前端页面子模块的数据表单结构和数据表单组件，构建每个前端页面子模块的数据表单。

在上述实施例中，本申请公开一种前端页面处理装置，属于研发管理技术领域和金融科技领域。本申请通过获取需求开发文档，从需求开发文档中获取与前端页面相关的业务属性；基于业务属性对前端页面进行划分，得到若干个前端页面子模块；为每一个前端页面子模块配置一个数据表单；在每一个数据表单中配置异步处理机制，生成每一个数据表单对应的异步处理对象，其中，异步处理对象用于实现不同数据表单之间的数据异步处理。本申请根据业务属性将前端页面划分为多个小模块，每个模块都有独立的数据表单和异步处理机制，这样可以减少代码的冗余性，提高代码的可读性和维护性。同时，当数据需要在页面上进行回显时，只需要处理特定的子模块数据，而不需要处理整个大表单的数据，从而简化了代码的编写和维护过程。

为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图4，图4为本实施例计算机设备基本结构框图。

所述计算机设备4包括通过***总线相互通信连接存储器41、处理器42、网络接口43。需要指出的是，图中仅示出了具有组件41-43的计算机设备4，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable GateArray，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。

所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。

所述存储器41至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器41可以是所述计算机设备4的内部存储单元，例如该计算机设备4的硬盘或内存。在另一些实施例中，所述存储器41也可以是所述计算机设备4的外部存储设备，例如该计算机设备4上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(FlashCard)等。当然，所述存储器41还可以既包括所述计算机设备4的内部存储单元也包括其外部存储设备。本实施例中，所述存储器41通常用于存储安装于所述计算机设备4的操作***和各类应用软件，例如前端页面处理方法的计算机可读指令等。此外，所述存储器41还可以用于暂时地存储已经输出或者将要输出的各类数据。

所述处理器42在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器42通常用于控制所述计算机设备4的总体操作。本实施例中，所述处理器42用于运行所述存储器41中存储的计算机可读指令或者处理数据，例如运行所述前端页面处理方法的计算机可读指令。

所述网络接口43可包括无线网络接口或有线网络接口，该网络接口43通常用于在所述计算机设备4与其他电子设备之间建立通信连接。

在上述实施例中，本申请公开一种计算机设备，属于研发管理技术领域和金融科技领域。本申请通过获取需求开发文档，从需求开发文档中获取与前端页面相关的业务属性；基于业务属性对前端页面进行划分，得到若干个前端页面子模块；为每一个前端页面子模块配置一个数据表单；在每一个数据表单中配置异步处理机制，生成每一个数据表单对应的异步处理对象，其中，异步处理对象用于实现不同数据表单之间的数据异步处理。本申请根据业务属性将前端页面划分为多个小模块，每个模块都有独立的数据表单和异步处理机制，这样可以减少代码的冗余性，提高代码的可读性和维护性。同时，当数据需要在页面上进行回显时，只需要处理特定的子模块数据，而不需要处理整个大表单的数据，从而简化了代码的编写和维护过程。

本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的前端页面处理方法的步骤。

在上述实施例中，本申请公开一种计算机可读存储介质，属于研发管理技术领域和金融科技领域。本申请通过获取需求开发文档，从需求开发文档中获取与前端页面相关的业务属性；基于业务属性对前端页面进行划分，得到若干个前端页面子模块；为每一个前端页面子模块配置一个数据表单；在每一个数据表单中配置异步处理机制，生成每一个数据表单对应的异步处理对象，其中，异步处理对象用于实现不同数据表单之间的数据异步处理。本申请根据业务属性将前端页面划分为多个小模块，每个模块都有独立的数据表单和异步处理机制，这样可以减少代码的冗余性，提高代码的可读性和维护性。同时，当数据需要在页面上进行回显时，只需要处理特定的子模块数据，而不需要处理整个大表单的数据，从而简化了代码的编写和维护过程。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。

本申请可用于众多通用或专用的计算机***环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器***、基于微处理器的***、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何***或设备的分布式计算环境等等。本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (10)

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

获取需求开发文档，从所述需求开发文档中获取与所述前端页面相关的业务属性；

基于业务属性对前端页面进行划分，得到若干个前端页面子模块；

为每一个前端页面子模块配置一个数据表单；

在每一个所述数据表单中配置异步处理机制，生成每一个所述数据表单对应的异步处理对象，其中，所述异步处理对象用于实现不同数据表单之间的数据异步处理。

2.如权利要求1所述的前端页面处理方法，其特征在于，所述在每一个所述数据表单中配置异步处理机制，生成每一个所述数据表单对应的异步处理对象，具体包括：

获取每一个所述数据表单对应的数据处理逻辑；

根据所述数据处理逻辑确定所述数据表单之间的处理逻辑依赖关系；

根据所述处理逻辑依赖关系配置匹配的异步处理机制；

调用预设的构造函数将所述异步处理机制加载到对应的数据表单，生成所述异步处理对象。

3.如权利要求2所述的前端页面处理方法，其特征在于，所述异步处理机制为promise处理机制，所述异步处理对象为promise对象，所述根据所述处理逻辑依赖关系配置匹配的异步处理机制，具体包括：

将每一个所述数据表单对应的数据处理逻辑封装成promise异步操作；

调用promise处理机制中的'.then()'方法，并基于所述处理逻辑依赖关系建立数据表单之间的链式操作链接；

所述构造函数为'fetchData()'函数，所述调用预设的构造函数将所述异步处理机制加载到对应的数据表单，生成所述异步处理对象，具体包括：

调用'fetchData()'构造函数将所述promise处理机制加载到对应的数据表单，生成所述promise对象。

4.如权利要求3所述的前端页面处理方法，其特征在于，在所述在每一个所述数据表单中配置异步处理机制，生成每一个所述数据表单对应的异步处理对象之后，还包括：

监听所述前端页面的操作事件，调用所述异步处理对象获取所述操作事件对应的页面数据，其中，所述操作事件包括提交事件和/或点击事件；

在所述异步处理对象中执行对应的数据处理逻辑，以对所述页面数据进行异步处理，生成数据异步处理结果；

将所述数据异步处理结果提交到后端数据库进行存储。

5.如权利要求4所述的前端页面处理方法，其特征在于，对所述页面数据进行异步处理为基于'.then()'方法的链式调用异步操作，所述在所述异步处理对象中执行对应的数据处理逻辑，以对所述页面数据进行异步处理，生成数据异步处理结果，具体包括：

定义一个'processData'方法，其中，所述'processData'方法用于执行所述数据处理逻辑并返回一个新的Promise对象；

在所述异步处理对象中执行所述'processData'方法，以对所述页面数据进行数据处理逻辑，生成逻辑处理结果，并返回所述新的Promise对象；

调用基于'.then()'方法的链式调用异步操作对所述逻辑处理结果进行异步处理，得到所述数据异步处理结果。

6.如权利要求5所述的前端页面处理方法，其特征在于，在所述调用基于'.then()'方法的链式调用异步操作对所述逻辑处理结果进行异步处理，得到所述数据异步处理结果之前，还包括：

判断所述数据处理逻辑是否执行成功；

若所述数据处理逻辑执行成功，则调用'resolve()'函数将所述新的Promise对象的状态标记为“成功”；

若所述数据处理逻辑执行失败，则调用'reject()'函数将所述新的Promise对象的状态标记为“失败”。

7.如权利要求1所述的前端页面处理方法，其特征在于，所述为每一个前端页面子模块配置一个数据表单，具体包括：

确定每个前端页面子模块所需的数据字段类型和表单控件类型；

根据每个所述前端页面子模块所需的数据字段类型和表单控件类型确定每个所述前端页面子模块的数据表单结构和数据表单组件；

在前端页面中引入每个所述前端页面子模块的数据表单结构和数据表单组件，构建每个所述前端页面子模块的数据表单。

8.一种前端页面处理装置，其特征在于，包括：

业务属性获取模块，用于获取需求开发文档，从所述需求开发文档中获取与所述前端页面相关的业务属性；

前端页面划分模块，用于基于业务属性对前端页面进行划分，得到若干个前端页面子模块；

数据表单配置模块，用于为每一个前端页面子模块配置一个数据表单；

数据异步处理模块，用于在每一个所述数据表单中配置异步处理机制，生成每一个所述数据表单对应的异步处理对象，其中，所述异步处理对象用于实现不同数据表单之间的数据异步处理。

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

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的前端页面处理方法的步骤。