审计日志模块分析-CSDN博客

本文链接：https://blog.csdn.net/xuukai/article/details/148195730

<script setup> ：这是 Vue 3 中的 <script setup> 语法，它是一种更简洁、更直观的编写组合式 API 的方式，可以让我们在模板中直接使用定义的变量和函数，而无需通过 return 暴露它们。
- 在这里，它用来定义整个组件的逻辑部分，包括导入依赖、定义变量和函数等。
import { onMounted, ref } from 'vue' ：从 Vue 框架中导入 onMounted 和 ref 函数。
- onMounted 是 Vue 的生命周期钩子，它会在组件挂载到 DOM 后立即执行，常用于执行一些初始化操作，比如发送 API 请求获取数据、设置定时器等。
- ref 用于创建一个响应式引用变量，它可以让普通变量变成响应式的，这样当变量的值发生变化时，Vue 能够自动检测到并更新相关的视图。
import { NInput, NSelect, NPopover } from 'naive-ui' ：从 NaiveUI 库中导入 NInput（输入框）、NSelect（选择器）和 NPopover（气泡卡片）组件。
- NaiveUI 是一个基于 Vue 3 的 UI 组件库，提供了丰富的组件来构建用户界面。这里导入的组件将用于构建页面中的输入框、选择器和显示额外信息的气泡卡片等界面元素。
import TheIcon from '@/components/icon/TheIcon.vue' ：从本地项目中的 icon 文件夹导入 TheIcon 组件。
- 这个组件可能是一个自定义的图标组件，用于在页面中显示各种图标，增强界面的视觉效果和用户体验。
import CommonPage from '@/components/page/CommonPage.vue' ：导入 CommonPage 组件。
- 这是一个通用的页面布局组件，可能定义了一些通用的页面结构和样式，方便在不同的页面中复用，保持页面风格的一致性。
import QueryBarItem from '@/components/query-bar/QueryBarItem.vue' ：导入 QueryBarItem 组件。
- 这个组件可能用于构建查询栏中的各个查询项，如输入框、选择器等，方便对数据进行筛选和查询。
import CrudTable from '@/components/table/CrudTable.vue' ：导入 CrudTable 组件。
- CRUD 代表增删改查（Create, Read, Update, Delete），这个组件可能是一个实现了基本增删改查功能的表格组件，用于展示和操作数据列表。
import api from '@/api' ：导入项目中的 api 模块。
- 通常，api 模块会封装与后端 API 的交互逻辑，比如发送 HTTP 请求获取或提交数据等。这里导入后，可以在组件中使用它来调用后端的接口获取审计日志数据等。
defineOptions({ name: '审计日志' }) ：使用 defineOptions 宏定义组件的选项，这里设置了组件的名称为 “审计日志”。
- 在 Vue 3 的 <script setup> 中，defineOptions 可以让我们为组件指定一些选项，比如组件名称等，方便在开发工具中识别组件以及进行调试等。
const $table = ref(null) ：创建一个名为 $table 的响应式引用变量，并初始化为 null。

 * 这个变量通常用于引用子组件（在这里是 `CrudTable` 组件），通过它可以在父组件中调用子组件的方法或访问子组件的属性。在模板中，通过 `ref="$table"` 将这个变量与子组件关联起来。

const queryItems = ref({}) ：创建一个名为 queryItems 的响应式引用变量，用于存储查询条件，初始化为一个空对象。

 * 在后续的代码中，会根据用户的输入和选择，将查询条件（如用户名称、功能模块、接口概要等）存储在这个对象中，然后传递给后端 API 进行数据筛选。

onMounted(() => { $table.value?.handleSearch() }) ：在组件挂载后，调用 $table 引用的 CrudTable 组件的 handleSearch 方法。

 * 这里使用了可选链操作符 `?.`，防止 `$table.value` 为 `null` 或 `undefined` 时出现错误。这行代码的作用是在页面加载完成后立即触发一次数据查询操作，获取初始的审计日志列表展示在表格中。

function formatTimestamp(timestamp) ：定义一个名为 formatTimestamp 的函数，用于将时间戳格式化为特定的日期时间字符串格式（YYYY - MM - DD HH:MM:SS）。

 * 在函数内部，首先将时间戳转换为 `Date` 对象，然后分别获取年、月、日、时、分、秒等信息，并使用 `padStart` 方法对月份、日、时、分、秒等不足两位的数字进行补零操作，以确保格式的一致性。最后将这些信息组合成所需的字符串格式并返回。

function getStartOfDayTimestamp() ：定义一个函数，用于获取当天开始时间的时间戳。

 * 创建一个 `Date` 对象表示当前时间，然后通过 `setHours(0, 0, 0, 0)` 将时间设置为当天的 0 点 0 分 0 秒 0 毫秒，最后使用 `getTime()` 方法获取这个时间点的时间戳。这个函数主要用于在查询时设置默认的时间范围的起始时间。

function getEndOfDayTimestamp() ：定义一个函数，用于获取当天结束时间的时间戳。

 * 类似地，创建一个 `Date` 对象表示当前时间，然后通过 `setHours(23, 59, 59, 999)` 将时间设置为当天的 23 点 59 分 59 秒 999 毫秒（即当天的最后一刻），再获取时间戳。这个函数用于设置默认时间范围的结束时间。

const startOfDayTimestamp = getStartOfDayTimestamp() ：调用 getStartOfDayTimestamp 函数获取当天开始时间的时间戳，并将其赋值给 startOfDayTimestamp 常量。
const endOfDayTimestamp = getEndOfDayTimestamp() ：调用 getEndOfDayTimestamp 函数获取当天结束时间的时间戳，赋值给 endOfDayTimestamp 常量。
queryItems.value.start_time = formatTimestamp(startOfDayTimestamp) ：将 queryItems 对象的 start_time 属性设置为格式化后的当天开始时间字符串。

 * 这样，在初始查询条件中，就会包含当天的开始时间作为查询的时间范围的起始时间。

