Springboot整合Layui+pagehelper实现分页功能、图片查看功能（十分详细）

一、前期准备

1、在pom.xml文件中导入pagehelper

<dependency>
	<groupId>com.github.pagehelper</groupId>
	<artifactId>pagehelper-spring-boot-starter</artifactId>
	<version>1.2.10</version>
</dependency>

2、导入LayUI插件

3、在配置文件中开启分页插件

pagehelper.helper-dialect=mysql
pagehelper.reasonable=true
pagehelper.page-size-zero=true

4、准备一个table并设置id

//准备一个div或者一个table用来放数据，一定要设置id,后面操作会用到
<table class="layui-table layui-hide" id="test" lay-filter="test"></table>

二、具体实现

1、前端js部分，注释写的很细务必仔细观看

    layui.use(function () {
        var laypage = layui.laypage;
        var table = layui.table
        table.render({
            elem: '#test',		//对应table标签里的id
            url: 'picture',	//从后台获取数据的url
            id: 'test',			//此处也需要设置这个属性，后边会用到
            method: 'get',
            page:true,
            dataType: 'json',
            parseData: function (res) {
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.total,//从返回的json数据中取出总行数
                    data: res.list//返回的json数据有两层，layui不支持多层数据，所以是res.list
                }
            },
            cols:
                [
                    [
                        {type: "checkbox", width: "8%", align: "center"},
                        {field: 'pictureId', title: '图片ID', width: "8%", align: "center"},
                        {field: 'pictureName', title: '图片名', width: "10%", align: "center"},
                        {field: 'pictureSize', title: '图片大小', width: "10%", align: "center"},
                        {field: 'pictureType', title: '图片文件类型', width: "10%", align: "center"},
                        {field: 'pictureUploadDate', title: '图片上传日期', width: "12%", align: "center"},
                        {field: 'picturePath', title: '图片路径', width: "12%", align: "center",templet: function (data){
                            return "<div οnclick='show_img(this)'><img src=' " + data.picturePath + "'></div>"
                            }//templet定义一个函数，后端返回的数据data传进去，这里我们要的是图片路径，用字符串拼接才会解析成路径，我给div绑定一个单击事件，实现图片查看功能
                        },
                        {field: 'pictureStyleId', title: '图片类型ID', width: "10%", align: "center" },
                        {field: 'pictureClicksNum', title: '点击次数', width: "10%", align: "center" },
                        {field: 'right', title: '操作', width: "15%", toolbar: '#barDemo'},
                    ]
                ],
        });
        //监听点击方法
        $(document).on('click', '.preview-all', function (data) {
            let clickObject = data.target; //点击的对象
            let url = clickObject.src; //图片地址
            previewPicture(url);//调用预览方法
        });

        //图片预览，传url
        function previewPicture(url) {
            layer.photos({
                photos: {
                    "title": '预览图',
                    "id": 222,
                    "start": 0,
                    "data": [{
                        "src": url
                    }]
                }
                // ,closeBtn: 1 //是否显示关闭按钮
            });
        }     
    });

2、后台代码

这里layui会默认传给后台limit（每页条数）和page（页面大小）两个参数，
默认limit=10，page=1
Controller

@Controller
public class PictureController {
    @Autowired
    private PictureService pictureService;

    @RequestMapping(value = "/picture", method = RequestMethod.GET)
    @ResponseBody//该注解会默认将List数据转换成json
    public PageInfo<Picture> getAllPicture(int limit, int page) {
        return pictureService.getAllPicture(limit,page);
    }
}

Service
接口

public interface PictureService {
    PageInfo<Picture> getAllPicture(int limit, int page);
}

实现类

@Service
public class PictureServiceImpl implements PictureService {

    @Autowired
    private PictureMapper pictureMapper;
    @Override
    public PageInfo<Picture> getAllPicture(int limit,int page) {
        System.out.println("----------------每页条数："+limit+"第几页："+page);
        //开启分页功能
        PageHelper.startPage(page,limit);
	    //查询所有图片信息
        List<Picture> allPicture = pictureMapper.getAllPicture();
        //获取分页相关数据
        PageInfo<Picture> pages = new PageInfo<>(allPicture, 5);
        System.out.println("===================="+pages);
        return pages;
    }
}

Mapper

@Mapper
public interface PictureMapper {
    List<Picture> getAllPicture();
}

<select id="getAllPicture" resultType="com.godxia.picture.bean.Picture">
	select * from t_picture
</select>

整体调用后的结果（我用postman做的测试）：

{
    "total": 22,
    "list": [
        {
            "pictureId": 1,
            "pictureName": "01.jpg",
            "pictureSize": 4,
            "pictureType": ".jpg",
            "pictureUploadDate": "2022-09-07 09:55:56.0",
            "picturePath": "pic/01.jpg",
            "pictureStyleId": "1"
        },
        {
            "pictureId": 2,
            "pictureName": "02.jpg",
            "pictureSize": 5,
            "pictureType": ".jpg",
            "pictureUploadDate": "2022-09-06 15:58:54.0",
            "picturePath": "pic/02.jpg",
            "pictureStyleId": "2"
        },
        {
            "pictureId": 3,
            "pictureName": "03.jpg",
            "pictureSize": 5,
            "pictureType": ".jpg",
            "pictureUploadDate": "2022-09-20 15:58:58.0",
            "picturePath": "pic/03.jpg",
            "pictureStyleId": "1"
        },
        {
            "pictureId": 4,
            "pictureName": "04.jpg",
            "pictureSize": 5,
            "pictureType": ".jpg",
            "pictureUploadDate": "2022-09-19 15:58:21.0",
            "picturePath": "pic/04.jpg",
            "pictureStyleId": "2"
        },
        {
            "pictureId": 5,
            "pictureName": "05.jpg",
            "pictureSize": 5,
            "pictureType": ".jpg",
            "pictureUploadDate": "2022-09-06 15:58:24.0",
            "picturePath": "pic/05.jpg",
            "pictureStyleId": "1"
        },
        {
            "pictureId": 6,
            "pictureName": "06.jpg",
            "pictureSize": 5,
            "pictureType": ".jpg",
            "pictureUploadDate": "2022-09-28 15:58:28.0",
            "picturePath": "pic/06.jpg",
            "pictureStyleId": "3"
        }
    ],
    "pageNum": 1,
    "pageSize": 6,
    "size": 6,
    "startRow": 1,
    "endRow": 6,
    "pages": 4,
    "prePage": 0,
    "nextPage": 2,
    "isFirstPage": true,
    "isLastPage": false,
    "hasPreviousPage": false,
    "hasNextPage": true,
    "navigatePages": 5,
    "navigatepageNums": [
        1,
        2,
        3,
        4
    ],
    "navigateFirstPage": 1,
    "navigateLastPage": 4
}

三、最终结果

1、分页总览

2、图片查看