若依框架分页功能实现详解

接口请求:

在这里插入图片描述

获取分页数据所需函数:

startPage
selectApCommentsList

controller代码:

@RestController
@RequestMapping("/system/comments")
public class ApCommentsController extends BaseController
{
    @Autowired
    private IApCommentsService apCommentsService;

/**
 * 查询评论列表
 */
@PreAuthorize("@ss.hasPermi('system:comments:list')")
@GetMapping("/list")
public TableDataInfo list(ApComments apComments)
{
    startPage(); //
    List<ApComments> list = apCommentsService.selectApCommentsList(apComments); //
    return getDataTable(list);
}
/**
 * 查询评论列表及发布此的用户信息
 */

ApCommentsMapper.xml

selectApCommentsList对应xml,没有使用pageNum 和pageSize 删选数据,那么它返回的应该是所有数据

<select id="selectApCommentsList" parameterType="ApComments" resultMap="ApCommentsResult">
        <include refid="selectApCommentsVo"/>
        <where>
            <if test="videoId != null "> and video_id = #{videoId}</if>
            <if test="content != null  and content != ''"> and content = #{content}</if>
            <if test="peopleId != null "> and people_id = #{peopleId}</if>
            <if test="comTime != null "> and com_time = #{comTime}</if>
            <if test="isEnabled != null "> and is_enabled = #{isEnabled}</if>
        </where>
    </select>

    <select id="selectApCommentsListMsg" parameterType="ApComments" resultMap="ApCommentsMsgResult">
        select
        a.Id,
        a.video_id,
        a.content,
        a.people_id,
        a.com_time,
        a.is_enabled,
        a.remark,
        b.name as people,
        b.picture as people_head
        from
        ap_comments a
        left join ap_people b on a.people_id = b.Id
        <where>
            <if test="videoId != null "> and video_id = #{videoId}</if>
        </where>
        order by a.Id desc
    </select>

startPage()函数:

MyBatis 通过startPage 中的函数PageHelper.startPage做到了对SQL语句的修改:

protected void startPage()
{
    PageDomain pageDomain = TableSupport.buildPageRequest();
    Integer pageNum = pageDomain.getPageNum();
    Integer pageSize = pageDomain.getPageSize();
    if (StringUtils.isNotNull(pageNum) && StringUtils.isNotNull(pageSize))
    {
        String orderBy = SqlUtil.escapeOrderBySql(pageDomain.getOrderBy());
        Boolean reasonable = pageDomain.getReasonable();
        PageHelper.startPage(pageNum, pageSize, orderBy).setReasonable(reasonable);
    }
}

getDataTable()函数:

new PageInfo(list).get Total();的total 到底是多少呢?怎么得到的呢?
total 的值是表格所有数据的总行数
MyBatis 通过修改SQL 语句,多请求了一句SQL 语句:SELECT count(0) FROM sys_oper_log 返回了总行数给到Page 对象的total 成员。然后通过子类Page 强转父类List 对象,访问其成员total 值,赋值给PageInfo 父类成员total,即this.total = ((Page)list).getTotal();

protected TableDataInfo getDataTable(List<?> list)
{
    TableDataInfo rspData = new TableDataInfo();
    rspData.setCode(HttpStatus.SUCCESS);
    rspData.setMsg("查询成功");
    rspData.setRows(list);
    rspData.setTotal(new PageInfo(list).getTotal());
    return rspData;
}

public PageSerializable(List<T> list) {
    this.list = list;
    if (list instanceof Page) {
        this.total = ((Page)list).getTotal();
    } else {
        this.total = (long)list.size();
    }

}

获取分页数据所需SQL代码解析

LIMIT

请求后端的Log

在这里插入图片描述

可以看到limit后面有有两个参数,分别是两个10

LIMIT的两种常用用法:

不指定初始位置
LIMIT 关键字不指定初始位置时,记录默认从第一条记录开始显示。显示记录的条数由 LIMIT 关键字指定。
LIMIT 不指定初始位置的基本语法格式如下:

LIMIT 记录数

其中,“记录数”表示显示记录的条数。如果“记录数”的值小于查询结果的总数,则会从第一条记录开始,显示指定条数的记录。如果“记录数”的值大于查询结果的总数,则会直接显示查询出来的所有记录。

指定初始位置
LIMIT 关键字可以指定查询结果从哪条记录开始显示,显示多少条记录。
LIMIT 指定初始位置的基本语法格式如下:

LIMIT 初始位置, 记录数

其中,“初始位置”表示从哪条记录开始显示;“记录数”表示显示记录的条数。第一条记录的位置是 0,第二条记录的位置是 1。后面的记录依次类推。

注意:LIMIT 后的两个参数必须都是正整数。

LIMIT的两个参数代表的含义

因此可以得出两个参数代表的含义,第一个10代表从第11个记录开始,第二个10代表查询出之后的10个记录,最后一行的total返回值,代表了在该limit分页下,查询返回了1条数据(因为第二页只有一条数据)

  • 23
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
首先,你需要有一个后端 API,它能够接收搜索关键词和分页参数,并返回相应的数据。这个 API 可以用任何一种后端框架来实现,比如 Node.js 的 Express、Python 的 Django 或 Flask 等等。 然后,在前端,你需要用 Vue.js 来实现搜索和分页功能。具体步骤如下: 1. 创建一个 Vue.js 的组件,用来显示搜索结果和分页器。这个组件需要有以下几个属性: - searchKeyword: 搜索关键词 - currentPage: 当前页码 - pageSize: 每页显示的数据数量 - total: 搜索结果总数 - items: 当前页的搜索结果数据 2. 在这个组件的 mounted 钩子函数中,发送一个请求到后端 API,获取搜索结果的第一页数据,并将 total 和 items 属性更新为后端 API 返回的数据。 3. 在组件中添加一个 input 标签和一个按钮,用来输入搜索关键词和触发搜索操作。当用户输入关键词并点击按钮时,应该调用一个 search 方法,将 searchKeyword 属性更新为用户输入的关键词,同时将 currentPage 属性重置为 1。 4. 在组件中添加一个分页器,当用户点击分页器上的页码时,应该调用一个 changePage 方法,将 currentPage 属性更新为用户点击的页码。 5. 在组件中添加一个 watch 钩子函数,当 searchKeyword 或 currentPage 属性发生变化时,应该发送一个请求到后端 API,获取相应的数据,并将 total 和 items 属性更新为后端 API 返回的数据。 6. 最后,在组件中渲染搜索结果和分页器的 HTML 标记,使用 v-for 指令来遍历 items 数组,并使用 v-if 指令来判断当前页码是否与分页器上的页码相等,以便高亮显示当前页码。 以上就是配合分页功能的 vuejs 搜索关键词获取数据的思路。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值