第三阶段第三周笔记及代码

2020/7/13–第一天—动吧日志页面分析–day12

分页页面函数书写:js当前点击事件来触发函数

下午写查询的部分功能,点击查询:

1. 按钮点击事件注册

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

2. 定义事件处理函数

    function doQueryObjects(){
    	 //1.定义参数
    	 $("#pageId").data("pageCurrent",1);//设置当前页码值
    	 //2.定义请求url
    	 //3.发送异步请求
    	 doGetObjects();
     }

3. 在事件处理函数中基于用户的输入向服务端发异步请求

    	//1.2定义参数的方式2
    	var params={"pageCurrent":pageCurrent};
    	//获取用户输入的用户名
    	var uname=$("#searchNameId").val();
    	//向json格式的js对象中动态添加key,value;
    	if(uname)params.username=uname;//这里的key需要与服务端接收参数时使用的名字相同。
    	console.log("params",params);
  	 	var url="log/doFindPageObjects";
   		$.getJSON(url,params,doHandleQueryResponseResult);

4. 基于服务端的响应数据

on函数为jquery中的一个事件注册函数on函数语法:$(“选择器”).on(“事件”,“子元素选择器”[,数据],事件处理函数)

网页的断点调试方法需要多练练

json前端的一些写法

开始说删除:从删除按钮开始

1. click事件注册

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

2. 定义事件处理函数

     //向服务端发送异步请求执行删除操作
     function doDeleteObjects(){
    	 //1.1获取用户选中记录的id值并将其存储到数组
    	 var idArray=doGetCheckedIds();//[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("delete.params",params);
    	 //2.定义请求url
    	 var url="log/doDeleteObjects";
    	 //3.发送请求执行删除操作
    	 $.post(url,params,function(result){
    		 if(result.state==1){
    			 alert(result.message);
    			 //doGetObjects();//刷新，先这么写
    			 doRefreshAfterDeleteOK();
    		 }else{
    			 alert(result.message);
    		 }
    	 })
     }

3. 在事件处理函数 中或选中checkbox的id值(数据库的的主键值)让这些值异步提交到服务端进行更新参数以"1,2,3,4"这个字符串格式进行提交

     //获取选中记录的id值并将其存储到数组
     function doGetCheckedIds(){
    	 var idArray=[];//new Array();
    	 $("#tbodyId input:checkbox")
    	 .each(function(){//each函数表示迭代
    		 //$(this)代表input 类型为checkbox的对象
    		 if($(this).prop("checked")){//选中则布尔表达式为true
    			 idArray.push($(this).val())//将选中checkbox对象的值写入数组
    		 }
    	 });
    	 return idArray;
     }

接受数据采用数组,出现了一些行的形式,
4. 参数:var params={“ids”,“1,2,3,4”};

var params={"ids":idArray.toString()};//{"ids":"1,2,3,4,5"}

5. 删除后记得刷新

写好dao和.xml的时候进行一些单元测试

	   @Test
	   void testDeleteObject() {
		   int rows=sysLogDao.deleteObjects(10,12,14,15);
		   System.out.println("rows"+rows);
	   }

在服务器端写删除还是和以前一样service,serviceImpl,conterllor
但是在用户端书写需要编写js代码也是注册事件,提交函数,返回结果,等等

注册函数可以在原注册函数下接着写

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

全选和单选取消全选

::::::但是全选状态换页会导致全选被选中但是下面的元素没有被选中
全选checkbox对象上的事件注册(一般与状态相关的事件会用change)

$("#checkAll").change(doChangeTableBodyCheckboxState);

     //修改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);
     }

2020/7/14–第二天—动吧页面分析–day13

在 function doDeleteObjects(){的内部中添加功能函数
{
doRefreshAfterDeleteOk();点击上页下页全选删除后全选状态改变

doHandleQueryError(result.message)处理查询失败的情况
}
load函数整个页面都加载,无法获取局部的信息,可以在thymeleaf标签这里限定::#pageinationId

上午仅在log_list和page页面进行编写

thymeleaf是服务端技术

下午开始编写菜单代码(一对多多对一新建一张表)

rest风格(相同部分整合)

2020/7/15–第三天—动吧菜单添加页面----day14

上午:删除菜单按钮

问题1:hashmap散列

问题2:一个报错异常java.lang.IllegalArgumentException
答:检查当前执行的业务，其结果映射配置，是否将resultType写成了
resultMap。

问题3:

按照手册完成了菜单管理的删除功能,添加功能

下午:添加菜单按钮

添加菜单按钮和"save"按钮

1. Save的click按钮事件注册
2. 定义click事件的处理函数
3. 在事件处理函数中获取表单数据
4. 将表单数据异步提交给服务器端,执行并保存操作
   
   绑定异常:持久层业务出错也是其中之一

晚上回去了解>>>>ZTree

(2020/7/16星期四不上课)

2020/7/17–第四天—动吧菜单更新以及删除----day15

1. 菜单管理的上层菜单不在数据库中获取而在内存中获取(优化)
   获取属性的值,
   var id=$("bodytable").prop("id");varid=$(“body table”).attr(“id”);
2. 菜单管理里面的修改
   点击修改要从选择行中获取绑定的数据(当前行记录)
   将当前行记录绑定到mainContentId(因为编辑页面可以从此位置取数据)
   异步加载编辑页面,并在编辑页面中取#mainContentId位置绑定的数据进行呈现

角色管理设计说明

转换json格式的字符串的原理在test里面说明的
testJSON01和testJSON02

bean问题出现在.xml中的sql语句返回的类型中返回的类型全限定类名出现问题,不在那个位置了

角色删除

方案一:不直接删除而是将状态改为删除(现阶段用的最多的一种方式)
方案二:删除角色时判定角色是否有对应的关系数据,有不允许删除
方案三::删除角色时,将角色对应的关系数据(关系表中的)一起删除(相当于解除关系)

角色更新的save

获取页面上用户输入的表单数据
1)角色自身信息
2)角色菜单关系数据
2将表单数据异步提交到服务器
1)服务端要保存角色自身信息
2)服务端要保存角色菜单关系数据(role_id,menu_id)

roleld的值用来保存角色自身信息时的主键

角色更新分两部分
角色自身信息updateObject
菜单信息delete和insert

部门模块

部门模块和菜单模块相同直接拷贝过来然后在前端添加一个连接>>>注意改一下JsonResult和SysDept的全限定类名

在starter,html中添加doLoadUI(“load-dept-id”,“dept/dept_list”);

有个问题

   (function(){
	 doLoadUI("load-dept-id","dept/dept_list");
   })()
   //基于不同对象的点击事件执行资源加载操作
   function doLoadUI(id,url){
	   $("#"+id).click(function(){//click事件处理函数
           //jquery中的load函数为一个异步加载的ajax函数。
           //此函数用于在指定位置异步加载资源(并将返回的资源填充到这个指定位置)
	       $("#mainContentId").load(url);
	   })
   }
   //但是在Controller中
   @RestController
	@RequestMapping("/dept/")
	public class SysDeptController {
	@Autowired
	private SysDeptService sysDeptService;
	@RequestMapping("这里没有dept_list")//当然没有这事格式的问题
	}

doLoadUI(“load-dept-id”,“dept/dept_list”);前面是Controller后面是html页面

用户管理设计说明

2020/7/18–第五天–day16

角色更新和编辑