0.学习目标
- 了解过滤功能的基本思路
- 独立实现分类和品牌展示
- 了解规格参数展示
- 实现过滤条件筛选
- 实现已选过滤项回显
- 实现取消选择过滤项
1.过滤功能分析
首先看下页面要实现的效果:
整个过滤部分有3块:
- 顶部的导航,已经选择的过滤条件展示:
- 商品分类面包屑,根据用户选择的商品分类变化
- 其它已选择过滤参数
- 过滤条件展示,又包含3部分
- 商品分类展示
- 品牌展示
- 其它规格参数
- 展开或收起的过滤条件的按钮
顶部导航要展示的内容跟用户选择的过滤条件有关。
- 比如用户选择了某个商品分类,则面包屑中才会展示具体的分类
- 比如用户选择了某个品牌,列表中才会有品牌信息。
所以,这部分需要依赖第二部分:过滤条件的展示和选择。因此我们先不着急去做。
展开或收起的按钮是否显示,取决于过滤条件现在有多少,如果有很多,那么就没必要展示。所以也是跟第二部分的过滤条件有关。
这样分析来看,我们必须先做第二部分:过滤条件展示。
2.生成分类和品牌过滤
先来看分类和品牌。在我们的数据库中已经有所有的分类和品牌信息。在这个位置,是不是把所有的分类和品牌信息都展示出来呢?
显然不是,用户搜索的条件会对商品进行过滤,而在搜索结果中,不一定包含所有的分类和品牌,直接展示出所有商品分类,让用户选择显然是不合适的。
无论是分类信息,还是品牌信息,都应该从搜索的结果商品中进行聚合得到。
2.1.扩展返回的结果
原来,我们返回的结果是PageResult对象,里面只有total、totalPage、items3个属性。但是现在要对商品分类和品牌进行聚合,数据显然不够用,我们需要对返回的结果进行扩展,添加分类和品牌的数据。
那么问题来了:以什么格式返回呢?
看页面:
分类:页面显示了分类名称,但背后肯定要保存id信息。所以至少要有id和name
品牌:页面展示的有logo,有文字,当然肯定有id,基本上是品牌的完整数据
我们新建一个类,继承PageResult,然后扩展两个新的属性:分类集合和品牌集合:
我们新建一个类,继承PageResult,然后扩展两个新的属性:分类集合和品牌集合:
public class SearchResult extends PageResult<Goods>{
private List<Category> categories;
private List<Brand> brands;
public SearchResult(Long total, Integer totalPage, List<Goods> items, List<Category> categories, List<Brand> brands) {
super(total, totalPage, items);
this.categories = categories;
this.brands = brands;
}
}
2.2.聚合商品分类和品牌
我们修改搜索的业务逻辑,对分类和品牌聚合。
因为索引库中只有id,所以我们根据id聚合,然后再根据id去查询完整数据。
所以,商品微服务需要提供一个接口:根据品牌id集合,批量查询品牌。
2.2.1.提供查询品牌接口
BrandApi
@RequestMapping("brand")
public interface BrandApi {
@GetMapping("list")
List<Brand> queryBrandByIds(@RequestParam("ids") List<Long> ids);
}
BrandController
/**
* 根据多个id查询品牌
* @param ids
* @return
*/
@GetMapping("list")
public ResponseEntity<List<Brand>> queryBrandByIds(@RequestParam("ids") List<Long> ids){
List<Brand> list = this.brandService.queryBrandByIds(ids);
if(list == null){
new ResponseEntity<>(HttpStatus.NOT_FOUND);
}
return ResponseEntity.ok(list);
}
BrandService
public List<Brand> queryBrandByIds(List<Long> ids) {
return this.brandMapper.selectByIdList(ids);
}
BrandMapper
继承通用mapper的 SelectByIdListMapper
即可
public interface BrandMapper extends Mapper<Brand>, SelectByIdListMapper<Brand,Long> {}
2.2.2.搜索功能改造
添加BrandClient
@FeignClient("item-service")
public interface BrandClient extends BrandApi {
}
修改SearchService:
@Service
public class SearchService {
@Autowired
private CategoryClient categoryClient;
@Autowired
private BrandClient brandClient;
@Autowired
private GoodClient goodClient;
@Autowired
private SpecificationClient specificationClient;
@Autowired
private GoodsRepository repository;
@Autowired
private ElasticsearchTemplate template;
}
public PageResult<Goods> search(SearchRequest request) {
Integer page = request.getPage() - 1;
Integer size = request.getSize();
//创建查询构建器
NativeSearchQueryBuilder queryBuilder = new NativeSearchQueryBuilder();
//过滤
queryBuilder.withSourceFilter(new FetchSourceFilter(new String[]{"id","skus","subTitle"}, null));
//分页
queryBuilder.withPageable(PageRequest.of(page,size));
//过滤
//queryBuilder.withQuery(QueryBuilders.matchQuery("all",request.getKey()));
//排序
String sortBy = request.getSortBy();
Boolean desc = request.getDescending();
if (StringUtils.isNotBlank(sortBy)){
queryBuilder.withSort(SortBuilders.fieldSort(sortBy).order(desc? SortOrder.DESC :SortOrder.ASC));
}
//聚合分类和品牌
//聚合分类
String categoryAggName = "category_agg";
queryBuilder.addAggregation(AggregationBuilders.terms(categoryAggName).field("cid3"));
//聚合品牌
String brandAggName = "brand_agg";
queryBuilder.addAggregation(AggregationBuilders.terms(brandAggName).field("brandId"));
AggregatedPage<Goods> pageInfo = (AggregatedPage<Goods>) this.repository.search(queryBuilder.build());
//查询
//Page<Goods> result = repository.search(queryBuilder.build());
AggregatedPage<Goods> result = template.queryForPage(queryBuilder.build(),Goods.class);
//解析结果
//解析分页结果
long total = result.getTotalElements();
Integer totalPage =result.getTotalPages();
List<Goods> goodsList = result.getContent();
// return new PageResult<>(total, totalPage, goodsList);
//解析聚合结果
Aggregations aggs = result.getAggregations();
//List<Category> categories =parseBrandAgg(pageInfo.getAggregation(categoryAggName));
List<Category> categories =parseCategoryAgg(aggs.get(categoryAggName));
List<Brand> brands = parseBrandAgg(aggs.get(brandAggName));
return new SearchResult(total,totalPage,goodsList,categories,brands);
}
private List<Brand> parseBrandAgg(LongTerms terms) {
try {
List<Long> ids = terms.getBuckets()
.stream().map(b -> b.getKeyAsNumber()
.longValue()).collect(Collectors.toList());
List<Brand> brands = brandClient.queryBrandByIds(ids);
return brands;
} catch (Exception e) {
return null;
}
}
private List<Category> parseCategoryAgg(LongTerms terms) {
try {
List<Long> ids = terms.getBuckets()
.stream().map(b -> b.getKeyAsNumber()
.longValue()).collect(Collectors.toList());
List<Category> categories = categoryClient.queryCategoryByIds(ids);
return categories;
} catch (Exception e) {
return null;
}
}
测试:
2.3.页面渲染数据
2.3.1.过滤参数数据结构
来看下页面的展示效果:
虽然分类、品牌内容都不太一样,但是结构相似,都是key和value的结构。
而且页面结构也极为类似:
所以,我们可以把所有的过滤条件放入一个数组
中,然后在页面利用v-for
遍历一次生成。
其基本结构是这样的:
[
{
k:"过滤字段名",
options:[{/*过滤字段值对象*/},{/*过滤字段值对象*/}]
}
]
我们先在data中定义数组,等待组装过滤参数:
然后在查询搜索结果的回调函数中,对过滤参数进行封装:
然后刷新页面,通过浏览器工具,查看封装的结果:
2.3.2.页面渲染数据
首先看页面原来的代码:
我们注意到,虽然页面元素是一样的,但是品牌会比其它搜搜条件多出一些样式,因为品牌是以图片展示。需要进行特殊处理。数据展示是一致的,我们采用v-for处理:
<div v-for="(f,i) in filters" :key="i" class="type-wrap" v-if="f.k !== 'brandId'">
<div class="fl key">{{f.k === 'cid3' ? '分类' : f.k}}</div>
<div class="fl value">
<ul class="type-list">
<li v-for="(option,j) in f.options" :key="j">
<a href="javascript:void(0);">{{option.name}}</a>
</li>
</ul>
</div>
<div class="fl ext">
<a href="javascript:void(0);" class="sui-btn">多选</a>
</div>
</div>
<div class="type-wrap logo" v-else>
<div class="fl key brand">{{f.k}}</div>
<div class="value logos">
<ul class="logo-list">
<li v-for="(option,j) in f.options" :key="j" v-if="option.image">
<img :src="option.image"/>
</li>
<li style="text-align: center" v-else>
<a style="line-height: 30px; font-size: 12px" href="#">{{option.name}}</a>
</li>
</ul>
</div>
<div class="fl ext">
<a href="javascript:void(0);" class="sui-btn">多选</a>
</div>
</div>
结果: