CN112434012A - 基于React的前端多级条件筛选方法、系统、设备及存储介质 - Google Patents

Abstract

本申请公开了一种基于React的前端多级条件筛选方法、系统、设备及存储介质，所述方法包括：预设过滤条件；根据所述过滤条件生成组合条件；根据所述组合条件生成过滤数据库，在所述过滤数据库中筛选出符合所述组合条件的数据。通过本申请，在React开发的前端项目中支持联动筛选，可完成复杂条件的人群构建筛选。

Description

基于React的前端多级条件筛选方法、系统、设备及存储介质

技术领域

本发明涉及电子信息技术领域。更具体的说，本发明涉及一种基于React的前端多级条件筛选方法、系统、设备及存储介质。

背景技术

目前，在前后端分离的新前端项目中，比如人群构建时，需要一个相对复杂的多级条件筛选器，并动态生成数据库(sql)来进行人群的筛选。目前已知的新前端技术中没有相应的组件，jQuery中的过滤插件(JQuery Builder)也不支持多级联动，无法满足多级标签联动的需求，且性能和风格都无法与React完美匹配。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

数据库(sql)是“按照数据结构来组织、存储和管理数据的仓库”。是一个长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。数据库是存放数据的仓库。它的存储空间很大，可以存放百万条、千万条、上亿条数据。但是数据库并不是随意地将数据进行存放，是有一定的规则的，否则查询的效率会很低。当今世界是一个充满着数据的互联网世界，充斥着大量的数据。即这个互联网世界就是数据世界。数据的来源有很多，比如出行记录、消费记录、浏览的网页、发送的消息等等。除了文本类型的数据，图像、音乐、声音都是数据。

发明内容

本申请实施例提供了一种基于React的前端多级条件筛选方法，以至少解决相关技术中主观因素影响的问题。

本发明提供了一种基于基于React的前端多级条件筛选方法，所述方法包括以下步骤：

预设步骤：预设过滤条件；

组合步骤：根据所述过滤条件生成组合条件；

筛选步骤：根据所述组合条件生成过滤数据库，在所述过滤数据库中筛选出符合所述组合条件的数据。

作为本发明的进一步改进，所述组合步骤具体包括以下步骤：

条件组步骤：对所述过滤条件进行组合，生成过滤条件组；

组合条件步骤：对所述过滤条件组进行组合，生成所述组合条件。

作为本发明的进一步改进，所述组合步骤中，同时支持和、或两种组合方式。

作为本发明的进一步改进，可动态展示当前设置的所述条件组的量级。

基于相同发明思想，本发明还基于任一项发明创造所揭示的基于React的前端多级条件筛选方法，揭示了一种基于React的前端多级条件筛选系统，

所述基于React的前端多级条件筛选系统包括：

预设模块，预设过滤条件；

组合模块，根据所述过滤条件生成组合条件；

筛选模块，根据所述组合条件生成过滤数据库，在所述过滤数据库中筛选出符合所述组合条件的数据。

作为本发明的进一步改进，所述组合模块包括：

条件组单元，对所述过滤条件进行组合，生成过滤条件组；

组合条件单元，对所述过滤条件组进行组合，生成所述组合条件。

作为本发明的进一步改进，所述组合模块中，同时支持和、或两种组合方式。

作为本发明的进一步改进，还包括展示单元，可动态展示当前设置的所述条件组的量级。

此外，为实现上述目的，本发明还提供一种设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现所述的基于React的前端多级条件筛选方法。

此外，为实现上述目的，本发明还提供一种存储介质，其上存储有计算机程序，该程序被处理器执行时实现所述的基于React的前端多级条件筛选方法。

与现有技术相比，本发明的有益效果如下：

1、提出了一种基于React的前端多级条件筛选方法，通过对过滤条件进行组合，筛选出符合要求的数据；

2、满足用户多级标签联动的需求，且组内过滤条件同时支持两种组合方式，构建组合条件时更加准确，尤其是支持可五级联动的复杂标签筛选器；

3、性能和风格与React完美匹配，在React开发的前端项目中，可直接引入该插件，使用简洁方便。

本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是本发明实施例提供的一种基于React的前端多级条件筛选方法整体流程图；

图2是图1所揭示的步骤S2整体流程图；

图3是本发明实施例提供的过滤条件组合整体显示效果图；

图4是本发明实施例提供的组合条件操作结果图；

图5是本实施例提供的一种基于React的前端多级条件筛选系统结构框架图；

图6是根据本发明实施例的计算机设备的框架图。

以上图中：