queryItems.value.end_time = formatTimestamp(endOfDayTimestamp) ：将 queryItems 对象的 end_time 属性设置为格式化后的当天结束时间字符串。

 * 同样，设置默认的查询时间范围的结束时间为当天的结束时间。

const datetimeRange = ref([startOfDayTimestamp, endOfDayTimestamp]) ：创建一个名为 datetimeRange 的响应式引用变量，初始化为一个包含当天开始和结束时间戳的数组。

 * 这个变量通常与日期时间选择器组件（如 `NDatePicker`）绑定，用于存储用户选择的时间范围。

const handleDateRangeChange = (value) => {} ：定义一个名为 handleDateRangeChange 的函数，用于处理日期时间范围变化的事件。

 * 在函数内部，首先判断传入的 `value` 是否为 `null`。如果是 `null`，则将 `queryItems` 对象的 `start_time` 和 `end_time` 属性都设置为 `null`，表示清除时间范围查询条件。如果不是 `null`，则将 `value` 数组中的两个时间戳分别格式化为日期时间字符串，赋值给 `queryItems` 的 `start_time` 和 `end_time` 属性，以便根据新的时间范围进行数据查询。

const methodOptions = [...] ：定义一个名为 methodOptions 的数组，包含了一些 HTTP 请求方法的选项，每个选项是一个对象，包含 label（显示的标签）和 value（对应的值）。

 * 这个数组通常用于填充请求方法选择器（如 `NSelect`）的选项，方便用户选择不同的请求方法作为查询条件。

function formatJSON(data) ：定义一个函数，用于格式化 JSON 数据。

 * 函数内部首先尝试判断传入的 `data` 是否为字符串。如果是字符串，先尝试将其解析为 JSON 对象，然后再进行格式化（添加缩进等）。如果不是字符串，直接进行格式化。如果在格式化过程中发生错误（如数据不是有效的 JSON 格式），则返回原始数据或者 “无数据” 字符串。这个函数主要用于在展示请求体和响应体等 JSON 格式的数据时，使其更易于阅读和查看。

const columns = [...] ：定义一个名为 columns 的数组，用于描述表格的列配置。

 * 每个列配置是一个对象，包含多个属性，如 `title`（列标题）、`key`（对应数据对象中的键名）、`width`（列宽）、`align`（对齐方式）、`ellipsis`（文本溢出时是否显示省略号及提示框）等。
 * 对于 “请求体” 和 “响应体” 这两列，它们的 `render` 属性定义了一个渲染函数。在渲染函数中，使用了 NaiveUI 的 `NPopover` 组件和自定义的 `TheIcon` 组件。当鼠标悬停在图标上时，会显示一个气泡卡片，卡片中展示格式化后的 JSON 数据（通过 `formatJSON` 函数处理）。这样可以在不占用太多表格空间的情况下，让用户查看详细的数据内容。

<template> ：这是 Vue 组件的模板部分，用于定义组件的 HTML 结构。

 * 在这里，它定义了整个审计日志页面的布局和界面元素。

<CommonPage> ：使用 CommonPage 组件作为整个页面的布局容器。

 * 这个组件可能定义了一些通用的页面结构，比如页面的标题、内容区域的布局等，使得页面具有统一的风格。

<CrudTable> ：使用 CrudTable 组件来展示和操作审计日志数据列表。

 * 通过 `ref="$table"` 将之前定义的 `$table` 变量与这个组件关联起来，方便在脚本中调用它的方法。
 * 使用 `v - model:query - items="queryItems"` 将 `queryItems` 变量与组件的查询条件进行双向绑定，这样当用户在查询栏中修改查询条件时，`queryItems` 会自动更新，反之亦然。
 * 通过 `:columns="columns"` 将表格的列配置传递给组件，告诉它如何展示数据。
 * 通过 `:get - data="api.getAuditLogList"` 指定获取数据的 API 方法，即当需要加载数据时，调用 `api.getAuditLogList` 函数来获取审计日志列表数据。

<template #queryBar> ：定义一个插槽，名称为 queryBar，用于在 CrudTable 组件中插入自定义的查询栏内容。

 * 在这里，插入了一系列的 `QueryBarItem` 组件，每个 `QueryBarItem` 组件代表一个查询条件项。

<QueryBarItem> ：这是一个查询条件项的组件，用于构建查询栏中的各个输入项。

 * 每个 `QueryBarItem` 组件都有一个 `label` 属性，用于指定查询项的标签文本，如 “用户名称”“功能模块” 等，还有一个 `:label - width` 属性，用于设置标签的宽度。
 * 在 `QueryBarItem` 组件内部，使用了不同的输入组件（如 `NInput` 输入框、`NSelect` 选择器、`NDatePicker` 日期时间选择器等）来接收用户的输入，这些输入组件的 `v - model:value` 都绑定到 `queryItems` 对象的相应属性上，实现了查询条件的双向绑定。
 * 对于输入框组件，还添加了 `@keypress.enter` 事件监听器，当用户按下回车键时，调用 `$table?.handleSearch()` 方法触发数据查询操作，方便用户快速进行查询。

通过以上代码，实现了一个审计日志管理系统页面，包含了查询条件设置、数据表格展示等功能，利用 Vue 3 的响应式特性、NaiveUI 的丰富组件以及自定义的业务逻辑和 API 调用，构建了一个功能较为完善的管理系统界面。同时，在代码中还运用了一些实用的技巧，如使用 ref 进行组件引用、通过插槽自定义组件内容、使用生命周期钩子进行初始化操作等，有助于提高开发效率和代码的可维护性。