前端系统、前端数据流控制方法、电子设备及存储介质

摘要

本申请提供一种前端系统、前端数据流控制方法、电子设备及存储介质，前端系统，包括视图模块，用于在接收到触发时通知接口管理模块根据所触发的应用、模型和功能调用相应的后端接口；以及用于在数据存储模型和状态模块中所保存的数据发生变化时，根据所改变的数据产生相应的视图变化。接口管理模块用于根据视图模块所触发的应用、模型和功能调用相应的后端接口，并将后端接口返回的数据上报给数据存储模型和状态模块进行保存。其中接口管理模块预先按应用、模型、功能的层级关系定义各后端接口。这样在进行接口调用时，不需要针对每一个的后端接口分别编写相应的Action，实现更为简单，效率更高。

权利要求

1.一种前端系统，其特征在于，包括：View模块，用于在接收到触发时，通知接口管理模块根据所触发的应用、模型和功能调用相应的后端接口；以及用于在Store&State模块中所保存的数据发生变化时，根据所改变的数据产生相应的视图变化；

所述接口管理模块用于根据所述View模块所触发的应用、模型，或应用、模型和功能，调用相应的后端接口，并将所述后端接口返回的数据上报给所述Store&State模块，以将所述数据按照所述后端接口对应的数据保存结构保存在所述Store&State模块中；所述接口管理模块预先按应用、模型，或应用、模型、功能的层级关系定义各后端接口；所述Store&State模块内预先定义有各所述后端接口对应的数据保存结构。

2.如权利要求1所述的前端系统，其特征在于，所述前端系统还包括：缩减器Reducer模块，用于与所述接口管理模块连接，以接收所述接口管理模块上报的所述后端接口返回的数据，并对所述数据进行处理得到符合所述Store&State模块定义的所述后端接口对应的数据保存结构的数据；

所述Reducer模块还用于将处理后的所述后端接口返回的数据发送到所述Store&State模块中，以按照所述后端接口对应的数据保存结构进行保存。

3.如权利要求1或2所述的前端系统，其特征在于，所述Store&State模块预先按模型、方法，或模型、功能、方法的层级关系定义各所述后端接口返回的数据的保存结构。

4.如权利要求1或2所述的前端系统，其特征在于，所述Store&State模块预先按应用、模型、方法，或应用、模型、功能、方法的层级关系定义各所述后端接口返回的数据的保存结构。

5.一种前端系统，其特征在于，包括：View模块，用于在接收到触发时，通知接口管理模块调用后端接口；以及用于在Store&State模块中所保存的数据发生变化时，根据所改变的数据产生相应的视图变化；

所述接口管理模块用于调用后端接口，并将所述后端接口返回的数据上报给所述Store&State模块，以将所述数据按照所述后端接口对应的数据保存结构保存在所述Store&State模块中；所述Store&State模块内预先按预设的层级关系定义有各所述后端接口返回的数据的保存结构。

6.如权利要求5所述的前端系统，其特征在于，所述前端系统还包括：缩减器Reducer模块，用于与所述接口管理模块连接，以接收所述接口管理模块上报的所述后端接口返回的数据，并对所述数据进行处理得到符合所述Store&State模块定义的所述后端接口对应的数据保存结构的数据；

所述Reducer模块还用于将处理后的所述后端接口返回的数据发送到所述Store&State模块中，以按照所述后端接口对应的数据保存结构进行保存。

7.如权利要求5或6所述的前端系统，其特征在于，所述Store&State模块预先按模型、方法，或模型、功能、方法的层级关系定义各所述后端接口返回的数据的保存结构；

或，所述Store&State模块预先按应用、模型、方法，或应用、模型、功能、方法的层级关系定义各所述后端接口返回的数据的保存结构。

8.一种前端数据流控制方法，其特征在于，应用于接口管理模块中，包括：在视图接收到触发时，根据所触发的应用、模型和功能，按照预先定义的各后端接口对应的应用、模型、功能的层级关系，调用相应的后端接口；或，在视图接收到触发时，根据所触发的应用、模型，按照预先定义的各后端接口对应的应用、模型的层级关系，调用相应的后端接口；

将所述后端接口返回的数据上报给Store&State模块，以将所述数据按照所述后端接口对应的数据保存结构保存在所述Store&State模块中。

9.如权利要求8所述的前端数据流控制方法，其特征在于，所述将所述后端接口返回的数据上报给Store&State模块包括：将所述后端接口返回的数据发送给缩减器Reducer，以供所述Reducer在对所述后端接口返回的数据进行处理得到符合所述Store&State模块定义的所述后端接口对应的数据保存结构的数据后，将处理后的所述后端接口返回的数据发送给所述Store&State模块；

