与copilot 结对编程系列 - log日志重复性检测 - 第4篇 - 网页UI界面

2024-08-25 01:36
文章标签 网页 日志 ui 界面 系列 检测 编程 log 结对 copilot 重复性

本文主要是介绍与copilot 结对编程系列 - log日志重复性检测 - 第4篇 - 网页UI界面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

背景

细节可以参考这篇文章: 与copilot 结对编程系列 - log日志重复性检测 - 第1篇 - 总体介绍及效果展示

本文主要将数据库中存储的数据通过网页调用并展示出来, 以下是对详细解释。

web框架选择

当前场景使用 Flask 来展示网页信息.
主要原因如下：

  1. 轻量级和易于使用：Flask 是一个轻量级的 Web 框架，易于设置和使用。它允许开发者快速构建和部署 Web 应用程序，而不需要复杂的配置。
  2. 模板渲染：Flask 提供了强大的模板引擎 Jinja2，可以方便地将 Python 数据传递到 HTML 模板中进行渲染。在 result.html文件中，使用了 Jinja2 模板语法（如 {{ log_results | tojson | safe }}）来将后端数据传递到前端。
  3. 路由管理：Flask 提供了简单的路由机制，可以轻松地将 URL 映射到特定的函数。在 app.py文件中，可以定义不同的路由来处理不同的请求，并返回相应的 HTML 页面或数据。
  4. 数据处理：在 database_query.py等脚本中，可以使用 Flask 处理从数据库中查询的数据，并将其传递到前端进行展示。Flask 可以与各种数据库（如 SQLite、MySQL、PostgreSQL）无缝集成。
  5. 扩展性：Flask 拥有丰富的扩展库，可以轻松地添加各种功能，如表单处理、用户认证、文件上传等。开发者可以根据需要选择合适的扩展来增强应用的功能。
  6. 开发和调试：Flask 提供了内置的开发服务器和调试工具，可以方便地进行本地开发和调试。开发者可以快速迭代和测试代码，提升开发效率。

综上所述，Flask 作为一个轻量级且功能强大的 Web 框架，非常适合用于当前场景中展示网页信息的需求。

具体实现

ui_interface.py 这是一个 Flask 应用程序

它通过前端表单接收用户输入的数据，调用数据库接口进行查询，然后将处理后的结果展示在页面上。以下是详细的步骤：

  1. 接收前端数据：

    • 用户在前端表单中输入数据并提交表单。
    • 表单数据通过 POST 请求发送到服务器端的 /query 路由。

  2. 处理请求：

    • 在 /query 路由中，使用 request.form 获取表单数据。
    • 根据表单数据中的query_type 字段，选择相应的数据库查询函数。

  3. 调用数据库接口：

    • 根据query_type，调用 database_query 模块中的相应函数进行数据库查询。
    • 查询函数返回查询结果 log_results 和摘要结果summary_result。

  4. 处理查询结果：

    • 使用 process_json 函数对查询结果进行处理，添加前缀到键名。
    • 将处理后的结果存储在 Flask 的 session 中，以便后续使用。

  5. 展示结果：

    • 将处理后的查询结果传递给模板引擎 render_template，渲染 result.html 页面。
    • 在 result.html 页面中展示查询结果。

以下是代码中的关键部分：

@app.route('/query', methods=['POST'])
def query_result():# 获取表单数据query_type = request.form['query_type']log_level = request.form.get('log_level')log_type = request.form.get('log_type')limit = request.form.get('limit')log_procedure = request.form.get('log_procedure')file_line = request.form.get('file_line')order_by_field = request.form.get('order')sct_case_name = request.form.get('sct_case_name')# 根据 query_type 调用相应的数据库查询函数query_functions = {'query_single_sct_case': lambda: ds.query_single_sct_case(sct_case_name),'query_top_sct_cases': lambda: (ds.query_top_sct_cases(log_level, log_type, limit), {}),'query_log_types_ranking': lambda: (ds.query_log_types_ranking(log_level), {}),'query_top_log': lambda: (ds.query_top_log(log_procedure, log_level, log_type, limit, order_by_field), {}),'query_specific_log': lambda: (ds.query_specific_log(file_line, limit), {}),'query_logs_by_type': lambda: (ds.query_logs_by_type(log_type, limit), {}),'query_pet_log_type': lambda: (ds.query_pet_log_type(), {}),'query_pet_top_log_ranking': lambda: (ds.query_pet_top_log_ranking(log_procedure, log_level, log_type, limit), {})}# 执行查询函数log_results, summary_result = query_functions.get(query_type, lambda: ({}, {}))()# 处理查询结果log_results = process_json(log_results)summary_result = process_json(summary_result) if summary_result else {}# 将结果存储在 session 中session['log_results'] = log_resultssession['summary_result'] = summary_result# 渲染结果页面return render_template('result.html', query_type=query_type, log_results=log_results, summary_result=summary_result)

