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

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

1. 前言

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

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

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

2. Web系统

2.1 登录

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

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

SpringBoo+Vue构建简洁日志文件查看系统_第2张图片

2.2 日志查看

日志查看,分两种情况,一种是按起始行号和读取行数查看,另一种是输入查询内容及返回的记录数来查看,两种方式分别采用不同的数据输入格式,使用时需要注意,不过,提示内容将输入格式已经写得很明白了,一看就明白。
SpringBoo+Vue构建简洁日志文件查看系统_第3张图片

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

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

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

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

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

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

2.3 按行查看日志

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

SpringBoo+Vue构建简洁日志文件查看系统_第4张图片

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

2.4 按搜索内容查看日志

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

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

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

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

SpringBoo+Vue构建简洁日志文件查看系统_第5张图片

2.5 自动读取文件内容

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

3. SpringBoot后台

3.1 配置文件

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

server:
  port: 19123

spring:
  application:
    name: readSystemLogFile
  config:
    activate:
      on-profile: dev
  mvc:
    pathmatch:
      matching-strategy: ant_path_matcher

logging:
  config: classpath:log4j2.xml
  level:
    root: INFO
    javax.activation: INFO
    org.apache.catalina: INFO
    org.apache.commons.beanutils.converters: INFO
    org.apache.coyote.http11.Http11Processor: INFO
    org.apache.http: INFO
    org.apache.tomcat: INFO
    org.springframework: INFO
    com.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 {

    @Autowired
    private 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 {

    @Autowired
    private 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构建日志文件查看系统(源代码)》

你可能感兴趣的:(工具,vue.js,前端,javascript,SpringBoot,日志查看系统)