前后端实现：分页功能+搜索功能+列表功能+LoadMore

效果图：

前端部分：(使用的是uniapp)

<template>
    <view class="uni-page">
        <!--搜索框  -->
        <view class="header">
            <view class="search-box">
                <!-- 搜索框 -->
                <view class="search-block">
                    <input type="text" placeholder="请输入编号或产品关键字搜索" value="" class="search-text" v-model="key"/>
                    <!-- <input type="text" placeholder="请输入编号或产品关键字搜索" value="" class="search-text" v-model="key" focus /> -->
                </view>
                <view class="search" @click="getList(key)">
                    <text class="text">搜索</text>
                </view>
            </view>
        </view>
        <!-- 商品列表 -->
        <view class="body">

            <view class="uni-list">
                    <view class="list-cell" @click="richTextClick(value.id)" v-for="(value, index) in listData" :key="index">
                            <image class="img"  mode="widthFix" :src="value.iconUrl"></image>
                            <text class="text1">{{ value.title }}</text>
                            <text class="text2">></text>
                    </view>
                    <!-- 页面加载图标 -->
                    <uni-load-more :status="status" :show-icon="true"  iconType=auto></uni-load-more>
            </view>
        </view>
    </view>
</template>

<script>
    
    import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
    export default {
        components: {
            uniLoadMore
        },
        data() {
            return {
                listData: [],
                
                //用来接收上个页面的id
                categoryId:'',
                
                key:'',
                
                //触底事件
                total: 0,
                currentPage: 1,
                pageSize: 12,
                status:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
                isLoadMore:false,  //是否加载中 
            }
        },
        onLoad(option) {
            console.log(option.type);
            this.categoryId=option.type;
            
            this.currentPage = 1;
            this.pageSize=12;
            
            this.getList();
        },
        //触底事件
        onReachBottom() {
            if (this.status == 'noMore'){
                return;
            }    
            if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
                this.isLoadMore=false
                this.currentPage+=1
                this.getList()
                // 设置加载时间
                // timer = setTimeout(function() {
                //     self.getmorenews();
                // }, 3000);
            }
        },
        methods: {
            // 富文本点击事件
            richTextClick(id){
                uni.navigateTo({
                    url:'../richtext/richtext?type='+id
                })
            },
            //向后端请求数据
            getList(key) {
                console.log("test",key);
                if(key!=null){
                    this.currentPage=0;
                    // this.pageSize=null;
                }
                //该如何从上个方法中获取categoryId?
                // var index=this.categoryId
                uni.request({
                
                    //线上
                    url: window.location.origin +'/h5/richtext/selectByCategoryId',
                    //线下
                    // url:'http://localhost:8090/richtext/selectByCategoryId',
                    method:'post',
                    data: {
                            categoryId:this.categoryId || 0,
                            key:this.key,
                            // 分页
                            currentPage: this.currentPage||0,
                            // 变成null就能查询到数据，如何变？？？？
                            pageSize: this.pageSize
                     },
                     header:{
                         "Content-type":"application/x-www-form-urlencoded"
                     },
                    success: data => {
                        
                
                        console.log(data);
                        //把currentPage和pagesize
                        
                        
                        console.log("test111",key);
                        // 如何使本条数据仅仅在点击搜索才执行？？
                        if(key!=null){
                            this.listData=data.data.items;
                        }else{
                            //存储后台传过来的数据总条数
                            this.total = data.data.totalNum;
                            
                            //第一次加载时，若只有一页数据（列表中还没有数据）
                            if(this.listData.length == 0){
                                this.status = 'more'
                                //把数据推到数组中
                                this.listData.push(...data.data.items);
                            }else{
                                //listData中已经有数据
                                
                                // 判断当前推进去的数据和数据总条数是否相同（相同可以终止）
                                if(this.listData.length == this.total) {
                                    this.status = 'noMore'
                                    return false;
                                } else {
                                    this.status = 'more'
                                            
                                    this.listData.push(...data.data.items);
                                }
                            }
                        }
                    },
                     //接口请求失败的处理
                    fail: (data, code) => {
                        console.log('fail' + JSON.stringify(data));
                    }
                });
            },
            
            // //搜索框的一些方法
            // async getSearch(keyword) {
            //   let [err, res] = await this.$http.post('/richtext/search',{
            //     name:keyword
            //   });
            //   // 请求失败处理
            //   this.$http.errorCheck(err, res);
            //   this.keywordList = [];
            //   this.keywordList = this.drawCorrelativeKeyword(res.data.data, keyword);
            // },
            // //高亮关键字
            // drawCorrelativeKeyword(keywords, keyword) {
            //   var len = keywords.length,
            //     keywordArr = [];
            //   for (var i = 0; i < len; i++) {
            //     var row = keywords[i];
            //     //定义高亮#9f9f9f
            //     var html = row.name.replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + "</span>");
            //     html = '<div>' + html + '</div>';
            //     var tmpObj = {
            //       keyword: row.name,
            //       htmlStr: html,
            //       id:row.id
            //     };
            //     keywordArr.push(tmpObj)
            //   }
            //   return keywordArr;
            // },

        }
    }