通过上述步骤，脚本实现了从前端接收数据、调用数据库接口、处理查询结果并展示在页面上的完整流程。

index.html

这个 index.html 文件是一个前端页面，主要用于提供一个查询接口。它的主要功能和作用如下：

  1. 页面结构和样式：

    • 使用 HTML 和 CSS 定义了页面的基本结构和样式。
    • 页面包含一个标题、一个表单和一个计时器显示区域。
    • 表单包含两个下拉菜单（查询类别和查询类型）和一个动态参数容器。

  2. 动态表单生成：

    • 根据用户选择的查询类别和查询类型，动态生成表单参数。
    • 使用 JavaScript 脚本，根据预定义的 queryOptions 和 queryParams 对象，动态更新查询类型选项和参数输入字段。

  3. JavaScript 脚本：

    • updateQueryTypeOptions()：根据选择的查询类别，更新查询类型的下拉菜单选项。
function updateQueryTypeOptions() {const queryCategory = document.getElementById('query_category').value;const queryTypeSelect = document.getElementById('query_type');queryTypeSelect.innerHTML = '';queryOptions[queryCategory].forEach(option => {const opt = document.createElement('option');opt.value = option.value;opt.textContent = option.text;queryTypeSelect.appendChild(opt);});showParams();
}
  • showParams()：根据选择的查询类别和查询类型，动态生成相应的参数输入字段。
function showParams() {const queryCategory = document.getElementById('query_category').value;const queryType = document.getElementById('query_type').value;const paramsContainer = document.getElementById('params_container');paramsContainer.innerHTML = '';const params = queryParams[`${queryCategory}_${queryType}`];if (params) {params.forEach(param => {const label = document.createElement('label');label.setAttribute('for', param.id);label.textContent = param.label;paramsContainer.appendChild(label);if (param.type === 'select') {const select = document.createElement('select');select.id = param.id;select.name = param.name;param.options.forEach(option => {const opt = document.createElement('option');opt.value = option;opt.textContent = option;select.appendChild(opt);});paramsContainer.appendChild(select);} else {const input = document.createElement('input');input.type = param.type;input.id = param.id;input.name = param.name;if (param.value) {input.value = param.value;}paramsContainer.appendChild(input);}});}
}
  • startTimer()：在表单提交时启动一个计时器，显示查询时间，并禁用提交按钮以防止重复提交。
function startTimer() {const submitButton = document.querySelector('input[type="submit"]');submitButton.disabled = true;const timerElement = document.getElementById('timer');const startTime = Date.now();setInterval(() => {const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(1);timerElement.textContent = 'Query time: ' + elapsedTime + ' seconds';}, 100);return true; // Allow form submission
}
  • window.onload：页面加载时，默认选择 SCT 查询类别并更新查询类型选项。
window.onload = function() {document.getElementById('query_category').value = 'SCT';updateQueryTypeOptions();
};
  1. 与 Flask 的集成：
    • 表单的 action 属性指向 /query，使用 POST 方法提交数据，这是一个 Flask 路由，用于处理查询请求。
    • Flask 后端会接收表单提交的数据，处理查询逻辑，并返回结果。

总结来说，这个文件主要用于提供一个用户界面，让用户选择查询类别和类型，并输入相应的参数，然后提交查询请求到 Flask 后端进行处理。

results.html

这个 result.html 文件是一个 HTML 模板文件，通常用于 Flask 应用中，用来展示查询结果。以下是这个文件的主要作用和功能：

  1. 页面结构和样式：

    • 使用 HTML 和 CSS 定义了页面的结构和样式。
    • 包含一个标题 “Query Result”。
    • 定义了一些样式规则，使页面看起来更美观，例如背景颜色、字体、表格样式等。

  2. 数据处理和展示：

    • 使用 JavaScript 函数 removePrefixFromKeys 去除数据键中的前缀。
    • 使用 generateTable 和 generateSingleRowTable 函数生成 HTML 表格，用于展示查询结果。
    • 将处理后的数据插入到页面的特定容器中 (log-results-container 和 summary-results-container)。

  3. 导出功能：

    • 提供了一个链接，允许用户将查询结果导出为 Excel 文件。

  4. 图表展示：

    • 如果查询类型是 query_log_types_ranking 或 query_pet_log_type，则会生成一个饼图来展示日志类型的排名。
    • 使用 Chart.js 库生成图表，并对图表进行了一些自定义设置，例如颜色、图例等。

  5. 模板引擎：

    • 使用了 Jinja2 模板引擎的语法（例如 {{ log_results | tojson | safe }} 和 {% if query_type == 'query_log_types_ranking' or query_type == 'query_pet_log_type' %}）来动态渲染数据和条件内容。