所述将所述数据按照所述后端接口对应的数据保存结构保存在所述Store&State模块中包括：

所述将处理后的所述后端接口返回的数据按照所述后端接口对应的数据保存结构保存在所述Store&State模块中。

10.如权利要求8或9所述的前端数据流控制方法，其特征在于，所述Store&State模块中预先按模型、方法，或模型、功能、方法的层级关系定义有各所述后端接口返回的数据的保存结构；

或，

所述Store&State模块中预先按应用、模型、方法，或应用、模型、功能、方法的层级关系定义有各所述后端接口返回的数据的保存结构。

11.一种前端数据流控制方法，其特征在于，应用于缩减器Reducer中，包括：在接收到后端接口返回给接口管理模块的数据时，对所述后端接口返回的数据进行处理，得到符合Store&State模块定义的所述后端接口对应的数据保存结构的数据；

将处理后的所述后端接口返回的数据按照所述后端接口对应的数据保存结构保存在所述Store&State模块中；所述Store&State模块内预先按预设的层级关系定义有各所述后端接口返回的数据的保存结构。

12.如权利要求11所述的前端数据流控制方法，其特征在于，所述Store&State模块内预先按预设的层级关系定义有各所述后端接口返回的数据的保存结构包括：所述Store&State模块中预先按模型、方法，或模型、功能、方法的层级关系定义有各所述后端接口返回的数据的保存结构；

或，所述Store&State模块中预先按应用、模型、方法，或应用、模型、功能、方法的层级关系定义有各所述后端接口返回的数据的保存结构。

13.一种电子设备，其特征在于，包括处理器、存储器及通信总线；

所述通信总线用于实现处理器和存储器之间的连接通信；

所述处理器用于执行存储器中存储的一个或者多个第一程序，以实现如权利要求8至

10中任一项所述的前端数据流控制方法的步骤；

或，所述处理器用于执行存储器中存储的一个或者多个第二程序，以实现如权利要求

11至12中任一项所述的前端数据流控制方法的步骤。

14.一种可读存储介质，其特征在于，所述可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如权利要求8至10中任一项所述的前端数据流控制方法的步骤，或实现如权利要求11至12中任一项所述的前端数据流控制方法的步骤。

说明书

前端系统、前端数据流控制方法、电子设备及存储介质

技术领域

[0001] 本申请涉及信息技术领域，具体而言，涉及一种前端系统、前端数据流控制方法、电子设备及存储介质。

背景技术

[0002] 随着前端技术近几年的快速发展，Web前端技术开发框架的应用越来越广泛。目前比较流行的Web前端技术开发框架是React结合Redux。在React结合Redux的框架下，需要为
每一个调用的后端接口分别编写相应的Action和Store&State(数据存储模型和状态)，这
就使得目前在实现Web前端页面对后端接口的调用时，不但代码复杂，效率低下。

发明内容

[0003] 本申请实施例的目的在于提供一种前端系统、前端数据流控制方法、电子设备及存储介质，用以解决相关技术会导致在在实现Web前端页面对后端接口的调用时，不但代码
复杂，效率低下的问题。

[0004] 本申请实施例提供了一种前端系统，包括：View模块，用于在接收到触发时，通知接口管理模块根据所触发的应用、模型，或应用、模型和功能调用相应的后端接口；以及用
于在Store&State模块中所保存的数据发生变化时，根据所改变的数据产生相应的视图变
化；所述接口管理模块用于根据所述View模块所触发的应用、模型和功能调用相应的后端
接口，并将所述后端接口返回的数据上报给所述Store&State模块，以将所述数据按照所述
后端接口对应的数据保存结构保存在所述Store&State模块中；所述接口管理模块预先按
应用、模型，或应用、模型、功能的层级关系定义各后端接口；所述Store&State模块内预先
定义有各所述后端接口对应的数据保存结构。

[0005] 在上述实现过程中，接口管理模块预先按应用、模型，或应用、模型、功能的层级关系定义各后端接口，这样在进行接口调用时，不需要针对每一个的后端接口分别编写相应
的Action(用于确定并调用所需调用的后端接口)，直接依据View模块所触发的应用、模型，
或应用、模型和功能，即可从定义好的层级关系中确定出所需调用的后端接口，实现更为简
单，效率更高。