</script>

<style lang="scss">
    /* header */
    .header {
        height: 100rpx;
        width: 100%;
        border-bottom: 25rpx solid #F8F8F8;
        background-color: #FF5604;

        .search-box {
            height: 80rpx;
            display: flex;
            margin-top: 10rpx;
            padding: 20rpx 20rpx;

            /* 搜索框 */
            .search-block {
                background-color: #F7F5F6;
                height: 60rpx;
                // width: 600rpx;
                width: 100%;
                // border-radius: 50rpx;
                display: flex;

                .search-text {
                    margin-left: 30rpx;
                    margin-top: 8rpx;
                    width: 100%;
                }
            }
            .search{
                height: 60rpx;
                width: 110rpx;
                background-color: #666666;
                // text-align: center;
                display: flex;
                .text{
                    margin: auto;
                    color: #FFFFFF;
                }
            }
        }

    }
    /* body */
    .body{
        height: 100vh;
        width: 95%;
        // background-color: #007AFF;
        // margin: 20rpx 20rpx;
        margin-left: 20rpx;
        .uni-list{
            width: 100%;
            // background-color: #05DFCE;
            display:flex;
            // margin: 50rpx 10rpx;
            
            // margin-top: 10rpx;(改)
            
            flex-direction: column;
            .list-cell{
                height: 100rpx;
                width: 100%;
                display: flex;
                width: 100%;
                margin-bottom: 10rpx;
                // margin: auto;
                .img {
                    margin: auto;
                    width: 80rpx;
                    margin-left: 0;
                    // img{ pointer-events: none; }
                }
                
                .text1 {
                    width: 600rpx;
                    height: 90rpx;
                    
                    // line-height: 90rpx;（改）
                    
                    margin-left: 20rpx;
                    font-size: 27rpx;
                    // background-color: #4CD964;
                    //改
                    padding-top: 25rpx;    
                }
                
                .text2 {
                    margin: auto;
                    // margin-left: 10rpx;
                    margin-right: 0rpx;
                    /* 设置>的大小 */
                    font-size: 30rpx;
                }
                
                .text{
                    color: #FFFFFF;
                    font-size: 50rpx;
                }
            }
        }
        // margin-left: 20rpx;
        // padding-right: 20rpx;
    }
    // uni-page-body{
    //     background-color: #007AFF;
    //     .uni-list{
    //         height: 100rpx;
    //         width: 100rpx;
    //     }
    // }
</style>

后端部分：

　　1、Controller:

    /**
     * select查询(根据richtext表中的categoryId查询相应的数据，categoryId为0查询的是所有数据)
     * key用于搜索
     * currentPage/pageSize用于分页
     */
    @RequestMapping("/selectByCategoryId")
    @ResponseBody
