功能简介：
基于用户名查询信息：
在log_list中
$(".input-group-btn").on("click",".btn-search",doQueryObjects)
添加方法：
//处理查询按钮事件
function doQueryObjects(){
//1.定义参数
$("#pageId").data("pageCurrent",1);//设置当前页码值
doGetObjects();//注意log_list和page里面doGetObjects()是否有重复
}
在doGetObjects();中添加：
var uname=$("#searchNameId").val();
//这里的key需要和服务端接收的参数的名字相同
if(uname)params.username=uname;//向json格式js对象中动态添加key,value
向json格式中动态添加值
删除功能的实现
数据架构分析
删除业务时序分析
代码的实现
SysLogMapper.xml三种写法：
1）第一种写法：
<delete id="deleteObjects">
delete from sys_Logs
where id in
<foreach collection="ids" open="(" close=")" separator="," item="id">
#{id}
</foreach>
</delete>
2）第二种写法，从可靠性的角度分析,假如ids的值为null或长度为0时,SQL构建可能会出现语法问题，修改为：
<delete id="deleteObjects">
delete from sys_logs
<where >
<if test="ids!=null and ids.length>0">
id in
<foreach collection="array" open="(" close=")" separator="," item="id">
#{id}
</foreach>
</if>
or 1=2
</where>
</delete>
3）第三种写法，从SQL执行性能角度分析,一般在SQL语句中不建议使用in表达式,可以参考如下代码进行实现(重点是forearch中or运算符的应用)：
<delete id="deleteObjects">
delete from sys_logs
<where>
<choose>
<when test="ids!=null and ids.length>0">
id in
<foreach collection="array" open="(" close=")" separator="," item="id">
#{id}
</foreach>
</when>
<otherwise>
1=2
</otherwise>
</choose>
</where>
</delete>
SyslogDao中
/**
*基于多个id执行删除操作
* */
int deleteObjects(Integer...ids);
//int deleteObjects(@params("ids")Integer...ids);
SysLogService中：
/**
* 基于条件进行分页查询
* @param ids
* @return 删除的函数
*/
int deleteObjects(Integer...ids);
SysLogServiceImpl中：
@Override
public int deleteObjects(Integer... ids) {
// TODO Auto-generated method stub
//1.判定参数合法性
if(ids==null||ids.length==0)
throw new IllegalArgumentException("参数值无效");
//2.执行删除
int rows=sysLogDao.deleteObjects(ids);
//3.验证结果
if(rows==0)
throw new ServiceException("记录可能已经不存在！");
return rows;
}
SysLogController中;
@RequestMapping("doDeleteObjects")
@ResponseBody
public JsonResult doDeleteObjects(Integer... ids) {
sysLogService.deleteObjects(ids);
return new JsonResult("delete ok");
}
代码测试成功后显示：
前端代码：
log_list.html中,首先绑定事件：
//on函数为jquery中的一个事件注册函数（推荐）
//on函数语法：$(""选择器).on(“事件”，“子元素选择器”[,数据]，事件处理函数)
$(".input-group-btn")
.on("click",".btn-search",doQueryObjects)
.on("click",".btn-delete",doDeleteObjects)
基于代码实现：
//向服务端发送异步请求执行删除操作
function doDeleteObjects(){
//1.定义请求参数
//1.1获取用户选中记录的id值并将其存储到数组
var idArray=doGetChenckIds();//[1,2,3,4,5]
console.log("idArray",idArray);
//1.2判定是否选中
if(!idArray||idArray.length==0){
alert("你还没有选中需要删除的内容");
return;
}
//1.3给出提示确定删除吗？
if(!confirm("确定删除吗"))return;
//1.4构建请求参数
var params={"ids":idArray.toString()};//{"ids":"1,2,3,4,5"}
console.log("params",params);
//2.定义请求url
var url="log/doDeleteObjects";
//3.发送请求执行删除操作
$.post(url,params,function(result){
if(result.state==1){
alert(result.message);
doGetObjects();//刷新
}else{
alert(result.message);
}
})
}
//获取选中记录的id值并将其存储到数组中
function doGetChenckIds(){
var idArray=[];//new Array();
//$("#tbodyId input[type=checkbox]")
$("#tbodyId input:checkbox")
.each(function(){//each()函数表示迭代
//$(this)代表input类型为checkbox的值
if($(this).prop("checked")){//选中则布尔表达式为true
idArray.push($(this).val())
}
});
return idArray;
}
全选全不选事件：
事件的绑定：
//全选checkbox对象上的事件注册（一般与状态相关的事件用change）
$("#checkAll").change(doChangeTableBodyCheckBoxState);
//tbody中checkbox对象的事件注册
$("#tbodyId")
.on("change","input:checkbox",doChangeTableHeadCheckBoxState);
函数的实现：
//修改tbody中checkbox对象的状态
function doChangeTableBodyCheckBoxState(){
//1.获取全选checkbox对象的checked属性
//var flag=$(this).prop("checked");
var flag=$("#checkAll").prop("checked");
//2.设置tbody中checkbox对象的checked属性的值
$("#tbodyId input:checkbox").prop("checked",flag);
}
//基于tbody中checkbox对象的状态修改thead中checkbox对象状态
function doChangeTableHeadCheckBoxState(){
//1.获取tbody中checkbox对象的checked属性的值并进行逻辑与操作
var flag=true;
$("#tbodyId input:checkbox")
.each(function(){
flag=flag&&$(this).prop("checked");
})
//2.修改thead种checkbox对象的值
$("#checkAll").prop("checked",flag);
}
当一页上有全选，执行跳转后另一页全选状态消失
log_list中doHandleQueryResponseResult（）方法中：
最后一页执行删除跳转到前一页
删除以后的刷新操作
log_list中doDeleteObjects()方法：
当数据只有一页，执行全删除，要求错误信息打印在页面
doHandleQueryResponseResult方法中：
用浏览器清空div中内容：
作业
1.第一种写法,整个页面的引入：
2.只引入页面一部分内容
3.引入片段
thymeleaf中三种引入方式insert,replace,include的区别：
js的知识点
1.on函数
on函数为jquery中的一个事件注册函数（推荐）；on函数用于在指定html元素上注册事件，当点击html元素内部的子元素时可以触发事件处理。
on函数语法：$(“选择器”).on(“事件”，“子元素选择器”[,数据]，事件处理函数)
1.1on的点击事件注册
$(".input-group-btn")
.on("click",".btn-search",doQueryObjects)
.on("click",".btn-delete",doDeleteObjects)
1.2on的change事件注册
//tbody中checkbox对象的事件注册
$("#tbodyId")
.on("change","input:checkbox",doChangeHeaderCheckBoxState);
1.3同时注册多个
$("#pageId").on("click",".first,.last,.pre,.next",doJumpToPage);
2.文档就绪事件函数
//此函数是在页面加载完成后执行
$(function(){
doLoadUI("load-log-id","log/log_list");
//load-menu-id为加载的div的id,menu/menu_list为controller中的加载路径
doLoadUI("load-menu-id","menu/menu_list");
})
3.load函数的加载
jquery中load函数为一个异步加载的ajax函数
3.1此函数用于在指定位置异步加载资源(并将返回的资源填充到id为mainContentId的div中)
$("#mainContentId").load(url);
等效于：
$.get(url,function(result){
$("#mainContentId").html(result);
},"html")
3.2含有方法的加载
$("#pageId").load("doPageUI",function(){doGetObjects();});
等效于：
$("#pageId").load("doPageUI",doGetObjects);//load("请求路径",执行方法)，不要写成doGetObjects();
4.change事件函数
一般与状态相关的事件用change，例如：全选checkbox对象事件注册
$("#checkAll").change(doChangeTableCheckBoxState);
5.each函数
$("#tbodyId input:checkbox")
.each(function(){
flag=flag&&$(this).prop("checked");
})
6.参数形式的转换
var params={"ids":idArray.toString()};//将数组形式的参数[1,2,3]转化为{"ids":"1,2,3,4,5"}
7.树结构
树结构的引用方式：
1）复制包到static包下：
2）在需要呈现的页面上导入
<script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.extension.js"></script>
<script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="bower_components/treegrid/tree.table.js"></script>
3）在菜单列表页面，定义菜单列表配置信息，关键代码如下
var columns = [
{
field : 'selectItem',
radio : true
},
{
title : '菜单ID',
field : 'id',
align : 'center',
valign : 'middle',
width : '80px'
},
{
title : '菜单名称',
field : 'name',
align : 'center',
valign : 'middle',
width : '130px'
},
{
title : '上级菜单',
field : 'parentName',
align : 'center',
valign : 'middle',
sortable : true,
width : '100px'
},
{
title : '类型',
field : 'type',
align : 'center',
valign : 'middle',
width : '70px',
formatter : function(item, index) {
if (item.type == 1) {
return '<span class="label label-success">菜单</span>';
}
if (item.type == 2) {
return '<span class="label label-warning">按钮</span>';
}
}
},
{
title : '排序号',
field : 'sort',
align : 'center',
valign : 'middle',
sortable : true,
width : '70px'
},
{
title : '菜单URL',
field : 'url',
align : 'center',
valign : 'middle',
width : '160px'
},
{
title : '授权标识',//要显示的标题名称
field : 'permission',//json串中的key
align : 'center',//水平居中
valign : 'middle',//垂直居中
sortable : false //是否排序
} ];//格式来自官方demos -->treeGrid(jquery扩展的一个网格树插件)
4）定义异步请求处理函数
unction doGetObjects(){//treeGrid
//1.构建table对象(bootstrap框架中treeGrid插件提供)
var treeTable=new TreeTable(
"menuTable",//tableId
"menu/doFindObjects",//url
columns);
//设置从哪一列开始展开(默认是第一列)
//treeTable.setExpandColumn(2);
//2.初始化table对象(底层发送ajax请求获取数据)
treeTable.init();//getJSON,get(),...
}
5.）页面加载完成，调用菜单查询对应的异步请求处理函数
$(function(){
doGetObjects();
})
8.json格式的写法
8.1函数形式
$.getJSON(url,params,doHandleQueryResponseResult);
8.2
$.getJSON(url,params,function(result){
doHandleQueryResponseResult(result);
});
8.3源码形式：
$.ajax({
url:url,
dataType:"json",
data:params,
success:doHandleQueryResponseResult
});
$.ajax底层实现：
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
doHandleQueryResponseResult(JSON.parse(xhr.responseText));
}
};
xhr.open("Get","log/doFindPageObjects?pageCurrent=1",true);
xhr.send(null);
9.prop函数
pro为jquery中的一个获取属性值的函数，其语法为prop(propertyName[,propertyValue]);prop为property单词缩写
prop函数中假如只有propertyName则表示取值
prop函数中假如有propertyName和propertyValue则表示为属性赋值,例如prop(“class”,“first”)
9.1取值：
$("#checkAll").prop("checked");
9.2赋值：
$("#checkAll").prop("checked",false);
10.迭代获取
10.1
for(var i=0;i<records.legnth;i++){
tBody.append(doCreateRows(records[i]));
}
10.2
records.forEach((item)=>tBody.append(doCreateRows(item)));
11.创建对象
11.1
return `<tr>
<td><input type='checkbox' class='cBox' value=${item.id}></td>
<td>${item.username}</td>
<td>${item.operation}</td>
<td>${item.method}</td>
<td>${item.params}</td>
<td>${item.ip}</td>
<td>${item.time}</td>
</tr>`;
11.2
var tds = "<td><input type='checkbox' class='cBox' name='cItem' value='"+data.id+"'>"+data.id+"</td>"
+
"<td>" + data.username + "</td>" +
"<td>" + data.operation + "</td>" +
"<td>" + data.method + "</td>" +
"<td>" + data.params + "</td>" +
"<td>" + data.ip + "</td>" +
"<td>" + data.time + "</td>";
return tds;
12.页面的初始化
1）基于Jquery框架实现
$(".pageCurrent").html("当前页("+pageObject.pageCurrent+")");
2）原生的JS方式实现
document.querySelector(".pageCurrent").innerHTML=`当前页(${pageObject.pageCurrent})`;
13.data函数
data函数为jquery中的一个数据存储函数,每个dom对象都有一个这样的函数；
data函数语法:data(key[,value]),key和value由自己指定；
data函数只有key时表示取值，既有key,又有value表示存储值
1）存数据
$("#pageId").data("pageCurrent",pageObject.pageCurrent);
2）取数据
$("#pageId").data("pageCurrent");
14.controller中跳转页码的提取：
但是优先级低
//rest 风格（一种架构风格）的url，其语法结构{变量名}/{变量}
//@PathVariable 注解用于修饰方法参数，可以从rest风格的url中取和参数名对应的值
@RequestMapping("{module}/{moduleUI}")
public String doModuleUI(@PathVariable String moduleUI) {
return "sys/"+moduleUI;
}