Day04-日志管理

日期：2020/4/13

#第一节课

##004日志管理

SQL日志表

#4.1添加日志生成Log相关的类

生成以下Java类：

  1. Log实体类
  2. LogMapper接口
  3. LogMapper.xml映射文件
  4. LogService接口
  5. LogServiceImpl实现类
  6. LogController控制器

修改Log类

  1. 将属性的LocalDateTime数据类型改成java.util.Date日期类 型
  2. 生成无参带参构造方法
        //无参构造方法
    public Log() {
    }

    /**
     * 添加日志时使用
     * @param content       日志内容
     * @param type          操作类型
     * @param loginname     操作人
     * @param userid        操作人id
     * @param loginip       登录ip
     * @param createtime    创建时间
     */
    public Log(String content, String type, String loginname, Integer userid, String loginip, Date createtime) {
        this.content = content;
        this.type = type;
        this.loginname = loginname;
        this.userid = userid;
        this.loginip = loginip;
        this.createtime = createtime;
    }

SystemConstant

 /**
     * 登录操作
     */
    String LOGIN_ACTION="登录操作";
    /**
     * 注销操作
     */
    String LOGOUT_ACTION="注销操作";
    /**
     * 查询操作
     */
    String SEARCH_ACTION="查询操作";
    /**
     * 更新操作
     */
    String UPDATE_ACTION="更新操作";
    /**
     * 添加操作
     */
    String ADD_ACTION="添加操作";
    /**
     * 删除操作
     */
    String DELETE_ACTION="删除操作";
记录登录日志信息
修改UserController控制器代码，记录登 录方法的日志
image-20191211153226216
//记录日志
//内容，操作类型，登录人，登录人Id,登录人IP地址，操作时间
Log log = new Log("用户登录",SysteConstnt.LOGIN_ACTION,
                  loginname+"-"+loginUserVo.getUser().getName(),loginUserVo.getUser().getId(),
                  request.getRemoteAddr(),new Date());
logService.save(log);
查询日志
修改SystemController
    /**
     * 日志管理页面
     * @return
     */
    @RequestMapping("/toLogManager")
    public String toLogManager() {
        return "system/log/logManager";
    }
注意这个路径不能修改，因为要和数据库的href对应
创建logManager.html
在templates/resources/system下创建logManager.html（请参考提供的素材）
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>日志管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="/resource/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/resource/css/public.css" media="all" />
</head>
<body class="childrenBody">
<!-- 查询条件开始-->
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form" >
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">日志类型</label>
                    <div class="layui-input-inline">
                        <select name="type" id="search_type">
                            <option value="">请选择日志类型</option>
                            <option value="登录操作">登录操作</option>
                            <option value="添加操作">添加操作</option>
                            <option value="查询操作">查询操作</option>
                            <option value="删除操作">删除操作</option>
                            <option value="修改操作">修改操作</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">登录名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="loginname" id="loginname" class="layui-input searchVal" placeholder="请输入登录名称" />
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="startTime" id="startTime" class="layui-input searchVal" placeholder="开始时间" />
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="endTime" id="endTime" class="layui-input searchVal" placeholder="结束时间" />
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block" style="text-align: center;">
                    <button type="button" class="layui-btn"><span class="layui-icon layui-icon-search"></span>查询</button>
                    <button type="reset" class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
                </div>
            </div>
        </form>
    </blockquote>
</form>
<!-- 查询条件结束-->


<!-- 数据表格开始 -->
<div>
    <table class="layui-hide" id="logTable" lay-filter="logTable"></table>
    <!-- 表格工具栏 -->
    <div id="logToolBar" style="display: none;">
        <button type="button" lay-event="batchDelete" class="layui-btn layui-btn-sm layui-btn-danger">
            <span class="layui-icon layui-icon-delete"></span>批量删除
        </button>
    </div>
</div>
<!-- 数据表格结束 -->

<script type="text/javascript" src="/resource/layui/layui.js"></script>
<script type="text/javascript">
    layui.use();
</script>
</body>
</html>
渲染日期控件

<script type="text/javascript">
    layui.use(['jquery','form','table','layer','laydate'],function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        //初始化时间选择器
        laydate.render({
            elem:'#startTime',//绑定渲染的元素
            type:'datetime'//控制选择类型
        });
        laydate.render({
            elem:'#endTime',//绑定表单元素中的ID属性值
            type:'datetime'//控件类型，默认为date
        })
    })
