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

文章目录

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 {
    @Resource
    private AdvInfoMapper advInfoMapper;
    @Override
    public 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")
    @ResponseBody
    public 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);
                    }
                },
            });
        };

4.小结

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

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