日志模块客户端关键业务及代码实现2(PROJECT02_DAY05_01)

3.4.4 列表页面信息查询实现

• 业务描述及设计

当用户点击日志列表的查询按钮时，基于用户输入的用户名进行有条件的分页查询，并将查询结果呈现在页面。

• 关键代码设计与实现：

第一步：日志列表页面加载完成，在查询按钮上进行事件注册。代码如下：

$(".input-group-btn").on("click",".btn-search",doQueryObjects)

第二步：定义查询按钮对应的点击事件处理函数。代码如下：

function doQueryObjects(){
           //为什么要在此位置初始化pageCurrent的值为1?
           //数据查询时页码的初始位置也应该是第一页
           $("#pageId").data("pageCurrent",1);
           //为什么要调用doGetObjects函数？
           //重用js代码，简化jS代码编写。
           doGetObjects();
   }

第三步：在分页查询函数中追加name参数定义，代码如下：

function doGetObjects(){
           //debugger;//断点调试
           //1.定义url和参数
           var url="log/doFindPageObjects"
           // 请问data函数的含义是什么？(从指定元素上获取绑定的数据)
           //此数据会在何时进行绑定？(setPagination,doQueryObjects)
           var pageCurrent=$("#pageId").data("pageCurrent");
           //为什么要执行如下语句的判定，然后初始化pageCurrent的值为1
           //pageCurrent参数在没有赋值的情况下，默认初始值应该为1.
           if(!pageCurrent) pageCurrent=1;
           var params={"pageCurrent":pageCurrent};
           //为什么此位置要获取查询参数的值?
           //一种冗余的应用方法，目的时让此函数在查询时可以重用。
           var username=$("#searchNameId").val();
           //如下语句的含义是什么？动态在json格式的js对象中添加key/value,
           if(username) params.username=username;//查询时需要
           //2.发起异步请求
           //请问如下ajax请求的回调函数参数名可以是任意吗？可以,必须符合标识符的规范
       	   $.getJSON(url,params,function(result){
                   //请问result是一个字符串还是json格式的js对象？对象
                    doHandleResponseResult(result);
                 }
           );
   }

4. 日志管理删除操作实现

4.1 数据架构分析

当用户执行日志删除操作时，客户端与服务端交互时的基本数据架构，如图-10所示。

图-10

4.2 删除业务时序分析

客户端提交删除请求，服务端对象的工作时序分析，如图-11所示。

图-11

4.3 服务端关键业务及代码实现

4.3.1 Dao接口实现

• 业务描述及设计实现

数据层基于业务层提交的日志记录id，进行日志删除操作。

• 关键代码设计及实现：

在SysLogDao中添加基于id执行日志删除的方法。代码参考如下：

int deleteObjects(long...ids);

4.3.2 Mapper文件实现

• 业务描述及设计实现

在SysLogDao接口对应的映射文件中添加用于执行删除业务的delete元素，此元素内部定义具体的SQL实现。

• 关键代码设计与实现

在SysLogMapper.xml文件添加delete元素，关键代码如下：

<delete id="deleteObjects">
		delete from sys_logs
		<where>
			<choose>
				<when test="ids!=null and ids.length>0">
					<foreach collection="ids" separator="or" item="id">
						id=#{id}
					</foreach>
				</when>
				<otherwise>
					1 == 2
				</otherwise>
			</choose>
		</where>
	</delete>

说明:这里的choose元素也为一种选择结构，when元素相当于if，otherwise相当于else的语法。

4.3.3 Service接口及实现类

• 业务描述与设计实现

在日志业务层定义用于执行删除业务的方法，首先通过方法参数接收控制层传递的多个记录的id，并对参数id进行校验。然后基于日志记录id执行删除业务实现。最后返回业务执行结果。

• 关键代码设计与实现

第一步：在SysLogService接口中，添加基于多个id进行日志删除的方法。关键代码如下：

int deleteObjects(long...ids);

第二步：在SysLogServiceImpl实现类中添加删除业务的具体实现。关键代码如下：

@Override
public int deleteObjects(long...ids) {
     //1.判定参数合法性
     if(ids==null||ids.length==0)
            throw new IllegalArgumentException("请选择一个");
     //2.执行删除操作
     int rows=sysLogDao.deleteObjects(ids);
     //3.对结果进行验证
     if(rows==0)
             throw new ServiceException("记录可能已经不存在");
     //4.返回结果
     return rows;
}

