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

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维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.pushQuery
  args:
    - q: <% EVENT.detail.query %>
      page: 1

1.2 context数据源

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

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

agrs:

- APP
- fields:
    '*': 1
    businesses.business_line.name: 1
    businesses.business_line.product_line_user.departmentName: 1
    businesses.business_line.product_line_user.name: 1
    businesses.business_line.product_line_user.nickname: 1
    businesses.name: 1
    businesses.owner.departmentName: 1
    businesses.owner.name: 1
    businesses.owner.nickname: 1
    releaseAbbreviation: 1
  page: <% 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:不同的接口所需的查询条件不一致,具体入参要根据接口文档内容来确定,但是整体的搜索逻辑是一样的。

相关推荐
2401_8827275712 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
_xaboy2 天前
开源动态表单form-create-designer 扩展个性化配置的最佳实践教程
vue.js·低代码·开源·动态表单·表单·formcreate·低代码表单
_xaboy3 天前
在开源的form-create-designer 表单设计器中扩展自定义操作教程
vue.js·低代码·开源·formcreate·可视化表单设计器·fc-designer
by————组态3 天前
Web组态可视化编辑器 快速绘制组态
前端·网络·物联网·低代码·编辑器·组态
低代码布道师4 天前
微搭低代码入门05循环
低代码
小麦项目管理指南4 天前
如何通过低代码逻辑编排实现业务流程自动化?
运维·低代码·自动化·源代码管理
_xaboy4 天前
利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构
vue.js·低代码·开源·动态表单·formcreate·低代码表单·可视化表单设计器
Light604 天前
AI 驱动低代码平台:开创智能化用户体验新纪元
人工智能·低代码
jonyleek6 天前
商业智能BI如何零编码对接低代码数据模型?
数据库·低代码·信息可视化·数据分析·数据可视化·软件需求