基于easyUI完成系统日志管理

此文章是依照  EasyUI+Knockout落成经典表单的查阅、编辑

EasyUI, 

一. 有关文件介绍

  1. log.jsp:系统日志管理界面

EasyUI 1EasyUI 2

<!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 + '")\'>&nbsp;[查看]</a>';
            html += '<a href="'+rootPath+'/sys/log!download.do?fileName='+value+'" style="margin-left:10px">&nbsp;[下载]</a>';
            return html;
        };
    </script>
 </body>
</html>

View Code

  

  2. log.js:完毕日志管理列表、功效,日志查看

EasyUI 3EasyUI 4

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

View Code

  3. logController.java

EasyUI 5EasyUI 6

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, "日志文件下载失败");
        }
    }
}

View Code

 

二. 效果图

  1. 访问:http://localhost:8080/ims/sys/log.do,日志管理界面

EasyUI 7

 

  2. 点击 查看

EasyUI 8