若依框架ruoyi前后端实现自定义分页功能(ES分页查询)

1、分页需求

若依ruoyi框架主要针对Sql进行了分页集成,像平时别的一些数据库或者中间件的分页,则需要自己实现.
本文主要使用ES的分页查询为例,展示前后端的基本操作,原理可以类推到其他中间件分页查询上.

2、vue前端保持不变

//...
//前端逻辑基本不变,使用原来的组件即可
<pagination
  v-show="total>0"
  :total="total"
  :page.sync="queryParams.pageNum"
  :limit.sync="queryParams.pageSize"
  @pagination="getList"
/>
//...

3、controller组装前端所需分页对象

/**
 * 查询XX列表
 * query: 查询条件对象
 */
@PreAuthorize("@ss.hasPermi('xxx:xxx:list')")
@GetMapping("/list")
public TableDataInfo list(Query query) {
	//startPage();
	//pageNum和pageSize的设置由query传入进行处理,传到serviceImpl方法中
	
    Page<TestVo> pageInfo = testService.selectMyPage(query);
    List<TestVo> list = pageInfo.getContent();//ES的分页结果list对象

	//getDataTable(list);
	//将原来的getDataTable()方法拿出来进行rows和total的赋值,再传给前端
    TableDataInfo rspData = new TableDataInfo();
    rspData.setCode(HttpStatus.SUCCESS);
    rspData.setMsg("查询成功");
    rspData.setRows(list);
    rspData.setTotal(pageInfo.getTotalElements());//ES的分页数据总数
    return rspData;
}

4、serviceimpl实现分页逻辑

import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageImpl;
import org.springframework.data.domain.PageRequest;

/**
* 查询热词管理列表
*/
@Override
public Page<TestVo> selectMyPage(Query query){
	//接受前端传过来的分页参数
    Integer pageNum = query.getPageNum();
    Integer pageSize = query.getPageSize();

    if(pageNum<1 || pageSize<1){
        throw new RuntimeException("分页参数需从1开始");
    }

    //组装查询条件 must类似and匹配到所有字段后进行组合查询
    BoolQueryBuilder queryBuilder = QueryBuilders.boolQuery();
    if(StringUtils.isNotBlank(query.getCol1())){
        queryBuilder.must(termQuery("col1", query.getCol1()));
    }
    if(StringUtils.isNotBlank(query.getCol2())){
        //类似like的操作,针对不能分词的字段进行模糊查询,数据量大不推荐,性能不友好
        queryBuilder.must(wildcardQuery("col2", "*"+query.getCol2()+"*"));
    }

    NativeSearchQuery build = new NativeSearchQueryBuilder()
            .withQuery(queryBuilder)
            .withPageable(PageRequest.of(pageNum-1, pageSize))
            .build();
    log.info("列表查询的语句:{}", build.getQuery().toString());

    SearchHits<TestVo> search = elasticsearchRestTemplate.search(build, TestVo.class);
    SearchPage<TestVo> page = SearchHitSupport.searchPageFor(search, build.getPageable());

    //高亮结果集,也可以用page.getHighlightFields()获取
    List<TestVo> list = new ArrayList<>();
    for (SearchHit<TestVo> each : page) {
        TestVo vo = each.getContent();
        list.add(vo);
    }
    //组装分页对象 这里主要是ES返回的分页对象
    Page<TestVo> pageInfo = new PageImpl<>(list, build.getPageable(), search.getTotalHits());
    return pageInfo;
    
    //原来的mapper查询如下
	//return testMapper.selectTestList(vo);
}
若按照RuoYi框架进行前后端分离,你需要进行以下步骤: 1. 创建前端项目:首先,你需要创建一个前端项目,可以选择使用Vue.js、React.js或Angular等框架进行开发。 2. 配置前端项目:在前端项目中,你需要配置相关的路由、页面组件以及与后端接口通信的方法。可以使用axios或fetch等工具发送HTTP请求。 3. 定义接口规范:在后端项目中,你需要定义接口的URL路径、请求方式、请求参数以及返回数据的格式。 4. 实现后端接口:根据前端定义的接口规范,在后端项目中实现对应的接口逻辑。可以使用RuoYi提供的注解和工具类简化开发过程。 5. 跨域配置:由于前后端分离的架构,前端项目和后端项目可能存在跨域请求的问题。你需要在后端配置跨域访问权限,确保前端可以正常调用后端接口。 6. 接口测试与调试:完成前后端的开发和配置后,你可以通过Postman或浏览器等工具进行接口测试和调试,确保数据的正常传输和交互。 7. 部署与运行:最后,你可以将前端项目打包成静态文件,并将其部署到Web服务器上。同时,将后端项目部署到应用服务器上,启动应用程序。 这样,你就成功实现RuoYi框架前后端分离。前端负责展示和用户交互,后端负责处理业务逻辑和数据存储。通过接口的方式进行通信,实现前后端的解耦和独立开发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cgv3

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值