</script>
渲染表格控件
        //渲染数据表格
        var tableIns = table.render({
            elem: '#logTool',
            url:'/sys/log/loglist',
            toolbar:'#logToolBar',//开启头部工具栏，并为其绑定左侧模板，批量删除
            title:'用户操作日志数据表',
            height:'full-180',
            page:true,
            cols:[ [
                {type:'checkbox',fixed:'left'},
                {field: 'id',title:'ID',align:'center'},
                {field: 'loginname',title:'登陆名称',align:'center'},
                {field: 'type',title:'日志类型',align:'center'},
                {field: 'content',title:'日志内容',align:'center'},
                {field: 'loginip',title:'登录地址',align:'center'},
                {field: 'createtime',title:'登录时间',align:'center'},
            ] ]
        })

image-20191211170438720
创建LogVo
package com.bdqn.sys.vo;

import com.bdqn.sys.entity.Log;
import org.springframework.format.annotation.DateTimeFormat;

import java.util.Date;

/**
 * 日志扩展类
 */
public class LogVo extends Log {
    private Integer page;//当前页码
    private Integer limit;//每页显示数量

    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date startTime;//开始时间
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date endTime;//结束时间

    public Integer getPage() {
        return page;
    }

    public void setPage(Integer page) {
        this.page = page;
    }

    public Integer getLimit() {
        return limit;
    }

    public void setLimit(Integer limit) {
        this.limit = limit;
    }

    public Date getStartTime() {
        return startTime;
    }

    public void setStartTime(Date startTime) {
        this.startTime = startTime;
    }

    public Date getEndTime() {
        return endTime;
    }

    public void setEndTime(Date endTime) {
        this.endTime = endTime;
    }
}
修改LogController
package com.bdqn.sys.controller;


import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.bdqn.sys.entity.Log;
import com.bdqn.sys.service.LogService;
import com.bdqn.sys.utils.DataGridViewResult;
import com.bdqn.sys.utils.JSONResult;
import com.bdqn.sys.utils.SystemConstant;
import com.bdqn.sys.vo.LogVo;
import org.apache.commons.lang3.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.Arrays;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author KazuGin
 * @since 2019-12-11
 */
@RestController
@RequestMapping("/sys/log")
public class LogController {


    @Resource
    private LogService logService;

    @RequestMapping("/loglist")
    public DataGridViewResult findLogList(LogVo logVo){
        //创建分页对象，并指定当前页码及每页显示数量
        IPage<Log> page = new Page<Log>(logVo.getPage(),logVo.getLimit());
        //设置查询条件
        QueryWrapper<Log> queryWrapper = new QueryWrapper<Log>();
        //调用分页查询方法
        logService.page(page,queryWrapper);
        //返回数据
        return new DataGridViewResult(page.getTotal(),page.getRecords());
    }
}
MyBatisPlusConfig
在com.bdqn.sys.config包下创建mybatis-plus分页插件配置类
package com.bdqn.sys.config;

import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.transaction.annotation.EnableTransactionManagement;

@Configuration//标记该类是一个配置类
@EnableTransactionManagement//开启事务管理
@MapperScan(basePackages = {"com.bdqn.sys.dao"})//加载mapper接口所在的包
public class MyBatisPlusConfig {


    /**
     * 注入分页插件
     * @return
     */
    @Bean
    public PaginationInterceptor paginationInterceptor(){
        return new PaginationInterceptor();
    }

}
模糊查询
在页面中value属性是中文的，获取type，在layui里面，form要提交，name属性要跟实体类属性相同，因为参数是LogVo类型
添加lay-submit和lay-filter
表格重载
        //绑定模糊查询监听事件
        //绑定模糊查询监听事件
        //form是var定义的,on是监听事件
        //其中:submit()是Layui中form表单的提交事件
        //doSearch是lay-filter的属性值
        form.on("submit(doSearch)", function(data) {
            //sys/log/list?type=登录操作&loginname= &starttime= &endtime=
            console.log(data)
            console.log(data.field);
            tableIns.reload({
                where:data.field,//额外参数,?后面的参数
                page:{
                    curr:1//当前页码
                }
            });
            return false;//关闭跳转页面
        })

isnotBlok只能放字符串，不用在前面加！了
package com.igeek.sys.controller;


import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.igeek.sys.entity.Log;
import com.igeek.sys.service.LogService;
import com.igeek.sys.util.DataGridViewResult;
import com.igeek.sys.vo.LogVo;
import org.apache.commons.lang3.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author zhj
 * @since 2020-04-13
 */
@RestController
@RequestMapping("/sys/log")
public class LogController {

    @Resource
    private LogService logService;

