动吧项目总结(用户页面显示+分页管理)

动吧

服务端:
实体对象POJO
pojo封装了从数据库查询到的信息,此类中的属性和表中的字段有一定的映射关系,一行数据对应表中的一个字段

在这里插入图片描述

DAO层接口定义(持久层)
通过此对象给业务层提供日志数据访问
@Mapper
public interface SysLogDao {
1.定义GetCount方法用于按条件记录总数,基于总记录数可以计算总页数
username 查询条件 代表着查询哪个用户的日志信息 返回值是记录总数
int getRowCount(@Param(“username”) String username);
2.定义findPageObjects方法,基于此方法实现当前页记录的数据的查询操作,
username 查询条件 startIndex当前页的起始位置 pageSize当前页面大小


```sql
```java
List<SysLog> findPageObjects(
      @Param("username")String  username,
      @Param("startIndex")Integer startIndex,
      @Param("pageSize")Integer pageSize);
}
``

`

Mapper文件实现
基于DAO层接口创建的映射文件,执行SQL语句

```java
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

namespace指向的是Dao接口的全限定类名

1.添加sql标签,将sql语句中的共性操作提取出来,调用时基于定义的id进行调用
例:

```java
from sys_roles ```

2.提取出来的代码可以用于搜索框模糊查询,此处加判断,如果是查询所有的时候,如果服务端并没有传username进来那么username就是没有值就是null 则不会执行下面的模糊查询

3.基于用户名进行模糊查询

```java
 username like concat("%",#{username},"%")
        </if>
      </where>
</sql>
``` ``` ```

1.添加按条件统计记录总数的sql id为getRowCount
count(*)一列有多少行 返回值为int


```sql
<select id="getRowCount"
            resultType="int">
          select count(*) 
          from sys_roles
          <include refid="queryWhereId"/>
    </select>

**1.添加分页查询sql id为 findPageObjects
limit 分页查询**

```java

