基于easyUI实现系统日志管理
此文章是基于 EasyUI+Knockout实现经典表单的查看、编辑
一. 相关文件介绍
1. log.jsp：系统日志管理界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>日志管理</title> <%@ include file="/common/head.jsp"%> </head> <body> <div class="toolbar"> <a href="#" plain="true" class="easyui-linkbutton" icon="icon-arrow_refresh" title="刷新" data-bind="click:refreshClick">刷新</a> </div> <div id="condition" class="container_12" style="position:relative;height:50px;"> <div class="clear" style="height:13px;"></div> <div class="grid_1 lbl">日志日期</div> <div class="grid_2 val"><input type="text" data-bind="value:form.logDate" class="txtBox easyui-daterange"/></div> <div class="prefix_9" style="position:absolute;top:5px;height:0;"> <a id="search" href="#" class="buttonHuge button-blue" style="margin:0 15px;" data-bind="click:searchClick">查询</a> <a id="reset" href="#" class="buttonHuge button-blue" data-bind="click:clearClick">清空</a> </div> </div> <div id="tt" class="easyui-tabs"> <div title="系统日志" > <table data-bind="datagrid:system"> <thead> <tr> <th field="fileName" align="left" width="150" >日志文件 </th> <th field="fileSize" align="left" width="100" >文件大小 </th> <th field="id" align="center" width="150" formatter="formatsys_log" >操作 </th> </tr> </thead> </table> </div> </div> <script type="text/html" id="log-view-template"> <div id="logView" style="margin:5px 0;font-size:12px;white-space:nowrap;"> </div> </script> <%@ include file="/common/foot.jsp"%> <script type="text/javascript" src="viewModel/sys/log.js"></script> <script type="text/javascript"> using(['messager', 'dialog']); ko.bindingViewModel(new viewModel()); var formatsys_log = function (value) { var html = '<a href="javascript:;" onclick=\'view("' + value + '")\'><span class="icon icon-search"> </span>[查看]</a>'; html += '<a href="'+rootPath+'/sys/log!download.do?fileName='+value+'" style="margin-left:10px"><span class="icon icon-download"> </span>[下载]</a>'; return html; }; </script> </body> </html>
2. log.js：实现日志管理列表、功能，日志查看
function viewModel(){ var self = this; this.form = {logDate:ko.observable()}; this.system = { size: { w: 6, h: 123 }, url: rootPath+"/sys/log!getSystemLog.do", queryParams: ko.observable(), pagination: true }; this.refreshClick = function () { window.location.reload(); }; this.searchClick = function () { this.system.queryParams(ko.toJS(this.form)); }; this.clearClick = function () { this.form.logDate(""); this.searchClick(); } }; var view = function (id) { com.dialog({ title: "查看日志", width: 700, height: 500, maximizable: true, html: "#log-view-template", viewModel: function (w) { com.ajax({ type: "GET", url: rootPath+"/sys/log!view.do?fileName=" + id, success: function (d) { w.find("#logView").html(d); } }) } }); };
3. logController.java
package com.ims.web.controller.sys; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.InputStream; import java.io.OutputStream; import java.util.ArrayList; import java.util.Arrays; import java.util.HashMap; import java.util.List; import java.util.Map; import org.apache.commons.lang3.StringUtils; import org.apache.log4j.FileAppender; import org.apache.log4j.Logger; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.servlet.ModelAndView; import com.ims.common.DateUtil; import com.ims.common.FileUtil.FileAttr; import com.ims.common.FileUtil; @Controller @RequestMapping("sys") public class LogController extends SysBaseController{ @RequestMapping("log") public ModelAndView log(){ ModelAndView view = new ModelAndView("sys/log.jsp"); return view; } @RequestMapping("log!getSystemLog") public void getSystemLog(@RequestParam Map<String, String> params){ FileAppender appender = (FileAppender)Logger.getRootLogger().getAppender("roll"); String filePath = appender.getFile(); String logFileName = filePath.substring(filePath.lastIndexOf("/")+1, filePath.length()); File folders = new File(filePath.substring(0, filePath.lastIndexOf("/")+1)); String[] files = folders.list(); if(StringUtils.isNotBlank(params.get("logDate"))){ Map<String,String> date = DateUtil.getStartEndDate(params.get("logDate")); List<String> newFiles = new ArrayList<String>(); for(String fileName:files){ String temp = fileName; if(logFileName.equals(fileName)){ temp = fileName+"."+DateUtil.getCurrDate(); } temp = temp.substring(logFileName.length()+1, temp.length()) + " 00:00:00"; if(StringUtils.isNotBlank(date.get("startDate"))){ if(temp.compareTo(date.get("startDate"))<0){ continue; } } if(StringUtils.isNotBlank(date.get("endDate"))){ if(temp.compareTo(date.get("endDate"))>0){ continue; } } newFiles.add(fileName); } files = (String[])newFiles.toArray(new String[newFiles.size()]); } Map<String, Object> result = new HashMap<String, Object>(); result.put("total", files.length); Integer page = Integer.valueOf(params.get("page")); Integer rows = Integer.valueOf(params.get("rows")); files = Arrays.copyOfRange(files, (page-1)*rows, page*rows); List<FileAttr> fileList = new ArrayList<FileAttr>(); for(String fileName:files){ if(fileName!=null){ FileAttr fileAttr = new FileAttr(); fileAttr.setId(fileName); fileAttr.setFileName(fileName); File file = new File(folders.getAbsolutePath()+"\\"+fileName); fileAttr.setFileSize(file.length()/1024+" KB"); fileList.add(fileAttr); } } result.put("rows", fileList); ajaxJson(result); } @RequestMapping("log!view") public void view(String fileName){ FileAppender appender = (FileAppender)Logger.getRootLogger().getAppender("roll"); String filePath = appender.getFile(); File folders = new File(filePath.substring(0, filePath.lastIndexOf("/")+1)); String log = FileUtil.readFileByLines(folders.getAbsolutePath()+"\\"+fileName); ajaxJson(log); } @RequestMapping("log!download") public void download(String fileName){ try{ FileAppender appender = (FileAppender)Logger.getRootLogger().getAppender("roll"); String filePath = appender.getFile(); File folders = new File(filePath.substring(0, filePath.lastIndexOf("/")+1)); String path = folders.getAbsolutePath()+"\\"+fileName; File file = new File(path);// path是根据日志路径和文件名拼接出来的 String filename = file.getName();// 获取日志文件名称 InputStream fis = new BufferedInputStream(new FileInputStream(path)); byte[] buffer = new byte[fis.available()]; fis.read(buffer); fis.close(); response.reset(); // 先去掉文件名称中的空格,然后转换编码格式为utf-8,保证不出现乱码,这个文件名称用于浏览器的下载框中自动显示的文件名 response.addHeader("Content-Disposition", "attachment;filename=" + new String(filename.replaceAll(" ", "").getBytes("utf-8"),"iso8859-1")); response.addHeader("Content-Length", "" + file.length()); OutputStream os = new BufferedOutputStream(response.getOutputStream()); response.setContentType("application/octet-stream"); os.write(buffer);// 输出文件 os.flush(); os.close(); }catch(Exception e){ ajaxJson(STATUS_ERROR, "日志文件下载失败"); } } }
二. 效果图
1. 访问：http://localhost:8080/ims/sys/log.do，日志管理界面
2. 点击 查看