[0006] 进一步地，所述前端系统还包括：缩减器Reducer模块，用于与所述接口管理模块连接，以接收所述接口管理模块上报的所述后端接口返回的数据，并对所述数据进行处理
得到符合所述Store&State模块定义的所述后端接口对应的数据保存结构的数据；所述
Reducer模块还用于将处理后的所述后端接口返回的数据发送到所述Store&State模块中，
以按照所述后端接口对应的数据保存结构进行保存。

[0007] 在上述实现过程中，由Reducer模块来对后端接口返回的数据进行处理，得到符合Store&State模块定义的所述后端接口对应的数据保存结构的数据，进而保存在Store&
State模块中，实现简单。

[0008] 进一步地，所述Store&State模块预先按模型、方法，或模型、功能、方法的层级关系定义各所述后端接口返回的数据的保存结构。

[0009] 在本申请实施例中，可以为每一个应用分别设计一个Store&State模块，各Store&State模块预先按模型、方法，或模型、功能、方法的层级关系定义该应用对应的各后端接口
所返回的数据的保存结构。这样在进行数据保存时，按预设的具有模型、方法，或模型、功
能、方法的层级关系的保存结构进行数据保存即可，不需要针对每一个后端接口分别编写
相应的Store&State(数据存储模型和状态)，实现更为简单，效率更高。

[0010] 进一步地，所述Store&State模块预先按应用、模型、方法，或应用、模型、功能、方法的层级关系定义各所述后端接口返回的数据的保存结构。

[0011] 在本申请实施例中，Store&State模块可以预先按应用、模型、方法，或应用、模型、功能、方法的层级关系定义各后端接口所返回的数据的保存结构。这样在进行数据保存时，
按预设的具有应用、模型、功能、方法的层级关系的保存结构进行数据保存即可，不需要针
对每一个后端接口分别编写相应的Store&State，实现更为简单，效率更高。

[0012] 本申请实施例还提供了一种前端系统，包括：View模块，用于在接收到触发时，通知接口管理模块调用后端接口；以及用于在Store&State模块中所保存的数据发生变化时，
根据所改变的数据产生相应的视图变化；所述接口管理模块用于调用后端接口，并将所述
后端接口返回的数据上报给所述Store&State模块，以将所述数据按照所述后端接口对应
的数据保存结构保存在所述Store&State模块中；所述Store&State模块内预先按预设的层
级关系定义有各所述后端接口返回的数据的保存结构。

[0013] 在上述实现过程中，Store&State模块内预先按预设的层级关系定义有各后端接口返回的数据的保存结构，这样在进行数据保存时，不需要针对每一个后端接口分别编写
相应的Store&State(数据存储模型和状态)，直接依据View模块所触发的层级关系，即可对
后端接口返回的数据进行保存，实现更为简单，效率更高。

[0014] 进一步地，所述前端系统还包括：缩减器Reducer模块，用于与所述接口管理模块连接，以接收所述接口管理模块上报的所述后端接口返回的数据，并对所述数据进行处理
得到符合所述Store&State模块定义的所述后端接口对应的数据保存结构的数据；所述
Reducer模块还用于将处理后的所述后端接口返回的数据发送到所述Store&State模块中，
以按照所述后端接口对应的数据保存结构进行保存。

[0015] 在上述实现过程中，由Reducer模块来对后端接口返回的数据进行处理，得到符合Store&State模块定义的所述后端接口对应的数据保存结构的数据，进而保存在Store&
State模块中，实现简单。

[0016] 进一步地，所述Store&State模块预先按模型、方法，或模型、功能、方法的层级关系定义各所述后端接口返回的数据的保存结构；或，所述Store&State模块预先按应用、模
型、方法，或应用、模型、功能、方法的层级关系定义各所述后端接口返回的数据的保存结
构。

[0017] 在本申请实施例中，可以为每一个应用分别设计一个Store&State模块，各Store&State模块预先按模型、方法，或模型、功能、方法的层级关系定义该应用对应的各后端接口
所返回的数据的保存结构。在本申请实施例中，也可以为多个或所有应用设计一个Store&
State模块，Store&State模块可以预先按应用、模型、方法，或应用、模型、功能、方法的层级
关系定义各后端接口所返回的数据的保存结构。这样在进行数据保存时，按预设的具有相
应层级关系的保存结构进行数据保存即可，不需要针对每一个后端接口分别编写相应的
Store&State，实现更为简单，效率更高。

[0018] 本申请实施例还提供了一种前端数据流控制方法，应用于接口管理模块中，包括：在视图接收到触发时，根据所触发的应用、模型和功能，按照预先定义的各后端接口对应的
应用、模型、功能的层级关系，调用相应的后端接口；或，在视图接收到触发时，根据所触发
的应用、模型，按照预先定义的各后端接口对应的应用、模型的层级关系，调用相应的后端
接口；将所述后端接口返回的数据上报给Store&State模块，以将所述数据按照所述后端接
口对应的数据保存结构保存在所述Store&State模块中。