这个文件的主要作用是展示查询结果，包括表格和图表，并提供导出功能。它是 Flask 应用的一部分，通过 Flask 渲染并返回给客户端。

最终效果演示

界面查询

提供多个categories, 用于后期扩展
在这里插入图片描述
对于特地category, 当前提供了6个查询接口
在这里插入图片描述

数据展示

表格数据展示, 提供了占比, 总数, 排名等等信息
在这里插入图片描述
提供了可视化图表, 更加直观体现
在这里插入图片描述
提供excel一键导出, 便于离线数据分析
在这里插入图片描述

最后

后续展望, 当前的脚本还存在诸多问题,后期准备增加功能:

  • 周期性运行部署, 监控log日志的趋势
  • 历史版本比较, 往不好方向发展, 可以及时知晓
  • 更多log日志格式支持
  • 邮件通知
    等等
    有兴趣, 需要源码可以关注我的公众号, 代码的更多细节, 一起交流~~~
    在这里插入图片描述

这篇关于与copilot 结对编程系列 - log日志重复性检测 - 第4篇 - 网页UI界面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1104185。

相关文章

Linux系统性能检测命令详解

Linux系统性能检测命令详解

《Linux系统性能检测命令详解》本文介绍了Linux系统常用的监控命令（如top、vmstat、iostat、htop等）及其参数功能,涵盖进程状态、内存使用、磁盘I/O、系统负载等多维度资源监控,... 目录toppsuptimevmstatIOStatiotopslabtophtopdstatnmon
阅读更多...
C++ Log4cpp跨平台日志库的使用小结

C++ Log4cpp跨平台日志库的使用小结

《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window
阅读更多...
怎样通过分析GC日志来定位Java进程的内存问题

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》：本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.
阅读更多...
解读GC日志中的各项指标用法

解读GC日志中的各项指标用法

《解读GC日志中的各项指标用法》：本文主要介绍GC日志中的各项指标用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、基础 GC 日志格式（以 G1 为例）1. Minor GC 日志2. Full GC 日志二、关键指标解析1. GC 类型与触发原因2. 堆
阅读更多...
Go语言数据库编程GORM 的基本使用详解

Go语言数据库编程GORM 的基本使用详解

《Go语言数据库编程GORM的基本使用详解》GORM是Go语言流行的ORM框架,封装database/sql,支持自动迁移、关联、事务等,提供CRUD、条件查询、钩子函数、日志等功能,简化数据库操作... 目录一、安装与初始化1. 安装 GORM 及数据库驱动2. 建立数据库连接二、定义模型结构体三、自动迁
阅读更多...
C++ 检测文件大小和文件传输的方法示例详解

C++ 检测文件大小和文件传输的方法示例详解

《C++检测文件大小和文件传输的方法示例详解》文章介绍了在C/C++中获取文件大小的三种方法,推荐使用stat()函数,并详细说明了如何设计一次性发送压缩包的结构体及传输流程,包含CRC校验和自动解... 目录检测文件的大小✅ 方法一：使用 stat() 函数（推荐）✅ 用法示例：✅ 方法二：使用 fsee
阅读更多...
CSS3打造的现代交互式登录界面详细实现过程

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.
阅读更多...
MySQL 打开binlog日志的方法及注意事项

MySQL 打开binlog日志的方法及注意事项

《MySQL打开binlog日志的方法及注意事项》本文给大家介绍MySQL打开binlog日志的方法及注意事项,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录一、默认状态二、如何检查 binlog 状态三、如何开启 binlog3.1 临时开启（重启后失效）
阅读更多...
HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
OpenCV实现实时颜色检测的示例

OpenCV实现实时颜色检测的示例

《OpenCV实现实时颜色检测的示例》本文主要介绍了OpenCV实现实时颜色检测的示例,通过HSV色彩空间转换和色调范围判断实现红黄绿蓝颜色检测,包含视频捕捉、区域标记、颜色分析等功能,具有一定的参考... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2