第十九章：过滤条件的筛选和商品详情后台实现

最新推荐文章于 2025-12-10 08:00:00 发布

原创

最新推荐文章于 2025-12-10 08:00:00 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java #项目 #spring

本文介绍了商品过滤条件的筛选及后台实现，包括保存过滤项、后台添加过滤条件。此外，详细阐述了商品详情页的后台实现过程，包括商品详情页服务、页面跳转和模型数据封装。涉及到的技术栈包括Spring、Java。

此博客用于个人学习，来源于网上，对知识点进行一个整理。

1. 过滤条件的筛选：

当我们点击页面的过滤项，要做哪些事情？

把过滤条件保存在 search 对象中（watch 监控到 search 变化后就会发送到后台）
在页面顶部展示已选择的过滤项
把商品分类展示到顶部面包屑

1.1 保存过滤项：

1）定义属性：

我们把已选择的过滤项保存在 search 中：

在这里插入图片描述
要注意，在 created 构造函数中会对 search 进行初始化，所以要在构造函数中对 filter 进行初始化：

在这里插入图片描述
search.filter 是一个对象，结构：

{
   
   
    "过滤项名":"过滤项值"
}

2）绑定点击事件：

给所有的过滤项绑定点击事件：

在这里插入图片描述
要注意，点击事件传2个参数：

k：过滤项的 key
option：当前过滤项对象

在点击事件中，保存过滤项到 selectedFilter ：

selectFilter(k, o){
   
   
    const obj = {
   
   };
    Object.assign(obj, this.search);
    if(k === '分类' || k === '品牌'){
   
   
        o = o.id;
    }
    obj.filter[k] = o.name || o;
    this.search = obj;
}

另外，这里 search 对象中嵌套了 filter 对象，请求参数格式化时需要进行特殊处理，修改 common.js 中的一段代码：

在这里插入图片描述

1.2 后台添加过滤条件：

既然请求已经发送到了后台，那接下来我们就在后台去添加这些条件：

1）拓展请求对象：

我们需要在请求类： SearchRequest 中添加属性，接收过滤属性。过滤属性都是键值对格式，但是 key 不确定，所以用一个 map 来接收即可。

public class SearchRequest {
   
   
    private String key;// 搜索条件

    private Integer page;// 当前页

    private Map<String,Object> filter;//过滤条件

    private static final Integer DEFAULT_SIZE = 20;// 每页大小，不从页面接收，而是固定大小
    private static final Integer DEFAULT_PAGE = 1;// 默认页

    public String getKey() {
   
   
        return key;
    }

    public Map<String, Object> getFilter() {
   
   
        return filter;
    }

    public void setFilter(Map<String, Object> filter) {
   
   
        this.filter = filter;
    }

    public void setKey(String key) {
   
   
        this.key = key;
    }

    public Integer getPage() {
   
   
        if(page == null){
   
   
            return DEFAULT_PAGE;
        }
        // 获取页码时做一些校验，不能小于1
        return Math.max(DEFAULT_PAGE, page);
    }

    public void setPage(Integer page) {
   
   
        this.page = page;
    }

    public Integer getSize() {
   
   
        return DEFAULT_SIZE;
    }
}

2）添加过滤条件：

目前，我们的基本查询是这样的：

在这里插入图片描述
现在，我们要把页面传递的过滤条件也加入进去。

因此不能在使用普通的查询，而是要用到 BooleanQuery，基本结构是这样的：

GET /heima/_search
{
   
   
    "query":{
   
   
        "bool":{
   
   
        	"must":{
   
    "match": {
   
    "title": "小米手机",operator:"and"}},
        	"filter":{
   
   
                "range":{
   
   "price":{
   
   "gt":2000.00,"lt":3800.00}}
        	}
        }
    }
}

所以，我们对原来的基本查询进行改造，因为比较复杂，我们将其封装到一个方法中：

/**
 * 构建布尔查询
 * @param request
 * @return
 */
private BoolQueryBuilder buildBoolQueryBuilder(SearchRequest request) {
   
   
    BoolQueryBuilder boolQueryBuilder = QueryBuilders.boolQuery();
    //给布尔值添加基本查询条件
    boolQueryBuilder.must(QueryBuilders.matchQuery("all",request.getKey()).operator(Operator.AND));
    //添加过滤条件
    //获取用户选择的过滤信息
    Map<String,Object> filter = request.getFilter();
    for (Map.Entry<String,Object> entry: filter.entrySet()