一种配置式操作界面设置方法、装置及介质与流程

1.本技术涉及软件开发技术领域，特别是涉及一种配置式操作界面设置方法、装置及介质。


背景技术：

2.目前，各类saas(software as a service软件即服务)管理软件针对商户所能提供的各种营销活动能力，一般都是采用已固定被开发出来的模板，如开卡有礼、节日有礼、消费有礼、储值有利等活动，并在此基础上让商户进行活动条件的设置。不同的营销活动虽然拥有不同的组件供商户配置活动内容，但这些组件可以被分为三大类：基础信息类组件、活动规则类组件和营销动作类组件。在实际的营销活动中，需要根据不同的营销活动需求，去开发不同的活动页面，代码中组合或开发新的组件，整个项目周期经过运营调研、需求评审、软件开发、多环境测试、上线后才能让商户去配置固定的活动类型。
3.但是，上述方式由于采用固定类别活动的组件模板，无法更改，只能改变组件内容的设定值等信息，无法做到营销活动的自由和实时化定制。
4.鉴于上述问题，设计一种配置式操作界面设置方法是该领域技术人员亟待解决的问题。


技术实现要素：

5.本技术的目的是提供一种配置式操作界面设置方法、装置及介质。
6.为解决上述技术问题，本技术提供一种配置式操作界面设置方法，包括：
7.获取接口数据；其中，所述接口数据至少包含各组件的组件内部原子结构和组件内部设定值；
8.提取所述接口数据至全局状态；
9.通过递归遍历对所述接口数据进行处理；
10.将处理后的数据通过props传入各所述组件，以用于各所述组件触发数据更新；
11.将所述处理后的数据反转为所述接口数据并发送至后端，以用于生成活动模板。
12.优选地，所述通过递归遍历对所述接口数据进行处理包括：
13.将所述接口数据中各所述组件所需数据通过递归遍历处理为一层对象，以用于将所述一层对象作为所述处理后的数据通过所述props传入各所述组件。
14.优选地，在所述提取所述接口数据至全局状态之前，还包括：
15.根据所述接口数据建立全局映射表，以用于获取各所述组件与所述接口数据的映射关系。
16.优选地，所述根据所述接口数据建立全局映射表包括：
17.通过javascript map结构将所述接口数据与各所述组件建立所述全局映射表。
18.优选地，在所述将所述处理后的数据反转为所述接口数据并发送至后端之前，还包括：
19.校验各所述组件对应的所述处理后的数据；
20.判断各所述处理后的数据是否通过校验；
21.若是，进入到所述将所述处理后的数据反转为所述接口数据并发送至后端的步骤；
22.若否，触发错误信息提示。
23.优选地，所述各所述组件触发数据更新包括：
24.判断是否需要形成多组件逻辑闭环；
25.若是，将各组件对应的所述处理后的数据还原为所述接口数据，返回至所述提取所述接口数据至全局状态的步骤；
26.若否，内部校验更新后的数据。
27.优选地，所述将所述处理后的数据反转为所述接口数据包括：
28.通过所述全局映射表将所述处理后的数据反转为所述接口数据。
29.为解决上述技术问题，本技术还提供一种配置式操作界面设置装置，包括：
30.获取模块，用于获取接口数据；其中，所述接口数据至少包含各组件的组件内部原子结构和组件内部设定值；
31.提取模块，用于提取所述接口数据至全局状态；
32.数据处理模块，用于通过递归遍历对所述接口数据进行处理；
33.传输模块，用于将处理后的数据通过props传入各所述组件，以用于各所述组件触发数据更新；
34.发送模块，用于将所述处理后的数据反转为所述接口数据并发送至后端，以用于生成活动模板。
35.为解决上述技术问题，本技术还提供另一种配置式操作界面设置装置，包括：
36.存储器，用于存储计算机程序；
37.处理器，用于执行所述计算机程序时实现上述所述的配置式操作界面设置方法的步骤。
38.为解决上述技术问题，本技术还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述所述的配置式操作界面设置方法的步骤。
39.本技术所提供的配置式操作界面设置方法，通过获取接口数据，其中接口数据至少包含各组件的组件内部原子结构和组件内部设定值；提取接口数据至全局状态；通过递归遍历对接口数据进行处理；将处理后的数据通过props传入各组件，以用于各组件触发数据更新；将处理后的数据反转为接口数据并发送至后端，以用于生成活动模板。由此可知，上述方案通过包含各组件的组件内部原子结构和组件内部设定值的接口数据进行组件配置，实现了组件配置的自定义；同时将配置的实例保存为模板，成功后可自由复用，便捷高效，实现了营销活动的自由和实时化定制。
40.此外，本技术还提供了一种配置式操作界面设置装置及介质，效果同上。
附图说明
41.为了更清楚地说明本技术实施例，下面将对实施例中所需要使用的附图做简单的
介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
42.图1为本技术实施例提供的一种配置式操作界面设置方法的流程图；
43.图2为本技术实施例提供的另一种配置式操作界面设置方法的流程图；
44.图3为本技术实施例提供的一种配置式操作界面设置装置的结构示意图；
45.图4为本技术实施例提供的另一种配置式操作界面设置装置的结构示意图。
具体实施方式
46.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下，所获得的所有其他实施例，都属于本技术保护范围。
47.本技术的核心是提供一种配置式操作界面设置方法、装置及介质。
48.为了使本技术领域的人员更好地理解本技术方案，下面结合附图和具体实施方式对本技术作进一步的详细说明。
49.目前，各类saas管理软件针对商户所能提供的各种营销活动能力，一般都是采用已固定被开发出来的模板，如开卡有礼、节日有礼、消费有礼、储值有利等活动，并在此基础上让商户进行活动条件的设置。不同的营销活动虽然拥有不同的组件供商户配置活动内容，但这些组件可以被分为三大类：基础信息类组件、活动规则类组件和营销动作类组件。在实际的营销活动中，需要根据不同的营销活动需求，去开发不同的活动页面，代码中组合或开发新的组件，整个项目周期经过运营调研、需求评审、软件开发、多环境测试、上线后才能让商户去配置固定的活动类型。但是，上述方式由于采用固定类别活动的组件模板，无法更改，只能改变组件内容的设定值等信息，无法做到营销活动的自由和实时化定制。因此，本技术实施例提供了一种配置式操作界面设置方法。图1为本技术实施例提供的一种配置式操作界面设置方法的流程图。如图1所示，方法包括：
50.s10：获取接口数据；其中，接口数据至少包含各组件的组件内部原子结构和组件内部设定值。
51.s11：提取接口数据至全局状态。
52.s12：通过递归遍历对接口数据进行处理。
53.s13：将处理后的数据通过props传入各组件，以用于各组件触发数据更新。
54.s14：将处理后的数据反转为接口数据并发送至后端，以用于生成活动模板。
55.可以理解的是，不同的营销活动虽然拥有不同的组件供商户配置活动内容，但这些组件可以被分为三大类：基础信息类组件，指的是活动名称、活动归属等活动基础信息；活动规则类组件，指的是构成活动所需的规则如订单范围、参与金额、开卡渠道等；营销动作类组件，指的是商户可以对营销活动生命周期进行副作用操作，如赠送奖励、执行时间和发奖方式等。例如，一个“节日有礼”的营销活动通常会包含有：基础信息组件如活动名称、活动时间、活动归属等；活动规则组件如节日类型；营销动作组件如赠送奖励、发奖方式等。同理的，“消费有礼”的营销活动则包含：基础信息组件如活动名称、活动时间、参与用户等；活动规则组件如单次消费、订单范围等；营销动作组件有执行时间、发奖方式等。因此对于
不同的营销活动，商户所需要的组件是不同的。为了实现对于不同活动的组件配置，在本实施例中，首先获取接口数据。本实施例中的接口数据是一种对象数组形式的接口数据结构，至少能够一次性描述各组件的组件内部原子结构和组件内部设定值。组件的内部原子结构即组件结构的展示逻辑，组件内部设定值即组件的具体的填充数值。同时，接口数据还可以一次性描述用户所配置组件模板中的如：活动类型、模板框架、各组件位置等信息。
56.需要注意的是，本实施例中模板框架主要分为两个模块：基本信息模块和规则组模块，模块的储存数据元素的数据域里有id、name、key、value和elementlist。elementlist即为储存节点地址的指针域，其对应的是一个数组。数组里的每一个对象又会包含数据域id、name、key、value和elementlist，以链表的方式链接下去，直至elementlist指向为null。接口数据不仅要表示组件内部设定值，还得表示组件的组件内部原子结构是否存在。例如完整的活动时间组件包含固定时间、截止时间、永久有效三个一级选项，其中固定时间选项下还有开始、结束时间输入；截止时间选项下还有截止时间输入。当接口数据描述是组件内部设定值时，内容即为对应value值；当接口数据描述的是组件内部原子结构时，则所有的value类型为布尔数据类型(boolean)，没有的组件内部原子结构则表现为父级elementlist指针指向null。
57.当接收到接口数据后，执行前端javascript逻辑，将接口数据中的信息从数据第一层提取出来后，放至全局状态，从而能对数据进行处理。同时进行渲染页面框架，执行主逻辑，生成一些公用弹窗等能力。随后将组件所需的接口数据通过递归遍历进行处理，对于处理的具体方式不做限制，根据具体的实施情况而定。需要注意的是，处理后的数据需要进行一些涉及组件联动，互斥等的逻辑判断，以确认是否需要增删改查操作。
58.进一步地，将处理后的数据通过props传入各组件，以用于各组件触发数据更新。可以理解的是，props主要用于组件的传值；当各组件接收到数据之后，随即触发数据更新，包括根据属性值确定是否显示组件，填充组件的组件内部设定值并执行业务逻辑等相关操作。而当组件数据更新完毕之后，将处理后的数据反转为接口数据并发送至后端，数据库就生成了用户自定义的活动模板，可自由复用，便捷高效。
59.本实施例中，通过获取接口数据，其中接口数据至少包含各组件的组件内部原子结构和组件内部设定值；提取接口数据至全局状态；通过递归遍历对接口数据进行处理；将处理后的数据通过props传入各组件，以用于各组件触发数据更新；将处理后的数据反转为接口数据并发送至后端，以用于生成活动模板。由此可知，上述方案通过包含各组件的组件内部原子结构和组件内部设定值的接口数据进行组件配置，实现了组件配置的自定义；同时将配置的实例保存为模板，成功后可自由复用，便捷高效，实现了营销活动的自由和实时化定制。
60.在上述实施例的基础上：
61.作为一种优选的实施例，通过递归遍历对接口数据进行处理包括：
62.将接口数据中各组件所需数据通过递归遍历处理为一层对象，以用于将一层对象作为处理后的数据通过props传入各组件。
63.在上述实施例中，对于对接口数据进行处理的具体方式不做限制，根据具体的实施情况而定。作为一种优选的实施例，本实施例中将接口数据中各组件所需数据通过递归遍历处理为一层对象，以用于将一层对象作为处理后的数据通过props传入各组件。可以理
解的是，接口数据是一种对象数组形式的接口数据结构，将数据处理为一层对象数据，便于后续处理。
64.图2为本技术实施例提供的另一种配置式操作界面设置方法的流程图。
65.如图2所示，在提取接口数据至全局状态之前，还包括：
66.s15：根据接口数据建立全局映射表，以用于获取各组件与接口数据的映射关系。
67.在具体实施中，当接口数据缓存到前端内存时，因为组件内部原子结构的对应值的唯一性，可以将接口数据中每个组件对应的数据，与组件建立起映射关系，从而能够将接口数据通过递归遍历进行处理，再通过映射关系找到对应组件后，数据通过组件props拿到。本实施例中对于全局映射表的建立方式不做限制，根据具体的实施情况而定。
68.本实施例中，根据接口数据建立全局映射表，以用于获取各组件与接口数据的映射关系，以便于后续找到对应组件。
69.在上述实施例的基础上：
70.作为一种优选的实施例，根据接口数据建立全局映射表包括：
71.通过javascript map结构将接口数据与各组件建立全局映射表。
72.在上述实施例中对于全局映射表的建立方式不做限制，根据具体的实施情况而定。作为一种优选的实施例，本实施例中，通过javascript map结构将接口数据与各组件建立全局映射表，map是javascript map里面的一种数据结构map，一般用来表示映射。通过javascript map结构能得到全局映射表为component element map和verify map，使得接口数据与组件建立起映射关系。
73.如图2所示，在将处理后的数据反转为接口数据并发送至后端之前，还包括：
74.s16：校验各组件对应的处理后的数据；
75.s17：判断各处理后的数据是否通过校验；若是，进入到步骤s14；若否，进入步骤s18。
76.s18：触发错误信息提示。
77.在具体实施中，在将处理后的数据反转为接口数据并发送至后端之前，用户提交组件配置。此时还需执行挂载在组件上的校验方法，从而对组件数据进行校验。本实施例中对于校验方法不做限制，根据具体的实施情况而定。经过方法校验后的错误数据，会触发全局错误信息提示和跳转的公用能力，引导用户更新数据；而经过方法校验后通过校验的数据则进入到步骤s14，即将处理后的数据反转为接口数据并发送至后端，以用于生成活动模板。
78.本实施例中，校验各组件对应的处理后的数据，当判断各处理后的数据通过校验，将处理后的数据反转为接口数据并发送至后端从而生成活动模板，实现了组件数据信息是否正确的校验，确保了活动模板的生成成功。
79.在上述实施例的基础上：
80.作为一种优选的实施例，各组件触发数据更新包括：
81.判断是否需要形成多组件逻辑闭环；
82.若是，将各组件对应的处理后的数据还原为接口数据，返回至提取接口数据至全局状态的步骤；
83.若否，内部校验更新后的数据。
84.在具体实施中，各组件触发数据更新的过程中，还需要判断是否需要形成多组件逻辑闭环。可以理解的是，单独的组件内部数据逻辑由自身状态控制，形成闭环，但也可通过回调函数触发全局副作用和还原数据结构，控制建立两个或多个组件之间的逻辑闭环。虽然组件相关的组件内部原子结构和组件内部设定值通过props传入后，就由使用状态(usestate)去维护，但如需要建立起两个或者多个组件之间的数据逻辑时，也可通过回调函数实现。例如基础信息组里的活动时间组件里，设置了固定时间下的活动开始到结束的时间段后，每个规则组里的每个档位的累计消费组件与指定时间选择中的时间就会受到活动时间的限制。这种跨模块、规则组和档位的组件数据联动是通过回调函数将多个组件内部数据，结合模块、位置等信息后重新还原到接口数据结构，之后再次遍历并通过props将更新后的数据给到组件内部，重新执行对应业务逻辑。
85.因此当判断需要形成多组件逻辑闭环时，将各组件对应的处理后的数据还原为接口数据，返回至提取接口数据至全局状态的步骤，从而使被重新还原的接口数据结构流向两个方向，一个是全局状态，触发全局的一些接口请求或者重新渲染等副作用；另一个是被再次递归遍历处理重新通过props传入组件。如果判断不需要形成多组件逻辑闭环，则直接内部校验更新后的数据。
86.本实施例中，通过判断是否需要形成多组件逻辑闭环，实现了组件内部数据逻辑的控制。
87.在上述实施例的基础上：
88.作为一种优选的实施例，将处理后的数据反转为接口数据包括：
89.通过全局映射表将处理后的数据反转为接口数据。
90.可以理解的是，在上述实施例中可知，由于全局映射表将接口数据中每个组件对应的数据与组件建立起映射关系，因此处理后的数据反转为接口数据可以通过全局映射表实现，通过全局映射表将处理后的数据反转为接口数据，以便于将反转的接口数据发送给后端。
91.在上述实施例中，对于配置式操作界面设置方法进行了详细描述，本技术还提供配置式操作界面设置装置对应的实施例。需要说明的是，本技术从两个角度对装置部分的实施例进行描述，一种是基于功能模块的角度，另一种是基于硬件结构的角度。
92.图3为本技术实施例提供的一种配置式操作界面设置装置的结构示意图。如图3所示，配置式操作界面设置装置包括：
93.获取模块10，用于获取接口数据；其中，接口数据至少包含各组件的组件内部原子结构和组件内部设定值。
94.提取模块11，用于提取接口数据至全局状态。
95.数据处理模块12，用于通过递归遍历对接口数据进行处理。
96.传输模块13，用于将处理后的数据通过props传入各组件，以用于各组件触发数据更新。
97.发送模块14，用于将处理后的数据反转为接口数据并发送至后端，以用于生成活动模板。
98.由于装置部分的实施例与方法部分的实施例相互对应，因此装置部分的实施例请参见方法部分的实施例的描述，这里暂不赘述。
99.图4为本技术实施例提供的另一种配置式操作界面设置装置的结构示意图。如图4所示，配置式操作界面设置装置包括：
100.存储器20，用于存储计算机程序。
101.处理器21，用于执行计算机程序时实现如上述实施例中所提到的配置式操作界面设置的方法的步骤。
102.本实施例提供的配置式操作界面设置装置可以包括但不限于智能手机、平板电脑、笔记本电脑或台式电脑等。
103.其中，处理器21可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器21可以采用数字信号处理器(digital signal processor，dsp)、现场可编程门阵列(field-programmable gate array，fpga)、可编程逻辑阵列(programmable logic array，pla)中的至少一种硬件形式来实现。处理器21也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称中央处理器(central processing unit，cpu)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器21可以在集成有图形处理器(graphics processing unit，gpu)，gpu用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器21还可以包括人工智能(artificial intelligence，ai)处理器，该ai处理器用于处理有关机器学习的计算操作。
104.存储器20可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器20还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。本实施例中，存储器20至少用于存储以下计算机程序201，其中，该计算机程序被处理器21加载并执行之后，能够实现前述任一实施例公开的配置式操作界面设置方法的相关步骤。另外，存储器20所存储的资源还可以包括操作系统202和数据203等，存储方式可以是短暂存储或者永久存储。其中，操作系统202可以包括windows、unix、linux等。数据203可以包括但不限于配置式操作界面设置方法涉及到的数据。
105.在一些实施例中，配置式操作界面设置装置还可包括有显示屏22、输入输出接口23、通信接口24、电源25以及通信总线26。
106.本领域技术人员可以理解，图4中示出的结构并不构成对配置式操作界面设置装置的限定，可以包括比图示更多或更少的组件。
107.最后，本技术还提供一种计算机可读存储介质对应的实施例。计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现如上述方法实施例中记载的步骤。
108.可以理解的是，如果上述实施例中的方法以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，执行本技术各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(read-only memory，rom)、随机存取存储器(random access memory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。
109.以上对本技术所提供的一种配置式操作界面设置方法、装置及介质进行了详细介
绍。说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。应当指出，对于本技术领域的普通技术人员来说，在不脱离本技术原理的前提下，还可以对本技术进行若干改进和修饰，这些改进和修饰也落入本技术权利要求的保护范围内。
110.还需要说明的是，在本说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。