SpringBoo+Vue构建简洁日志文件查看系统

2024-02-07 10:20

本文主要是介绍SpringBoo+Vue构建简洁日志文件查看系统,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

点击下载《SpringBoo+Vue构建日志文件查看系统(源代码)》

1. 前言

想必经常做java开发的小伙伴,其大多数服务都是运行在linux系统上的,当遇到一些比较棘手的bug需要处理时,经常要上服务器去捞日志,然后通过各种查询啥的去寻找有用的信息,这样不仅对服务器有一定的安全隐患,而且查询日志内容也很不方便直观,虽然市面上有一些优秀的日志管理系统,但安装和部署也要耗费不少时间,于是,我就想到,能否有一个简单又好用,还不用花大力气去安装部署,界面简单友好又方便好用的日志查看系统呢?于是本系统就应运而生了。

这款日志文件读取Web系统展现了卓越的功能性和用户体验。它不仅支持多种文件格式(如.log和.gz),还提供了灵活的搜索选项,允许用户按行号、行数或内容来筛选日志条目。此外,系统的自动更新功能实时追踪日志文件的变化,确保用户能够即时获取最新的信息。简洁直观的操作界面使得这款工具易于使用,即使是技术新手也能快速上手。总之,该系统为日志文件管理和分析提供了高效、便捷的解决方案。

本系统总共包含两部分内容,一部分为采用springboot编写的java后台程序,用于读取其他springboot程序产生的日志内容,另一部分为使用Vue编写的Web程序,通过调用java后台程序提供的接口,获取相应的日志内容。

2. Web系统

2.1 登录

本系统由于只是本人用于查看日常工作中所开发的springboot软件产生的日志,所以在业务流程上尽量采用简单高效的实现方法,因此本系统并未使用到任何数据库,在登录验证方面,由springboot程序在配置文件中写死了登录名和密码,yml配置详情如下:
在这里插入图片描述

Web登录页面也是采用了简单的实现,详情如下:

在这里插入图片描述

2.2 日志查看

日志查看,分两种情况,一种是按起始行号和读取行数查看,另一种是输入查询内容及返回的记录数来查看,两种方式分别采用不同的数据输入格式,使用时需要注意,不过,提示内容将输入格式已经写得很明白了,一看就明白。
在这里插入图片描述

主界面主要分为5个部分:

1、这里是服务名,本系统可以同时读取多个SpringBoot程序的日志,根据服务名进行划分。

2、这是日志目录,其包括了日志目录已经日志文件。

3、这是日志内容展示区域。

4、这是查询内容输入区域,需根据不同的查看方式输入不同格式的内容进行查看日志。

5、这是日志查看方式选择,可选择方式包括:按行查看日志、按内容搜索日志。

2.3 按行查看日志

下面演示按行查看日志内容,输入的查询条件是:100:3,表示从100行开始,读取3行,效果如下图:

在这里插入图片描述

在不输入任何查询条件的情况下,一次返回100行数据,当滚动条滚动到最底下的时候将会自动再拉取一次数据。

2.4 按搜索内容查看日志

下面演示按搜索内容查看日志,输入的查询条件是:

"{"instant":{"epochSecond":1695120508,"nanoOfSecond":620000000}" 10