[0019] 在上述实现过程中，接口管理模块在视图接收到触发时，根据所触发的应用、模型和功能，或所触发的应用、模型，按照预先定义的各后端接口对应的层级关系，调用相应的
后端接口，进而将后端接口返回的数据上报给Store&State模块，以将数据按照后端接口对
应的数据保存结构保存在Store&State模块中。这样在进行接口调用时，不需要针对每一个
的后端接口分别编写相应的Action，直接依据View模块所触发的应用、模型和功能，即可从
定义好的层级关系中确定出所需调用的后端接口，实现更为简单，效率更高。

[0020] 进一步的，所述将所述后端接口返回的数据上报给Store&State模块包括：将所述后端接口返回的数据发送给缩减器Reducer，以供所述Reducer在对所述后端接口返回的数
据进行处理得到符合所述Store&State模块定义的所述后端接口对应的数据保存结构的数
据后，将处理后的所述后端接口返回的数据发送给所述Store&State模块；所述将所述数据
按照所述后端接口对应的数据保存结构保存在所述Store&State模块中包括：所述将处理
后的所述后端接口返回的数据按照所述后端接口对应的数据保存结构保存在所述Store&
State模块中。

[0021] 在上述实现过程中，由Reducer来对后端接口返回的数据进行处理，得到符合Store&State模块定义的所述后端接口对应的数据保存结构的数据，进而保存在Store&
State模块中，整个过程实现简单，具有较高的实现价值。

[0022] 进一步的，所述Store&State模块中预先按模型、方法，或模型、功能、方法的层级关系定义有各所述后端接口返回的数据的保存结构；或，所述Store&State模块中预先按应
用、模型、方法，或应用、模型、功能、方法的层级关系定义有各所述后端接口返回的数据的
保存结构。

[0023] 在本申请实施例中，可以为每一个应用分别设计一个Store&State模块，各Store&State模块预先按模型、功能、方法的层级关系定义该应用对应的各后端接口所返回的数据
的保存结构。在本申请实施例中，也可以为多个或所有应用设计一个Store&State模块，
Store&State模块可以预先按应用、模型、功能、方法的层级关系定义各后端接口所返回的
数据的保存结构。这样在进行数据保存时，按预设的具有相应层级关系的保存结构进行数
据保存即可，不需要针对每一个的后端接口分别编写相应的Store&State，实现更为简单，
效率更高。

[0024] 本申请实施例还提供了一种前端数据流控制方法，应用于缩减器Reducer中，包括：在接收到后端接口返回给接口管理模块的数据时，对所述后端接口返回的数据进行处
理，得到符合Store&State模块定义的所述后端接口对应的数据保存结构的数据；将处理后
的所述后端接口返回的数据按照所述后端接口对应的数据保存结构保存在所述Store&
State模块中；所述Store&State模块内预先按预设的层级关系定义有各所述后端接口返回
的数据的保存结构。

[0025] 在上述实现过程中，Store&State模块内预先按预设的层级关系定义有各后端接口返回的数据的保存结构，这样在进行数据保存时，不需要针对每一个的后端接口分别编
写相应的Store&State，直接依据View模块所触发的层级关系，即可对后端接口返回的数据
进行保存，实现更为简单，效率更高。

[0026] 进一步的，所述Store&State模块内预先按预设的层级关系定义有各所述后端接口返回的数据的保存结构包括：所述Store&State模块中预先按模型、方法，或模型、功能、
方法的层级关系定义有各所述后端接口返回的数据的保存结构；或，所述Store&State模块
中预先按应用、模型、方法，或应用、模型、功能、方法的层级关系定义有各所述后端接口返
回的数据的保存结构。

[0027] 在本申请实施例中，可以为每一个应用分别设计一个Store&State模块，各Store&State模块预先按模型、方法，或模型、功能、方法的层级关系定义该应用对应的各后端接口
所返回的数据的保存结构。在本申请实施例中，也可以为多个或所有应用设计一个Store&
State模块，Store&State模块可以预先按应用、模型、方法，或应用、模型、功能、方法的层级
关系定义各后端接口所返回的数据的保存结构。这样在进行数据保存时，按预设的具有相
应层级关系的保存结构进行数据保存即可，不需要针对每一个的后端接口分别编写相应的
Store&State，实现更为简单，效率更高。

