您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
03-分页查询-分析(自定义泛型实现分页查询及element plus分页组件整合)
发布时间：2024-12-13 22:15:11编辑：雪饮阅读（）
-
其实这里所谓的分析我觉得是没有什么必要的，主要核心就是分页sql中
开始索引=(当前页面-1)*每页显示条数。
这个写过php的应该是很熟悉了。
那么这里主要的反而是自定义泛型类，因为分页里面比如有个List类型的属性是应该返回数据列表的，但是实际上不同的实体类，该List就是对应不同的实体类的list，那么如果定死这个泛型类型为某个实体类的泛型反而不妥，这就要通过该分页类的本身就是泛型类将该类构造的时候就动态传递泛型则更利于封装。
那么所以我们的自定义泛型的分页实体类则如：
package com.pojo;
import java.util.List;
public class PagingBean<T> {
int total;
List<T> list;
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public List<T> getList() {
return list;
}
public void setList(List<T> list) {
this.list = list;
}
@Override
public String toString() {
return "pagingBean{" +
"total=" + total +
", list=" + list +
'}';
}
}
然后我们要从mapper接口中新增实现一个支持分页的mapper抽象方法如
@Select("select * from tb_brand limit #{start},#{limit}")
@ResultMap("brandResultMap")
List<Brand> selectByPaging(@Param("start") int start,@Param("limit") int limit);
然后BrandService就也新增支持分页对象上面的这个自定义分页实体的获取返回的分页方法
public PagingBean<Brand> selectByPaging(int start,int limit){
SqlSession sqlSession=sqlSessionFactory.openSession();
BrandMapper brandMapper=sqlSession.getMapper(BrandMapper.class);
int total=brandMapper.total();
System.out.println("BrandService PagingBean page:"+start);
System.out.println("BrandService PagingBean pageSize:"+limit);
List<Brand> brands=brandMapper.selectByPaging(start,limit);
System.out.println("BrandService PagingBean brands:"+brands);
PagingBean<Brand> pagingBean=new PagingBean<Brand>();
pagingBean.setTotal(total);
pagingBean.setList(brands);
sqlSession.close();
return pagingBean;
}
然后之前的整合多个brand业务方法的servlet中也就新增这个分页业务的方法
public void ServletQueryAllPaging(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int page= Integer.parseInt(request.getParameter("page"));
int pageSize= Integer.parseInt(request.getParameter("pageSize"));
int start=(page-1)*pageSize;
PagingBean<Brand> pagingBean=brandService.selectByPaging(start,pageSize);
String brandsJson= JSON.toJSONString(pagingBean, SerializerFeature.WriteMapNullValue);
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(brandsJson);
}
那么最后前端的分页结合element plus的分页组件的完整实现如：
<%--
Created by IntelliJ IDEA.
User: 1
Date: 2024/12/2
Time: 15:15
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<script src="//unpkg.com/element-plus"></script>
<script>
window.onload=function(){
const { createApp, ref,watch } = Vue
createApp({
setup() {
const brands = ref([])
const ids=ref([]);
const msg=ref("");
const page=ref(1);
const oldPage=ref(1);
const pageSize=ref(10);
const total=ref(0);
const ServletQueryAllAjax=()=>{
axios.get('/zeroEightUserLoginCaseModule/ServletQueryAllAjax')
.then(function (response) {
console.log(response);
brands.value=response.data;
})
.catch(function (error) {
console.log(error);
});
}
const PagingBean=(p_page,p_pageSize)=>{
console.log("PagingBean page",p_page);
console.log("PagingBean pageSize",p_pageSize);
axios({
method:'GET',
url:'/zeroEightUserLoginCaseModule/Brand/ServletQueryAllPaging',
params:{
page:p_page,
pageSize:p_pageSize
}
}) .then(function (response) {
console.log("分页数据",response);
brands.value=response.data.list;
total.value=response.data.total;
if(response.data.list.length>0){
// page.value=p_page;
}
})
.catch(function (error) {
console.log(error);
});
}
const deleteInBatches=()=>{
console.log("deleteInBatches ids:",ids.value);
if(ids.value.length==0){
return;
}
axios({
method:'post',
url:'/zeroEightUserLoginCaseModule/Brand/delByIds',
data:ids.value
}) .then(function (response) {
console.log(response);
if(response.data=="success"){
//alert("删除成功");
msg.value="success";
setTimeout(function(){
msg.value="";
PagingBean(page.value,pageSize.value);
},2000);
}
})
.catch(function (error) {
console.log(error);
});
}
const currentChange=(newPage)=>{
//这个不用实现也行，只是为了迎合element plus的分页组件的要求
}
const pageSizeChange=(pageSize)=>{
//这个不用实现也行，只是为了迎合element plus的分页组件的要求
}
PagingBean(page.value,pageSize.value);
watch(page,(newPage,oldPage)=>{
console.log("newPage",newPage);
console.log("oldPage",oldPage);
oldPage.value=oldPage;
PagingBean(newPage,pageSize.value);
});
return {
brands,
ids,
msg,
page,
pageSize,
total,
deleteInBatches,
currentChange,
pageSizeChange
}
}
}).use(ElementPlus).mount('#app');
}
</script>
<style>
.el-alert {
margin: 20px 0 0;
}
.el-alert:first-child {
margin: 0;
}
</style>
</head>
<body>
<div id="app">
<p>欢迎你,${pageContext.request.getSession().getAttribute("user").username}</p>
<div class="buttons" style="display: flex;gap:1rem;">
<button @click="deleteInBatches()">批量删除</button>
<a href="addBrand.jsp">添加品牌</a>
</div>
<template v-if="msg=='success'">
<el-alert title="Success alert" type="success"></el-alert>
</template>
<table border="1" cellspacing="0" width="800">
<tr>
<th>ID</th>
<th>品牌名称</th>
<th>企业名称</th>
<th>排序</th>
<th>品牌介绍</th>
<th>状态</th>
<th>操作</th>
</tr>
<template v-for="(brand, index) in brands">
<tr>
<th>
<input type="checkbox" name="ids" :value="brand.id" v-model="ids" />
{{brand.id}}
</th>
<th>{{brand.brandName}}</th>
<th>{{brand.companyName}}</th>
<th>{{brand.ordered}}</th>
<th>{{brand.description}}</th>
<th>
<template v-if="brand.status == 1">启用</template>
<template v-if="brand.status == 0">禁用</template>
</th>
<th>
<a :href="'/threeTierArchitectureModule/BrandUpdateById?id='+brand.id">修改</a>
</th>
</tr>
</template>
</table>
<div class="example-pagination-block">
<el-pagination layout="prev, pager, next" :total="total" v-model:current-page="page" ></el-pagination>
</div>
</div>
</body>
</html>
关键字词：自定义泛型,分页,element,plus