当前位置: 首页 > news >正文

优维低代码实践:搜索功能

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。


优维低代码实践连载第27期

《搜索功能(后端搜索对接)》

在之前的示例中,我们有直接对接后端数据、通过事件进行接口的翻页数据请求等,但是在实际操作过程中,面对大量的数据,如果通过一页一页的翻阅查找,不方便且浪费时间,那么就会有搜索的功能要求,比如单字段的搜索,多字段的且、或搜索等。那接下来的示例将基于cmdb搜索实例(
providers-of-cmdb.instance-api-post-search)接口,给大家介绍如何进行后端搜索功能。

一、基于context数据源搜索

1.1 搜索框

添加搜索框构件后,修改搜索框的属性

placeholder: 请输入发布单元
shouldTrimQuery: true
shouldUpdateUrlParams: false
q: <% QUERY.q %>

修改输入框的事件内容。当输入框输入完搜索内容,被点击搜索时,将输入的内容以key:value的形式推送到url上,供后续页面刷新时,context的请求能够获取到搜索内容。

filter.update:action: history.pushQueryargs:- q: <% EVENT.detail.query %>page: 1

1.2 context数据源

更改context中的请求内容,通过query.q或其他推送到url上的参数,进行或、并的匹配操作,从而达到动态获取用户输入的信息,并在页面刷新时,自动将搜索内容作为入参,调用后端接口匹配符合的数据并返回给前端渲染。

provider: providers-of-cmdb.instance-api-post-search

agrs:

- APP
- fields:'*': 1businesses.business_line.name: 1businesses.business_line.product_line_user.departmentName: 1businesses.business_line.product_line_user.name: 1businesses.business_line.product_line_user.nickname: 1businesses.name: 1businesses.owner.departmentName: 1businesses.owner.name: 1businesses.owner.nickname: 1releaseAbbreviation: 1page: <% QUERY.page || 1 %>page_size: <% QUERY.pageSize || 8 %>query:$or:- releaseTimes:$like: '%${query.q}%'- releaseNum:$like: '%${query.q}%'- name:$like: '%${query.q}%'- releaseDate:$like: '%${query.q}%'businesses.business_line.instanceId:$eq: '${query.product_line}'businesses.instanceId:$eq: '${query.business}'releaseDate:$eq: '${query.releaseDate}'sort:ctime: 1

1.3 前端输入搜索内容验证搜索结果

同理,下拉框的选择搜索与搜索框的输入搜索一致,将下拉框所选中的内容推送到url上,再在context中配置动态数据的获取;确定好搜索的内容的同级关系(并、或关系),使用$or\$and等mongoDB的查询语法进行配置。

PS:不同的接口所需的查询条件不一致,具体入参要根据接口文档内容来确定,但是整体的搜索逻辑是一样的。

http://www.lryc.cn/news/247791.html

相关文章:

  • C# ReadOnlyRef Out
  • linux 服务 下 redis 安装和 启动
  • ECharts与Excel的结合实战
  • UDP的特点及应用场景
  • Python开发——工具篇 Pycharm的相关配置,Python相关操作 持续更新
  • 【深度学习】卷积神经网络结构组成与解释
  • 从源码解析Containerd容器启动流程
  • 引迈-JNPF低代码项目技术栈介绍
  • 如何处理枚举类型(下)
  • wsj0数据集原始文件.wv1.wv2转换成wav文件
  • Flask Session 登录认证模块
  • 【运维】hive 高可用详解: Hive MetaStore HA、hive server HA原理详解;hive高可用实现
  • C#开发的OpenRA游戏之属性SelectionDecorations(13)
  • 接手了一个外包开发的项目,我感觉我的头快要裂开了~
  • git常规使用方法,常规命令
  • 【JavaScript】3.3 JavaScript工具和库
  • 开发基于 ChatGPT 分析热点事件并生成文章的网站应用【热点问天】把百度等热点用chatGPT来对热点事件分析海量发文章 开发步骤 多种方式获取利润
  • 龙迅LT8668SXC适用于TPYE-C/DP/HDMI转EDP/VBO同时环出一路HDMI/DP,支持分辨率缩放功能。
  • 跳板机原理
  • 璞华大数据产品入选中国信通院“铸基计划”
  • 1146. 新的开始,prim算法,超级原点
  • HTTP常见响应码
  • 物联网边缘计算是什么?如何实现物联网边缘计算?
  • 带着GPT-4V(ision)上路,自动驾驶新探索
  • 19. Python 数据处理之 Pandas
  • 【计网 可靠数据传输RDT】 中科大笔记 (十 一)
  • ubuntu下训练自己的yolov5数据集
  • ROC及曲线面积汇总学习
  • LeetCode Hot100 35.搜索插入位置
  • Android frameworks 开发总结之八