当前位置 : 主页 > 编程语言 > 其它开发 >

Eolink 全局搜索介绍【翻译】

来源:互联网 收集:自由互联 发布时间:2022-05-30
随着前后端分离成为互联网项目开发的标准模式, API 成为了前后端联通的桥梁。而面对越来越频繁和复杂的调用需求,项目里的 API 数量也越来越多,我们需要通过搜索功能来快速定位

随着前后端分离成为互联网项目开发的标准模式, API 成为了前后端联通的桥梁。而面对越来越频繁和复杂的调用需求,项目里的 API 数量也越来越多,我们需要通过搜索功能来快速定位到对应的 API来进行使用。

下面我们会通过这篇文章向大家介绍 Eolink 的全局搜索功能。

| Eolink 全局搜索功能介绍

Eolink 的全局搜索功能支持 API 管理 及 API 自动化测试 两个模块的使用,如图1。


图1

它可以同时完成两种环境的搜索,分别是:
项目内搜索。
全局搜索。

接下来,我们看看在 API 管理 和** API 自动化测试** 的页面中,全局搜索功能会有什么区别。

API 管理与测试

在项目内搜索(图2)和全局搜索(图3)环境下,展示的搜索类型是不一样的,在全局搜索的时候会多一个搜索项目的类型,对比如下图。


图2


图3

API 自动化测试

在 API 自动化测试页面当中,项目内搜索(图4)和全局搜索(图5)环境所展示的搜索类型和在 API 管理与测试页面也是不一样的,对比如下图。


图4

图5

| 全局搜索功能的亮点 - 键盘控制

Eolink 的全局搜索支持键盘控制,使用者可完全脱离鼠标进行使用,体验非常方便。

*** Ctrl + F 键使搜索框聚焦**
*** Tab 键切换搜索环境**
*** 上下键控制选中项**
*** Enter 键确定**
*** Backspace 键可重新输入关键字**

| 全局搜索功能的实现

不同模块全局搜索框有不同的展示和搜索对象,这些都是通过路由和正则表达式一起去进行判断和控制的。

搜索状态不同时,搜索框下方的搜索展示框所展示的内容也是不同的,在搜索框聚焦的时候才会出现搜索展示框。使用 ngSwitch 去控制展示框展示的内容。

*** 搜索框聚焦且没有输入搜索内容时显示搜索历史框

  • 进行一次搜索之后,就会把本次的一个搜索数据存到本地的 localStorage 中,搜索历史记录就从 localStorage 中获取。
  • 搜索框聚焦且输入搜索内容时显示搜素类型框(点击某个搜索类型后,改变搜索关键字,展示框里面的内容会从搜索数据变成搜索类型)
  • 搜索框聚焦且点击搜索类型之后显示搜索数据框**

对接 UI 函数统一采用:
fn_watch_ui(inAction:string,inParams:any) 去进行暴露。fn_watch_ui 函数相当于页面访问 js 函数的一个入口。当页面想访问 js 中的某个函数,只有通过这个入口,触发一个动作才会访问到指定的函数。

html 部分示例:

js 示例:


以上就是对 Eolink 全局搜索的介绍以及功能实现的简要描述。它的出现提高了用户的工作效率,让用户快速定位到目标内容。

图中所使用的的接口管理工具是eolink,感兴趣可以自行使用:www.eolink.com

上一篇:同态加密在联邦计算中的应用
下一篇:没有了
网友评论