郑州手机端建站模板_建筑公司网站建设_苏州网站建设公司_帆软社区app

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层：

public interface AdvInfoMapper extends BaseMapper<AdvInfo> {
}

service层：

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

serviceimpl：

@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：

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

controller层：

 @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

  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);}},});};

4.小结

本文件详细描述了使用SSMP+ajax技术栈实现广告系统分页效果的编程思路、代码实现和前端交互逻辑，通过后端分页查询和前端动态展示实现广告列表的分页功能。其中用到的关键技术点有以下几个：

1. MyBatis Plus：利用BaseMapper和LambdaQueryWrapper简化CRUD操作和条件查询。
2. RESTful接口：通过@RequestMapping和@ResponseBody注解创建RESTful风格的接口，返回JSON格式数据。
3. ajax异步请求：前端使用jQuery的$.ajax方法发送异步请求，实现页面的无刷新更新。