Spring Boot整合Mybatis-Plus实现分页查询

最新推荐文章于 2024-04-08 14:12:01 发布

一只努力的笨笨熊

最新推荐文章于 2024-04-08 14:12:01 发布

阅读量411

点赞数

分类专栏： Mybatis 文章标签： mybatis spring boot 后端 java

本文链接：https://blog.csdn.net/BBQ__ZXB/article/details/128669719

版权

Mybatis 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

设计栈
前端
- 页面
- 自定义JS
后端
测试
多表实现分页查询

设计栈

Spring Boot
Mybatis-Plus
Mysql
BootStrab-table

前端

页面

<!DOCTYPE html>
<html th:lang ="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <title>index</title>
    <link th:rel="stylesheet" th:href="@{css/bootstrap.css}">
    <link th:rel="stylesheet" th:href="@{css/bootstrap-table.css}">
</head>
<body>
<div class="col-sm-12 select-table table-striped">
    <table id="table"></table>
</div>
<script th:src="@{js/jquery-1.11.3.js}"></script>
<script th:src="@{js/bootstrap.min.js}"></script>
<script th:src="@{js/bootstrap-table.js}"></script>
<script th:src="@{js/bootstrap-table-zh-CN.min.js}"></script>
<script type="text/javascript" th:src="@{/js/index.js}"></script>
</body>
</html>

自定义JS

index.js

/**
 *表格初始化
 */
$('#table').bootstrapTable({
    url: "/list",          // 表格数据来源,请求url
    method: 'post',                     //请求方式
    pagination: true,                   //是否显示分页
    sidePagination: 'server',           //服务器端分页
    pageSize: 1,                        //设置每页的记录数
    pageNumber: 1,                      //设置首页页码
    striped: true,
    sortable: true,                      //是否启用排序
    sortOrder: "asc",                    //排序方式
    clickToSelect: true,                 //是否启用点击选中行
    contentType: "application/x-www-form-urlencoded",
    //注意:查询参数组织方式，默认值为 'limit',在默认情况下 传给服务端的参数为：offset,limit,sort
    //设置为 'undefined' 在这种情况下传给服务器的参数为：pageSize,pageNumber
    queryParamsType: 'undefined',
    queryParams: queryParams,         //请求服务器时所传参数
    cache: false,                    //禁用AJAX数据缓存
    singleSelect: true,
    escape: false,
    firstLoad: true,
    showFooter: false,
    search: false,
    columns: [
        {
            checkbox: true
        }, {
            field: 'id',
            title: '编号'
        }, {
            field: 'cdbh',
            title: '测点编号'
        }, {
            field: 'xmId',
            title: '项目名称'
        }, {
            field: 'sbmc',
            title: '设备名称'
        }, {
            field: 'startTime',
            title: '创建时间',
            formatter: function (value, row, index) {
                return dateFormat(value)
            }
        }, {
            field: 'startTime',
            title: '修改时间',
            formatter: function (value, row, index) {
                return dateFormat(value)
            }
        }],
    onLoadSuccess: function () {  //加载成功回调方法
        console.info("项目管理数据加载成功");
    },
    onLoadError: function (data) {  //加载失败回调方法
        console.info("项目管理数据加载失败");
        if ('401' == data) {
            window.location.href = '/'
        }
    }
});

/**
 * 页面搜索得到查询的参数
 * 如果queryParamsType=limit,params包含{limit, offset, search, sort, order}
 * 如果queryParamsType!=limit,params包含{pageSize, pageNumber, searchText, sortName, sortOrder}
 */
function queryParams(params) {
    debugger
    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
        pageSize: params.pageSize,  //页面大小
        pageNumber: params.pageNumber, //页码
    };
    return temp;
}

/**
 * 时间十三位转换
 */
function dateFormat(value) {
    var date = new Date(value);
    const Y = date.getFullYear() + '-';
    const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
    const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
    return Y + M + D + h + m + s;
}

说明：要保证表格的列field属性名字和后端返回的数据的名字一致

后端

创建分页插件

@Configuration
public class MybatisPlusConfig {

    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

Controller

@Controller
public class IndexController {

    @Autowired
    private ProjectService projectService;

    @GetMapping("/")
    public String index() {
        return "index";
    }

    @PostMapping("/list")
    @ResponseBody
    public String selectAll(int pageSize, int pageNumber) {
        return projectService.pageList(pageSize,pageNumber);
    }
}

Service

public interface ProjectService  extends IService<Picture> {

    String pageList(int pageSize, int pageNumber);
}

@Service
public class ProjectServiceImpl extends ServiceImpl<PictureMapper, Picture> implements ProjectService {

    @Autowired
    private PictureMapper pictureMapper;

