前端如何开发日志检索

墨鱼笔记
108 阅读5分钟

概述

在现代信息系统中，日志检索是分析系统状态、故障排除和行为审计的重要组成部分。本文将结合LogRetrieval.vue 和LogRetrievalMixin.js组件，介绍如何高效地实现一个日志检索的功能模块，主要侧重于关键代码的实现细节和技术要点。

组件结构

LogRetrievalMixin.js是一个混入（Mixin）组件，主要用来处理日志检索的业务逻辑。它通过Vue.js的生命周期函数、数据管理和axios请求来实现日志的加载、搜索和管理。以下是组件的主要数据和方法：

  1. 时间选择器: 通过logSelectTime组件，用户可以选择要检索的日志的时间范围。这对于分析特定时间段内的事件至关重要。
  2. 模板选择器: 使用``组件，用户可以从已有的日志模板中选择，快速筛选出感兴趣的日志类型。这一功能提供了灵活性，使得系统能够适应不同的需求。
  3. 搜索条件显示: search-condition-wrap展示了当前的搜索条件，用户可以清晰地看到已经应用的过滤条件，提升了用户体验。
  4. 自定义搜索功能: 提供了log-custom-search组件供用户定制搜索条件，使得系统具备更大的灵活性与扩展性。用户可以根据需要保存和复用自定义的搜索条件。
  5. 数据展示: 我们使用了``组件展示检索到的日志数据，支持分页和导出功能，确保用户能够方便地管理和查看大量日志数据。

检索功能实现

1. 时间范围选择

用户在UI中选择时间范围后，通过handleSelectTime方法将选中的时间范围传递给数据请求逻辑。该方法负责设置相应的时间戳，用于后台日志数据的查询。

2. 模板选择

用户选择了某个模板后，通过changeTemplate方法更新当前的模板UUID，动态影响查询条件。此设计使得检索系统能够根据不同的日志模板自动调整其查询逻辑。

3. 自定义搜索条件

用户可以通过log-custom-search组件添加、修改或删除自定义搜索条件。保存的条件会在UI中以清晰的方式展示给用户，用户可随时进行修改或清除。这种设计使得系统高度灵活，便于用户根据不同场景进行调整。

4. 日志数据显示

在用户点击查询按钮后，系统会根据当前的搜索条件向后端发送请求，获取匹配的日志数据，然后利用``组件将结果呈现给用户。通过分页和滚动加载的方式，用户可以高效地浏览大数据集。

代码分析

1.主要数据

data () {
  return {
    assetUuid: this.$route.params.assetUuid || '',
    eventAnalysisUuid: this.$route.params.eventAnalysisUuid || '',
    loadingLog: false, // 日志加载状态
    currentLogPage: 1, // 当前日志页码
    logAllCount: 0, // 日志条数
    searchForm: {
      startTime: null,
      endTime: null,
      message: '',
      templateUuid: 'ALL',
      highSearch: []
    }, // 搜索表单
    tableData: [], // 表格数据
    logModelList: [], // 模型列表
    hasMore: true // 是否还有更多数据
  }
}

data中定义了多个重要的状态变量，如loadingLog表示当前是否正在加载日志，searchForm存储用户的搜索条件等。

2. 关键方法

2.1 获取日志数据

getSearchAlllog: throttle(
  function (isScrollFlag) { // 获取日志 
    if (isScrollFlag) {
      this.isScrollBottom = true
      this.currentLogPage += 1
    }
    this.currentLogPage = isScrollFlag ? this.currentLogPage : 1
    this.loadingLog = true;
​
    const params = {
      condition: cloneDeep(this.searchForm),
      current: this.currentLogPage,
      size: this.logSize === 0 ? 20 : this.logSize
    }
​
    this.$axios.post('/suninfo-siem/allSiemLog/searchAlllog', params).then((res) => {
      if (res.success) {
        const dataTemp = res.data.records || []
        if (isScrollFlag) {
          this.tableData = [...this.tableData, ...dataTemp] // 滚动加载
        } else {
          this.tableData = dataTemp
        }
        this.hasMore = dataTemp.length > 0; // 是否还有更多数据
        this.loadingLog = false;
        this.isScrollBottom = false
      } else {
        this.$message.error(res.msg);
      }
    });
  },
  1000, {
    leading: true,
    trailing: false
  }
),

这个方法使用throttle限制请求频率，以防止频繁请求导致的性能问题。根据isScrollFlag判断是否为滚动加载，如果是，则增加currentLogPage以获取下一页数据。最终，通过axios发送POST请求获取日志信息，并更新tableData以展示在前端。

2.2 处理时间选择

handleSelectTime(form) {
  this.searchForm.startTime = form.startTime
  this.searchForm.endTime = form.endTime
  this.getSearchAlllog(); // 根据选择的时间段重新获取日志
}

该方法用于更新搜索表单的时间范围，并且在时间选择变化时重新加载相应的日志。通过form对象传递选择的时间，之后调用getSearchAlllog方法获取范围内的日志数据。

2.3 初始化操作

mounted () {
  this.getAllTemplate() // 获取所有日志模型
},

在组件挂载时，调用getAllTemplate方法来加载可用的日志模板，有助于用户在日志检索时选择合适的模板。

日志检索的工作流程

  1. 用户在界面上选择时间和模板后，系统依据输入的条件构建搜索表单；
  2. 系统通过handleSelectTime和changeTemplate方法获取最新的搜索条件；
  3. 调用getSearchAlllog方法从后端获取符合条件的日志数据，并展示在表格中；
  4. 用户可以滚动页面加载更多日志，系统会自动处理分页和数据拼接。

总结

通过LogRetrievalMixin.js，我们建设了一个高效的日志检索系统，可以根据用户需求进行灵活的数据查询与展示。整合Vue的生命周期管理和axios的异步请求，确保了系统的实时性和响应性。为了提升用户体验，还采取了如数据节流（throttle）等技术，避免了过于频繁的请求。

这种结构化的日志检索方案不仅能满足基本需求，还为未来的扩展打下了良好的基础，比如增加复杂的查询条件、优化数据展示等。对于开发者而言，深入理解和掌握这些技术将极大提高日志管理

avatar
文章
阅读
粉丝