```sql
<select id="findPageObjects"
            resultType="com.cy.pj.sys.entity.SysRole">
         select *
         from sys_roles
         <include refid="queryWhereId"/>
order by createdTime desc
         limit #{startIndex},#{pageSize}    
</select>

动态拼接SQL
sql标签用于对sql元素中的共性操作进行提取,以便实现复用
Include标签是为了引入使用sql标签定义的元素
BO 业务对象(封装了业务层输出的业务逻辑的对象)
基于此对象封装业务执行结果,java中的对象可以简单的分为两大类一种是执行业务的对象,设计的关键在属性上,
比如:典型的POJO对象(VO BO DO),还有一种是执行业务的对象,设计的关键在方法上,比如典型的Controller(VO) Service(DO) Dao(DO)对象
@Data 生成getset方法(需要lombok插件)
@NoArgsConstructor 自动生成无参构造
@AllAegsConStructor 自动生成含参构造

```java
public class PageObject<T> implements Serializable {
private static final long serialVersionUID = 6780580291247550747L;//类泛型
    /**当前页的页码值*/
private Integer pageCurrent=1;
    /**页面大小*/
    private Integer pageSize=3;
    /**总行数(通过查询获得)*/
    private Integer rowCount=0;
    /**总页数(通过计算获得)*/
    private Integer pageCount=0;
    /**当前页记录*/
    private List<T> records;
public PageObject(){}
此处添加一个有参构造方法,为属性赋值
public PageObject(Integer pageCurrent, Integer pageSize, Integer rowCount, List<T> records){
super();
this.pageCurrent = pageCurrent;
this.pageSize = pageSize;
this.rowCount = rowCount;
this.records = records;

计算页面数的方法一(计算页面数可以在Service实现类计算完成,也可以在业务对象内计算)

// this.pageCount=rowCount/pageSize;
// if(rowCount%pageSize!=0) {
// pageCount++;
// }

计算页面数的方法二
this.pageCount=(rowCount-1)/pageSize+1;
}

Service接口及其实现类(业务层)
由于业务层是一个抽象接口,无法创建实例,我们要创建他得实现类,用来实例化,Service接口对象主要用于对业务数据进行校验,并借助Dao层对象完成对数据的分页查询操作

package com.cy.pj.sys.service;
public interface SysRoleService {
定义查询业务方法
PageObject<SysRole> findPageObjects(String name,Integer pageCurrent);
}

业务接口实现类:
业务接口实现类,对业务数据进行具体校验,并添加业务数据分页查询的具体操作

package com.cy.pj.sys.service.impl;
import org.springframework.util.StringUtils;
@Service
public class SysRoleServiceImpl implements SysRoleService {
@Autowired
private SysRoleDao sysRoleDao;
@Override
public PageObject<SysRole> findPageObjects(String name,Integer pageCurrent) {

//1.对参数进行校验
判断当前页码值是否合法 如果不合法则抛出异常

if(pageCurrent==null||pageCurrent<1)
throw new IllegalArgumentException("当前页码值无效");

//2.查询总记录数并进行校验
调用Dao层方法 查询记录总数,并定义变量接收同时对数据进行校验,如果数据为则说明数据库中没有此数据 抛出异常此处用到的为一个自定义异常

int rowCount=sysRoleDao.getRowCount(name);
if(rowCount==0)
throw new ServiceException("没有找到对应记录");

//3.查询当前页记录

int pageSize=2;
int startIndex=(pageCurrent-1)*pageSize;
List<SysRole> records=
sysRoleDao.findPageObjects(name,
startIndex, pageSize);

4.对查询结果进行封装,此处调用BO业务对象对数据进行封装(BO是有Service层呼出业务逻辑的对象)

return new PageObject<>(pageCurrent, pageSize, 
          rowCount, records);
}
}

(1)自定义异常
业务接口实现类里抛出的ServiceException是一个自己定义的异常,自定义异常需要extends RuntimeException异常,自定义异常可以对业务中的信息更好的反馈,自定义异常中的构造方法参考父类方法实现

package com.cy.pj.common.exception;
public class ServiceException extends RuntimeException {
private static final long serialVersionUID = 7793296502722655579L;
public ServiceException() {
super();
}
public ServiceException(String message) {
	super(message);
// TODO Auto-generated constructor stub
}
public ServiceException(Throwable cause) {
	super(cause);
// TODO Auto-generated constructor stub
} 
}

Controller(控制层)类实现
定义控制层对象,控制层对象主要负责处理请求和相应数据的处理,相应数据的处理需要通过VO对象封装.控制层可以分为两个一个专门用于进行页面加载,一个用于请求响应数据
(1)定义控制层对象VO
控制层对象VO基于此对象封装控制层响应结果 主要用于对控制层数据添加状态信息

package com.cy.pj.common.vo;
public class JsonResult implements Serializable {
private static final long serialVersionUID = -856924038217431339L;//SysResult/Result/R
/**状态码*/
private int state=1;//1表示SUCCESS,0表示ERROR
/**状态信息*/
private String message="ok";
/**正确数据*/
private Object data;
public JsonResult() {}
public JsonResult(String message){
this.message=message;
}
/**一般查询时调用,封装查询结果*/
public JsonResult(Object data) {
this.data=data;
}
/**出现异常时时调用*/
public JsonResult(Throwable t){
	this.state=0;
	this.message=t.getMessage();
}
public int getState() {
	return state;
}
public void setState(int state) {
	this.state = state;
}
public String getMessage()  {
	return message;
}
public void setMessage(String message) {
	this.message = message;
}
public Object getData() {
	return data;
}
public void setData(Object data) {
	this.data = data;
}
}

Controller层实现
1.实现页面的跳转

//rest风格(一种架构风格的url)语法结构{变量名}/{变量}
@PathVariable 注解用来修饰方法参数,可以从rest风格的url中取得和参数名对应的值
@RequestMapping("{module}/{moduleUI}")
	public String doModuleUI(@PathVariable String moduleUI) {
			return "sys/"+moduleUI;
}

2.处理客户端请求
客户端参数中的url对应着controller中的@RequestMapping(“url地址”)
通过Autowired注解注入对象
获取业务层实例并调用业务层方法,

@RequestMapping("/role/") 定义根路径映射
@RestController 将类交给spring框架管理,定义返回格式为JSON格式
public class SysRoleController {
@Autowired 注入目标对象
private SysRoleService sysRoleService;
添加菜单查询处理方法
@RequestMapping("doFindPageObjects")
public JsonResult doFindPageObjects(String name,Integer pageCurrent) {
return new JsonResult(
sysRoleService.findPageObjects(name,pageCurrent));
}
}

定义全局异常处理类
全局异常处理类对控制层可能出现的异常进行统一的处理
@ControllerAdvice 注解描述的类,springmvc会认为他是一个控制全局异常处理对象
@RestControllerAdvice 等于 @ControllerAdvice+@ResponseBody
@RestControllerAdvice //等效于@ControllerAdvice+@ResponseBody

public class GlobalExceptionHandler {
```java
      // @ExceptionHandler 注解描述的方法为异常处理方法(不是我们定的),
               *   此注解中定义的异常类型,为这个方法可以处理的异常类型,它可以处理
               *   此异常以及这个异常类型的子类类型的异常。
      // @param e 此参数用于接收具体异常对象,其类型一般与@ExceptionHandler
               *   注解中定义异常类型相同或者为其父类类型。
       // @return 封装了异常信息的对象
 
	  @ExceptionHandler(RuntimeException.class)
	  //告诉spring mvc最终将响应结果转换为json格式进行输出。
	 // @ResponseBody 
	  public JsonResult doHandleRuntimeException(RuntimeException e) {
		  //方法内部实现异常处理
		  //例如:输出异常,封装异常
		  //输出或打印异常
		  e.printStackTrace();
		  //封装异常信息
		  return new JsonResult(e);
	  }
}

客户端

1.添加点击事件事件处理函数clike,点击后加载指定页面)
在这里插入图片描述

2.角色页面加载完成后异步加载数据
在这里插入图片描述

3.异步加载页面数据函数定义


```java
function doGetObjects(){
//(1)定义像后端发送的url地址(控制层中的@RequestMapping("doFindPageObjects"))
var url="user/doFindPageObjects";
//(2)定义当前页页码值()
//data函数:
//data函数为jquery中的一个数据储存函数,每个对象中都有一个这样的函数
//data函数语法:data(key[,value]),key和value由自己指定
//data函数只有key时表示之取值,既有key又有value由自己指定
//取值:$("#pageId").data("key");
//赋值:$("#pageId").data("key",value);
var pageCurrent=$("#pageId").data("pageCurrent");
//(2)判断如果当前页码值为0或者页码值不合法那么将当前页码值定义为1
if(!pageCurrent)pageCurrent=1;
//(1)定义参数{"参数名":值}
var params={"pageCurrent":pageCurrent}
//(2)获取用户输入的值$(“id值”).val()值.trim()不能为空
params.username=$("#searchNameId").val().trim();
//(5)向客户端发送GET请求
$.getJSON(url,params,function(result){
//(6)定义函数 对服务端响应进行处理,并将请求中的参数作为参数传入
doHandleResponseResult(result);
});

4.响应处理函数进行处理
f

unction doHandleResponseResult(result){
(1)判断控制层VO对象中定义的状态信息是否正常
if(result.state==1){
(2)如果正常的话则执行设置body内的数据更新,并将服务端查询到的信息传入
doSetTableBodyRows(result.data.records);
(3)分页方法,将分页页面单独提取出来,以实现代码的复用
doSetPagination(result.data);
}else{
(4)如果参数不正常,打印服务端传过来的的异常处理方法
alert(result.message);}
}
(5) 值指定的tbody中更新数据即通过服务端返回的数据初始化页面
function doSetTableBodyRows(data){
(6)获取tbody对象,并清空内容
var tBody=$("#tbodyId");
(7)清空tBody中内容
tBody.empty();
(8)forEach函数item 将遍历到的数据存入到item => 对遍历到的数据操作 .append添加
data.forEach((item)=>tBody.append(doCreateRows(item)));
(9)doCreateRows(item))函数 创建tr td
function doCreateRows(item){
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>`;
}

分页模块

1.在加载完成用户查询分页显示之后,定义函数,更新分页页面数据及操作,在log_list页面中的相应处理函数中调用分页方法,并将分页页面单独提取出来,以实现代码的复用
在这里插入图片描述

2.将分页页面函数实体定义在单独的page.html中实现代码的复用

   function doSetPagination(pageObject){

2.1初始化记录总数,在传过来的参数中获取在服务器查询到的总记录,并更新在分页页面上

$(".rowCount").html("总记录数("+pageObject.rowCount+")");

2.2 初始化总页数也是从参数中获取
$(".pageCount").html(“总页数(”+pageObject.pageCount+")");
2.3初始化当前页

$(".pageCurrent").html("当前页("+pageObject.pageCurrent+")");

PS:用原生的JS方式实现更新参数

document.querySelector(".pageCurrent").innerHTML=`当前页(${pageObject.pageCurrent})`;  

2.4存储当前页码值和总页数 data函数
data函数为jquery中的一个数据存储函数,每个dom对象都有一个这样的函数。
data函数语法:data(key[,value]),key和value由自己指定
data函数只有key时表示取值,既有key,又有value表示存储值

$("#pageId").data("pageCurrent",pageObject.pageCurrent);
$("#pageId").data("pageCount",pageObject.pageCount);
}

2.为页码值按钮注册事件,此处使用on函数,on函数用于在指定的html元素上注册事件,当点击html元素内部的子元素时可以触发事件处理,此处使用的选择器为class选择器
pageid里绑定click点击事件,class值,点击事件触发后执行的函数

$("#pageId").on("click",".first,.last,.pre,.next",doJumpToPage);

3.定义当用户触发点击事件时要处理的函数

function doJumpToPage(){

3.1获取被点击对象的class值,基于被点击对象的class值进行对当前页的值得修改(PageCurrent)
获取被点击对象的class值需要先获取被点击对象

var clickObj=$(this);

基于被点击对象来获取class值
prop函数: prop函数为jquery中一个获取属性值的函数
prop语法: prop(propertyName属性名,[propertyValue属性值])
prop函数中假如只有属性名的话则表示取值,如果既有属性名又有属性值的话则表示赋值例:prop(“class”,first)
prop为property(属性)单词的缩写

var cls=clickObj.prop("class");

4.基于class属性的值来执行对当前页pageCurrent的更新
4.1获取当前页和总页数的当前值(data函数只有key时表示取值)

var pageCurrent=$("#pageId").data("pageCurrent");
var pageCount=$("#pageId").data("pageCount");

4.2基于条件修改当前页的值

 if(cls=="first"){

如果点击的class值为首页的话则当前页码值修改为1

pageCurrent=1
}else if(cls=="pre"&&pageCurrent>1){

如果class值为上一页并且当前页大于1的话则 当前页码值-1

pageCurrent--;
}else if(cls=="next"&&pageCurrent<pageCount){//下一页

如果class值为下一页并且当前页小于总页数的话 当前页码值+1

pageCurrent++;
}else if(cls=="last"){//最后一页

如果class值为最后一页的话name当前页码值则等于总页数也就是尾页

pageCurrent=pageCount;
}else{

都不成立则终止

return;
}

5.基于新的当前页码值进行新的查询,储存新的当前页码值

   $("#pageId").data("pageCurrent",pageCurrent);

5.1调用JS查询函数进行查询

	   doGetObjects();
   }

6.修改分页查询方法
使用data函数取出储存的新的当前页码值,并添加判断如果是第一次打开应当给当前页码值赋值为1,也就是当前页码值为空的时候

var pageCurrent=$("#pageId").data("pageCurrent");
  //pageCurrent参数在没有赋值的情况下,默认初始值应该为1.
  if(!pageCurrent) pageCurrent=1;
  var params={"pageCurrent":pageCurrent};
  1. List item

猜你喜欢

转载自blog.csdn.net/weixin_47409774/article/details/107608871