    @RequestMapping("/loglist")
    public DataGridViewResult findLogList(LogVo logVo){
        //创建分页对象，并指定当前页码及每页显示数量
        IPage<Log> page = new Page<Log>(logVo.getPage(),logVo.getLimit());
        //设置查询条件
        QueryWrapper<Log> queryWrapper = new QueryWrapper<Log>();
        //登录名模糊查询
        queryWrapper.like(StringUtils.isNotBlank(logVo.getLoginname()),"loginname",logVo.getLoginname());
        //操作类型
        queryWrapper.eq(StringUtils.isNotBlank(logVo.getType()),"type",logVo.getType());
        //开始时间
        queryWrapper.ge(logVo.getStartTime()!=null,"createtime",logVo.getStartTime());
        //结束时间
        queryWrapper.le(logVo.getEndTime()!=null,"createtime",logVo.getEndTime());
        //设置排序
        queryWrapper.orderByDesc("createtime");//登录时间降序
        //调用分页查询方法
        IPage<Log> logIPage = logService.page(page, queryWrapper);
        //返回数据
        return new DataGridViewResult(logIPage.getTotal(),logIPage.getRecords());
    }
}
批量删除日志
首先要监听按钮
        //监听数据表格的头部工具栏时间
        //步骤1：头部工具栏按设置lay-event属性
        //步骤2：绑定表格的监听事件,反是没加#的都是监听Lay-filter的值
        //步骤3：case:lay-event属性image-20191211171132973
        table.on("toolbar(logTable)",function (obj) {
            switch (obj.event) {
                case "batchDelete":
                    alert(obj.event);
                    //调用批量删除的方法
                    batchDelete();//批量删除
                    break;
            }
        })
获取选中行
//批量删除方法
image-20191211171222450
       //批量删除方法
        function  batchDelete() {
            //获取选中行
            var checkStatus = table.checkStatus('logTable'); // 即为基础参数 lay-filter的值
            console.log(checkStatus);
            console.log(checkStatus.data); //获取选中行的数据
            //获取选中的数量
            var length = checkStatus.data.length;
            console.log(length);//获取选中行数量，可作为是否有选中行的条件
            if(length>0){
                //提示是否删除
                layer.confirm('确定要删除这'+length+'条数据吗', {icon: 3, title:'提示'}, function(index){
                    //获取选中行的数据
                    var checkData = checkStatus.data;
                    //声明数组，保存选中行的ID
                    var idArr = [];
                    //循环
                    for(var i=0;i<length;i++){
                        idArr.push(checkData[i].id)
                    }
                    //转换
                    var ids = idArr.join(",");
                    //发送删除请求
                    $.post("/sys/log/delete",{"ids":ids},function (result) {
                        //判断是否成功
                        if(result.success){
                            //删除成功后刷新数据
                            tableIns.reload();
                        }
                        //弹出提示信息，
                        layer.msg(result.message);
                    },"json");
                    //关闭提示框
                    layer.close(index);
                });
            }else{
                //提示没有选择
                // layer.alert("请选择要删除的行！",{icon:0})
                layer.msg("请选择要删除的行！",{time:2000})
            }
            console.log(checkStatus.isAll ) //表格是否全选
        }
修改SystemConstant
    /**
     * 删除成功
     */
    JSONResult DELETE_SUCCESS = new JSONResult(true,"删除成功");
    /**
     * 删除失败
     */
    JSONResult DELETE_ERROR = new JSONResult(false,"删除失败");
    /**
     * 添加成功
     */
    JSONResult ADD_SUCCESS = new JSONResult(true,"添加成功");
    /**
     * 添加失败
     */
    JSONResult ADD_ERROR = new JSONResult(false,"添加失败");
    /**
     * 修改成功
     */
    JSONResult UPDATE_SUCCESS = new JSONResult(true,"修改成功");
    /**
     * 修改失败
     */
    JSONResult UPDATE_ERROR = new JSONResult(false,"修改失败");

LogController
    @RequestMapping("/delete")
    public JSONResult delete(String ids){
        try {
            //将字符串拆分成数组
            String[] idStr = ids.split(",");
            //判断是否删除成功
            if(logService.removeByIds(Arrays.asList(idStr))){
                //删除成功
                return SystemConstant.DELETE_SUCCESS;
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        //删除失败
        return SystemConstant.DELETE_ERROR;
    }
修改页码，要添加回调函数image-20191211171119099
logManager.html
    //判断当前页码是否大于1
    //三个参数随便取 res:当前页数据，curr:当前页码，count:数据总量
    //当面页码>1，说明 还是第一页
    //当前数据 == 0 ，说明没数据
            //回调函数
            done:function (res,curr,count) {
                //判断当前页码是否大于1
                //三个参数随便取 res:当前页数据，curr:当前页码，count:数据总量
                //当面页码>1，说明 还是第一页
                //当前数据 == 0 ，说明没数据
                if(curr>1 && res.data.length == 0){
                    //当前页码-1
                    var pageValue = curr-1;
                    tableIns.reload({
                        //修改页码
                        page:{curr:pageValue}
                    })
                }
            }















            

            
posted @ 
2020-04-20 11:55 
zhj-unqiuely 
阅读(169) 
评论(0) 
 
收藏 
举报