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: 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);
    }
}