如何使用查看器筛选、搜索功能进行数据定位？

言

我们曾探讨过观测云如何通过将内置视图与查看器相联结，实现更全面的数据关联分析。（参见《内置视图联动查看器，实现数据关联分析》）这里提到的查看器，实际是一个功能全面且强大的数据查看分析工具。其提供多种搜索和筛选方式，并支持以组合的方式搭配使用获取最终数据结果。

本文我们将从实际场景出发，为您讲述如何通过查看器的搜索与筛选功能，帮助您快速、精准地检索数据，定位故障问题。

观测云的查看器可以在基础设施、事件、日志、应用性能监测、用户访问监测、CI 可视化、可用性监测、安全巡检等功能模块内使用。此处，我们以【日志查看器】为场景：

搜索

当我们面对系统采集上来的杂乱的海量数据，在页面上方的搜索栏直接进行搜索是定位到目标数据最快捷迅速的方式之一。在观测云，【搜索】一般由术语（可以是单词或短语）和运算符两部分组成。当我们输入单词或者短语时，叠加通配运算符（? 表示匹配任意字符， * 匹配 0 或多个字符），回车即可实现搜索的动作。

具体的示例说明如下：

# 单词
guance  // 精准搜索
guanc[e   // 存在特殊字符写法示例（无需添加\转义）  

# 单词通配符搜索（出于性能考虑，观测云暂不支持前缀 * 写法，若存在通配搜索以下写法均支持）
guance*
gua?ce*  
gua*ce

# 短语（双引号括起来的内容我们统称为短语，此写法下双引号的内容会作为一个整体发起匹配搜索）
"guance test"  // 查询全文索引字段中，存在 "guance test" 内容的匹配结果
"guance 127.0.0.1" // 存在特殊字符时写法示例

实际效果如下：

除了我们以上谈到的搜索方式，观测云还支持您在日志查看器使用 JSON 搜索。这种搜索方式默认对日志查看器内 message 的内容进行精确检索，同时要求 message 是 JSON 格式，其他格式的日志内容不支持该检索方式。比如我们可以在搜索栏以 @key:value 的格式输入搜索内容。若为多层级 JSON 可用 “.” 承接，即 @key1.key2:value。

需要注意的是，这种搜索方式目前仅支持日志查看器，且仅支持中国区 1（杭州）、中国区 3（张家口）以及中国区 4（广州）这三个站点，并且工作空间需要在 2022年6月23日后创建。

具体的示例说明如下：

message 信息如下：
{
    __namespace:tracing,
    cluster_name_k8s:k8s-demo,
    meta:{    
        service:ruoyi-mysql-k8s,
        name:mysql.query,
        resource:select dict_code, dict_sort, dict_label, dict_value, dict_type, css_class, list_class, is_default, status, create_by, create_time, remark 
                from sys_dict_data
 }
}

# 查询 cluster_name_k8s=k8s-demo
@cluster_name_k8s:k8s-demo     // 精准匹配
@cluster_name_k8s:k?s*        // 模糊匹配

# 查询 meta 下 service=ruoyi-mysql-k8s
@meta.service:ruoyi-mysql-k8s   // 精准匹配
@meta.service:ruoyi?mysql*   // 模糊匹配

筛选

除了上文提到的搜索，在搜索栏输入筛选条件也是一个快捷的查询方式。我们可以针对标签/属性的格式进行筛选，按照字段运算符值顺序拼接可得。

字段

字段是筛选条件成立的前提。当我们根据实际需求添加字段时，您可以选择观测云默认会列出当前时间范围内的字段的列表，如未找到您可以自定义添加字段。

参见 https://docs.guance.com/management/field-management/

运算符

运算符用于连接字段与值的关系。我们可以针对【字符串】或者【数值】类型字段做筛选过滤。

字符串字段运算符：= ≠ wildcard not wildcard exist not exist；
数值字段运算符：= ≠ > >= < <= [xx TO xx] exist not exist。

不同运算符的说明如下：

运算符	描述
=	等于，示例：key:value ，=≠ 可以叠加下面其他运算符组合使用。
≠	不等于，示例：-key:value，=≠ 可以叠加下面其他运算符组合使用。
wildcard	模糊匹配，示例：key:value*，反向筛选则通过叠加 ≠ 实现。
exist	存在，筛选过滤所有存在当前 key 的数据结果返回，示例：key:*。反向筛选则通过叠加 ≠ 实现。
>	大于，示例：key:>value。反向筛选则通过叠加 ≠ 实现。
>=	大于等于，示例：key:>=value。反向筛选则通过叠加 ≠ 实现。
<	小于，示例：key:<value。反向筛选则通过叠加 ≠ 实现。
<=	小于等于，示例：key:<=value。反向筛选则通过叠加 ≠ 实现。
[xx - xx]	区间，示例：key:[1 - 100]。反向筛选则通过叠加 ≠ 实现。

值

值是筛选条件内期望达成的目标值。我们可以将其与【AND】或【OR】运算符组合查询。

具体的示例说明如下：

精确值
key:(value1 AND value2 OR value3)

# 包含模糊匹配    
key:(value1 OR test* OR value3)

# 包含 * 存在      
key:(value1 OR * OR value3)          // 等同于 key:* 
key:(value1 AND *)                  // 等同于 key:value1
key:(value1 AND * OR value3)        // 等同于 key:(value1 OR value3)

我们在此处用到的 AND/OR/NOT 这一形式在专业术语上称之为布尔运算符。我们可以将这类运算符与上文所提到的搜索与筛选条件进一步组合关联搜索与筛选。

不同运算符的说明如下：

逻辑关系	描述	备注
a AND b	取前后查询结果交集	搜索、筛选条件间默认使用 AND 做连接。其中 AND 可以用空格，即 a AND b=a b。
a OR b	取前后查询结果并集	返回结果需包含 a 或者 b 的任意一个关键字。示例：a OR b:value
NOT c	排除当前查询结果	NOT 多用于搜索写法，筛选处排除逻辑使用 ≠ 代替。

实际效果如下：

快捷筛选

除了在搜索栏输入筛选条件，我们还可以直接使用观测云 > 快捷筛选这一功能。在这里，我们可以基于一系列字段进行正选&反选、字段值搜索、添加显示列、查询值 TOP 5 等操作，从而定位至我们需要的目标数据。

有关更多相关操作说明，参见 https://docs.guance.com/getting-started/function-details/explorer-search/#quick-filter

结论

数据的杂乱和海量性是业务数据管理面临的巨大挑战。当面对我们的系统采集并保存的大量数据，若是能借助精准有效的搜索或筛选方式进行数据的过滤查询，将使我们的数据处理效率事半功倍。未来，观测云也会探索更多查看器相关的查询分析功能，敬请期待！

深入探索CSS动画的魅力-附带动画实例

**开篇：揭秘CSS动画世界**

CSS动画作为现代网页设计中不可或缺的一部分，赋予了网页前所未有的生动性和互动性。从微妙的过渡效果到炫酷的视觉特效，CSS动画以其高效、易用的特点吸引了无数前端开发者。在这篇深度解析文章中，我们将一起走进CSS动画的世界，从基础知识到高级技巧，通过一系列详尽的实例，揭示CSS动画背后的秘密及其在实际项目中的应用场景。

---

### **一、CSS动画基础概念与关键帧动画(Keyframes)**

**标题：** 掌握@keyframes规则，构建动画流程

CSS动画的核心在于`@keyframes`规则，它允许开发者定义动画序列中的不同关键帧状态。例如，创建一个元素从左到右移动的简单动画：

```html

<!DOCTYPE html>

<head>

<style>

@keyframes moveRight {

0% { left: 0; }

100% { left: calc(100% - 50px); }

}

.animatedElement {

position: relative;

width: 50px;

height: 50px;

background-color: red;

animation: moveRight 2s ease infinite;

}

</style>

</head>

<body>

</body>

</html>

```

在这个例子中，我们定义了一个名为`moveRight`的动画，使其在2秒内从屏幕左侧移动到右侧。通过`animation`属性将此动画应用于`.animatedElement`类。

---

### **二、CSS动画属性详解与应用**

**标题：** 理解动画属性，掌控动画生命周期

CSS动画由一系列可控制属性组成，包括但不限于：

- `animation-name`: 定义使用的@keyframes名称；

- `animation-duration`: 设置动画完成一个周期所需的时间；

- `animation-timing-function`: 控制动画速度曲线（如ease、linear、ease-in-out）；

- `animation-delay`: 动画开始前的延迟时间；

- `animation-iteration-count`: 动画重复次数（如无限循环使用`infinite`）；

- `animation-direction`: 控制动画是否反向播放；

- `animation-fill-mode`: 定义动画在执行前后元素的状态。

---

### **三、CSS动画进阶：叠加与合成模式**

**标题：** 探索层叠与合成，实现复杂动画效果

CSS动画可以叠加和组合，利用`animation-play-state`属性暂停或恢复动画，结合`animation-composite`属性来处理多个动画间的堆叠顺序与效果：

```html

<style>

.combinedAnimation {

/* 假设已有两个动画定义 */

animation: moveRight 2s ease, fadeInOut 1s linear;

animation-fill-mode: both;

}

/* 针对某个事件，例如悬停时暂停所有动画 */

.combinedAnimation:hover {

animation-play-state: paused;

}

</style>

```

---

### **四、CSS动画与JavaScript联动**

**标题：** 使用JavaScript操控CSS动画，增强交互性

尽管CSS动画本身具备丰富的特性，但结合JavaScript可以实现更灵活的动态控制。下面是一个简单的示例，通过JavaScript触发CSS动画：

```html

<div id="animateOnHover" class="hiddenContent">Hover me!</div>

<style>

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

.hiddenContent {

opacity: 0;

animation-duration: 1s;

animation-fill-mode: both;

}

.visibleContent {

animation-name: fadeIn;

}

</style>

const animateOnHover=document.getElementById('animateOnHover');

animateOnHover.addEventListener('mouseover', ()=> {

animateOnHover.classList.add('visibleContent');

});

animateOnHover.addEventListener('mouseout', ()=> {

animateOnHover.classList.remove('visibleContent');

});

</script>

```

---

**五、响应式与无障碍CSS动画**

**标题：** 考虑不同设备与用户需求，打造包容性动画

在设计CSS动画时，务必考虑响应式布局与无障碍访问。确保动画在不同尺寸的屏幕上适配良好，并针对视障用户提供替代内容或禁用动画。

---

**结语：**

深入挖掘CSS动画技术，不仅能创造出美轮美奂的用户体验，更能展现前端开发者细腻的艺术触觉与卓越的技术实力。实践这些动画实例，不断拓展想象空间，让网页设计充满生命力，从而引领用户在浏览过程中享受无与伦比的互动乐趣。随着浏览器技术的不断发展，CSS动画的未来充满了无限可能，让我们共同期待并创造更多的精彩瞬间。

手把手教你打造Vue3城市选择器：深度解析联动组件封装全过程

在Web开发中，城市选择器作为常见的交互组件，常用于用户填写地址信息、筛选地理位置等场景。本文将手把手带你利用Vue3框架，从零开始打造一个功能完备、性能优越的城市选择器，深入解析其联动组件封装的全过程。让我们一同领略Vue3的强大魅力，提升实战技能。

## 一、项目初始化与依赖安装

1. 创建Vue3项目

bash
vue create vue-city-selector

选择默认的Vue3配置或自定义配置。

2. 安装所需依赖

bash
npm install vue@next element-plus axios

## 二、基础架构设计

1. 目录结构规划

在`src/components`目录下创建以下文件夹和文件：

- `CitySelector`: 组件主目录

- `index.vue`: 主组件

- `CityList.vue`: 城市列表子组件

- `Province.vue`: 省份选择子组件

- `City.vue`: 城市选择子组件

- `District.vue`: 区县选择子组件

2. 数据结构设计

typescript
interface CityModel {
  provinceId: string;
  provinceName: string;
  cityId: string;
  cityName: string;
  districtId: string;
  districtName: string;
}

## 三、数据获取与处理

1. 获取城市数据

typescript
import axios from 'axios';

const CITY_API='https://your-api-url-to-get-cities';

export async function fetchCities() {
  const response=await axios.get(CITY_API);
  return response.data;
}

在`src/api`目录下创建`city.ts`文件，使用axios获取城市数据：

2. 数据预处理

typescript
import { CityModel } from '../types';

export function preprocessCityData(cityData: any[]): CityModel[] {
  // 实现数据预处理逻辑，将原始数据转化为CityModel数组
}

## 四、组件开发

###

1. Province.vue

####

模板

html
<template>
  <el-select v-model="provinceId" @change="onProvinceChange">
    <el-option
      v-for="province in provinces"
      :key="province.id"
      :label="province.name"
      :value="province.id"
    />
  </el-select>
</template>

####

脚本

typescript
import { defineComponent, ref } from 'vue';
import { fetchCities, preprocessCityData } from '@/api/city';
import { ProvinceModel } from '@/types';

export default defineComponent({
  props: {
    initialProvinceId: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    const provinceId=ref(props.initialProvinceId);

    const provinces=ref<ProvinceModel[]>([]);

    // 在组件挂载时获取省份数据并预处理
    async function fetchAndProcessProvinces() {
      const rawCityData=await fetchCities();
      const processedData=preprocessCityData(rawCityData);
      provinces.value=processedData.map((city)=> ({
        id: city.provinceId,
        name: city.provinceName,
      }));
    }

    fetchAndProcessProvinces();

    function onProvinceChange(newId: string) {
      provinceId.value=newId;
      // 触发事件，传递新选中的省份ID给父组件
      emit('province-change', newId);
    }

    return {
      provinceId,
      provinces,
      onProvinceChange,
    };
  },
});

###

2. City.vue & District.vue

这两个组件的实现方式与`Province.vue`类似，只需调整模板中的标签名称和属性，以及处理对应层级的数据即可。

###

3. CityList.vue

####

模板

html
<template>
  <div>
    <Province :initialProvinceId="provinceId" @province-change="onProvinceChange" />
    <City :provinceId="provinceId" />
    <District :provinceId="provinceId" :cityId="cityId" />
  </div>
</template>

####

脚本

typescript
import { defineComponent, ref } from 'vue';
import Province from './Province.vue';
import City from './City.vue';
import District from './District.vue';

export default defineComponent({
  setup() {
    const provinceId=ref('');
    const cityId=ref('');

    function onProvinceChange(newId: string) {
      provinceId.value=newId;
    }

    return {
      provinceId,
      cityId,
      onProvinceChange,
    };
  },
  components: {
    Province,
    City,
    District,
  },
});

###

4. index.vue

####

模板

html
<template>
  <CityList />
</template>

<script lang="ts">
import CityList from './CityList.vue';

export default {
  components: {
    CityList,
  },
};
</script>

至此，我们已经完成了Vue3城市选择器的开发工作。通过合理划分组件、封装联动逻辑，实现了省份、城市、区县的联动选择功能。接下来，可以根据实际需求对组件进行样式定制、添加更多交互效果等优化工作，进一步提升用户体验。

本文详细展示了如何利用Vue3从零开始构建一个城市选择器组件，涵盖了项目初始化、基础架构设计、数据获取与处理、组件开发等关键步骤，旨在帮助开发者深入理解Vue3组件化开发理念，提升实战能力。希望对你在实际工作中开发类似功能组件有所帮助。

在线咨询

上一篇：跨站脚本（XSS）漏洞实战演示-由易到难2
下一篇：Vue一小时搭建单页应用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何使用查看器筛选、搜索功能进行数据定位？

言

搜索

筛选

字段

运算符

值

快捷筛选

结论

您的项目需求