[0028] 本申请实施例还提供了一种电子设备，包括处理器、存储器及通信总线；所述通信总线用于实现处理器和存储器之间的连接通信；所述处理器用于执行存储器中存储的一个
或者多个第一程序，以实现上述第一种的前端数据流控制方法的步骤；或，所述处理器用于
执行存储器中存储的一个或者多个第二程序，以实现上述第二种的前端数据流控制方法的
步骤。

[0029] 本申请实施例中还提供了一种可读存储介质，所述可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现上述第一种的前
端数据流控制方法的步骤，或实现上述第二种的前端数据流控制方法的步骤。

附图说明

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

[0031] 图1为本申请实施例提供的一种前端系统调用后端接口的示意图；

[0032] 图2为本申请实施例提供的一种较具体的前端系统调用后端接口的示意图；

[0033] 图3为本申请实施例提供的一种应用于接口管理模块中的前端数据流控制方法的流程示意图；

[0034] 图4为本申请实施例提供的一种应用于Reducer中的前端数据流控制方法的流程示意图；

[0035] 图5为本申请实施例提供的一种较具体的前端系统调用后端接口的示意图；

[0036] 图6为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

[0037] 下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述。

[0038] 实施例一：

[0039] 请参见图1所示，图1为本申请实施例提供的一种可行的前端系统的结构示意图，前端系统包括：View(视图)模块、接口管理模块和Store&State(数据存储模型和状态)模
块。其中：

[0040] View模块用于在接收到触发时，通知接口管理模块根据所触发的App(应用)、Model(模型)，或App、Model和Function(功能)调用相应的后端接口。

[0041] 接口管理模块用于根据所述View模块所触发的App、Model，或App、Model和Function调用相应的后端接口，并将所述后端接口返回的数据上报给Store&State模块，以
将数据按照后端接口对应的数据保存结构保存在Store&State模块中。

[0042] 需要说明的是，在实际应用中，App可以看成是由多个Model(某些文献中也称业务逻辑层)构成的，而每个Model可以具有一个或多个Function。还需要说明的是，在实际应用
中，某些APP下的Model也可以不定义Function，例如在compute(一种具体的App)下的
images(一种具体的Model)即不需要定义Function。Model下是否需要定义Function可以由
工程师根据实际App需要决定。

[0043] 在本申请实施例中，接口管理模块预先按App、Model，或App、Model、Function的层级关系定义各后端接口。

[0044] View模块在接收到触发时，即可以通知接口管理模块被触发的是哪个App的哪个Model中的哪一个Function，或通知接口管理模块被触发的是哪个App的哪个Model，进而依
据App、Model、Function的层级关系，或依据App、Model的层级关系，确定出被触发的那一个
Function或Model下对应的后端接口，确定出的后端接口即为需调用的后端接口。在本申请
实施例中，在按App、Model，或App、Model、Function的层级关系定义各后端接口时，可以在
末端层级(按App、Model的层级关系定义时，末端层级即为“Model”，按App、Model、Function
的层级关系定义时，末端层级即为“Function”)下记录对应的后端接口的标识信息，如接口
名、后端接口的URL(Uniform Resource Locator，统一资源定位符)等，从而便于调用相应
的后端接口。

[0045] 在本申请实施例中，接口管理模块可以预先按App、Model，或App、Model、Function的层级关系定义各后端接口，而Store&State模块内可以预先定义有各后端接口对应的数
据保存结构。这样在进行接口调用时，不需要针对每一个的后端接口分别编写相应的
Action，直接依据View模块所触发的App、Model，或App、Model和Function，即可从定义好的
层级关系中确定出所需调用的后端接口，实现更为简单，效率更高。

[0046] 还需要说明的是，通常而言，后端接口返回的数据所包含的信息较多，并不是所有的信息都是需要的，且通常而言后端接口返回的数据的数据结构和Store&State模块所要
求的保存结构也是不同的，因此需要对后端接口返回的数据进行处理。在本申请实施例中，
参见图2所示，前端系统还可以包括Reducer(缩减器)模块，用于与接口管理模块连接，以接
收接口管理模块上报的后端接口返回的数据，并对该数据进行处理得到符合Store&State
模块定义的后端接口对应的数据保存结构的数据。

[0047] Reducer模块还用于将处理后的后端接口返回的数据发送到Store&State模块中，以按照后端接口对应的数据保存结构进行保存。

[0048] 为更好的理解本申请实施例的方案，下面针对接口管理模块中的处理过程进行描述，可以参见图3所示，包括：

