商城项目-过滤条件的筛选
4.过滤条件的筛选
当我们点击页面的过滤项，要做哪些事情？
- 把过滤条件保存在search对象中（watch监控到search变化后就会发送到后台）
- 在页面顶部展示已选择的过滤项
- 把商品分类展示到顶部面包屑
4.1.保存过滤项
4.1.1.定义属性
我们把已选择的过滤项保存在search中：
在这里插入图片描述
要注意，在created构造函数中会对search进行初始化，所以要在构造函数中对filter进行初始化：
search.filter是一个对象，结构：
{
"过滤项名":"过滤项值"
}4.1.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;
this.search = obj;
}另外，这里search对象中嵌套了filter对象，请求参数格式化时需要进行特殊处理，修改common.js中的一段代码：
在这里插入图片描述
我们刷新页面，点击后通过浏览器功能查看search.filter的属性变化：
在这里插入图片描述
并且，此时浏览器地址也发生了变化：
http://www.leyou.com/search.html?key=%E6%89%8B%E6%9C%BA&page=1&filter.%E5%93%81%E7%89%8C=2032&filter.CPU%E5%93%81%E7%89%8C=%E6%B5%B7%E6%80%9D%EF%BC%88Hisilicon%EF%BC%89&filter.CPU%E6%A0%B8%E6%95%B0=%E5%8D%81%E6%A0%B8网络请求也正常发出：
在这里插入图片描述
4.2.后台添加过滤条件
既然请求已经发送到了后台，那接下来我们就在后台去添加这些条件：
4.2.1.拓展请求对象
我们需要在请求类：SearchRequest中添加属性，接收过滤属性。过滤属性都是键值对格式，但是key不确定，所以用一个map来接收即可。
在这里插入图片描述
4.2.2.添加过滤条件
目前，我们的基本查询是这样的：
在这里插入图片描述
现在，我们要把页面传递的过滤条件也进入进去。
因此不能在使用普通的查询，而是要用到BooleanQuery，基本结构是这样的：
GET /heima/_search
{
"query":{
"bool":{
"must":{ "match": { "title": "小米手机",operator:"and"}},
"filter":{
"range":{"price":{"gt":2000.00,"lt":3800.00}}
}
}
}
}所以，我们对原来的基本查询进行改造：
在这里插入图片描述
因为比较复杂，我们将其封装到一个方法中：
// 构建基本查询条件
private QueryBuilder buildBasicQueryWithFilter(SearchRequest request) {
BoolQueryBuilder queryBuilder = QueryBuilders.boolQuery();
// 基本查询条件
queryBuilder.must(QueryBuilders.matchQuery("all", request.getKey()).operator(Operator.AND));
// 过滤条件构建器
BoolQueryBuilder filterQueryBuilder = QueryBuilders.boolQuery();
// 整理过滤条件
Map<String, String> filter = request.getFilter();
for (Map.Entry<String, String> entry : filter.entrySet()) {
String key = entry.getKey();
String value = entry.getValue();
// 商品分类和品牌要特殊处理
if (key != "cid3" && key != "brandId") {
key = "specs." + key + ".keyword";
}
// 字符串类型，进行term查询
filterQueryBuilder.must(QueryBuilders.termQuery(key, value));
}
// 添加过滤条件
queryBuilder.filter(filterQueryBuilder);
return queryBuilder;
}其它不变。
4.3.页面测试
我们先不点击过滤条件，直接搜索手机：
在这里插入图片描述
总共184条
接下来，我们点击一个过滤条件：
在这里插入图片描述
得到的结果：
在这里插入图片描述
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录