欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

DB旅游生态系统-03-日志管理-客户端代码实现

程序员文章站 2022-04-10 09:16:03
客户端页面事件分析客户端页面流转分析图当用户点击首页日志管理时,其页面流转分析如图-8所示:日志列表信息呈现业务描述与设计实现日志分页页面加载完成以后,向服务端发起异步请求加载日志信息,当日志信息加载完成需要将日志信息、分页信息呈现到列表页面上。第一步:分页页面加载完成,向服务端发起异步请求log_list.html1.日志列表页面加载完成 -------- log_list.html2.加载分页页面 ---------- “doPageUI”3.加载用户日志信息-------do...

客户端页面事件分析

客户端

DB旅游生态系统-03-日志管理-客户端代码实现

页面流转分析图

当用户点击首页日志管理时,其页面流转分析如图-8所示:
DB旅游生态系统-03-日志管理-客户端代码实现

日志列表信息呈现

业务描述与设计实现
日志分页页面加载完成以后,向服务端发起异步请求加载日志信息,当日志信息加载完成需要将日志信息、分页信息呈现到列表页面上。

第一步:分页页面加载完成,向服务端发起异步请求

log_list.html
1.日志列表页面加载完成 -------- log_list.html
2.加载分页页面 ---------- “doPageUI”
3.加载用户日志信息-------doGetObjects(); -------Ajax请求发送
4.定义回调函数,处理服务端的响应结果--------doHandleQueryResponseResult(result)
5.将异步响应结果呈现在table的tbody位置-----doSetTableBodyRows(records)
6.创建每行中的td元素,并填充具体业务数据—doCreateRows(item)

  • 当日志列表页面加载完成以后,加载分页页面
 $(function(){
    	//debugger
    	//当日志列表页面加载完成以后,加载分页页面。
        // $("#pageId").load("doPageUI",function(){//资源加载完成以后执行
    	   //异步加载用户行为日志信息
    	  // doGetObjects();
        // });
    	//上面写法的简化形式
    	$("#pageId").load("doPageUI",doGetObjects);//不要写成doGetObjects()
    	// doGetObjects();
    	}
  • 开启ajax异步任务,按条件加载用户行为日志信息

    data函数
     ————————————————————————————————
    data函数为jquery中的一个数据存储函数,每个dom对象都有一个这样的函数。
    data函数语法:data(key[,value]),key和value由自己指定
    data函数只有key时表示取值,既有key,又有value表示存储值
    $("#pageId").data("pageCurrent",pageObject.pageCurrent);
    $("#pageId").data("pageCount",pageObject.pageCount);
    

    val()函数 (类似于js中的value属性)
     ————————————————————————————————
    获取或设置表单项元素的value值(input/select/option/textarea)
    $("input").val() -- 获取所有input元素中的第一个input元素的value值
    $("input").val(值) -- 为所有的input元素设置value值
    
function doGetObjects(){
    	debugger
    	//1.定义请求参数
    	var pageCurrent=$("#pageId").data("pageCurrent");
    	if(!pageCurrent)pageCurrent=1;//pageCurrent没有值时,设置默认值为1
    	//1.1定义参数的方式1
    	//var params="pageCurrent=1";
    	//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);
    	//2.定义请求url
    	var url="log/doFindPageObjects";
    	//3.发送异步请求处理响应结果
    	//$.getJSON(url,params,function(result){
    		//doHandleQueryResponseResult(result);
    	//});
    	//如上方法的简写形式
    	$.getJSON(url,params,doHandleQueryResponseResult);
    	}
    	
 //getJSON函数内部的实现是如下形式
	/*$.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);
	*/
  • 处理查询结果
function doHandleQueryResponseResult(result){//result为json格式的js对象
    	//console.log("result",result);
    	//console.log("result.state",result.state);
    	//console.log("result.data",result.data);//对应服务端的pageObject
    	//console.log("result.data.records",result.data.records);//对应服务端查询到的用户日志
    	if(result.state==1){//state==1表示是正常的响应数据
    		//将result.data.records呈现在log_list.html的tbody位置
    		doSetTableBodyRows(result.data.records);
    		//将result.data中的分页信息呈现在page.html指定位置
    		}else{
    		alert(result.message);
    }
  • 更新table对象的tbody位置的内容

     添加子元素
    ————————————————————————————————
    $parent.append( $child ) -- 父元素调用方法添加子元素
    $("body").append( "<div>我是新来的...</div>" ); -- 往body元素内部追加一个div子元素
    
function doSetTableBodyRows(records){
    	//1.获得tbody对象并清空原有内容
    	var tBody=$("#tbodyId");
    	tBody.empty();
    	//2.迭代records记录并将其追加到tbody中
    	//方法1
    	/*
    	for(var i=0;i<records.legnth;i++){
    		tBody.append(doCreateRows(records[i]));
    	}
    	*/
    	//方法2:
    	records.forEach((item)=>tBody.append(doCreateRows(item)));
    }
  • 基于记录创建行(tr)对象
function doCreateRows(item){
    	//debugger
    	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>`;
    }

DB旅游生态系统-03-日志管理-客户端代码实现
DB旅游生态系统-03-日志管理-客户端代码实现![在这里插入图片描述](https://img-blog.csdnimg.cn/20200716154643972.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODA1MjE2MQ==,size_16,color_FFFFFF,t_70

分页数据信息呈现

关键代码实现步骤

1.在page.html页面中定义doSetPagination方法(实现分页数据初始化)
2.分页页面page.html中注册点击事件
3.定义doJumpToPage方法(通过此方法实现当前数据查询)
4.修改分页查询方法

第一步: 初始化分页信息

page.html==

html()函数 (类似于js中的innerHTML属性)
————————————————————————————————
用于获取或设置元素的内容,比如为div、span、p、h1~h6、table、tr、td、form等元素设置内容
$("div").html() -- 获取所有div中的第一个div的内容
$("div").html("xxxx") -- 为所有div设置内容

1.始化数据-------html
2.绑定数据(为后续对此数据的使用提供服务)------存数据
存储当前页码值–pageCurrent 和 总页数–pageCount

function doSetPagination(pageObject){
	   console.log("pageObject",pageObject);
	   //1.初始化总记录数
	   $(".rowCount").html("总记录数("+pageObject.rowCount+")");
	   //2.初始化总页数
	   $(".pageCount").html("总页数("+pageObject.pageCount+")");
	   //3.初始化当前页
	   //基于Jquery框架实现
	   $(".pageCurrent").html("当前页("+pageObject.pageCurrent+")");
	   //原生的JS方式实现
	   //document.querySelector(".pageCurrent").innerHTML=`当前页(${pageObject.pageCurrent})`;  
       
	   //存储当前页码值和总页数
	   //data函数为jquery中的一个数据存储函数,每个dom对象都有一个这样的函数。
	   //data函数语法:data(key[,value]),key和value由自己指定
	   //data函数只有key时表示取值,既有key,又有value表示存储值
	   $("#pageId").data("pageCurrent",pageObject.pageCurrent);
	   $("#pageId").data("pageCount",pageObject.pageCount);
   
   }   

page.html

第二步:注册点击事件

 on函数
————————————————————————————————
 查询按钮事件注册
	 //on函数为jquery中的一个事件注册函数(推荐)
	 //on函数语法:$("选择器").on("事件","子元素选择器"[,数据],事件处理函数)
	 $(".input-group-btn")
	 .on("click",".btn-search",doQueryObjects)
	 .on("click",".btn-delete",doDeleteObjects);
	 //全选checkbox对象上的事件注册(一般与状态相关的事件会用change)
	 $("#checkAll").change(doChangeTableBodyCheckboxState);
	 //tbody中checkbox对象的事件注册
	 $("#tbodyId")
	 .on("change","input:checkbox",doChangeTableHeadCheckboxState)
});
     // $(function(){
	   //on函数用于在指定html元素上注册事件,当点击html元素内部的子元素时可以触发事件处理
	   //$(".pagination").on("click",".first,.last,.pre,.next",doJumpToPage);
	   $("#pageId").on("click",".first,.last,.pre,.next",doJumpToPage);
   //})

第三步: 定义doJumpToPage方法

page.html

1.获取被点击对象
   var clickObj=$(this);
   
2. 获取被点击对象的class属性的值
  var cls=clickObj.prop("class")

prop()函数 – 用于获取或设置元素的属性值
—————————————————————————————————————
$("input[type='checkbox']").prop("checked")
 // 获取input复选框的选中状态, 返回true表示复选框为选中状态,返回false表示复选框为取消选中状态
$("input[type='checkbox']").prop("checked", true)

// 设置所匹配的复选框元素为选中状态
 $("#inp").prop("name"); //获取id为inp元素的name属性值, 返回useranme
$("#inp").prop("name","user"); //为id为inp的元素设置name属性值, name属性值就会变成user
function doJumpToPage(){
	   //1.获取被点击对象的class属性的值?(为什么)
	   //1.1获取被点击对象。
	   var clickObj=$(this);
	   //1.2获取被点击对象的class属性的值?(使用什么方法获取)
	   //pro为jquery中的一个获取属性值的函数,其语法为prop(propertyName[,propertyValue]);
	   //prop函数中假如只有propertyName则表示取值
	   //prop函数中假如有propertyName和propertyValue则表示为属性赋值,例如prop("class","first")
	   var cls=clickObj.prop("class");//prop为property单词缩写
	   console.log("cls",cls);
	   //2.基于class属性的值,执行pageCurrent的更新。
	   
	   //2.1获取pageCurrent,pageCount的当前值.
	    var pageCurrent=$("#pageId").data("pageCurrent");//只有key表示取值
	    var pageCount=$("#pageId").data("pageCount");
	    console.log("pageCurrent",pageCurrent);
	    console.log("pageCount",pageCount);
	   //2.2基于条件修改pageCurrent的值
	   if(cls=="first"){//首页
		   pageCurrent=1
	   }else if(cls=="pre"&&pageCurrent>1){//上一页
		   pageCurrent--;
	   }else if(cls=="next"&&pageCurrent<pageCount){//下一页
		   pageCurrent++;
	   }else if(cls=="last"){//最后一页
		   pageCurrent=pageCount;
	   }else{
		   return;
	   }
	   console.log("pageCurrent",pageCurrent);
	   //3.基于新的pageCurrent值执行新的查询。
	   //3.1存储新的pageCurrent的值。
	   $("#pageId").data("pageCurrent",pageCurrent);
	   //3.3调用JS函数执行查询
	   doGetObjects();
   }

本文地址:https://blog.csdn.net/weixin_48052161/article/details/107377783