[0049] S301：接口管理模块在View模块接收到触发时，根据所触发的App、Model，或App、Model和Function，按照预先定义的各后端接口对应的App、Model，或App、Model、Function
的层级关系，调用相应的后端接口。

[0050] 需要说明的是，对于一个Model下没有定义Function时，View模块接收到的触发只会到达“Model”这一层级，此时按照预先定义的各后端接口对应的App、Model的层级关系，
调用相应的后端接口。而在Model下定义有Function时，View模块接收到的触发会到达
“Function”这一层级，此时按照预先定义的各后端接口对应的App、Model、Function的层级
关系，调用相应的后端接口。

[0051] S302：将后端接口返回的数据上报给Store&State模块，以将数据按照所述后端接口对应的数据保存结构保存在Store&State模块中。

[0052] 如前述前端系统的描述，在本申请实施例中，接口管理模块可以将后端接口返回的数据发送给缩减器Reducer(对应Reducer模块，是实现Reducer模块的实体)，由缩减器
Reducer来执行数据处理，得到符合Store&State模块定义的后端接口对应的数据保存结构
的数据，并将处理后的数据按照后端接口对应的数据保存结构保存在Store&State模块中。

[0053] 需要说明的是，在本申请实施例的一种可行实施方式中，也可以将Reducer模块的功能集成到Store&State模块中(例如在Store&State模块中增设Reducer函数)，从而使得
系统中不需要Reducer模块，而由Store&State模块直接对后端接口返回的数据进行处理并
保存。

[0054] 需要说明的是，Store&State模块内预先定义的各后端接口对应的数据保存结构，可以是由工程师在应用开发过程中，即针对该应用所需要用到的各后端接口分别编写相应
的数据保存结构。此外，也可以在开发之前即预先按照App、Model、Method(方法)，或App、
Model、Function、Method的层级关系定义出各后端接口返回的数据的保存结构得到Store&
State模块，从而在开发时直接采用该Store&State模块即可。当然，应当理解的是，也可以
在开发之前即预先针对每一个App设计一个Store&State模块，并针对各Store&State模块
预先按照Model、Method，或Model、Function、Method的层级关系定义出各后端接口返回的
数据的保存结构。

[0055] 值得注意的是，本申请实施例中，Store&State模块是保存数据的地方，可以把它看成一个容器。而数据的保存结构即是指数据在Store&State模块中的保存形态，也可以称
为Store&State。

[0056] 在本申请实施例中，Store&State模块中构建的具有多层级的保存结构，可以类似于文件夹的多层级结构。

[0057] 例如按App、Model、Function、Method定义各后端接口返回的数据的保存结构时，可以将一个App对应一个文件夹，App对应的文件夹下有具有该App的各Model分别对应的文
件夹，而Model对应的文件夹下具有该Model下的Function对应的文件夹，Function对应的
文件夹下具有该Function对应的Method的文件夹，而各Method对应的文件夹中即用于存储
相应Method对应的后端接口返回的数据，这就从存储容器的结构上实现了按照App、Model、
Function、Method的层级关系定义出各后端接口返回的数据的保存结构。按App、Model、
Method定义各后端接口返回的数据的保存结构时，方式与上述类似，只是Model对应的文件
夹下没有了Function对应的文件夹，在此不再赘述。

[0058] 又例如，可以设定对数据本身的结构要求。如按App、Model、Function、Method定义各后端接口返回的数据的保存结构时，可以要求数据头前需要加入App名、Model名、
Function名和Method名，例如App名为resource，Model名为network，Function名为update，
Method名为post，待存数据为A，则可以将数据resource.network.update.post.A进行保
存。按App、Model、Method定义各后端接口返回的数据的保存结构，或按Model、Method定义
各后端接口返回的数据的保存结构，或按Model、Function、Method定义各后端接口返回的
数据的保存结构时，方式与前述类似，只是缺少了相应层级，在此不再赘述。

[0059] 需要说明的是，在实际应用中，在定义各后端接口对应的层级关系时，会为各Function或各Model配置对应的接口调用方法Method。因此，在本申请实施例中，按照App‑>
Model‑>Function‑>Method，或App‑>Model‑>Method，或Model‑>Function‑>Method，或
Model‑>Method的层级关系预先定义各后端接口返回的数据的保存结构后，可以使得保存
的各数据层级关系更清楚，便于后期管理。此外，这就相当于在进行App开发之前就预先定
义好了一个标准化的Store&State模块，从而在开发时直接取用Store&State模块即可。

[0060] View模块还用于在Store&State模块中所保存的数据发生变化时，根据所改变的数据产生相应的视图变化。