100、预设模块；200、组合模块；300、筛选模块；400、展示模块；201、条件组单元；202、组合条件单元；80、总线；81、处理器；82、存储器；83、通信接口。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行描述和说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。基于本申请提供的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

显而易见地，下面描述中的附图仅仅是本申请的一些示例或实施例，对于本领域的普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图将本申请应用于其他类似情景。此外，还可以理解的是，虽然这种开发过程中所作出的努力可能是复杂并且冗长的，然而对于与本申请公开的内容相关的本领域的普通技术人员而言，在本申请揭露的技术内容的基础上进行的一些设计，制造或者生产等变更只是常规的技术手段，不应当理解为本申请公开的内容不充分。

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

除非另作定义，本申请所涉及的技术术语或者科学术语应当为本申请所属技术领域内具有一般技能的人士所理解的通常意义。本申请所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制，可表示单数或复数。本申请所涉及的术语“包括”、“包含”、“具有”以及它们任何变形，意图在于覆盖不排他的包含；例如包含了一系列步骤或模块(单元)的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可以还包括没有列出的步骤或单元，或可以还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本申请所涉及的“连接”、“相连”、“耦接”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电气的连接，不管是直接的还是间接的。本申请所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。本申请所涉及的术语“第一”、“第二”、“第三”等仅仅是区别类似的对象，不待表针对对象的特定排序。

下面结合附图所示的各实施方式对本发明进行详细说明，但应当说明的是，这些实施方式并非对本发明的限制，本领域普通技术人员根据这些实施方式所作的功能、方法、或者结构上的等效变换或替待，均属于本发明的保护范围之内。

在详细阐述本发明各个实施例之前，对本发明的核心发明思想予以概述，并通过下述若干实施例予以详细阐述。

本发明可基于React生成前端多级筛选条件，通过筛选条件组合筛选出符合要求的数据。

实施例一：

参照图1至图4所示，本实例揭示了一种基于React的前端多级条件筛选方法(以下简称“方法”)的具体实施方式。

具体而言参照图1，本实施例所揭示的方法主要包括以下步骤：

步骤S1、预设过滤条件。

然后执行步骤S2、根据所述过滤条件生成组合条件。

具体而言，在其中一些实施例中，参照图2所示步骤S2具体包括以下步骤：

S21、对所述过滤条件进行组合，生成过滤条件组；

S22、对所述过滤条件组进行组合，生成所述组合条件。

具体而言，所述步骤S2中同时支持和、或两种组合方式，根据过滤条件不同关系组合，选择创建不同的条件组和组内关系，并且可动态展示当前设置的所述条件组的量级，即随着不同层级标签的选择，动态展示当前所选层级标签的量级。和是指两个及两个以上同属性的事物相加所获得的新事物，也可以狭义地理解为两个条件相加所得的结果；或表示两个条件中的任一个条件成立即可,如图3所示为过滤条件组合整体显示效果图。

具体而言，在其中一些实施例中，例如：要筛选新妈妈人群，基本特征如下：性别等于“女”，且年龄在“20-24”或“25-29”，且人生阶段包含“亲子育儿”或“新妈”或兴趣爱好中包括“母婴”。经过分析，该过滤条件需要分为两个过滤条件组，组合条件操作结果图如图4所示：第一条件组包含两个条件：1.性别等于“女”；2.年龄在“20-24”或“25-29”，内条件为“且”；第二条件组也包含两个条件：1、人生阶段包含“亲子育儿”或“新妈”；2、兴趣爱好中包括“母婴”且组内条件为“或”。第一条件组和第二条件组的组间关系为“且”。

然后执行步骤S3、根据所述组合条件生成过滤数据库，在所述过滤数据库中筛选出符合所述组合条件的数据。

具体而言，在其中一些实施例中，最后生成对应的过滤数据库(sql)，在库中筛选对应条件的数据。数据库是“按照数据结构来组织、存储和管理数据的仓库”。是一个长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。数据库是存放数据的仓库。它的存储空间很大，可以存放百万条、千万条、上亿条数据。但是数据库并不是随意地将数据进行存放，是有一定的规则的，否则查询的效率会很低。当今世界是一个充满着数据的互联网世界，充斥着大量的数据。即这个互联网世界就是数据世界。数据的来源有很多，比如出行记录、消费记录、浏览的网页、发送的消息等等。除了文本类型的数据，图像、音乐、声音都是数据。

