[手把手教程][JavaWeb]优雅的SpringMvc+Mybatis应用（二）

第二期文章也到了，其实这应该算是第一期续的。毕竟上次的列表分页还没做。

上一期是：[手把手教程][JavaWeb]优雅的SpringMvc+Mybatis应用（一）

java学习交流

 

行走的java全栈

工具

• IDE为idea16
• JDK环境为1.8
• gradle构建，版本：2.14.1
• Mysql版本为5.5.27
• Tomcat版本为7.0.52
• 流程图绘制（xmind）

本期目标

• 列表分页

列表分页

前面很早就说了列表分页，一直没怎么做，这一次就做一个登录的主机信息的分页。

首先我们分析一下我们的功能设定：

• 记录基本主机信息
  • 操作系统
  • IP地址
  • 访问的浏览器内核
• Session的Id
• 发生时间
• 其他信息

关于上面的东西，我们可以预设很多字段，唯一的注意的地方是我这边把记录行为日志的表做了个自增的ID。我这边是所有的请求目前都是加入了信息记录，实际项目中可不能这么搞（根据需求搞事情，搞事情，搞事情）。

既然我们都说过我们是记录用户登录信息的列表，那么我们需要先获取用户的请求内部相关的信息。也就是说我们的这个信息获取是基于用户请求设定的，那么解决思路就是从拦截器来实现。

既然上面我们分析了需要记录的信息，那么接着的思路应该是什么呢？

• 根据数据需求建表
• 完成存储数据业务
  • Dao → Service → HandlerInterceptor（拦截器）
• 单元测试
  • 因为我前面提过，我们尽量把service作为简单的数据驱动，也就是说不涉及到复杂事务，我们尽量写简单的service。
  • 简单的service情况下， 我们一个service对应一个dao，则一定程度上可以少写一点单元测试==、

日志获取大概流程图如下所示：

ssm应用六-后台主页-日志采集流程

日志列表输出大概流程图如下所示：

ssm应用六-后台主页-分页列表流程