表示查询的内容为**{“instant”:{“epochSecond”:1695120508,“nanoOfSecond”:620000000}**,返回前10条记录。

注意:如果查询的内容中有空格,需要使用英文的双引号括起来。

在这里插入图片描述

2.5 自动读取文件内容

对于后缀为.log的文件,表示此文件SpringBoot程序可能会实时地更新,因此可以开启自动读取文件,此后,每隔2秒将自动调用后台接口读取文件更新内容。

3. SpringBoot后台

3.1 配置文件

以下为配置文件application.yml的内容

server:port: 19123spring:application:name: readSystemLogFileconfig:activate:on-profile: devmvc:pathmatch:matching-strategy: ant_path_matcherlogging:config: classpath:log4j2.xmllevel:root: INFOjavax.activation: INFOorg.apache.catalina: INFOorg.apache.commons.beanutils.converters: INFOorg.apache.coyote.http11.Http11Processor: INFOorg.apache.http: INFOorg.apache.tomcat: INFOorg.springframework: INFOcom.yyqq: debug# 程序基本配置
services:# 说明:name和directory必须一一对应nameList:- "test"directoryList:- "D:\\test-service-logs\\"#用户名和密码,格式为:用户名@密码;用户名@密码systemUser: "admin@admin;test@test"

3.2 Controller

本着简单实用的原则,本系统的Controller一共有两个,分别是用于账号管理的userController以及用于日志操作方面的SystemLogController。

package com.yyqq.controller;import com.yyqq.common.result.CommonResult;
import com.yyqq.model.dto.UserLoginDTO;
import com.yyqq.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserService userService;@PostMapping("/login")public CommonResult login(@Validated @RequestBody UserLoginDTO userLoginDTO) {return userService.login(userLoginDTO);}
}
package com.yyqq.controller;import com.yyqq.common.result.CommonResult;
import com.yyqq.model.dto.QueryFileContentDTO;
import com.yyqq.model.dto.ReadFileLineDTO;
import com.yyqq.service.SystemLogService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;@RestController
@RequestMapping("/systemLog")
public class SystemLogController {@Autowiredprivate SystemLogService systemLogService;/*** 获取服务名列表* @return*/@GetMapping("serviceNameList")public CommonResult<Object> getServiceNameList() {return systemLogService.getServiceNameList();}/*** 读取服务器日志目录下的文件列表* @param serviceName* @return*/@GetMapping("{serviceName}/fileList")public CommonResult<Object> getFileList(@PathVariable("serviceName") String serviceName) {return systemLogService.getFileList(serviceName);}/*** 按行读取文件内容* @param readFileLineDTO* @return*/@PostMapping("readFileContent")public CommonResult<Object> readFileContent(@RequestBody ReadFileLineDTO readFileLineDTO) {return systemLogService.readFileContent(readFileLineDTO);}/*** 按行读取文件内容* @param queryFileContentDTO* @return*/@PostMapping("queryFileContent")public CommonResult<Object> queryFileContent(@RequestBody QueryFileContentDTO queryFileContentDTO) {return systemLogService.queryFileContent(queryFileContentDTO);}
}

4. 总结

在这个数字化时代,数据管理和信息检索变得至关重要。这款日志文件读取Web系统,不仅满足了基础的数据读取需求,更在许多功能上有着出色的表现。

首先,系统能够读取多种格式的文件,包括.log和.gz,这大大提高了其适应性和实用性。无论是日常的日志文件还是经过压缩的大型文件,用户都可以轻易地通过该系统进行读取和解析。

更值得一提的是,本系统添加了多种搜索和筛选功能。用户可以根据行号、行数,甚至是输入的内容来查找特定的日志条目。这种灵活的搜索方式使得在大量数据中快速找到所需信息变得简单而高效。

此外,自动读取并更新.log文件的更新内容的功能,使得这款系统不仅仅是一个静态的数据查看工具,而是一个动态的信息监测平台。这对于需要实时监控系统运行状况或响应潜在问题的用户来说,是一个极为有用的功能。

最后,从用户体验的角度来看,该系统的操作简单、界面友好。即使是不熟悉技术的人,也可以快速上手并充分利用这个系统。这无疑增加了系统的普及率和实用性。

条目。这种灵活的搜索方式使得在大量数据中快速找到所需信息变得简单而高效。

此外,自动读取并更新.log文件的更新内容的功能,使得这款系统不仅仅是一个静态的数据查看工具,而是一个动态的信息监测平台。这对于需要实时监控系统运行状况或响应潜在问题的用户来说,是一个极为有用的功能。

最后,从用户体验的角度来看,该系统的操作简单、界面友好。即使是不熟悉技术的人,也可以快速上手并充分利用这个系统。这无疑增加了系统的普及率和实用性。

总的来说,这个日志文件读取系统,凭借其出色的功能和简便的操作,将复杂的数据管理任务变得简单而直观,对于需要处理和分析日志文件的人群来说,是一个不可或缺的工具。

点击下载《SpringBoo+Vue构建日志文件查看系统(源代码)》

这篇关于SpringBoo+Vue构建简洁日志文件查看系统的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/687404

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Java程序进程起来了但是不打印日志的原因分析

《Java程序进程起来了但是不打印日志的原因分析》:本文主要介绍Java程序进程起来了但是不打印日志的原因分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java程序进程起来了但是不打印日志的原因1、日志配置问题2、日志文件权限问题3、日志文件路径问题4、程序

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加

python logging模块详解及其日志定时清理方式

《pythonlogging模块详解及其日志定时清理方式》:本文主要介绍pythonlogging模块详解及其日志定时清理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录python logging模块及日志定时清理1.创建logger对象2.logging.basicCo

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行