商城-搜尋過濾-過濾條件的篩選
- 4.過濾條件的篩選
-
- 4.1.儲存過濾項
-
- 4.1.1.定義屬性
- 4.1.2.綁定點選事件
- 4.2.背景添加過濾條件
-
- 4.2.1.拓展請求對象
- 4.2.2.添加過濾條件
- 4.3.頁面測試
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條
接下來，我們點選一個過濾條件：
得到的結果：