具体的一些细节的东西没必要追究，先把数据库表建立起来，数据库：warehouse，建表代码如下：

 

 CREATE TABLE `user_action_log` (
 `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '自增ID',
 `login_id` varchar(20) DEFAULT NULL COMMENT '登录ID',
 `session_id` varchar(45) NOT NULL COMMENT '访问session的ID\r\n',
 `time` datetime DEFAULT NULL COMMENT '操作时间',
 `ip_addr_v4` varchar(15) DEFAULT NULL COMMENT 'ipV4地址',
 `ip_addr_v6` varchar(128) DEFAULT NULL COMMENT 'ipv6地址\r\n',
 `os_name` varchar(20) DEFAULT NULL COMMENT '操作系统名称',
 `os_version` varchar(20) DEFAULT NULL,
 `bro_name` varchar(20) DEFAULT NULL COMMENT '浏览器名称',
 `bro_version` varchar(20) DEFAULT NULL COMMENT '浏览器版本',
 `request_body` varchar(60) DEFAULT NULL COMMENT '请求体信息',
 `description` varchar(100) DEFAULT NULL COMMENT '操作描述',
 `other` varchar(150) DEFAULT NULL COMMENT '其他描述',
 `method` varchar(10) DEFAULT NULL COMMENT 'HTTP请求方法',
 PRIMARY KEY (`id`)
 ) ENGINE=InnoDB AUTO_INCREMENT=109 DEFAULT CHARSET=utf8 COMMENT='行为日志表';

我们数据库建表完成后，只需要写对应的Dao层，按照我们前面的思路，那就是对应着写Bean → Dao → Service。然后Service提供给其他地方调用。

既然如此，我们先实现我们的Bean和Dao层，因为我们在项目中使用了Mybatis这个持久化框架，所以我们需要去实现Mybatis的Mapper文件对应Dao层的接口就行，具体的代码如下：

 

<!--下面是Bean：UserActionLog-->
public class UserActionLog implements Serializable {

    private long id;
    private String loginId, sessionId, ipAddrV4, ipAddrV6, osName, osVersion, broName, broVersion, requestBody, description, other, method;
    private Date time;
    //省略get和set以及toString方法
}

<!--下面是Dao层：ActionLogDao.java-->
public interface ActionLogDao extends Dao<UserActionLog> {

    int add(UserActionLog userActionLog);

    UserActionLog findOneById(Serializable Id);

    /**
     * 分页查询
     * @param offset    起始位置
     * @param limit     每页数量
     * @return
     */
    List<UserActionLog> findAll(@Param("offset") int offset, @Param("limit") int limit);
}

<!--下面是mapper：ActionLogDao.xml-->
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.acheng1314.dao.ActionLogDao">
    <!--增加语句-->
    <insert id="add" parameterType="cn.acheng1314.domain.UserActionLog">
        INSERT INTO
        `user_action_log`
        (`login_id`,`session_id`,`time`,`ip_addr_v4`,`ip_addr_v6`,`os_name`,`os_version`,`bro_name`,`bro_version`,`request_body`,`description`,`other`,`method`)
        VALUES
        (#{loginId},#{sessionId},#{time},#{ipAddrV4},#{ipAddrV6},#{osName},#{osVersion},#{broName},#{broVersion},#{requestBody},#{description},#{other},#{method})
    </insert>
    
    <!--分页列表：offset起始位置 limit每一页数据，DESC倒序排列-->
    <select id="findAll" resultType="cn.acheng1314.domain.UserActionLog" >
        SELECT
            *
        FROM
            `user_action_log`
        ORDER BY
            `id`
        DESC
        LIMIT #{offset}, #{limit}
    </select>
</mapper>

上面我们可以看到Dao层基本上是简单的插入和分页查询，因为使用了Mysql数据库，所以我们使用 Select···Limit 起始位置,每页数量 这种方式进行列表查询。因为我们是需要查看最近信息，所以查询列表的数据是倒序排列的。

现在我们的Dao层完成了，我们需要接着完成Service层实现外层调用的接口。Service层代码如下：

 

@Service("actionLogService")
public class ActionLogServiceImpl implements ActionLogService {

    @Autowired
    private ActionLogDao actionLogDao;

    private UserActionLog userActionLog;

    public void add(HttpServletRequest request) {
        //获取请求参数集合
        Map<String, String[]> params = request.getParameterMap();
        String queryString = "";
        for (String key : params.keySet()) {
            String[] values = params.get(key);
            for (int i = 0; i < values.length; i++) {
                String value = values[i];
                queryString += key + "=" + value + "&";
            }
        }


        userActionLog = new UserActionLog();
        userActionLog.setMethod(request.getMethod());   //获取请求方式
        if (request.getHeader("x-forwarded-for") == null) { //获取请求IP
            userActionLog.setIpAddrV4(request.getRemoteAddr());
        } else {
            userActionLog.setIpAddrV4(request.getHeader("x-forwarded-for"));
        }
        userActionLog.setOther(request.getHeader("User-Agent"));    //获取user-agent
        userActionLog.setSessionId(request.getSession().getId());   //获取用户操作的sessionID，必须
        userActionLog.setDescription(request.getRequestURI());  //获取访问的地址
        if (!StringUtils.isEmpty(queryString)) userActionLog.setRequestBody(queryString);   //参数集合内容不为空存入数据库

        try {
            UserAgent agent = new UserAgent(request.getHeader("User-Agent"));   //载入user-agent
            userActionLog.setOsName(agent.getOperatingSystem().getName());  //设定os名称
            userActionLog.setBroName(StringUtils.isEmpty(agent.getBrowser().getName()) ? "" : agent.getBrowser().getName()); //设定浏览器名称
            userActionLog.setBroVersion(StringUtils.isEmpty(agent.getBrowserVersion().getVersion()) ? "" : agent.getBrowserVersion().getVersion());    //设定浏览器版本
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            actionLogDao.add(userActionLog);    //UserAgent信息能否获取到，我们都需要存入数据库。
        }

    }

    @Deprecated
    public void add(UserActionLog userActionLog) throws Exception {
        //其实在这里我们应该直接调用这个方法来实现功能。毕竟我们的原则是Service层是数据驱动服务。但是我们在这里写，也能实现功能
    }

    public List<UserActionLog> findAll(int pageNum, int pageSize) {
        //因为数据库内容是从第一条出的数据，所以我们查询的 起始位置 = (页码-1) * 条数 + 1；
        pageNum -= 1;
        return actionLogDao.findAll(pageNum * pageSize + 1, pageSize);
    }
}

好了，到现在我们的ActionLogServiceImpl也完成了。按照我们的需求来说，我们要在所有的请求上面加上一层访问日志监控，同时我们需要对外提供接口方便我们的查看数据。具体代码如下：

 

<!-- 下面的是拦截器：LoginHandlerInterceptor.java -->
public class LoginHandlerInterceptor extends HandlerInterceptorAdapter {
    String NO_INTERCEPTOR_PATH = ".*/((login)|(reg)|(logout)|(code)|(app)|(weixin)|(static)|(main)|(websocket)).*";       //不对匹配该值的访问路径拦截（正则）
    @Autowired
    ActionLogServiceImpl service;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // TODO Auto-generated method stub
        String path = request.getServletPath();
        if (!path.matches(".*/((static)|(login)|(reg)).*")) service.add(request); //不包含静态资源和登陆注册的请求
        if (path.matches(NO_INTERCEPTOR_PATH)) {    //匹配正则表达式的不拦截
            return true;
        } else {    //不匹配的进行处理
            try {
                if (request.getSession().getAttribute("userInfo") == null) { //session中是否存在用户信息，不存在则是未登录状态
                    response.sendRedirect(request.getContextPath() + "/mvc/login");
                    return false;
                }
            } catch (IOException e) {
                response.sendRedirect(request.getContextPath() + "/mvc/login");
                e.printStackTrace();
                return false;
            }
        }
        return true;    //默认是不拦截···当然具体的还看一些需求设计之类的
    }
}

<!-- 下面的是行为日志的调用接口：ActionLogController.java -->
@Controller
@RequestMapping("/actionLog")
public class ActionLogController {
    @Autowired
    ActionLogService actionLogService;

    @RequestMapping(value = "/findLogList"
            , produces = "application/json; charset=utf-8")
    @ResponseBody
    public Object findLog(@Param("pageNum") int pageNum, @Param("pageSize") int pageSize) {
        if (pageNum <= 0) { //错误页码默认跳转到第一页
            pageNum = 1;
        }
        if (pageSize <= 0) {    //错误数据长度默认设置为10条
            pageSize = 10;
        }

        List<UserActionLog> result = actionLogService.findAll(pageNum, pageSize);
        ResponseObj<UserActionLog> responseObj = new ResponseObj<UserActionLog>();
        if (result == null || result.size() == 0) {
            responseObj.setCode(ResponseObj.EMPUTY);
            responseObj.setMsg("查询结果为空");
            return new GsonUtils().toJson(responseObj);
        }
        responseObj.setCode(ResponseObj.OK);
        responseObj.setMsg("查询成功");
        responseObj.setData(result);
        return new GsonUtils().toJson(responseObj);
    }
}

上面设置完成后，我们运行项目，先输入错误的网址，大家会看到它先跳转到登录界面（因为现在的用户信息位空，所以默认需要用户登录），登录成功后，我们在浏览器中输入：

 

http://localhost:8080/actionLog/findLogList?pageNum=1&pageSize=10
//因为我在Controller中没有配置具体的请求方法，那么我们这里gte和post都可以获取数据

可以得到返回的json数据：

 

{
    "code": 1,
    "msg": "查询成功",
    "data": [
        {
            "id": 212,
            "sessionId": "A65E46FA47CBA4385FEA67594632FE2A",
            "ipAddrV4": "127.0.0.1",
            "osName": "Windows 10",
            "broName": "Microsoft Edge 14",
            "broVersion": "14.14393",
            "description": "/mvc/home",
            "other": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393",
            "method": "GET"
        }
    ]
}

然后我们可以设置其他的页码和条数测试，均可以通过，所以我们的分页的接口已经完成。但是，我们这样直接显示json肯定是不友好的，我们还需要找个地方显示，我把它显示在首页的默认位置，下一期再单独拿出一个页面来实现，具体如图：

ssm应用六-后台主页-最近访问列表截图

首先我们需要先把以前列表找到，在home.jsp中如下：

 

<table class="am-table   am-text-nowrap">
    <thead>
        <tr>
            <th>#</th>
            <th>项目名称</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>状态</th>
            <th>责任人</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>1</td>
        <td>Adminto Admin v1</td>
        <td>01/01/2016</td>
        <td>26/04/2016</td>
        <td><span class="label label-danger">已发布</span></td>
        <td>Coderthemes</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Adminto Frontend v1</td>
            <td>01/01/2016</td>
            <td>26/04/2016</td>
            <td><span class="label label-success">已发布</span></td>
            <td>Adminto admin</td>
        </tr>

这就是以前的代码片段，我们不需要说什么精通前端，但是最基本的能看懂，能百度到解决方案也是不错的。

注意：由于妹子UI封装了列表，然后我在js中要追加列表内容的时候，始终找不到Body一直报错null。解决办法是给tbody加上ID，然后直接给它追加内容。

我们先删除原来tbody的内容，然后对应着格式js添加,如下：

 

$("#log-table-body").append(    //log-table-body是我们列表的body的ID
    "<tr><td>" + data.data[i].id + "</td><td>"
    + data.data[i].ipAddrV4 + "</td><td>01/01/2016</td><td>"
    + data.data[i].osName + "</td><td><span class=\"label label-danger\">"
    + data.data[i].description + "</span></td><td>"
    + data.data[i].sessionId + "</td><td>"
    + data.data[i].broName + "</td></tr>");
//注意：格式（标签结构）一定要和以前的一样，否则列表会走样的==

我们知道应该怎么追加列表条目了，现在我们需要的是实现追加。按照代码结构观察我们可以发现，我们要想实现数据自动装载到页面上面，我们需要让程序顺序执行就对了。但是前面我们的JS是写在头部的，如果说自动执行肯定会找不到控件，所以我们需要让自动加载在页面完成后加载。如下：

 

</body>
<!-- 注意了，我这里是把自动执行的js代码放到 html加载完成后的 -->
<script type="application/javascript">
    $.ajax({
        type: "GET",
        url: '<%=request.getContextPath()%>/actionLog/findLogList?pageNum=1&pageSize=10',
        dataType: 'json',   //当这里指定为json的时候，获取到了数据后会自己解析的，只需要 返回值.字段名称 就能使用了
        cache: false,
        success: function (data) {
            if (data.code == 1) {
                for (var i = 0; i < 10; i++) {
                    $("#log-table-body").append("<tr><td>" + data.data[i].id + "</td><td>"
                            + data.data[i].ipAddrV4 + "</td><td>01/01/2016</td><td>"
                            + data.data[i].osName + "</td><td><span class=\"label label-danger\">"
                            + data.data[i].description + "</span></td><td>"
                            + data.data[i].sessionId + "</td><td>"
                            + data.data[i].broName + "</td></tr>");
                }
            }
        }
    });
</script>

---

总结：

• 日志记录
• 列表输出
• 数据库查询分页
• web页面追加数据
• js位置对web页面的影响

---

仓库管理系统，应该快要完结了，后面做完整的博客后端+web前端(模版)+Android客户端。现在的仓库管理系统可以明显看到是为了实现而实现，至于所谓的程序设计，还有很多地方没使用。后面开发的时候，尽量使用程序设计的模式来实现。后面会专门针对这个仓库管理系统进行总结，好的不好的，都要一一找出来，在博客系统的实现上面尽量简单优越。

只有不断的审视自己，才能找到自己的不足，并且长期前进。

欢迎一起学习进步！！！