第三阶段第三周笔记及代码
2020/7/13–第一天—动吧日志页面分析–day12
分页页面函数书写:js当前点击事件来触发函数
下午写查询的部分功能,点击查询:
- 按钮点击事件注册
$(".input-group-btn")
.on("click",".btn-search",doQueryObjects)
- 定义事件处理函数
function doQueryObjects(){
//1.定义参数
$("#pageId").data("pageCurrent",1);//设置当前页码值
//2.定义请求url
//3.发送异步请求
doGetObjects();
}
- 在事件处理函数中基于用户的输入向服务端发异步请求
//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);
- 基于服务端的响应数据
on函数为jquery中的一个事件注册函数on函数语法:$(“选择器”).on(“事件”,“子元素选择器”[,数据],事件处理函数)
网页的断点调试方法需要多练练
json前端的一些写法
开始说删除:从删除按钮开始
- click事件注册
$(".input-group-btn")
.on("click",".btn-delete",doDeleteObjects);
- 定义事件处理函数
//向服务端发送异步请求执行删除操作
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);
}
})
}
- 在事件处理函数 中或选中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"}
- 删除后记得刷新
写好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"按钮
- Save的click按钮事件注册
- 定义click事件的处理函数
- 在事件处理函数中获取表单数据
- 将表单数据异步提交给服务器端,执行并保存操作
绑定异常:持久层业务出错也是其中之一
晚上回去了解>>>>ZTree
(2020/7/16星期四不上课)
2020/7/17–第四天—动吧菜单更新以及删除----day15
- 菜单管理的上层菜单不在数据库中获取而在内存中获取(优化)
获取属性的值,
var id= ( " b o d y t a b l e " ) . p r o p ( " i d " ) ; v a r i d = ("body table").prop("id"); var id= ("bodytable").prop("id");varid=(“body table”).attr(“id”); - 菜单管理里面的修改
点击修改要从选择行中获取绑定的数据(当前行记录)
将当前行记录绑定到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页面
用户管理设计说明![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f09c89c086a08596beb0d4b91f8f2cf9.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ceacfcbedb26e200af8fba67979f9ff0.png#pic_center)
2020/7/18–第五天–day16
角色更新和编辑