//    public List<RichTextEntity> selectByCategoryId(Long categoryId,String key,Integer currentPage,Integer pageSize){
    public PageBean<RichTextEntity> selectByCategoryId(Long categoryId,String key,Integer currentPage,Integer pageSize){

        PageBean<RichTextEntity> richTextDataList = richTextService.getByCategoryId(categoryId,key,currentPage,pageSize);

        return richTextDataList;
    }

　　2、Impl

    @Override
//    public List<RichTextEntity> getByCategoryId(Long categoryId,String key,Integer currentPage,Integer pageiSze) {
    public PageBean<RichTextEntity> getByCategoryId(Long categoryId, String key, Integer currentPage, Integer pageSize) {

        //设置分页信息，分别是当前页数和每页显示的总记录数【记住：必须在mapper接口中的方法执行之前设置该分页信息】
        if(currentPage!=null&&pageSize!=null){
            PageHelper.startPage(currentPage, pageSize);
        }
        QueryWrapper<RichTextEntity> queryWrapper = new QueryWrapper<>();
        if (categoryId > 0 ){
            queryWrapper.eq("category_id",categoryId);
        }
        if(!ObjectUtils.isEmpty(key)){
            queryWrapper.like("title",key);
        }
//        if(!ObjectUtils.isEmpty(key)){
//            queryWrapper.and(
//                    wrapper ->
//                            wrapper.like("title", key).or().like("content", key)
//            );
//        }
        //查询的数据降序排列
        queryWrapper.orderByDesc("id");

        //查出分类表所有数据(这里必须查询到所有数据)
        List<RichTextEntity> entityList = baseMapper.selectList(queryWrapper);

        //用PageInfo对结果进行包装
        PageBean<RichTextEntity> page = new PageBean<RichTextEntity>();

        PageInfo info = new PageInfo(entityList);
        //TODO:
        page.setItems(entityList);
        page.setTotalPage(info.getPages());
        page.setTotalNum((int)info.getTotal());
        page.setCurrentPage(currentPage);
        page.setPageSize(info.getPageSize());

        return page;
    }

　　3、PageBean(分页用到)

package com.yx.note.pro.entity;

import java.util.List;

public class PageBean<T> {

    // 当前页
    private Integer currentPage = 1;
    // 每页显示的总条数
    private Integer pageSize = 12;
    // 总条数
    private Integer totalNum;
    // 是否有下一页
    private Integer isMore;
    // 总页数
    private Integer totalPage;
    // 开始索引
    private Integer startIndex;
    // 分页结果
    private List<T> items;

    public PageBean() {
        super();
    }

    public PageBean(Integer currentPage, Integer pageSize, Integer totalNum) {
        super();
        this.currentPage = currentPage;
        this.pageSize = pageSize;
        this.totalNum = totalNum;
        this.totalPage = (this.totalNum+this.pageSize-1)/this.pageSize;
        this.startIndex = (this.currentPage-1)*this.pageSize;
        this.isMore = this.currentPage >= this.totalPage?0:1;
    }

    public Integer getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(Integer currentPage) {
        this.currentPage = currentPage;
    }

    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }

    public Integer getTotalNum() {
        return totalNum;
    }

    public void setTotalNum(Integer totalNum) {
        this.totalNum = totalNum;
    }

    public Integer getIsMore() {
        return isMore;
    }

    public void setIsMore(Integer isMore) {
        this.isMore = isMore;
    }

    public Integer getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(Integer totalPage) {
        this.totalPage = totalPage;
    }

    public Integer getStartIndex() {
        return startIndex;
    }

    public void setStartIndex(Integer startIndex) {
        this.startIndex = startIndex;
    }

    public List<T> getItems() {
        return items;
    }

    public void setItems(List<T> items) {
        this.items = items;
    }

}