SSMP+ajax实现广告系统的分页效果

文章目录

- 1.案例需求
- 2.编程思路
- 3.案例源码
- 4.小结

1.案例需求

使用SSMP+ajax实现广告系统的分页效果，效果图如下：
在这里插入图片描述

2.编程思路

mapper层：定义一个接口，继承自BaseMapper，指定泛型为AdvInfo，这样MyBatis
Plus就能自动为AdvInfo实体类生成CRUD操作的方法。
service层：定义一个接口，声明需要执行的业务方法。在实现类AdvInfoServiceImpl中，通过注入AdvInfoMapper来调用MyBatis Plus的selectPage方法实现分页查询。使用LambdaQueryWrapper来构建查询条件，根据传入的ConditionVo对象动态地添加查询条件。返回Page对象，包含分页信息和查询结果。
ConditionVo：使用@Data和@Component注解的类，包含广告标题和分类ID作为查询条件。
controller层：定义一个RESTful接口queryPage，用于接收分页查询的请求。接收请求参数（页码、每页数量、查询条件），并调用Service层的getPage方法。将查询结果封装成Map对象，并返回给客户端。使用@ResponseBody注解将返回的对象自动转换为JSON格式。
客户端ajax:使用jQuery的$.ajax方法发送POST请求到服务器的queryPage，接收服务器返回的JSON数据，并解析这些数据。使用JavaScript动态更新HTML页面内容，包括广告列表和分页导航。定义了loadpage函数，用于根据当前页码重新加载广告列表和分页导航。

3.案例源码

mapper层：

java">public interface AdvInfoMapper extends BaseMapper<AdvInfo> {
}

service层：

java">public interface AdvInfoService {Page<AdvInfo> getPage(int currentPage, int pageSize, ConditionVo conditionVo);
}

serviceimpl：

java">@Service("advInfoServiceImpl")
public class AdvInfoServiceImpl implements AdvInfoService {@Resourceprivate AdvInfoMapper advInfoMapper;@Overridepublic Page<AdvInfo> getPage(int currentPage, int pageSize, ConditionVo conditionvo) {Page<AdvInfo> page = new Page<>(currentPage, pageSize);//创建条件构造器LambdaQueryWrapper<AdvInfo> lambdaQueryWrapper = null;//有条件,非空判断，不会触发空指针异常if (Objects.nonNull(conditionvo)){lambdaQueryWrapper = new LambdaQueryWrapper<>();lambdaQueryWrapper.like(StrUtil.isNotBlank(conditionvo.getAdvTitle()),AdvInfo::getAdvTitle,conditionvo.getAdvTitle());  //("name","admin)lambdaQueryWrapper.eq(Objects.nonNull(conditionvo.getCategoryId()),AdvInfo::getCategoryId,conditionvo.getCategoryId());}advInfoMapper.selectPage(page,lambdaQueryWrapper);//返回分页对象return page;}
}

ConditionVo：

java">@Data
@Component
public class ConditionVo {private String advTitle;private Integer categoryId;
}

controller层：

java"> @RequestMapping("queryPage")@ResponseBodypublic Map<String,Object> queryPage(int pageIndex,  int pageCount, ConditionVo conditionVo) {IPage<AdvInfo> page = advInfoService.getPage(pageIndex, pageCount, conditionVo);HashMap<String, Object> map = new HashMap<>();map.put("list",page.getRecords());map.put("currentPage",pageIndex);map.put("rows",pageCount);map.put("totalCount",page.getTotal());map.put("totalPage",page.getPages());System.out.println("shdkfdfsjdcx——queryPage:"+page.getRecords()+","+pageIndex+","+pageCount+","+page.getTotal()+","+   page.getPages() );return map;}

客户端ajax

javascript">  function loadpage(index) {$.ajax({url: "queryByPage",type: "post",data: {pageIndex: index,pageCount: pagecount},dataType: "json",success: function (data) {totalPage = data.totalPage;pageIndex = data.currentPage;var advs = data.list;$("#myTbody").empty();$("#msg").empty();var str = "";for (var i = 0; i < advs.length; i++) {var advInfo = advs[i];str = "  <tr >\n" +"        <td>" + advInfo.advId + "</td>\n" +"        <td>" + advInfo.advTitle + "</td>\n" +"        <td>" + advInfo.clickCount + "</td>\n" +"        <td>" + advInfo.expiredTime + "</td>\n" +"        <td>" + advInfo.advCategory.categoryName + "</td>\n" +"        <td><img src='" + advInfo.img + "' alt='广告图片' style='width:100px;height:auto;'></td>\n" +"        <td><a href='javascript:void(0)' οnclick='editRow(" + advInfo.advId + ")'>修改</a>" + " " +"        <a href='javascript:void(0)' οnclick='delRow(" + advInfo.advId + ")'>删除</a></td>\n" +"    </tr>"$("#myTbody").append(str);var pageStr = '<span>总计:<b>' + data.totalCount + '</b></span>';pageStr += '<a href="javascript:void(0)" οnclick="loadpage(1)">第一页</a>';// 添加上一页链接（如果不是第一页）if (pageIndex > 1) {pageStr += '<a href="javascript:void(0)" οnclick="loadpage(' + (pageIndex - 1) + ')">上一页</a>';}//设置数字页码链接for (let i = 1; i <= totalPage; i++) {if (i == pageIndex) {pageStr += '<span>[' + i + ']</span>';} else {pageStr += '<a href="javascript:void(0)" οnclick="loadpage(' + i + ')">[' + i + ']</a>';}}// 添加下一页链接（如果不是最后一页）if (pageIndex < totalPage) {pageStr += '<a href="javascript:void(0)" οnclick="loadpage(' + (pageIndex + 1) + ')">下一页</a>';}pageStr += '<a href="javascript:void(0)" οnclick="loadpage(totalPage)">最后一页</a>';$("#pageDiv").empty();$("#pageDiv").append(pageStr);}},});};