优雅的SpringMvc+Mybatis应用（六）
第六期文章也到了，其实这应该算是第五期续的。毕竟上次的列表分页还没做。
后面可能还有几期，我们的仓库管理系统会结束的。按照老规矩，结束的时候肯定有项目总结解析。
项目github地址：https://github.com/pc859107393/SpringMvcMybatis
我的简书首页是：http://www.jianshu.com/users/86b79c50cfb3/latest_articles
上一期是：优雅的SpringMvc+Mybatis应用（五）
扫描下面二维码加入交流QQ群：
行走的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客户端。现在的仓库管理系统可以明显看到是为了实现而实现，至于所谓的程序设计，还有很多地方没使用。后面开发的时候，尽量使用程序设计的模式来实现。后面会专门针对这个仓库管理系统进行总结，好的不好的，都要一一找出来，在博客系统的实现上面尽量简单优越。
只有不断的审视自己，才能找到自己的不足，并且长期前进。
2016-10-30
网友评论