[0061] 需要说明的是，上述图1和图2的方案中描述了接口管理模块预先按App、Model，或App、Model、Function的层级关系定义各后端接口的方案；以及接口管理模块预先按App、
Model，或App、Model、Function的层级关系定义各后端接口，同时Store&State模块内也预
先按预设的层级关系定义有各后端接口返回的数据的保存结构的方案。但应当理解的是，
在本申请实施例中，也可以仅在Store&State模块内预先按预设的层级关系定义有各后端
接口返回的数据的保存结构，而对于接口管理模块，则可以由工程师在开发过程中，针对每
一个接口都分别编写一个action来实现。这一方案这样在进行数据保存时，不需要针对每
一个的后端接口分别编写相应的Store&State，直接依据View模块所触发的层级关系，即可
对后端接口返回的数据进行保存，实现更为简单，效率更高。

[0062] 而在仅在Store&State模块内预先按预设的层级关系定义有各后端接口返回的数据的保存结构，而对于接口管理模块，则可以由工程师在开发过程中，针对每一个接口都分
别编写一个action来实现；以及在接口管理模块预先按App、Model，或App、Model、Function
的层级关系定义各后端接口，同时Store&State模块内也预先按预设的层级关系定义有各
后端接口返回的数据的保存结构的方案中，接口管理模块也可以是将后端接口返回的数据
发送给Reducer，由Reducer进行处理后，将处理后的数据按照后端接口对应的数据保存结
构保存在Store&State模块中。具体的，Reducer中的处理过程可以参见图4所示，包括：

[0063] S401：Reducer在接收到后端接口返回给接口管理模块的数据时，对后端接口返回的数据进行处理，得到符合Store&State模块定义的后端接口对应的数据保存结构的数据；

[0064] S402：将处理后的后端接口返回的数据按照后端接口对应的数据保存结构保存在Store&State模块中。

[0065] 而由于Store&State模块内预先按预设的层级关系定义有各所述后端接口返回的数据的保存结构。

[0066] Store&State模块内预先按预设的层级关系定义有各后端接口返回的数据的保存结构。

[0067] 需要注意的是，本申请实施例的方案可以应用于React结合Redux的前端框架下。需要说明的是，通常而言，Redux中存在有action，其可以表明App中发生了什么，并会调用
相应的后端接口，但是action并不会对后端接口返回的数据进行处理，其功能相当于本申
请实施例中的接口管理模块，区别在于目前相关技术中需要针对每一个接口都分别编写一
个action。而本申请实施例中，则通过预先按App、Model，或App、Model、Function的层级关
系定义各后端接口，从而可以根据所触发的App、Model，或App、Model和Function这一层级
关系直接确定出所需调用的后端接口并进行调用，将action的功能标准化了，实现更为简
单，效率更高。

[0068] 在本申请实施例中，在Store&State模块某个时间点的所有数据，即可认为是一个Store&State(保存结构)下的所有数据。通常而言，每一个后端接口都需要适应性的编写一
个Store&State，也即每一个后端接口都需要定义其对应的数据保存结构。

[0069] View模块对应于UI(User Interface，用户界面)中的视图层，其是与用户直接对接的一层，可接收到外部的触发信息，例如可以接收到用户点击了某个功能接口标识的信
息等。还需要说明的是，Store&State模块中的数据时是与View模块关联的。Store&State模
块中数据的变化会导致View模块所展示的界面内容出现变化，而View模块在接收到触发
时，也会导致Store&State模块中的数据发生变化。而改变Store&State模块中的数据的唯
一办法，就是使用接口管理模块或action来调用后端接口，并将后端接口的数据上报给
Store&State模块。

[0070] 应当理解的是，Store&State模块中必须在存入一个新的数据时，View模块所展示的界面内容才会出现变化。而计算后端接口返回的数据得到这个新的数据的过程被称之为
Reducer。而Reducer模块即是用来处理后端接口返回的数据的，其本质是通过Reducer函数
来处理数据。需要说明的是，Reducer模块可能会用到多个Reducer函数，因此在某些技术的
表述中，会用Reducers来表征Reducer模块。本申请实施例所提供的前端系统和前端数据流
控制方法，接口管理模块预先按App、Model，或App、Model、Function的层级关系定义各后端
接口，这样在进行接口调用时，不需要针对每一个的后端接口分别编写相应的Action，直接
依据View模块所触发的App、Model，或App、Model和Function，即可从定义好的层级关系中
确定出所需调用的后端接口，实现更为简单，效率更高。

[0071] 实施例二：