    @Override
    public String pageList(int pageSize, int pageNumber) {
        Page<Picture> page = new Page<>(pageNumber, pageSize);
        pictureMapper.selectPage(page,null);
        List<Picture> records = page.getRecords();
        long total = page.getTotal();
        HashMap<String, Object> hashMap = new HashMap<>();
        hashMap.put("total", total);
        hashMap.put("rows", records);
        return JSON.toJSONString(hashMap);
    }
}

说明：
selectPage是BaseMapper中的分页方法，可以使用条件构造器来进行有条件过滤数据

	/**
     * 根据 entity 条件，查询全部记录（并翻页）
     *
     * @param page         分页查询条件（可以为 RowBounds.DEFAULT）
     * @param queryWrapper 实体对象封装操作类（可以为 null）
     */
    <E extends IPage<T>> E selectPage(E page, @Param(Constants.WRAPPER) Wrapper<T> queryWrapper);

Mapper

@Mapper
public interface PictureMapper extends BaseMapper<Picture> {
}

Entity

@Data
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class Picture implements Serializable {
    private static final long serialVersionUID = 284532197017388491L;
    /**
     * 图片ID
     */
    @TableId(value="id",type = IdType.AUTO)
    private Integer id;
    /**
     * 项目ID
     */
    private Integer xmId;
    /**
     * 设备名称
     */
    private String sbmc;
    /**
     * 测点编号
     */
    private String cdbh;
    /**
     * 图片URL
     */
    private String url;
    /**
     * 开始时间
     */
    @TableField(fill = FieldFill.INSERT)
    private Date startTime;
    /**
     * 修改时间
     */
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Date updateTime;

}

测试

在这里插入图片描述

多表实现分页查询

前端展示部分参考上文进行修改即可

自定义Dto

@Data
@AllArgsConstructor
@NoArgsConstructor
public class PictureDto {
    /**
     * 页面大小
     */
    private String pageSize;
    /**
     * 页码
     */
    private String pageNumber;
    /**
     * ID
     */
    private int id;
    /**
     * 项目名称
     */
    private String xmmc;
    /**
     * 技术负责人
     */
    private String jsfzr;
    /**
     * 现场负责人
     */
    private String xcfzr;
    /**
     * 测点上传人
     */
    private String cdscr;
    /**
     * 设备名称
     */
    private String sbmc;
    /**
     * 测点编号
     */
    private String cdbh;
    /**
     * 测点录入时间
     */
    private Date cdStartTime;
    /**
     * 测点更新时间
     */
    private Date cdUpdateTime;
}

Mapper：

/**
     * 自定义sql分页
     * @param page
     * @param queryWrapper
     * @return
     */
    IPage<PictureDto> selectMyPage(IPage<PictureDto> page, @Param(Constants.WRAPPER) Wrapper<PictureDto> queryWrapper);

Mapper.xml：


...
<!--自定义分页查询-->
    <select id="selectMyPage" resultType="PictureDto">
        select pic.id,
        xmmc,
        pro.jsfzr,
        pro.xcfzr,
        pic.cdscr,
        sbmc,
        cdbh,
        pic.start_time as cdStartTime,
        pic.update_time as cdUpdateTime
        from picture pic
        left join project pro on pro.id = pic.xm_id
        ${ew.customSqlSegment}
    </select>
  ...

serviceImpl:

...
	/**
     * 分页查询所有测点信息
     *
     * @param pictureDto 分页条件
     * @return String json字符串
     */
    @Override
    public String selectAll(PictureDto pictureDto) {
        int number = Integer.parseInt(pictureDto.getPageNumber());
        int size = Integer.parseInt(pictureDto.getPageSize());
        Page<PictureDto> page = new Page<PictureDto>(number, size);
        //条件构造器
        QueryWrapper<PictureDto> pictureQueryWrapper = new QueryWrapper<>();
        if (StringUtils.isNotBlank(pictureDto.getXmmc())) {
            pictureQueryWrapper.like("pro.xmmc", pictureDto.getXmmc());
        }
        if (StringUtils.isNotBlank(pictureDto.getSbmc())) {
            pictureQueryWrapper.like("pic.sbmc", pictureDto.getSbmc());
        }
        if (StringUtils.isNotBlank(pictureDto.getCdbh())) {
            pictureQueryWrapper.like("pic.cdbh", pictureDto.getCdbh());
        }
        
        pictureDao.selectMyPage(page, pictureQueryWrapper);
        List<PictureDto> records = page.getRecords();
        long total = page.getTotal();
        System.out.println(total);
        HashMap<String, Object> hashMap = new HashMap<>();
        hashMap.put("total", total);
        hashMap.put("rows", records);
        return JSON.toJSONString(hashMap);
    }
...