一、页面的加载
0.业务分析
1.点击日志管理呈现日志列表页面
1）注册点击事件
2）定义事件处理函数
3）在事件处理函数中发送异步请求，加载页面并进行数据呈现
2.呈现日志列表页面的位置为mainContentId
3.将log_list.html(位置/templates/pages/sys)显示到mainContentId中
4.log_list.html页面加载完成后，需加载page.html页面和数据
页面跳转：点击日志管理异步加载log_list.html页面，log_list.html页面异步加载page.html页面
1. 数据库表结构设计
日志管理模块业务：需要记录用户在什么时间什么地点做了什么事情
所以日志模块的字段需要有：用户的登陆名，用户所做的操作（执行了什么方法，请求了什么参数），所用的时间（什么时间执行的操作，执行操作所用的时长）
1 CREATE TABLE `sys_logs` (
2 `id` bigint(20) NOT NULL AUTO_INCREMENT,
3 `username` varchar(50) DEFAULT NULL COMMENT '登陆用户名',
4 `operation` varchar(50) DEFAULT NULL COMMENT '用户操作',
5 `method` varchar(200) DEFAULT NULL COMMENT '请求方法',
6 `params` varchar(5000) DEFAULT NULL COMMENT '请求参数',
7 `time` bigint(20) NOT NULL COMMENT '执行时长(毫秒)',
8 `ip` varchar(64) DEFAULT NULL COMMENT 'IP地址',
9 `createdTime` datetime DEFAULT NULL COMMENT '日志记录时间',
10 PRIMARY KEY (`id`)
11 ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='系统日志';2. 页面跳转处理 PageController.java
项目中的所有页面处理，都放在PageController中（com.cy.pj.sys.controller）
日志模块的页面跳转：1.首先显示首页样式
2.显示日志管理模块的列表页面
3.显示日志模块列表页面下面的分页页面
1 @Controller
2 @RequestMapping("/")
3 public class PageController {
4 //localhost:80/doIndexUI
5 @RequestMapping("doIndexUI")
6 public String doIndexUI() {
7 return "starter";//首页页面
8 }
9 /**基于此方法返回日志列表页面(记住此页面并不是完整页面)*/
10 @RequestMapping("log/log_list")
11 public String doLogUI() {
12 return "sys/log_list";
13 }
14 /**基于此方法返回分页页面元素
15 * @throws InterruptedException */
16 @RequestMapping("doPageUI")
17 public String doPageUI(){
18 //Thread.sleep(5000);
19 return "common/page";
20 }
21 }首先访问首页页面starter.html，通过localhost:80/doIndexUI网址访问首页页面
然后点击日志管理时，需要显示日志页面，日志页面包括日志列表页面和日志分页页面两部分
sys/log_list为日志列表页面，common/page为分页页面
3. starter.html(首页)加载日志列表页面
点击日志管理，显示相应的日志列表页面，需要进行局部刷新，所以要是用异步加载
1 <script type="text/javascript">
2 //此函数是在页面加载完成以后执行
3 (function(){
4 doLoadUI("load-log-id","log/log_list");
5 })()
6 //基于不同对象的点击事件执行资源加载操作
7 function doLoadUI(id,url){
8 $("#"+id).click(function(){//click事件处理函数
9 //jquery中的load函数为一个异步加载的ajax函数。
10 //此函数用于在指定位置异步加载资源(并将返回的资源填充到这个指定位置)
11 $("#mainContentId").load(url);
12 })
13 }
14 </script>(function(){})()函数是在页面加载完成之后执行和$(function(){})函数功能一致
日志管理的id值为load-log-id，对日志管理进行点击事件处理，然后异步加载资源
load函数为jQuery中的一个异步加载的ajax函数，此函数用于在制定位置异步加载资源，并将返回的资源填充到指定的位置（mainContentId）中
$("#load-log-id").click(function(){
$("#mainContentId").load("log/log_list");
})
其中log/log_list为页面跳转中的地址
4. log_list.html加载分页列表页面
1 $(function(){
2 $("#pageId").load("doPageUI");
3 });在pageId的位置加载分页列表页面，代码写在日志列表页面中，有首页加载log_list页面，log_list页面加载分页页面。
二、数据的加载
0. 业务分析
1.显示日志数据（在数据库中的数据）
2.显示总记录数，总页数的值，显示当前页显示的数据为第几页
3.点击首页进入第一页，点击尾页进入最后一页，点击上一页查看当前页的上一页数据，点击下一页查看当前页的下一页数据
4.点击全选按钮后，下面的复选框也全被选中。当所有的复选框都被选中后，取消其中一个复选框的选中效果，全选的复选框被取消
1. 日志列表数据呈现
1.1 构建实体对象 Sys_Log
1 /**
2 * 此对象主要用于封装数据库提取的数据或者向数据库写入的数据
3 * 此对象中的属性建议和表中字段有对应的映射关系(名字，类型)
4 * 建议：所有用于封装数据的对象都建议实现序列化接口(Serializable)
5 * 1)序列化：将对象转换为字节的过程称之为对象序列化
6 * 2)反序列化：将字节转换为对象的过程称之为反序列化
7 * 3)应用场景：对对象进行缓存，将对象进行钝化(写入文件)，将对象通过网络进行传输
8 */
9 @Data
10 public class SysLog implements Serializable{
11 //对象在序列化和反序列化时会基于此id进行数据处理。
12 //将对象序列化时会将这个id作为版本写入到字节中。
13 //将字节反序列化会从字节中提取这个版本id然后和类中的版本id进行比对，一致则进行反序列化。
14 private static final long serialVersionUID = -1592163223057343412L;
15 private Integer id;
16 //用户名
17 private String username;
18 //用户操作
19 private String operation;
20 //请求方法
21 private String method;
22 //请求参数
23 private String params;
24 //执行时长(毫秒)
25 private Long time;
26 //IP地址
27 private String ip;
28 //创建时间
29 private Date createdTime;
30
31 }
pojo类用于封装数据库提取的数据或者向数据库中写入数据
pojo类与数据库中的字段名，类型都一一对应
所有用于封装的对象都建议使用实现序列化接口（Serializable）
1.2 分页字段的封装 PageObject
1 /**
2 * 基于此对象封装业务执行结果
3 * 在Java语言，可以简单将内存中的对象分为两大类：
4 * 1)存储数据的对象(设计的关键在属性上)-典型的POJO对象(VO,BO,DO)
5 * 2)执行业务的对象(设计的关键在方法上)-典型的controller,service,dao
6 */
7 @Data
8 @NoArgsConstructor
9 @AllArgsConstructor
10 public class PageObject<T> implements Serializable{//pojo中的bo对象,new PageObject<SysLog>
11 private static final long serialVersionUID = -3130527491950235344L;
12 /**总记录数(从数据库查询出来的)*/
13 private Integer rowCount;
14 /**总页数(基于rowCount和页面大小计算出来的)*/
15 private Integer pageCount;
16 /**页面大小(每页最多可以呈现的记录总数)*/
17 private Integer pageSize;
18 /**当前页码值(客户端传递)*/
19 private Integer pageCurrent;
20 /**当前页记录,list集合中的T由PageObject类上定义的泛型决定*/
21 private List<T> records;
22 public PageObject(Integer rowCount, Integer pageSize, Integer pageCurrent, List<T> records) {
23 super();
24 this.rowCount = rowCount;
25 this.pageSize = pageSize;
26 this.pageCurrent = pageCurrent;
27 this.records = records;
28 //计算总页数的方法一:
29 //this.pageCount=this.rowCount/this.pageSize;
30 //if(this.rowCount%this.pageSize!=0)pageCount++;
31 //计算总页数的方法二：
32 this.pageCount=(rowCount-1)/pageSize+1;
33 }
34 }
PageObject用于封装分页操作，因为不光是日志管理模块要用上分页操作，所有的模块都要用，所以要使分页集合要具有通用性，PageObject,records要使用
注意区分存储数据的对象（pojo），执行业务的对象（service,controller,dao）
1.3 数据层接口对象 Dao SysLogDao
1 /**
2 * 基于条件查询用户行为日志记录总数
3 * @param username 查询条件
4 * @return 查询到的记录总数
5 */
6 int getRowCount(String username);
7 /**
8 * 基于条件查询当前页记录
9 * @param username 查询条件
10 * @param startIndex 当前页数据的起始位置(用于limit 子句)
11 * @param pageSize 当前页面大小(每页最多显示多少条记录)
12 * @return 查询到的记录
13 */
14 List<SysLog> findPageObjects(String username,
15 Integer startIndex,Integer pageSize);
16 }
日志管理模块查询日志记录总数时需要判断输入框中是否有
查询当前页面数据的功能，查询当前页面数据需要使用几个条件：1.输入框中是否填写了用户名
2.从那一页开始展示数据
3.当前页显示多少条数据
1.4 基于Dao接口创建映射文件
1.5
1.6
1.7
