此文章是基于  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">&nbsp;</span>[查看]</a>';
html += '<a href="'+rootPath+'/sys/log!download.do?fileName='+value+'" style="margin-left:10px"><span class="icon icon-download">&nbsp;</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. 点击 查看

基于easyUI实现系统日志管理的更多相关文章

  1. 基于EasyUI Treegrid的权限管理资源列表

    1. 前言 最近在开发系统权限管理相关的功能,主要包含用户管理,资源管理,角色管理,组类别管理等小的模块.之前的Web开发中也用过jQueryEasyUI插件,感觉这款插件简单易用,上手很快.以前用到 ...

  2. 基于WebForm+EasyUI的业务管理系统形成之旅 -- ParamQueryGrid行、列合并(Ⅸ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划查询(Ⅷ)>,主要介绍通过报表工具数据钻取,获取施工计划详细信息. 这篇我们看看ParamQueryGrid[行 ...

  3. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划查询(Ⅷ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划安排>,主要介绍整个施工计划列表与编辑界面. 下面看看施工计划查询(ⅠⅡⅢ ⅣⅤⅥ Ⅶ Ⅷ) 一.施工计划查询 ...

  4. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划安排(Ⅶ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 首页Portal界面拖拽>,主要介绍首页随客户喜好安排区块位置,更好的实现用户体验. 这两天将项目中施工计划管理归纳总结 ...

  5. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 首页Portal界面拖拽(Ⅵ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 构建Web界面>,主要介绍系统界面布局.导出数据等. 本篇将介绍首页Portal界面拖拽. 一.首页Portal界面拖拽 ...

  6. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 构建Web界面(Ⅴ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 数据统计>,主要介绍系统数据统计所采用图形.报表工具. 本篇将如何构建Web界面以及新增.编辑.导出数据等功能. 一.在 ...

  7. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 数据统计(Ⅳ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 首页快捷方式>,主要介绍通过添加首页快捷方式,快速进入各个应用菜单功能. 将常用的菜单功能作为快捷方式,避免由于寻找诸多 ...

  8. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 首页快捷方式(Ⅲ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 登录窗口>,主要是介绍系统登录界面页面设计与代码. 最近刚做完施工计划安排设计,之后将分享出来,这个系列更新不是很快,望 ...

  9. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 登录窗口(Ⅱ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 系统设置>,主要是介绍系统浏览器在线下载安装,这些前期准备是非常重要的. 最近忙于将工程管理系统中各个模块,用业务流程方 ...

随机推荐

  1. [ 转 ] 为 phpstorm 自定义默认 Web 服务器

    phpstorm自带web 服务器,可以直接执行调试,这个之前的文章专门讲过,可以看下. 同时你也可以选择在phpstorm集成apache服务器,下面是我自己的亲测的步骤. 如何修改apache默认 ...

  2. jxl读取excel

    String path=""; String path2=""; File file = new File(path); File file2 = new Fi ...

  3. SQLServer XML

    OPENXML 参见:OPENXML (SQL Server) | Microsoft Docs SQL For XML 参见:FOR XML (SQL Server) | Microsoft Doc ...

  4. js 时间戳的转化,js 日期转成标准字符串,日期格式的相互转化

    1.时间的获取 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1 ...

  5. Shell检查程序是否正常,并显示出程序启动时间、执行时间

    项目中多个实例,而每个实例均启动一个程序,本脚本将多个程序统一进行监控,并支持文件配置 #!/bin/sh bin=$(cd ``;pwd) cd ${bin} ### 定义检查函数 chkProgr ...

  6. CentOS7 MongoDB安装及基本配置

    一.安装包的获取 1.创建文件: vi /etc/yum.repos.d/mongodb-org-4.0.repo 2.在上一步创建的文件中,写入如下内容: [mongodb-org-4.0] nam ...

  7. Verilog三段式状态机描述

    时序电路的状态是一个状态变量集合,这些状态变量在任意时刻的值都包含了为确定电路的未来行为而必需考虑的所有历史信息. 状态机采用VerilogHDL语言编码,建议分为三个always段完成. 三段式建模 ...

  8. 2016424王启元 Exp3免杀原理与实现

    基础问题回答 1.杀软是如何检测出恶意代码的? (1)基于特征码的检测 特征码是能识别一个程序是一个病毒的一段不大于64字节的特征串.如果一个可执行文件包含这样的特征码则被杀毒软件检测为是恶意代码. ...

  9. Mysql技术内幕笔记

    mysql由以下几个部分组成: 连接池组件 管理服务和工具组件 sql接口组价 查询分析器组价 优化器组价 缓存(cache)组价 插件式存储引擎 物理文件. 可以看出,MySQL数据库区别于其他数据 ...

  10. Node.js 文件夹目录结构创建

    第一次接触NodeJS的文件系统就被它的异步的响应给搞晕了,后来发现NodeJS判断文件夹是否存在和创建文件夹是还有同步方法的,但是还是想尝试使用异步的方法去实现. 使用的方法:fs.exists(p ...