JAVA排序和VUE排序组件

最新推荐文章于 2024-09-25 10:59:43 发布

LZYTJX

最新推荐文章于 2024-09-25 10:59:43 发布

阅读量428

点赞数 8

分类专栏： Java Vue 文章标签： java vue.js javascript

本文链接：https://blog.csdn.net/weixin_44147913/article/details/134733394

版权

Java Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章讲述了后端如何通过DTO和mapper处理排序逻辑，包括根据前端传入的参数动态生成排序条件，并介绍了在ES查询中的应用。同时，提及了前端Vue中利用my-search-sort组件实现排序功能的代码示例。

摘要由CSDN通过智能技术生成

后端，定义排序，dto中需要有两个属性：

    private Map<String, String> sortBy;
    //结果排序，asc正序，desc倒序
    private List<Map<String, String>> sortByList;

mapper中的条件也要写，order by，field是排序字段，order是规则

        <if test="sortByList != null ">
            order by
            <foreach item="item" index="index" collection="sortByList" separator=",">
                ${item.field} ${item.order}
            </foreach>
            ,n.id
        </if>

service中

 //定义一个Map集合，实现排序，通过具体字段和值排序
        Map<String, String> sortBy = paramDto.getSortBy();
        if (sortBy.size() > 0) { // 非空验证
            //key为"value"和"method"，value为属性值和方法值，例如："value" -> "id,name,age"；"method" -> "asc,des"。
            String[] valueArr = sortBy.get("value").split(",");
            String[] methodArr = sortBy.get("method").split(",");
            List<Map<String, String>> orderList = new ArrayList<>();
            //每个Map对象表示一个排序属性和排序方式，key为"field"和"order"，分别表示属性值和指定的排序方式，例如: {"field": "id", "order": "desc"}。
            for (int i = 0; i < valueArr.length; i++) {
                HashMap<String, String> sort = new HashMap<>();
                sort.put("field", valueArr[i]);
                // 当前端传递的排序方法为"des"时，需要将其转化为"desc"，否则直接使用前端传递过来的排序方法。
                sort.put("order", "des".equals(methodArr[i]) ? "desc" : methodArr[i]);  // 前端排序组件只能传”des“
                orderList.add(sort);
            }
            paramDto.setSortByList(orderList);
        }

进行测试的时候，比如用apiFox测试，传进来的字段名字，sortBy:{method:{},value:{}}，method对应的是排序方式，value对应的时候按照哪个值排序，普通查询时候根据数据库的字段名，在es查询时候，根据es索引中字段名字进行查询。

es怎么测

普通测试

----------------------------------------------------------后端处理结束-----------------------------------------------------前端VUE

需要一个存放排序的字段，第二要在页面中使用组件

            <my-search-sort
              :data="searchSort.sortSelectDataModel"
              ref="elSearchSort"
              :total="tableDataTotal"
              :default-value="searchSort.defaultSortSelect"
              v-model="formData.sortBy"
              @change="queryList"
              multiple
            >
            </my-search-sort>

data: 排序下拉列表的数据模型，包括每个选项的标签和值等。
ref: Vue引用名称，用于在组件中调用该组件。
total: 数据条目的总数，用于在下拉列表旁边显示数据的总数。
default-value: 默认的下拉列表选项值，用于在组件渲染时设置默认选项。
v-model: 绑定排序选项绑定的值，以便在选项更改时更新值。
@change: 绑定更改事件，当选项更改时调用 queryList 方法。
multiple: 允许多选下拉列表。