具体而言，在其中一些实施例中，数据库的管理需要数据库管理系统。数据库管理系统是为管理数据库而设计的电脑软件系统，一般具有存储、截取、安全保障、备份等基础功能。数据库管理系统可以依据它所支持的数据库模型来作分类，例如关系式、XML；或依据所支持的计算机类型来作分类，例如服务器群集、移动电话；或依据所用查询语言来作分类，例如SQL、XQuery；或依据性能冲量重点来作分类，例如最大规模、最高运行速度；亦或其他的分类方式。不论使用哪种分类方式，一些DBMS能够跨类别，例如，同时支持多种查询语言。

通过本申请实施例所揭示的一种基于React的前端多级条件筛选方法，能够对过滤条件进行组合，筛选出符合要求的数据，满足用户多级标签联动的需求，且组内过滤条件同时支持两种组合方式，构建组合条件时更加准确，性能和风格与React完美匹配，在React开发的前端项目中，可直接引入该插件，使用简洁方便。

本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。

实施例二：

结合实施例一所揭示的一种基于React的前端多级条件筛选方法，本实施例揭示了一种基于React的前端多级条件筛选系统(以下简称“系统”)的具体实施示例。

参照图5所示，所述系统包括：

预设模块100，预设过滤条件；

组合模块200，根据所述过滤条件生成组合条件；

筛选模块300，根据所述组合条件生成过滤数据库，在所述过滤数据库中筛选出符合所述组合条件的数据。

具体而言，在其中一些实施例中，所述组合模块200包括：

条件组单元201，对所述过滤条件进行组合，生成过滤条件组；

组合条件单元202，对所述过滤条件组进行组合，生成所述组合条件。

具体而言，在其中一些实施例中，所述组合模块200中，同时支持和、或两种组合方式。

具体而言，在其中一些实施例中，还包括展示单元400，可动态展示当前设置的所述条件组的量级。

具体而言，在其中一些实施例中，所述系统基于React的Antd组件库，与React项目完美匹配。React起源于Facebook的内部项目，用来架设Instagram的网站。React主要用于构建UI，可以在React里传递多种类型的参数，如声明代码，帮助渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。React具有以下特点：1、声明式设计：React采用声明范式，可以轻松描述应用；2、高效：React通过对DOM的模拟，最大限度地减少与DOM的交互；3、灵活：React可以与已知的库或框架很好地配合。

具体而言，其中Antd为蚂蚁金服出品的一款前端UI库，涉及面包屑、表格、表单等众多UI组件，可覆盖前端常用的技术栈。自React、vue等数据驱动的框架流行以来，诞生了许多相关组件库，组件内部不得不要维护一套逻辑非常复杂的状态，因而导致组件库提供的组件大部分都是有状态组件，从而让代码的易读性、可维护性降低，也增加了个性定制化组件的难度。而Antd底层提供了一系列更加原子化的组件，可供用户能够自己定制化组件。

本实施例所揭示的一种基于React的前端多级条件筛选系统与实施例一所揭示的一种基于React的前端多级条件筛选方法中其余相同部分的技术方案，请参考实施例一所述，在此不再赘述。

实施例三:

结合图6所示，本实施例揭示了一种计算机设备的一种具体实施方式。计算机设备可以包括处理器81以及存储有计算机程序指令的存储器82。