[0072] 本实施例在实施例一的基础上，以一种较具体的前端数据流控制过程为例，为本申请做进一步示例说明。

[0073] 首先，预先设置以下模块：

[0074] 1、接口管理模块：按App‑>Model‑>Function或App‑>Model的层级关系定义后端接口。相比相关技术方案中需要为每个后端接口都要定义和配置一个Action，本申请实施例
只需要一次性定义和提供一个标准化的接口管理模块即可。

[0075] 2、Store&State模块：按App‑>Model‑>Function‑>Method或App‑>Model‑>Method的层级关系定义各后端接口对应的Store&State。相比相关技术方案中需要为每个后端接
口都要定义和配置一个Store&State，本申请实施例只需要一次性定义和提供一个标准化
的Store&State模块即可。

[0076] 在前端系统启动时，提供一个初始值，给如图5所示的前端系统进行执行，从而初始化接口管理模块和Store&State模块。

[0077] 在前端系统启动后，参见图5所示，通过Web(网页)页面触发，调用后端接口返回数据，再驱动页面产生变化的过程包括：

[0078] 首先，用户在UI视图层(即图中Views)产生操作触发接口管理模块，接口管理模块依据用户操作所触发的App‑Model‑Function的关系或App‑Model的关系，获取到相应的后
端接口的URL(Uniform Resource Locator，统一资源定位符)。

[0079] 然后，接口管理模块向后端服务请求调用该接口，接口被调用后返回数据。接口管理模块将后端接口返回的数据分发到Reducers。

[0080] 接着，Reducers对接收到的数据进行处理，并加入app名model名function名method名的拼接值，比如加入resource.network.update.post等。然后将处理后的数据更
新到Store&State模块中。

[0081] 最后，Store&State模块中的数据变化驱动UI视图层显示的变化。

[0082] 为了便于理解，下面以要显示云主机镜像列表的情况为例，用户通过在Web页面触发云主机镜像列表的显示接口，此时UI视图层向接口管理模块通知compute下的images被
触发(compute为App，images为model)，调用images下的接口url接口(用于分页获取镜像列
表，从云主机创建镜像)、upload接口(用于上传镜像)、tableActions接口(用于获取镜像列
表的可用性)和rowActions接口(用于获取一组镜像的操作可用性)，接收各接口返回的数
据给Reducers处理并加入app名(compute)model(images)名method名(post)的拼接值。将
处理后的数据更新到Store&State模块中即可使得UI视图层显示出云主机镜像列表。

[0083] 通过上述方案，本申请实施例提供的接口管理模块实现了后端接口的统一管理和统一调用，通过一个接口管理模块就能满足调用一切后端服务接口的需要。此外，本申请实
施例提供的Store&State模块，实现了数据存储的统一管理，不需要针对每一个后端接口分
别编写相应的数据存储模型和状态，实现更为简单，效率更高。

[0084] 实施例三：

[0085] 本实施例提供了一种电子设备，参见图6所示，其包括处理器601、存储器602以及通信总线603。其中：

[0086] 通信总线603用于实现处理器601和存储器602之间的连接通信。

[0087] 处理器601用于执行存储器602中存储的一个或多个第一程序，以实现上述实施例一中的应用于前述接口管理模块中的前端数据流控制方法的各步骤；

[0088] 或，处理器601用于执行存储器602中存储的一个或多个第二程序，以实现上述实施例一中的应用于Reducer中的前端数据流控制方法的各步骤。

[0089] 可以理解，图6所示的结构仅为示意，电子设备还可包括比图6中所示更多或者更少的组件，或者具有与图6所示不同的配置。

[0090] 本实施例还提供了一种可读存储介质，如软盘、光盘、硬盘、闪存、U盘、SD(Secure Digital Memory Card，安全数码卡)卡、MMC(Multimedia Card，多媒体卡)卡等，在该可读
存储介质中存储有实现上述各个步骤的一个或者多个程序，这一个或者多个程序可被一个
或者多个处理器执行，以实现上述实施例一中的应用于前述接口管理模块中的前端数据流
控制方法的各步骤，或实现上述实施例一中的应用于Reducer中的前端数据流控制方法器
的各步骤。在此不再赘述。

[0091] 在本申请所提供的实施例中，应该理解到，所揭露装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻
辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可
以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间
的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连
接，可以是电性，机械或其它的形式。

[0092] 另外，作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多
个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的
目的。

[0093] 再者，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

[0094] 在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际
的关系或者顺序。

[0095] 在本文中，多个是指两个或两个以上。

[0096] 以上所述仅为本申请的实施例而已，并不用于限制本申请的保护范围，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的
任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。