4.3.4 Controller类实现

• 业务描述与设计实现

在日志控制层对象中，添加用于处理日志删除请求的方法。首先在此方法中通过形参接收客户端提交的数据，然后调用业务层对象执行删除操作，最后封装执行结果，并在运行时将响应对象转换为JSON格式的字符串，响应到客户端。

• 关键代码设计与实现

第一步：在SysLogController中添加用于执行删除业务的方法。代码如下：

	  @RequestMapping("doDeleteObjects")
      @ResponseBody
      public JsonResult doDeleteObjects(long...ids){
              sysLogService.deleteObjects(ids);
              return new JsonResult("delete ok");
      }

第二步：启动tomcat进行访问测试，打开浏览器输入如下网址：

http://localhost/log/doDeleteObjects?ids=1,2,3

4.4 客户端关键业务及代码实现

4.4.1 日志列表页面事件处理

• 业务描述及设计实现

用户在页面上首先选择要删除的元素，然后点击删除按钮，将用户选择的记录id异步提交到服务端，最后在服务端执行日志的删除动作。

• 关键代码设计与实现

第一步：页面加载完成以后，在删除按钮上进行点击事件注册。关键代码如下：

$(".input-group-btn")
           .on("click",".btn-delete",doDeleteObjects)

第二步：定义删除操作对应的事件处理函数。关键代码如下：

function doDeleteObjects(){
	//1.获取用户选中的 checkbox 对象的值
	var checkedIds=doGetCheckedIds();
	//2.对选中的记录 id 进行校验。
	if(checkedIds.length==0){
		alert("请先选中");
		return;
	}
	if(!confirm("确认删除吗?"))return;
	//3.定义向服务端传递请求参数对象，请求 url 对象
	//var params="ids="+checkedIds.toString();
	var params={"ids":checkedIds.toString()};//ids=1,2,3,4
	var url="log/doDeleteObjects";
	//4.发送异步请求执行删除操作，并基于返回结果进行页面刷新
	$.post(url,params,function(result){
		if(result.state==1){
			alert(result.message);
			doGetObjects();
		}else{
			alert(result.message);
		}
	});
}

第三步：定义获取用户选中的记录id的函数。关键代码如下：

//获取页面上用户选中的 tbody 中的 checkbox 对象的值
function doGetCheckedIds(){
	//1.定义数组，用于存储获取的选中记录 id 值。
	var array=[];
	//2.获取 tbody 对象中所有 checkbox 对象，
	//然后进行迭代将选中的 checkbox 的值存储到数组。
	$("#tbodyId input[type='checkbox']")//获取 checkbox
		.each(function(){//迭代
	if($(this).prop("checked")){
		array.push($(this).val());
	}
});
	//3.返回数组
	return array;
}

第四步：Thead中全选元素的状态影响tbody中checkbox对象状态。代码如下：

//thead 中全选 checkbox 对象的事件注册
$("#checkAll").change(doChangeTBodyCheckBoxState);


//修改 tboay 中 checkbox 对象的状态
function doChangeTBodyCheckBoxState(){
	//1.获取当前点击对象 checkbox 的状态
	var theadCheckBoxState=$(this).prop("checked");
	//2.修改 tbody 中 checkbox 对象状态
	$("#tbodyId input[type=checkbox]")
		.prop("checked",theadCheckBoxState);
}


function doGetObjects(){
	//第一行添加代码
	$("#checkAll").prop("checked",false);
}

第五步：Tbody中checkbox的状态影响thead中全选元素的状态。代码如下：

//tbody 中 checkbox 对象的事件注册
//$(".cBox").change(doChangeTHeadCheckBoxState); 不成立
$("#tbodyId").on("change",".cBox",doChangeTHeadCheckBoxState);


function doChangeTHeadCheckBoxState(){
	console.log("===doChangeTHeadCheckBoxState===");
	//1.定义变量标识，默认值为 true
	var flag=true;
	//2.获取所有 tbody 中 checkbox 对象的值，并进行逻辑与操作
	$("#tbodyId input[type='checkbox']")
		.each(function(){
			flag=flag&&$(this).prop("checked");
		});
	//3.修改 thread 中 checkbox 对象状态
	$("#checkAll").prop("checked",flag);
}