# logViewer **Repository Path**: MingByte_729316231/log-viewer ## Basic Information - **Project Name**: logViewer - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-01-19 - **Last Updated**: 2026-02-05 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 日志管理系统 (Log Viewer) ## 项目简介 日志管理系统是一个基于Spring Boot + Vue + Elasticsearch的企业级日志管理平台，提供日志收集、存储、查询、分析等功能，帮助开发人员和运维人员快速定位和解决系统问题。 ### 核心功能 - **日志查询**：支持多条件组合查询，包括应用、环境、日志级别、关键词、文件路径等 - **实时监控**：实时查看系统日志，支持按时间排序 - **日志分析**：提供日志统计分析功能，帮助识别系统异常 - **字典管理**：支持应用、环境等字典项的维护管理 - **用户认证**：基于JWT的用户认证和权限控制 ## 技术栈 ### 后端技术 | 技术 | 版本 | 说明 | |------|------|------| | Spring Boot | 3.2.0 | 后端框架 | | Spring Security | 6.x | 安全框架 | | JPA | 3.x | 数据访问框架 | | PostgreSQL | 15.x | 关系型数据库 | | Elasticsearch | 8.11.0 | 日志存储和搜索引擎 | | Filebeat | 8.11.0 | 日志收集工具 | | Logstash | 8.11.0 | 日志处理管道 | | JWT | 0.12.3 | 身份认证 | ### 前端技术 | 技术 | 版本 | 说明 | |------|------|------| | Vue | 3.x | 前端框架 | | Element Plus | 2.x | UI组件库 | | Axios | 1.x | HTTP客户端 | | Dayjs | 1.x | 日期处理库 | ## 系统架构 ### 泳道图 ```plantuml @startuml 日志管理系统架构 |应用服务器|Filebeat|Logstash|Elasticsearch|后端服务|PostgreSQL|前端应用| ' 日志产生和收集流程 [应用服务器] -> [Filebeat]: 1. 产生日志文件 [Filebeat] -> [Filebeat]: 2. 读取日志文件 [Filebeat] -> [Logstash]: 3. 发送日志数据 ' 日志处理和存储流程 [Logstash] -> [Logstash]: 4. 解析和处理日志 [Logstash] -> [Elasticsearch]: 5. 存储处理后的日志 ' 用户查询流程 [前端应用] -> [后端服务]: 6. 发送日志查询请求 [后端服务] -> [PostgreSQL]: 7. 查询用户和字典数据 [PostgreSQL] --> [后端服务]: 8. 返回用户和字典数据 [后端服务] -> [Elasticsearch]: 9. 执行日志搜索 [Elasticsearch] --> [后端服务]: 10. 返回搜索结果 [后端服务] --> [前端应用]: 11. 返回格式化的日志数据 [前端应用] -> [前端应用]: 12. 展示日志列表 ' 字典管理流程 [前端应用] -> [后端服务]: 13. 字典项维护请求 [后端服务] -> [PostgreSQL]: 14. 保存字典数据 [PostgreSQL] --> [后端服务]: 15. 确认保存成功 [后端服务] --> [前端应用]: 16. 返回操作结果 @enduml ``` ### 组件说明 | 组件 | 职责 | 技术 | |------|------|------| | 应用服务器 | 产生系统日志 | 业务应用 | | Filebeat | 收集日志文件并发送 | Filebeat 8.11.0 | | Logstash | 解析和处理日志 | Logstash 8.11.0 | | Elasticsearch | 存储和索引日志 | Elasticsearch 8.11.0 | | 后端服务 | 提供API和业务逻辑 | Spring Boot 3.2.0 | | PostgreSQL | 存储用户和字典数据 | PostgreSQL 15.x | | 前端应用 | 提供用户界面 | Vue 3.x + Element Plus | ## 快速开始 ### 环境准备 - JDK 21+ - Maven 3.8+ - Node.js 16+ - PostgreSQL 15+ - Elasticsearch 8.11.0+ - Filebeat 8.11.0+ - Logstash 8.11.0+ ### 安装部署 #### 1. 克隆项目 ```bash git clone <项目地址> cd log-viewer ``` #### 2. 数据库配置 1. 创建PostgreSQL数据库： ```sql CREATE DATABASE logviewer; ``` 2. 配置数据库连接信息（`backend/src/main/resources/application.yml`）： ```yaml spring: datasource: url: jdbc:postgresql://localhost:5432/logviewer username: postgres password: 123456 ``` #### 3. Elasticsearch配置 1. 启动Elasticsearch服务 2. 配置Elasticsearch连接信息（`backend/src/main/resources/application.yml`）： ```yaml elasticsearch: host: localhost port: 9200 username: elastic password: KnowledgeBase2024! protocol: http ``` #### 4. 启动后端服务 ```bash cd backend mvn clean package java -jar target/log-viewer-backend-1.0.0.jar ``` #### 5. 启动前端服务 ```bash cd frontend npm install npm run dev ``` #### 6. 配置Filebeat 修改 `filebeat/filebeat.yml` 文件，配置日志收集路径和Logstash地址，然后启动Filebeat： ```bash cd filebeat ./filebeat -e -c filebeat.yml ``` #### 7. 配置Logstash 修改 `elasticsearch/logstash.conf` 文件，配置Elasticsearch连接信息，然后启动Logstash： ```bash cd elasticsearch ./logstash -f logstash.conf ``` ## 使用说明 ### 访问系统 - 前端地址：http://localhost:5173 - 后端API地址：http://localhost:7111/api ### 登录系统 默认登录账号： - 用户名：admin - 密码：123456 ### 日志查询 1. 在左侧菜单选择「日志查询」 2. 填写查询条件，包括应用、环境、日志级别、关键词等 3. 点击「搜索」按钮查看结果 4. 点击「详情」按钮查看日志详细信息 ### 字典管理 1. 在左侧菜单选择「字典管理」 2. 点击「新增」按钮添加字典项 3. 点击「编辑」按钮修改字典项 4. 点击「删除」按钮删除字典项 ## 项目结构 ### 后端结构 ``` backend/ ├── src/ │ ├── main/ │ │ ├── java/com/logviewer/ │ │ │ ├── config/ # 配置类 │ │ │ ├── controller/ # 控制器 │ │ │ ├── dto/ # 数据传输对象 │ │ │ ├── model/ # 实体类 │ │ │ ├── repository/ # 数据访问层 │ │ │ ├── service/ # 业务逻辑层 │ │ │ └── LogViewerApplication.java # 应用入口 │ │ └── resources/ │ │ ├── db/migration/ # 数据库迁移脚本 │ │ └── application.yml # 应用配置 │ └── test/ # 测试代码 └── pom.xml # Maven配置 ``` ### 前端结构 ``` frontend/ ├── src/ │ ├── api/ # API请求 │ ├── router/ # 路由配置 │ ├── utils/ # 工具类 │ ├── views/ # 页面组件 │ │ ├── Login.vue # 登录页 │ │ ├── Search.vue # 日志查询页 │ │ ├── Statistics.vue # 统计分析页 │ │ └── DictManagement.vue # 字典管理页 │ ├── App.vue # 根组件 │ └── main.js # 应用入口 ├── index.html # HTML模板 ├── package.json # 依赖配置 └── vite.config.js # Vite配置 ``` ## 配置说明 ### 后端配置 主要配置文件：`backend/src/main/resources/application.yml` - **服务器配置**：端口、上下文路径 - **数据库配置**：PostgreSQL连接信息 - **Elasticsearch配置**：连接信息、超时设置 - **JWT配置**：密钥、过期时间 - **日志配置**：日志级别 ### 前端配置 主要配置文件：`frontend/vite.config.js` - **开发服务器配置**：端口、代理设置 - **构建配置**：输出目录、资源路径 ### Filebeat配置 主要配置文件：`filebeat/filebeat.yml` - **输入配置**：日志文件路径、多行处理 - **输出配置**：Logstash地址、压缩设置 - **处理器配置**：添加主机、云提供商等元数据 ### Logstash配置 主要配置文件：`elasticsearch/logstash.conf` - **输入配置**：Beats输入端口 - **过滤器配置**：Grok模式解析日志、日期处理 - **输出配置**：Elasticsearch连接信息 ## 常见问题 ### 1. 日志查询不到 - 检查Filebeat是否正常运行 - 检查Logstash是否正常运行 - 检查Elasticsearch是否有数据 - 检查查询条件是否正确 ### 2. 字典项不生效 - 检查字典项是否已启用 - 检查字典类型是否正确 - 检查前端缓存是否已刷新 ### 3. 系统登录失败 - 检查JWT配置是否正确 - 检查用户名密码是否正确 - 检查数据库连接是否正常 ## 开发指南 ### 后端开发 1. 安装依赖：`mvn install` 2. 运行测试：`mvn test` 3. 构建项目：`mvn clean package` 4. 运行项目：`mvn spring-boot:run` ### 前端开发 1. 安装依赖：`npm install` 2. 开发模式：`npm run dev` 3. 构建项目：`npm run build` 4. 预览构建：`npm run preview` ## 生产环境部署 ### 后端部署 1. 构建jar包：`mvn clean package` 2. 上传jar包到服务器 3. 创建systemd服务文件 4. 启动服务：`systemctl start log-viewer-backend` ### 前端部署 1. 构建静态文件：`npm run build` 2. 上传dist目录到Nginx服务器 3. 配置Nginx反向代理 ### 监控与维护 - **Elasticsearch监控**：使用Elasticsearch自带的监控工具 - **Filebeat监控**：配置Filebeat的监控输出 - **日志轮转**：配置Filebeat的日志轮转策略 - **数据清理**：定期清理过期的日志数据 ## 许可证 本项目采用Apache 2.0许可证。 ## 联系方式 - 项目维护者：[您的名字] - 邮箱：[您的邮箱] - 问题反馈：请在GitHub Issues中提交 --- **注意**：本项目仅供学习和参考，生产环境使用请根据实际情况进行调整和优化。