具体地，上述处理器81可以包括中央处理器(CPU)，或者特定集成电路(Application Specific Integrated Circuit，简称为ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。

其中，存储器82可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器82可包括硬盘驱动器(Hard Disk Drive，简称为HDD)、软盘驱动器、固态驱动器(SolidState Drive，简称为SSD)、闪存、光盘、磁光盘、磁带或通用串行总线(Universal SerialBus，简称为USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器82可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器82可在数据处理装置的内部或外部。在特定实施例中，存储器82是非易失性(Non-Volatile)存储器。在特定实施例中，存储器82包括只读存储器(Read-Only Memory，简称为ROM)和随机存取存储器(RandomAccess Memory，简称为RAM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(Programmable Read-Only Memory，简称为PROM)、可擦除PROM(Erasable ProgrammableRead-Only Memory，简称为EPROM)、电可擦除PROM(Electrically Erasable ProgrammableRead-Only Memory，简称为EEPROM)、电可改写ROM(Electrically Alterable Read-OnlyMemory，简称为EAROM)或闪存(FLASH)或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器(Static Random-Access Memory，简称为SRAM)或动态随机存取存储器(Dynamic Random Access Memory，简称为DRAM)，其中，DRAM可以是快速页模式动态随机存取存储器(Fast Page Mode Dynamic Random Access Memory，简称为FPMDRAM)、扩展数据输出动态随机存取存储器(Extended Date Out Dynamic RandomAccess Memory，简称为EDODRAM)、同步动态随机存取内存(Synchronous Dynamic Random-Access Memory，简称SDRAM)等。

存储器82可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器81所执行的可能的计算机程序指令。

处理器81通过读取并执行存储器82中存储的计算机程序指令，以实现上述实施例中的任意一种基于React的前端多级条件筛选方法。

在其中一些实施例中，计算机设备还可包括通信接口83和总线80。其中，如图6所示，处理器81、存储器82、通信接口83通过总线80连接并完成相互间的通信。

通信接口83用于实现本申请实施例中各模块、装置、单元和/或设备之间的通信。通信端口83还可以实现与其他部件例如：外接设备、图像/数据采集设备、数据库、外部存储以及图像/数据处理工作站等之间进行数据通信。

总线80包括硬件、软件或两者，将计算机设备的部件彼此耦接在一起。总线80包括但不限于以下至少之一：数据总线(Data Bus)、地址总线(Address Bus)、控制总线(Control Bus)、扩展总线(Expansion Bus)、局部总线(Local Bus)。举例来说而非限制，总线80可包括图形加速接口(Accelerated Graphics Port，简称为AGP)或其他图形总线、增强工业标准架构(Extended Industry Standard Architecture，简称为EISA)总线、前端总线(Front Side Bus，简称为FSB)、超传输(Hyper Transport，简称为HT)互连、工业标准架构(Industry Standard Architecture，简称为ISA)总线、无线带宽(InfiniBand)互连、低引脚数(Low Pin Count，简称为LPC)总线、存储器总线、微信道架构(Micro ChannelArchitecture，简称为MCA)总线、外围组件互连(Peripheral Component Interconnect，简称为PCI)总线、PCI-Express(PCI-X)总线、串行高级技术附件(Serial AdvancedTechnology Attachment，简称为SATA)总线、视频电子标准协会局部(Video ElectronicsStandards Association Local Bus，简称为VLB)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线80可包括一个或多个总线。尽管本申请实施例描述和示出了特定的总线，但本申请考虑任何合适的总线或互连。

该计算机设备可以基于React实现前端多级条件筛选，从而实现结合图1描述的方法。

另外，结合上述实施例中基于React的前端多级条件筛选，本申请实施例可提供一种计算机可读存储介质来实现。该计算机可读存储介质上存储有计算机程序指令；该计算机程序指令被处理器执行时实现上述实施例中的任意一种基于React的前端多级条件筛选方法。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

综上所述，基于本发明的有益效果在于，提出了一种基于React的前端多级条件筛选方法，能够对过滤条件进行组合，筛选出符合要求的数据，满足用户多级标签联动的需求，且组内过滤条件同时支持两种组合方式，构建组合条件时更加准确，性能和风格与React完美匹配，在React开发的前端项目中，可直接引入该插件，使用简洁方便。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种基于React的前端多级条件筛选方法，其特征在于，包括如下步骤：

预设步骤：预设过滤条件；

组合步骤：根据所述过滤条件生成组合条件；

筛选步骤：根据所述组合条件生成过滤数据库，在所述过滤数据库中筛选出符合所述组合条件的数据。

2.如权利要求1所述的基于React的前端多级条件筛选方法，其特征在于，所述组合步骤具体包括以下步骤：

条件组步骤：对所述过滤条件进行组合，生成过滤条件组；

组合条件步骤：对所述过滤条件组进行组合，生成所述组合条件。

3.如权利要求1所述的基于React的前端多级条件筛选方法，其特征在于，所述组合步骤中，同时支持和、或两种组合方式。

4.如权利要求1所述的基于React的前端多级条件筛选方法，其特征在于，可动态展示当前设置的所述条件组的量级。

5.一种基于React的前端多级条件筛选系统，其特征在于，包括：

预设模块，预设过滤条件；

组合模块，根据所述过滤条件生成组合条件；

筛选模块，根据所述组合条件生成过滤数据库，在所述过滤数据库中筛选出符合所述组合条件的数据。

6.如权利要求5所述的基于React的前端多级条件筛选系统，其特征在于，所述组合模块包括：

条件组单元，对所述过滤条件进行组合，生成过滤条件组；

组合条件单元，对所述过滤条件组进行组合，生成所述组合条件。

7.如权利要求5所述的基于React的前端多级条件筛选系统，其特征在于，所述组合模块中，同时支持和、或两种组合方式。

8.如权利要求5所述的基于React的前端多级条件筛选系统，其特征在于，还包括展示单元，可动态展示当前设置的所述条件组的量级。

9.一种设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至4中任一项所述的基于React的前端多级条件筛选方法。

10.一种存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1至4中任一项所述的基于React的前端多级条件筛选方法。

Images