目錄
1 檢索服務(wù)?
1.1 搭建頁(yè)面環(huán)境
1.1.1 引入依賴
1.1.2 將檢索頁(yè)面放到gulimall-search的src/main/resources/templates/目錄下
1.1.3 調(diào)整搜索頁(yè)面
1.1.4?將靜態(tài)資源放到linux的nginx相關(guān)映射目錄下/root/docker/nginx/html/static/ search/
1.1.5?SwitchHosts配置域名轉(zhuǎn)發(fā)
1.1.6?測(cè)試
1.1.7?nginx配置
1.1.8 網(wǎng)關(guān)配置
1.1.9 重啟測(cè)試
1.2 調(diào)整頁(yè)面跳轉(zhuǎn)
1.2.1 引入spring-boot-devtools依賴
1.2.2 關(guān)閉thymeleaf緩存
1.2.3 修改頁(yè)面能夠跳轉(zhuǎn)到商城首頁(yè)
1.2.4 修改index.html文件名
1.3 檢索查詢參數(shù)模型分析抽取
1.3.1 檢索條件分析
1.3.2 查詢參數(shù)封裝
1.4 檢索返回結(jié)果模型分析抽取
1.5 檢索DSL測(cè)試
1.5.1 DSL查詢部分
1.5.1.1 查詢部分DSL
1.5.1.2 查詢部分+排序+分頁(yè)+高亮DSL
1.5.2 聚合部分
1.5.2.1 聚合時(shí)出現(xiàn)的問(wèn)題Use doc values instead
1.5.2.1.1 報(bào)錯(cuò)原因
1.5.2.1.2 解決方案
1.5.2.2 聚合部分DSL
1.5.3 總的DSL（查詢+聚合）
1.6 SearchRequest構(gòu)建
1.6.1 檢索、排序、分頁(yè)、高亮、聚合
1.6.1.1 controller層
1.6.1.2?service層
1.6.1.3 EsConstant.java（Es常量類）
1.6.2 測(cè)試
1.7 SearchResponse分析&封裝
1.8 驗(yàn)證結(jié)果封裝正確性
1.9 渲染檢索頁(yè)面【P184-192】
1.9.1 檢索頁(yè)面完整代碼
1.9.2 檢索服務(wù)后端相關(guān)代碼
1.9.2.1 引入依賴
1.9.2.2 vo
1.9.2.3 controller
1.9.2.4 service
1.9.2.5 遠(yuǎn)程調(diào)用接口
1.9.3 遠(yuǎn)程服務(wù)相關(guān)接口
1.9.3.1 attrInfo接口
1.9.3.2 brandsInfo接口
1 檢索服務(wù)?
1.1 搭建頁(yè)面環(huán)境
1. 引入依賴
2. 將頁(yè)面復(fù)制到gulimall-search的src/main/resources/templates/目錄下
3. 調(diào)整搜索頁(yè)面
1）引入thymeleaf
xmlns:th="http://www.thymeleaf.org"
2）修改頁(yè)面靜態(tài)資源的引入，加上/static/search
eg:
由
<link rel="stylesheet" href="./css/index.css">
改為：
<link rel="stylesheet" href="/static/search/css/index.css">
4. 將靜態(tài)資源放到linux的nginx相關(guān)映射目錄下/root/docker/nginx/html/static/search/
5. SwitchHosts配置域名轉(zhuǎn)發(fā)
1）以管理員身份運(yùn)行SwitchHosts；
2）讓所有的search.gulimall.com可以定位到linux的nginx服務(wù)
6. 測(cè)試
1）瀏覽器訪問(wèn)http://localhost:12000
2）瀏覽器訪問(wèn)http://search.gulimall.com/
7. nginx配置
8. 網(wǎng)關(guān)配置
9. 測(cè)試 http://search.gulimall.com/
1.1.1 引入依賴
<!-- 模板引擎 ：thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>1.1.2 將檢索頁(yè)面放到gulimall-search的src/main/resources/templates/目錄下
1.1.3 調(diào)整搜索頁(yè)面
? ? ? ? 引入thymeleaf，修改引入靜態(tài)資源的路徑以/static/search開(kāi)始。以下為了舉例，list.html完整代碼見(jiàn) 1.9.1 檢索頁(yè)面完整代碼
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/search/css/index.css">
<link rel="stylesheet" type="text/css" href="/static/search/font/iconfont.css">
<!--<script src="/static/search/js/jquery-3.2.1.min.js"></script>-->
<script src="/static/search/js/jquery-1.12.4.js"></script>
<title>Document</title>
</head>
...1.1.4?將靜態(tài)資源放到linux的nginx相關(guān)映射目錄下/root/docker/nginx/html/static/ search/
1.1.5?SwitchHosts配置域名轉(zhuǎn)發(fā)
? ? (1）以管理員身份運(yùn)行SwitchHosts；
? ? (2）讓所有的search.gulimall.com可以定位到linux的nginx服務(wù)
1.1.6?測(cè)試
? ? (1）瀏覽器訪問(wèn)http://localhost:12000
? ? (2）瀏覽器訪問(wèn)http://search.gulimall.com/
1.1.7?nginx配置
（1）修改gulimall.conf，將 server_name 由 gulimall.com 改為 *.gulimall.com
（2）保存gulimall.conf并重啟nginx。# 進(jìn)入/root/docker/nginx/conf/conf.d/
cd /root/docker/nginx/conf/conf.d/
# 進(jìn)入gulimall.conf，修改server_name
vi gulimall.conf
# 重啟nginx
docker restart nginx
# 查看nginx是否啟動(dòng)成功
docker ps -a
1.1.8 網(wǎng)關(guān)配置
- id: gulimall_host_route
uri: lb://gulimall-product
predicates:
# 由以下的主機(jī)域名訪問(wèn)轉(zhuǎn)發(fā)到商品服務(wù)
- Host=gulimall.com
- id: gulimall_search_route
uri: lb://gulimall-search
predicates:
# 由以下的主機(jī)域名訪問(wèn)轉(zhuǎn)發(fā)到搜索服務(wù)
- Host=search.gulimall.com1.1.9 重啟測(cè)試
http://search.gulimall.com/
?注意靜態(tài)資源的路徑是否正確；有些圖片可能缺失，影響不大。
1.2 調(diào)整頁(yè)面跳轉(zhuǎn)
1.2.1 引入spring-boot-devtools依賴
????????前面已經(jīng)引入。
1.2.2 關(guān)閉thymeleaf緩存
頁(yè)面修改后同過(guò)Ctrl+Shift+F9對(duì)html頁(yè)面進(jìn)行重新構(gòu)建，無(wú)需重啟項(xiàng)目
spring:
thymeleaf:
cache: false1.2.3 修改頁(yè)面能夠跳轉(zhuǎn)到商城首頁(yè)
效果要求：點(diǎn)擊搜索頁(yè)面左上角的谷粒商城首頁(yè)或谷粒商城都能跳轉(zhuǎn)到商城首頁(yè)。如下圖：?
1. 修改頁(yè)面代碼：（跳轉(zhuǎn)路徑 http://gulimall.com）
2. 測(cè)試：
點(diǎn)擊谷粒商城首頁(yè)或谷粒商城
3. 解決商城首頁(yè)顯示問(wèn)題
server_name gulimall.com *.gulimall.com;相關(guān)命令：
# 進(jìn)入gulimall.conf，修改server_name
vi gulimall.conf
# 重啟nginx
docker restart nginx重啟nginx，訪問(wèn) gulimall.com：
1.2.4 修改index.html文件名
1. gulimall-search下的index.html重命名為list.html
原因:在首頁(yè)點(diǎn)擊搜索跳轉(zhuǎn)的鏈接為list.html
2. 新增由/list.html能跳轉(zhuǎn)到list.thml頁(yè)面的方法gulimall-search/src/main/java/com/wen/gulimall/search/controller/SearchController.java
@Controller
public class SearchController {
@GetMapping("/list.html")
public String listPage(){
return "list";
}
}
3. 將gulimall-product的index.html頁(yè)面中的search()方法的調(diào)用由img標(biāo)簽放到a標(biāo)簽
?4. 重啟服務(wù)測(cè)試
1.3 檢索查詢參數(shù)模型分析抽取
1.3.1 檢索條件分析
- 全文檢索：skuTitle-》keyword
- 排序：saleCount（銷量）、hotScore（熱度分）、skuPrice（價(jià)格）
- 過(guò)濾：hasStock、skuPrice區(qū)間、brandId、catalog3Id、attrs
- 聚合：attrs
完整查詢參數(shù)
keyword=小米&sort=saleCount_desc/asc&hasStock=0/1&skuPrice=400_1900&brandId=1&catalog3Id=1&at trs=1_3G:4G:5G&attrs=2_驍龍845&attrs=4_高清屏
1.3.2 查詢參數(shù)封裝
gulimall-search/src/main/java/com/wen/gulimall/search/vo/SearchParam.java
/**
* @author W
* @createDate 2023/7/17 16:10
* @description 封裝頁(yè)面所有可能傳遞過(guò)來(lái)的查詢條件
* catalog3Id=255&keyword=小米&sort=saleCount_asc&hasStock=0/1&bandId=1&bandId=2
*/
@Data
public class SearchParam {
private String keyword; // 頁(yè)面穿過(guò)來(lái)的全文匹配關(guān)鍵字
private Long catalog3Id; // 三級(jí)分類的id
/**
* sort=saleCount_asc/desc
* sort=skuPrice_asc/desc
* sort=hotScore_asc/desc
*/
private String sort; //排序條件
/**
* 好多的過(guò)濾條件
* hasStock=0/1
* skuPrice=1_500/_500/500_
* bandId=1
* attrs=2_5寸：6寸
*/
private Integer hasStock; // 是否只顯示有貨
private String skuPrice;// 價(jià)格區(qū)間查詢
private List<Long> brandId;// 按照品牌進(jìn)行查詢，可以多選
private List<String> attrs;// 按照屬性進(jìn)行篩選
private Integer pageNum;// 頁(yè)碼
}
1.4 檢索返回結(jié)果模型分析抽取
gulimall-search/src/main/java/com/wen/gulimall/search/vo/SearchResult.java
@Data
public class SearchResult {
// 查詢到的所有商品信息
private List<SkuEsModel> products;
/**
* 以下是分頁(yè)信息
*/
private Integer pageNum; // 當(dāng)前頁(yè)碼
private Long total; // 總記錄數(shù)
private Integer totalPages; // 總頁(yè)碼
private List<BrandVo> brands; // 當(dāng)前查詢到的結(jié)果，所有涉及到的品牌
private List<CatalogVo> catalogs; // 當(dāng)前查詢到的結(jié)果，所有涉及到的所有分類
private List<AttrVo> attrs; // 當(dāng)前查詢到的結(jié)果，所有涉及到的所有屬性
//========================以上是返回給頁(yè)面的所有信息==========================
@Data
public static class BrandVo{
private Long brandId;
private String brandName;
private String brandImg;
}
@Data
public static class CatalogVo{
private Long catalogId;
private String catalogName;
}
@Data
public static class AttrVo{
private Long attrId;
private String attrName;
private List<String> attrValue;
}
}1.5 檢索DSL測(cè)試
1.5.1 DSL查詢部分
- 屬性數(shù)據(jù)類型為嵌入式，即"type"="nested"，查詢、過(guò)濾也需要嵌入式?？蓞⒄展倬W(wǎng)：Nested query | Elasticsearch Guide [7.4] | Elastic
- 價(jià)格區(qū)間使用range gte lte.
1.5.1.1 查詢部分DSL
# 查詢部分
GET product/_search
{
"query": {
"bool": {
"must": [
{
"match": {
"skuTitle": "華為"
}
}
],
"filter": [
{
"term": {
"catalogId": 225
}
},
{
"terms": {
"brandId": [
"1",
"2",
"7"
]
}
},
{
"nested": {
"path": "attrs",
"query": {
"bool": {
"must": [
{
"term": {
"attrs.attrId": {
"value": "12"
}
}
},
{
"terms": {
"attrs.attrValue": [
"HUAWEI Kirin 980",
"A13"
]
}
}
]
}
}
}
},
{
"term": {
"hasStock": {
"value": "false"
}
}
},
{
"range": {
"skuPrice": {
"gte": 0,
"lte": 6000
}
}
}
]
}
}
}1.5.1.2 查詢部分+排序+分頁(yè)+高亮DSL
模糊匹配，過(guò)濾（按照屬性，分類，品牌，價(jià)格區(qū)間，庫(kù)存），排序，分頁(yè)，高亮，聚合分析
# 模糊匹配，過(guò)濾（按照屬性，分類，品牌，價(jià)格區(qū)間，庫(kù)存），排序，分頁(yè)，高亮，聚合分析
GET product/_search
{
"query": {
"bool": {
"must": [
{
"match": {
"skuTitle": "華為"
}
}
],
"filter": [
{
"term": {
"catalogId": 225
}
},
{
"terms": {
"brandId": [
"1",
"2",
"7"
]
}
},
{
"nested": {
"path": "attrs",
"query": {
"bool": {
"must": [
{
"term": {
"attrs.attrId": {
"value": "12"
}
}
},
{
"terms": {
"attrs.attrValue": [
"HUAWEI Kirin 980",
"A13"
]
}
}
]
}
}
}
},
{
"term": {
"hasStock": {
"value": "false"
}
}
},
{
"range": {
"skuPrice": {
"gte": 0,
"lte": 6000
}
}
}
]
}
},
"sort": [
{
"skuPrice": {
"order": "desc"
}
}
],
"from": 0,
"size": 1,
"highlight": {
"fields": {"skuTitle": {}},
"pre_tags": "<b style='color:red'>",
"post_tags": "</b>"
}
}1.5.2 聚合部分
1.5.2.1 聚合時(shí)出現(xiàn)的問(wèn)題Use doc values instead
1.5.2.1.1 報(bào)錯(cuò)原因
1. mapping映射參數(shù)index、doc_values使用說(shuō)明：?
- ?index：index選項(xiàng)控制是否對(duì)字段值進(jìn)行索引。它接受true或false，默認(rèn)為true。如果為 false， 表示該字段不會(huì)被索引， 但是檢索結(jié)果里面有， 但字段本身不能當(dāng)做檢索條件。
- doc_values：默認(rèn)為true。如果為false，表示字段不需要進(jìn)行排序、聚合、或者使用腳本訪問(wèn)字段值，這樣可以節(jié)省磁盤空間。還可以通過(guò)設(shè)定doc_values為true，index為false 來(lái)讓字段不能被檢索但是可以用于排序、聚合以及腳本操作。
? ? ? ? 具體可以參照官網(wǎng)：mapping parameters
2. 錯(cuò)誤原因：
????????brandName屬性的doc_values為false不可以進(jìn)行聚合。
1.5.2.1.2 解決方案
????????更新映射，刪除映射中的index和doc_values參數(shù)。
（1）創(chuàng)建新的索引指定映射
PUT gulimall_product
{
"mappings": {
"properties": {
"skuId": {
"type": "long"
},
"spuId": {
"type": "keyword"
},
"skuTitle": {
"type": "text",
"analyzer": "ik_smart"
},
"skuPrice": {
"type": "keyword"
},
"skuImg": {
"type": "keyword"
},
"saleCount": {
"type": "long"
},
"hasStock": {
"type": "boolean"
},
"hotScore": {
"type": "long"
},
"brandId": {
"type": "long"
},
"catalogId": {
"type": "long"
},
"brandName": {
"type": "keyword"
},
"brandImg": {
"type": "keyword"
},
"catalogName": {
"type": "keyword"
},
"attrs": {
"type": "nested",
"properties": {
"attrId": {
"type": "long"
},
"attrName": {
"type": "keyword"
},
"attrValue": {
"type": "keyword"
}
}
}
}
}
}（2）遷移數(shù)據(jù)
# 數(shù)據(jù)遷移
POST _reindex
{
"source": {
"index": "product"
},
"dest": {
"index": "gulimall_product"
}
}遷移成功
?（3）修改索引常量名
由product改為gulimall_product
public class EsConstant {
public static final String PRODUCT_INDEX = "gulimall_product";
}1.5.2.2 聚合部分DSL
（1）DSL聚合部分
GET gulimall_product/_search
{
"query": {
"match_all": {}
},
"aggs": {
"brand_agg": {
"terms": {
"field": "brandId",
"size": 10
},
"aggs": {
"brand_name_agg": {
"terms": {
"field": "brandName",
"size": 10
}
},
"brand_img_agg":{
"terms": {
"field": "brandImg",
"size": 10
}
}
}
},
"catalog_agg":{
"terms": {
"field": "catalogId",
"size": 10
},
"aggs": {
"catalog_name_agg": {
"terms": {
"field": "catalogName",
"size": 10
}
}
}
},
"attr_agg":{
"nested": {
"path": "attrs"
},
"aggs": {
"attr_id_agg": {
"terms": {
"field": "attrs.attrId",
"size": 10
},
"aggs": {
"attr_name_agg": {
"terms": {
"field": "attrs.attrName",
"size": 10
}
},
"attr_value_agg":{
"terms": {
"field": "attrs.attrValue",
"size": 10
}
}
}
}
}
}
}
}1.5.3 總的DSL（查詢+聚合）
GET gulimall_product/_search
{
"query": {
"bool": {
"must": [
{
"match": {
"skuTitle": "華為"
}
}
],
"filter": [
{
"term": {
"catalogId": 225
}
},
{
"terms": {
"brandId": [
"1",
"2",
"7"
]
}
},
{
"nested": {
"path": "attrs",
"query": {
"bool": {
"must": [
{
"term": {
"attrs.attrId": {
"value": "12"
}
}
},
{
"terms": {
"attrs.attrValue": [
"HUAWEI Kirin 980",
"A13"
]
}
}
]
}
}
}
},
{
"term": {
"hasStock": {
"value": "false"
}
}
},
{
"range": {
"skuPrice": {
"gte": 0,
"lte": 6000
}
}
}
]
}
},
"sort": [
{
"skuPrice": {
"order": "desc"
}
}
],
"from": 0,
"size": 1,
"highlight": {
"fields": {"skuTitle": {}},
"pre_tags": "<b style='color:red'>",
"post_tags": "</b>"
},
"aggs": {
"brand_agg": {
"terms": {
"field": "brandId",
"size": 10
},
"aggs": {
"brand_name_agg": {
"terms": {
"field": "brandName",
"size": 10
}
},
"brand_img_agg":{
"terms": {
"field": "brandImg",
"size": 10
}
}
}
},
"catalog_agg":{
"terms": {
"field": "catalogId",
"size": 10
},
"aggs": {
"catalog_name_agg": {
"terms": {
"field": "catalogName",
"size": 10
}
}
}
},
"attr_agg":{
"nested": {
"path": "attrs"
},
"aggs": {
"attr_id_agg": {
"terms": {
"field": "attrs.attrId",
"size": 10
},
"aggs": {
"attr_name_agg": {
"terms": {
"field": "attrs.attrName",
"size": 10
}
},
"attr_value_agg":{
"terms": {
"field": "attrs.attrValue",
"size": 10
}
}
}
}
}
}
}
}1.6 SearchRequest構(gòu)建
1.6.1 檢索、排序、分頁(yè)、高亮、聚合
1.6.1.1 controller層
gulimall-search/src/main/java/com/wen/gulimall/search/controller/SearchController.java
@Controller
public class SearchController {
@Resource
private MallSearchService mallSearchService;
/**
* 自動(dòng)將頁(yè)面提交過(guò)來(lái)的所有請(qǐng)求查詢參數(shù)封裝成指定的對(duì)象
* @param searchParam
* @return
*/
@GetMapping("/list.html")
public String listPage(SearchParam searchParam, Model model){
// 1. 根據(jù)傳遞來(lái)的頁(yè)面的查詢參數(shù)，去es中檢索商品
SearchResult result = mallSearchService.search(searchParam);
model.addAttribute("result", result);
return "list";
}
}1.6.1.2?service層
gulimall-search/src/main/java/com/wen/gulimall/search/service/MallSearchService.java
public interface MallSearchService {
/**
*
* @param searchParam 檢索的所有參數(shù)
* @return 返回檢索的結(jié)果，里面包含頁(yè)面需要的所有信息
*/
SearchResult search(SearchParam searchParam);
}gulimall-search/src/main/java/com/wen/gulimall/search/service/impl/MallSearchServiceImpl.java
@Service
public class MallSearchServiceImpl implements MallSearchService {
@Resource
private RestHighLevelClient restHighLevelClient;
// 根據(jù)條件去es中檢索
@Override
public SearchResult search(SearchParam searchParam) {
// 動(dòng)態(tài)的構(gòu)建出查詢所需要的DSL
SearchResult result = null;
// 1. 準(zhǔn)備檢索請(qǐng)求
SearchRequest searchRequest = buildSearchRequest(searchParam);
try {
// 2. 執(zhí)行檢索請(qǐng)求
SearchResponse searchResponse = restHighLevelClient.search(searchRequest, GulimallElasticsearchConfig.COMMON_OPTIONS);
// 3. 分析響應(yīng)數(shù)據(jù)，封裝成需要的格式
result = buildSearchResponse(searchParam,searchResponse);
} catch (IOException e) {
e.printStackTrace();
}
return result;
}
/**
* 準(zhǔn)備檢索請(qǐng)求
* # 模糊匹配，過(guò)濾（按照屬性，分類，品牌，價(jià)格區(qū)間，庫(kù)存），排序，分頁(yè)，高亮，聚合分析
* @return
*/
private SearchRequest buildSearchRequest(SearchParam searchParam) {
// 構(gòu)建DSL語(yǔ)句對(duì)象
SearchSourceBuilder sourceBuilder = new SearchSourceBuilder();
/**
* 查詢：模糊匹配，過(guò)濾（按照屬性，分類，品牌，價(jià)格區(qū)間，庫(kù)存）
*/
// 1. 構(gòu)建bool - query
BoolQueryBuilder boolQuery = QueryBuilders.boolQuery();
// 1.1 bool - must 模糊匹配
if(StrUtil.isNotEmpty(searchParam.getKeyword())){
boolQuery.must(QueryBuilders.matchQuery("skuTitle",searchParam.getKeyword()));
}
// 1.2 bool - filter - 按照三級(jí)分類id查詢
if(searchParam.getCatalog3Id() != null){
boolQuery.filter(QueryBuilders.termQuery("catalogId",searchParam.getCatalog3Id()));
}
// 1.2 bool -filter - 按照品牌id查詢
if(CollectionUtil.isNotEmpty(searchParam.getBrandId())){
boolQuery.filter(QueryBuilders.termsQuery("brandId",searchParam.getBrandId()));
}
// 1.2 bool - filter - 按照所有指定的屬性進(jìn)行查詢
if(CollectionUtil.isNotEmpty(searchParam.getAttrs())){
// attrs=1_5寸:6寸&attrs=2_8G:16G
for (String attrStr : searchParam.getAttrs()) {
String[] s = attrStr.split("_");
String attrId = s[0]; // 檢索的屬性id
String[] attrValues = s[1].split(":"); // 這個(gè)屬性檢索所需要的值
BoolQueryBuilder nestedBoolQuery = QueryBuilders.boolQuery();
nestedBoolQuery.must(QueryBuilders.termQuery("attrs.attrId",attrId));
nestedBoolQuery.must(QueryBuilders.termsQuery("attrs.attrValue",attrValues));
// ScoreMode.None 不參與評(píng)分
// 每一個(gè)必須都得生成一個(gè)nested查詢
NestedQueryBuilder nestedQuery = QueryBuilders.nestedQuery("attrs", nestedBoolQuery, ScoreMode.None);
boolQuery.filter(nestedQuery);
}
}
// 1.2 bool -filter - 按照庫(kù)存是否有進(jìn)行查詢
if(searchParam.getHasStock() != null) {
boolQuery.filter(QueryBuilders.termQuery("hasStock", searchParam.getHasStock() == 1));
}
// 1.2 bool -filter - 按照價(jià)格區(qū)間
if(StrUtil.isNotEmpty(searchParam.getSkuPrice())){
String[] s = searchParam.getSkuPrice().split("_");
RangeQueryBuilder rangeQuery = QueryBuilders.rangeQuery("skuPrice");
if(s.length == 2){
rangeQuery.gte(s[0]).lte(s[1]);
boolQuery.filter(rangeQuery);
}else if(s.length == 1){
if(searchParam.getSkuPrice().startsWith("_")){
rangeQuery.lte(s[0]);
boolQuery.filter(rangeQuery);
}
if(searchParam.getSkuPrice().endsWith("_")){
rangeQuery.gte(s[0]);
boolQuery.filter(rangeQuery);
}
}
}
// 把以上所有的條件都拿來(lái)進(jìn)行封裝
sourceBuilder.query(boolQuery);
/**
* 排序，分頁(yè)，高亮
*/
// 2.1 排序
if(StrUtil.isNotEmpty(searchParam.getSort())){
// sort=saleCount_asc/desc
String[] s = searchParam.getSort().split("_");
SortOrder order = s[1].equalsIgnoreCase("asc")?SortOrder.ASC:SortOrder.DESC;
sourceBuilder.sort(s[0],order);
}
// 2.2 分頁(yè) pageSize = 5
// pageNum:1 from:0 size:5
// pageNum:2 form:5 size:5
// from = (pageNum - 1)*size
sourceBuilder.from((searchParam.getPageNum()-1)*EsConstant.PRODUCT_PAGESIZE);
sourceBuilder.size(EsConstant.PRODUCT_PAGESIZE);
// 2.3 高亮
if(StrUtil.isNotEmpty(searchParam.getKeyword())) {
HighlightBuilder builder = new HighlightBuilder();
builder.field("skuTitle");
builder.preTags("<b style='color:red'>");
builder.postTags("</b>");
sourceBuilder.highlighter(builder);
}
/**
* 聚合分析
*/
// 1. 品牌聚合
TermsAggregationBuilder brand_agg = AggregationBuilders.terms("brand_agg");
brand_agg.field("brandId").size(50);
// 品牌聚合的子聚合
brand_agg.subAggregation(AggregationBuilders.terms("brand_name_agg").field("brandName").size(1));
brand_agg.subAggregation(AggregationBuilders.terms("brand_img_agg").field("brandImg").size(1));
// TODO 1.聚合brand
sourceBuilder.aggregation(brand_agg);
// 2. 分類聚合 catalog_agg
TermsAggregationBuilder catalog_agg = AggregationBuilders.terms("catalog_agg").field("catalogId").size(20);
// 分類聚合的子聚合
catalog_agg.subAggregation(AggregationBuilders.terms("catalog_name_agg").field("catalogName").size(1));
// TODO 1.聚合catalog
sourceBuilder.aggregation(catalog_agg);
// 3. 屬性聚合
NestedAggregationBuilder attr_agg = AggregationBuilders.nested("attr_agg", "attrs");
// 聚合出當(dāng)前所有的attrId
TermsAggregationBuilder attr_id_agg = AggregationBuilders.terms("attr_id_agg").field("attrs.attrId").size(10);
// 聚合出當(dāng)前所有的attr_id對(duì)應(yīng)的名字
attr_id_agg.subAggregation(AggregationBuilders.terms("attr_name_agg").field("attrs.attrName").size(1));
// 聚合出當(dāng)前所有的attr_id對(duì)應(yīng)的所有可能的屬性值attrValue
attr_id_agg.subAggregation(AggregationBuilders.terms("attr_value_agg").field("attrs.attrValue").size(50));
attr_agg.subAggregation(attr_id_agg);
// TODO 1.聚合attr
sourceBuilder.aggregation(attr_agg);
System.out.println("構(gòu)建的DSL語(yǔ)句"+sourceBuilder.toString());
SearchRequest searchRequest = new SearchRequest(new String[]{EsConstant.PRODUCT_INDEX},sourceBuilder);
return searchRequest;
}
/**
* 封裝檢索結(jié)果
* @param searchParam
* @param searchResponse
* @return
*/
private SearchResult buildSearchResponse(SearchParam searchParam, SearchResponse searchResponse) {
return null;
}
}
?buildSearchResponse(searchParam,searchResponse)方法具體實(shí)現(xiàn)見(jiàn) 1.7?SearchResponse分析&封裝
1.6.1.3 EsConstant.java（Es常量類）
gulimall-search/src/main/java/com/wen/gulimall/search/constant/EsConstant.java
public class EsConstant {
public static final String PRODUCT_INDEX = "gulimall_product";
public static final Integer PRODUCT_PAGESIZE = 2;
}
1.6.2 測(cè)試
????????根據(jù)代碼中System.out.println("構(gòu)建的DSL語(yǔ)句"+sourceBuilder.toString());輸出的DSL語(yǔ)句，在Kibana中進(jìn)行測(cè)試，看輸出結(jié)果是否正確。
1.7 SearchResponse分析&封裝
對(duì)search()接口進(jìn)行debug，根據(jù)debug確定聚合的具體類型。如下圖，以分類的聚合為例：
?gulimall-search/src/main/java/com/wen/gulimall/search/service/impl/MallSearchServiceImpl.java
/**
* 封裝檢索結(jié)果
* @param searchParam
* @param searchResponse
* @return
*/
private SearchResult buildSearchResponse(SearchParam searchParam, SearchResponse searchResponse) {
SearchResult result = new SearchResult();
// 1. 返回所有查詢到的商品
SearchHit[] hits = searchResponse.getHits().getHits();
List<SkuEsModel> skuEsModels = new ArrayList<>();
if(ArrayUtil.isNotEmpty(hits)) {
for (SearchHit hit : hits) {
String sourceAsString = hit.getSourceAsString();
SkuEsModel skuEsModel = JSON.parseObject(sourceAsString, SkuEsModel.class);
// keyword非空設(shè)置高亮
if(StrUtil.isNotEmpty(searchParam.getKeyword())) {
String skuTitle = hit.getHighlightFields().get("skuTitle").getFragments()[0].string();
skuEsModel.setSkuTitle(skuTitle);
}
skuEsModels.add(skuEsModel);
}
}
result.setProducts(skuEsModels);
2. 當(dāng)前所有商品涉及到的所有屬性信息
List<SearchResult.AttrVo> attrVos = new ArrayList<>();
ParsedNested attr_agg = searchResponse.getAggregations().get("attr_agg");
ParsedLongTerms attr_id_agg = attr_agg.getAggregations().get("attr_id_agg");
for (Terms.Bucket bucket : attr_id_agg.getBuckets()) {
// 1. 獲取屬性id
long attrId = bucket.getKeyAsNumber().longValue();
// 2. 獲取屬性的名字
String attrName = ((ParsedStringTerms) bucket.getAggregations().get("attr_name_agg")).getBuckets().get(0).getKeyAsString();
// 3. 獲取屬性的值
List<String> attrValues = ((ParsedStringTerms) bucket.getAggregations().get("attr_value_agg")).getBuckets().stream().map(item -> {
return ((Terms.Bucket) item).getKeyAsString();
}).collect(Collectors.toList());
SearchResult.AttrVo attrVo = new SearchResult.AttrVo();
attrVo.setAttrId(attrId);
attrVo.setAttrName(attrName);
attrVo.setAttrValue(attrValues);
attrVos.add(attrVo);
}
result.setAttrs(attrVos);
3. 當(dāng)前所有商品涉及到的所有品牌信息
List<SearchResult.BrandVo> brandVos = new ArrayList<>();
ParsedLongTerms brand_agg = searchResponse.getAggregations().get("brand_agg");
for (Terms.Bucket bucket : brand_agg.getBuckets()) {
// 1. 獲取品牌的id
long brandId = bucket.getKeyAsNumber().longValue();
// 2. 獲取品牌的名字
String brandName = ((ParsedStringTerms) bucket.getAggregations().get("brand_name_agg")).getBuckets().get(0).getKeyAsString();
// 3. 獲取平品牌的圖片
String brandImg = ((ParsedStringTerms) bucket.getAggregations().get("brand_img_agg")).getBuckets().get(0).getKeyAsString();
SearchResult.BrandVo brandVo = new SearchResult.BrandVo();
brandVo.setBrandId(brandId);
brandVo.setBrandName(brandName);
brandVo.setBrandImg(brandImg);
brandVos.add(brandVo);
}
result.setBrands(brandVos);
4. 當(dāng)前所有商品涉及到的所有分類信息
ParsedLongTerms catalog_agg = searchResponse.getAggregations().get("catalog_agg");
List<SearchResult.CatalogVo> catalogVos = new ArrayList<>();
List<? extends Terms.Bucket> buckets = catalog_agg.getBuckets();
if(CollectionUtil.isNotEmpty(buckets)){
for (Terms.Bucket bucket : buckets) {
SearchResult.CatalogVo catalogVo = new SearchResult.CatalogVo();
// 獲取分類id
String keyAsString = bucket.getKeyAsString();
catalogVo.setCatalogId(Long.parseLong(keyAsString));
// 獲取分類名稱
ParsedStringTerms catalog_name_agg = bucket.getAggregations().get("catalog_name_agg");
String catalog_name = catalog_name_agg.getBuckets().get(0).getKeyAsString();
catalogVo.setCatalogName(catalog_name);
catalogVos.add(catalogVo);
}
}
result.setCatalogs(catalogVos);
//
5. 分頁(yè)信息 - 當(dāng)前頁(yè)碼
result.setPageNum(searchParam.getPageNum());
6. 分頁(yè)信息 - 總記錄數(shù)
long total = searchResponse.getHits().getTotalHits().value;
result.setTotal(total);
7. 分頁(yè)信息 - 總頁(yè)數(shù)
Integer totalPages = (int)total%EsConstant.PRODUCT_PAGESIZE == 0?(int)total/EsConstant.PRODUCT_PAGESIZE:((int)total/EsConstant.PRODUCT_PAGESIZE + 1);
result.setTotalPages(totalPages);
return result;
}參數(shù)keyword不為空時(shí)，skuTitle中keyword的值設(shè)置高亮。
1.8 驗(yàn)證結(jié)果封裝正確性
通過(guò)debug查看結(jié)果的封裝。
1.9 渲染檢索頁(yè)面【P184-192】
（1）修改SearchParam類中庫(kù)存屬性hasStock不給默認(rèn)值，buildSearchRequest()方法中加上庫(kù)存判斷，有庫(kù)存，才拼接庫(kù)存查詢。（注意：上面的hasStock和buildSearchRequest()已經(jīng)修改）
（2）要判斷當(dāng)前l(fā)ocation.href是否有參數(shù)，沒(méi)有以?拼接，有以&拼接。可以通過(guò)字符串的indexOf()方法進(jìn)行判斷，也可以通過(guò)includes()方法進(jìn)行判斷。具體可以參考W3C文檔：https://www.w3school.com.cn/jsref/jsref_obj_string.asp
includes() ：返回字符串是否包含指定值。
indexOf() ：返回值在字符串中第一次出現(xiàn)的位置。
（3）搜索框回顯，可以使用 th:value="${param.keyword}"完成回顯功能。${param.keyword}可以獲取請(qǐng)求參數(shù)keyword的值。
（4）分頁(yè)功能完善，輸入頁(yè)碼，點(diǎn)擊確定，跳轉(zhuǎn)到具體頁(yè)面。面包屑導(dǎo)航：
（1）SearchResult中添加面包屑相關(guān)內(nèi)容
（2）buildSearchResponse()構(gòu)建查詢結(jié)果里返回面包屑相關(guān)數(shù)據(jù)
（3）構(gòu)建屬性面包屑導(dǎo)航功能，因?yàn)樾枰獙傩悦孕枰h(yuǎn)程調(diào)用gulimall-product服務(wù)
1）修改search服務(wù)的pom.xml，添加spring-cloud，引入openfeign
2）開(kāi)啟openfeign
3）編寫遠(yuǎn)程調(diào)用接口
@GetMapping("/product/attr/info/{attrId}")
public R attrInfo(@PathVariable("attrId") Long attrId);
（5）瀏覽器對(duì)空格的編碼和Java不一樣，差異化處理：
private String replaceQueryString(SearchParam searchParam, String value, String key) {
String encode = null;
try {
encode = URLEncoder.encode(value, "UTF-8");
// 前端傳遞過(guò)來(lái)的空格被解碼成+，替換成%20
encode = encode.replace("+","%20"); //瀏覽器對(duì)空格的編碼和Java不一樣，差異化處理
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
String replace = searchParam.get_queryString().replace("&"+key+"=" + encode, "");
return replace;
}
（6）構(gòu)建品牌面包屑導(dǎo)航功能，因?yàn)樾枰放泼Q，所以需要遠(yuǎn)程調(diào)用gulimall-product服務(wù)
1）編寫gulimall-product服務(wù)所需品牌的接口
@GetMapping("/infos")
public R info(@RequestParam("brandIds") List<Long> brandIds){
List<BrandEntity> brand = brandService.getBrandsByIds(brandIds);
return R.ok().put("brand", brand);
}
2）編寫遠(yuǎn)程調(diào)用接口
@GetMapping("/product/brand/infos")
public R brandsInfo(@RequestParam("brandIds") List<Long> brandIds);
（7）注意th:if的優(yōu)先級(jí)比th:with高，可以參照 usingthymeleaf.pdf -》 Attribute Precedence1.9.1 檢索頁(yè)面完整代碼
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/search/css/index.css">
<link rel="stylesheet" type="text/css" href="/static/search/font/iconfont.css">
<!--<script src="/static/search/js/jquery-3.2.1.min.js"></script>-->
<script src="/static/search/js/jquery-1.12.4.js"></script>
<title>Document</title>
</head>
<body>
<!--頭部-->
<div class="header_head">
<div class="header_head_box">
<b class="header_head_p">
<div style="overflow: hidden">
<a class="header_head_p_a1" style="width:73px;">
谷粒商城首頁(yè)
</a>
<a href="#" class="header_head_p_a">
<!--<img src="/static/search/img/img_05.png" style="border-radius: 50%;"/>-->
北京</a>
</div>
<div class="header_head_p_cs">
<a href="#" style="background: #C81623;color: #fff;">北京</a>
<a href="#">上海</a>
<a href="#">天津</a>
<a href="#">重慶</a>
<a href="#">河北</a>
<a href="#">山西</a>
<a href="#">河南</a>
<a href="#">遼寧</a>
<a href="#">吉林</a>
<a href="#">黑龍江</a>
<a href="#">內(nèi)蒙古</a>
<a href="#">江蘇</a>
<a href="#">山東</a>
<a href="#">安徽</a>
<a href="#">浙江</a>
<a href="#">福建</a>
<a href="#">湖北</a>
<a href="#">湖南</a>
<a href="#">廣東</a>
<a href="#">廣西</a>
<a href="#">江西</a>
<a href="#">四川</a>
<a href="#">海南</a>
<a href="#">貴州</a>
<a href="#">云南</a>
<a href="#">西藏</a>
<a href="#">陜西</a>
<a href="#">甘肅</a>
<a href="#">青海</a>
<a href="#">寧夏</a>
<a href="#">新疆</a>
<a href="#">港澳</a>
<a href="#">臺(tái)灣</a>
<a href="#">釣魚島</a>
<a href="#">海外</a>
</div>
</b>
<ul>
<li>
<a href="#" class="li_2">你好，請(qǐng)登錄</a>
</li>
<li>
<a href="#">免費(fèi)注冊(cè)</a>
</li>
<span>|</span>
<li>
<a href="#">我的訂單</a>
</li>
<span>|</span>
<li class="header_wdjd" style="width:80px;">
<a href="#">我的谷粒商城</a>
<img src="/static/search/image/down-@1x.png" />
<!--<b class="glyphicon glyphicon-menu-down"></b>-->
<div class="header_wdjd_txt">
<ul>
<li>
<a href="#">待處理訂單</a>
</li>
<li>
<a href="#">消息</a>
</li>
<li>
<a href="#">返修退換貨</a>
</li>
<li>
<a href="#">我的回答</a>
</li>
<li>
<a href="#">降價(jià)商品</a>
</li>
<li>
<a href="#">我的關(guān)注</a>
</li>
</ul>
<ul>
<li>
<a href="#">我的京豆</a>
</li>
<li>
<a href="#">我的優(yōu)惠券</a>
</li>
<li>
<a href="#">我的白條</a>
</li>
<li>
<a href="#">我的理財(cái)</a>
</li>
</ul>
</div>
</li>
<span>|</span>
<li>
<a href="#">谷粒商城會(huì)員</a>
</li>
<span>|</span>
<li>
<a href="#">企業(yè)采購(gòu)</a>
</li>
<span>|</span>
<li class="header_wdjd1">
<a href="#">客戶服務(wù)</a>
<img src="/static/search/image/down-@1x.png" />
<!--<b class="glyphicon glyphicon-menu-down"></b>-->
<div class="header_wdjd_txt">
<ul>
<p style="width:100%;">客戶</p>
<li>
<a href="#">幫助中心</a>
</li>
<li>
<a href="#">售后服務(wù)</a>
</li>
<li>
<a href="#">在線客服</a>
</li>
<li>
<a href="#">意見(jiàn)建議</a>
</li>
<li>
<a href="#">電話客服</a>
</li>
<li>
<a href="#">客服郵箱</a>
</li>
<li>
<a href="#">金融資訊</a>
</li>
<li>
<a href="#">售全球客服</a>
</li>
</ul>
<ul>
<p style="width:100%;">商戶</p>
<li>
<a href="#">合作招商</a>
</li>
<li>
<a href="#">學(xué)習(xí)中心</a>
</li>
<li>
<a href="#">商家后臺(tái)</a>
</li>
<li>
<a href="#">京麥工作臺(tái)</a>
</li>
<li>
<a href="#">商家?guī)椭?lt;/a>
</li>
<li>
<a href="#">規(guī)則平臺(tái)</a>
</li>
</ul>
</div>
</li>
<span>|</span>
<li class="header_wzdh">
<a href="#">網(wǎng)站導(dǎo)航</a>
<img src="/static/search/image/down-@1x.png" />
<!--<b class="glyphicon glyphicon-menu-down"></b>-->
<div class="header_wzdh_txt">
<ul style="width: 25%;">
<p style="width:100%;">特色主題</p>
<li>
<a href="#">谷粒商城試用</a>
</li>
<li>
<a href="#">谷粒商城金融</a>
</li>
<li>
<a href="#">全球售</a>
</li>
<li>
<a href="#">國(guó)際站</a>
</li>
<li>
<a href="#">谷粒商城會(huì)員</a>
</li>
<li>
<a href="#">谷粒商城預(yù)售</a>
</li>
<li>
<a href="#">買什么</a>
</li>
<li>
<a href="#">俄語(yǔ)站</a>
</li>
<li>
<a href="#">裝機(jī)大師</a>
</li>
<li>
<a href="#">0元評(píng)測(cè)</a>
</li>
<li>
<a href="#">定期送</a>
</li>
<li>
<a href="#">港澳售</a>
</li>
<li>
<a href="#">優(yōu)惠券</a>
</li>
<li>
<a href="#">秒殺</a>
</li>
<li>
<a href="#">閃購(gòu)</a>
</li>
<li>
<a href="#">印尼站</a>
</li>
<li>
<a href="#">谷粒商城金融科技</a>
</li>
<li>
<a href="#">In貨推薦</a>
</li>
<li>
<a href="#">陪伴計(jì)劃</a>
</li>
<li>
<a href="#">出海招商</a>
</li>
</ul>
<ul style="width: 20%;">
<p style="width:100%;">行業(yè)頻道</p>
<li>
<a href="#">手機(jī)</a>
</li>
<li>
<a href="#">智能數(shù)碼</a>
</li>
<li>
<a href="#">玩3c</a>
</li>
<li>
<a href="#">電腦辦公</a>
</li>
<li>
<a href="#">家用電器</a>
</li>
<li>
<a href="#">谷粒商城智能</a>
</li>
<li>
<a href="#">服裝城</a>
</li>
<li>
<a href="#">美妝館</a>
</li>
<li>
<a href="#">家裝城</a>
</li>
<li>
<a href="#">母嬰</a>
</li>
<li>
<a href="#">食品</a>
</li>
<li>
<a href="#">運(yùn)動(dòng)戶外</a>
</li>
<li>
<a href="#">農(nóng)資頻道</a>
</li>
<li>
<a href="#">整車</a>
</li>
<li>
<a href="#">圖書</a>
</li>
</ul>
<ul style="width: 21%;">
<p style="width:100%;">生活服務(wù)</p>
<li>
<a href="#">白條</a>
</li>
<li>
<a href="#">谷粒商城金融App</a>
</li>
<li>
<a href="#">谷粒商城小金庫(kù)</a>
</li>
<li>
<a href="#">理財(cái)</a>
</li>
<li>
<a href="#">智能家電</a>
</li>
<li>
<a href="#">話費(fèi)</a>
</li>
<li>
<a href="#">水電煤</a>
</li>
<li>
<a href="#">彩票</a>
</li>
<li>
<a href="#">旅行</a>
</li>
<li>
<a href="#">機(jī)票酒店</a>
</li>
<li>
<a href="#">電影票</a>
</li>
<li>
<a href="#">谷粒商城到家</a>
</li>
<li>
<a href="#">谷粒商城眾測(cè)</a>
</li>
<li>
<a href="#">游戲</a>
</li>
</ul>
<ul style="width: 23%; border-right: 0;">
<p style="width:100%;">更多精選</p>
<li>
<a href="#">合作招商</a>
</li>
<li>
<a href="#">谷粒商城通信</a>
</li>
<li>
<a href="#">谷粒商城E卡</a>
</li>
<li>
<a href="#">企業(yè)采購(gòu)</a>
</li>
<li>
<a href="#">服務(wù)市場(chǎng)</a>
</li>
<li>
<a href="#">辦公生活館</a>
</li>
<li>
<a href="#">鄉(xiāng)村招募</a>
</li>
<li>
<a href="#">校園加盟</a>
</li>
<li>
<a href="#">京友幫</a>
</li>
<li>
<a href="#">谷粒商城社區(qū)</a>
</li>
<li>
<a href="#">智能社區(qū)</a>
</li>
<li>
<a href="#">游戲社區(qū)</a>
</li>
<li>
<a href="#">知識(shí)產(chǎn)權(quán)維權(quán)</a>
</li>
</ul>
</div>
</li>
<span>|</span>
<li class="header_sjjd">
<a href="#">手機(jī)谷粒商城</a>
<div class="header_sjjd_div">
<img src="/static/search/img/01.png" />
</div>
</li>
</ul>
</div>
</div>
<!--搜索導(dǎo)航-->
<div class="header_sous">
<div class="logo">
<a ><img src="/static/search/image/logo1.jpg" alt=""></a>
</div>
<div class="header_form">
<input id="keyword_input" type="text" placeholder="手機(jī)" th:value="${param.keyword}"/>
<a href="javascript:searchByKeyword()">搜索</a>
</div>
<div class="header_ico">
<div class="header_gw">
<span><a href="#">我的購(gòu)物車</a></span>
<img src="/static/search/image/settleup-@1x.png" />
<span>0</span>
</div>
<div class="header_ko">
<p>購(gòu)物車中還沒(méi)有商品，趕緊選購(gòu)吧！</p>
</div>
</div>
<div class="header_form_nav">
<ul>
<li>
<a href="#">谷粒商城之家</a>
</li>
<li>
<a href="#">谷粒商城專賣店</a>
</li>
<li>
<a href="#">平板</a>
</li>
<li>
<a href="#">電腦</a>
</li>
<li>
<a href="#">ipad</a>
</li>
</ul>
</div>
<nav>
<ul>
<li class="nav_li1">
<a href="#">全部商品分類</a>
</li>
<li class="nav_li">
<a href="#">服裝城</a>
</li>
<li class="nav_li">
<a href="#">沒(méi)裝館</a>
</li>
<li class="nav_li">
<a href="#">超市</a>
</li>
<li class="nav_li">
<a href="#">生鮮</a>
</li>
</ul>
<div class="spacer">|</div>
<ul>
<li class="nav_li">
<a href="#">全球購(gòu)</a>
</li>
<li class="nav_li">
<a href="#">閃購(gòu)</a>
</li>
<li class="nav_li">
<a href="#">拍賣</a>
</li>
</ul>
<div class="spacer">|</div>
<ul>
<li class="nav_li">
<a href="#">金融</a>
</li>
</ul>
</nav>
<div class="header_main_left">
<ul>
<li>
<a href="#" class="header_main_left_a"><b>家用電器</b></a>
</li>
<li class="header_li2">
<a href="#" class="header_main_left_a"><b>手機(jī)</b> / <b>運(yùn)營(yíng)商</b> / <b>數(shù)碼</b></a>
<div class="header_main_left_main">
<div class="header_sj">
<a href="#" class="header_sj_a">玩3c</a>
<a href="#" class="header_sj_a">手機(jī)頻道</a>
<a href="#" class="header_sj_a">網(wǎng)上營(yíng)業(yè)廳</a>
<a href="#" class="header_sj_a">配件選購(gòu)中心</a>
<a href="#" class="header_sj_a">企業(yè)購(gòu)</a>
<a href="#" class="header_sj_a">以舊換新</a>
</div>
<ol class="header_ol">
<a href="#" style="color: #111;" class="aaa">手機(jī)通訊 ></a>
<li>
<a href="#" style="color: #999;">手機(jī)</a>
<a href="#" style="color: #999;">對(duì)講機(jī)</a>
<a href="#" style="color: #999;">手機(jī)維修</a>
<a href="#" style="color: #999;">以舊換新</a>
</li>
<a href="#" style="color: #111;" class="aaa">運(yùn)營(yíng)商 ></a>
<li>
<a href="#" style="color: #999;">合約機(jī)</a>
<a href="#" style="color: #999;">固話寬帶</a>
<a href="#" style="color: #999;">辦套餐</a>
<a href="#" style="color: #999;">從話費(fèi)/流量</a>
<a href="#" style="color: #999;">中國(guó)電信</a>
<a href="#" style="color: #999;">中國(guó)移動(dòng)</a>
<a href="#" style="color: #999;">中國(guó)聯(lián)通</a>
<a href="#" style="color: #999;">谷粒商城通信</a>
<a href="#" style="color: #999;">170選號(hào)</a>
</li>
<a href="#" style="color: #111;" class="aaa">手機(jī)配件 ></a>
<li style="height: 60px;">
<a href="#" style="color: #999;">手機(jī)殼</a>
<a href="#" style="color: #999;">貼膜</a>
<a href="#" style="color: #999;">手機(jī)儲(chǔ)存卡</a>
<a href="#" style="color: #999;">數(shù)據(jù)線</a>
<a href="#" style="color: #999;">存電器</a>
<a href="#" style="color: #999;">手機(jī)耳機(jī)</a>
<a href="#" style="color: #999;">創(chuàng)業(yè)配件</a>
<a href="#" style="color: #999;">手機(jī)飾品</a>
<a href="#" style="color: #999;">手機(jī)電池</a>
<a href="#" style="color: #999;">蘋果周邊</a>
<a href="#" style="color: #999;">移動(dòng)電源</a>
<a href="#" style="color: #999;">藍(lán)牙耳機(jī)</a>
<a href="#" style="color: #999;">手機(jī)支架</a>
<a href="#" style="color: #999;">車載配件</a>
<a href="#" style="color: #999;">拍照配件</a>
</li>
<a href="#" style="color: #111;" class="aaa">攝影攝像 ></a>
<li style="height: 60px;">
<a href="#" style="color: #999;">數(shù)碼相機(jī)</a>
<a href="#" style="color: #999;">單電/微單相機(jī)</a>
<a href="#" style="color: #999;">單反相機(jī)</a>
<a href="#" style="color: #999;">拍立得</a>
<a href="#" style="color: #999;">運(yùn)動(dòng)相機(jī)</a>
<a href="#" style="color: #999;">攝像機(jī)</a>
<a href="#" style="color: #999;">鏡頭</a>
<a href="#" style="color: #999;">戶外器材</a>
<a href="#" style="color: #999;">影棚器材</a>
<a href="#" style="color: #999;">沖印服務(wù)</a>
<a href="#" style="color: #999;">數(shù)碼相框</a>
</li>
<a href="#" style="color: #111;" class="aaa">數(shù)碼配件 ></a>
<li style="height: 60px;">
<a href="#" style="color: #999;">三腳架/云臺(tái)</a>
<a href="#" style="color: #999;">相機(jī)包</a>
<a href="#" style="color: #999;">濾鏡</a>
<a href="#" style="color: #999;">散光燈/手柄</a>
<a href="#" style="color: #999;">相機(jī)清潔</a>
<a href="#" style="color: #999;">機(jī)身附件</a>
<a href="#" style="color: #999;">鏡頭附件</a>
<a href="#" style="color: #999;">讀卡器</a>
<a href="#" style="color: #999;">支架</a>
<a href="#" style="color: #999;">電池/存電器</a>
</li>
<a href="#" style="color: #111;" class="aaa">影音娛樂(lè) ></a>
<li>
<a href="#" style="color: #999;">耳機(jī)/耳麥</a>
<a href="#" style="color: #999;">音箱/音響</a>
<a href="#" style="color: #999;">智能音箱</a>
<a href="#" style="color: #999;">便攜/無(wú)線音箱</a>
<a href="#" style="color: #999;">收音機(jī)</a>
<a href="#" style="color: #999;">麥克風(fēng)</a>
<a href="#" style="color: #999;">MP3/MP4</a>
<a href="#" style="color: #999;">專業(yè)音頻</a>
</li>
<a href="#" style="color: #111;" class="aaa">智能設(shè)備 ></a>
<li style="height: 60px;">
<a href="#" style="color: #999;">智能手環(huán)</a>
<a href="#" style="color: #999;">智能手表</a>
<a href="#" style="color: #999;">智能眼鏡</a>
<a href="#" style="color: #999;">智能機(jī)器人</a>
<a href="#" style="color: #999;">運(yùn)動(dòng)跟蹤器</a>
<a href="#" style="color: #999;">健康監(jiān)測(cè)</a>
<a href="#" style="color: #999;">智能配飾</a>
<a href="#" style="color: #999;">智能家居</a>
<a href="#" style="color: #999;">體感車</a>
<a href="#" style="color: #999;">無(wú)人機(jī)</a>
<a href="#" style="color: #999;">其他配件</a>
</li>
<a href="#" style="color: #111;" class="aaa">電子教育 ></a>
<li>
<a href="#" style="color: #999;">學(xué)生平板</a>
<a href="#" style="color: #999;">點(diǎn)讀機(jī)</a>
<a href="#" style="color: #999;">早教益智</a>
<a href="#" style="color: #999;">錄音筆</a>
<a href="#" style="color: #999;">電紙書</a>
<a href="#" style="color: #999;">電子詞典</a>
<a href="#" style="color: #999;">復(fù)讀機(jī)</a>
</li>
</ol>
<div class="header_r">
<div class="header_r_tu">
<a href="#"><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a href="#"><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a href="#"><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a href="#"><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a href="#"><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a href="#"><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a href="#"><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
<a href="#"><img src="/static/search/img/56b2f385n8e4eb051.jpg" /></a>
</div>
<div class="header_r_tu1">
<a href="#"><img src="/static/search/img/JD_ash7 - 副本.png" /></a>
<a href="#"><img src="/static/search/img/JD_ash6.png" /></a>
</div>
</div>
</div>
</li>
<li>
<a href="#" class="header_main_left_a"><b>電腦</b> / <b>辦公</b></a>
</li>
<li>
<a href="#" class="header_main_left_a"><b>家居</b> / <b>家具</b> / <b>家裝</b> / <b>廚具</b></a>
</li>
<li>
<a href="#" class="header_main_left_a"><b>男裝</b> / <b>女裝</b> / <b>童裝</b> / <b>內(nèi)衣</b></a>
</li>
<li>
<a href="#" class="header_main_left_a"><b>美妝個(gè)護(hù) </b>/ <b>寵物</b></a>
</li>
<li>
<a href="#" class="header_main_left_a"><b>女鞋</b> / <b>箱包</b> / <b>鐘表</b> / <b>珠寶</b></a>
</li>
<li>
<a href="#" class="header_main_left_a"><b>男鞋</b> / <b>運(yùn)動(dòng)</b> / <b>戶外</b></a>
</li>
<li>
<a href="#" class="header_main_left_a"><b>汽車</b> / <b>汽車用品</b></a>
</li>
<li>
<a href="#" class="header_main_left_a"><b>母嬰</b> / <b>玩具樂(lè)器</b></a>
</li>
<li>
<a href="#" class="header_main_left_a"><b>食品</b> / <b>酒類</b> / <b>生鮮</b> / <b>特產(chǎn)</b></a>
</li>
<li>
<a href="#" class="header_main_left_a"><b>禮品鮮花</b> / <b>農(nóng)資綠植</b></a>
</li>
<li>
<a href="#" class="header_main_left_a"><b>醫(yī)藥保健</b> / <b>計(jì)生情趣</b></a>
</li>
<li>
<a href="#" class="header_main_left_a"><b>圖書</b> / <b>音箱</b>/ <b>電子書</b></a>
</li>
<li>
<a href="#" class="header_main_left_a"><b>機(jī)票</b> / <b>酒店</b> / <b>旅游</b> / <b>生活</b></a>
</li>
<li>
<a href="#" class="header_main_left_a"><b>理財(cái)</b> / <b>眾籌</b> / <b>白條</b> / <b>保險(xiǎn)</b></a>
</li>
</ul>
</div>
</div>
<hr style="border: 1px solid red;margin-top: -7px;">
<!--熱賣促銷-->
<div class="JD_temai">
<div class="JD_main">
<div class="JD_left">
<div class="hd">
熱賣推薦
</div>
<div class="bd mc">
<ul class="mc">
<li>
<a href="#" class="mc_a"><img src="/static/search/img/5a28b5a1n8a5c095f.jpg" alt=""></a>
<div class="mc_div">
<a href="#" class="mc_div_a1">
<em>華為 HUAWEI nova 2S 全面屏四攝 6GB +64GB 曜石黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待</em>
</a>
<p>
<strong>
<em class="number J-p-5963064">￥2999.00</em>
</strong>
</p>
<a href="#" class="mc_div_a2">立即搶購(gòu)</a>
</div>
</li>
<li>
<a href="#" class="mc_a"><img src="/static/search/img/59f5eef1n99542494.jpg" alt=""></a>
<div class="mc_div">
<a href="#" class="mc_div_a1">
<em>【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待</em>
</a>
<p>
<strong>
<em class="number J-p-5963064">￥1699.00</em>
</strong>
</p>
<a href="#" class="mc_div_a2">立即搶購(gòu)</a>
</div>
</li>
<li style="margin-right: 0">
<a href="#" class="mc_a"><img src="/static/search/img/59f5eef1n99542494.jpg" alt=""></a>
<div class="mc_div">
<a href="#" class="mc_div_a1">
<em>華為 HUAWEI nova 2S 全面屏四攝 6GB +64GB 曜石黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待</em>
</a>
<p>
<strong>
<em class="number J-p-5963064">￥2999.00</em>
</strong>
</p>
<a href="#" class="mc_div_a2">立即搶購(gòu)</a>
</div>
</li>
</ul>
</div>
</div>
<div class="JD_right">
<div class="hd"> 促銷活動(dòng)</div>
<div class="bd">
<ul>
<li> . <a href="#">紅米千元全面屏手機(jī)上市</a></li>
<li> . <a href="#">錘子堅(jiān)果Pro2火爆預(yù)約中</a></li>
<li> . <a href="#">大牌新品 瘋狂搶購(gòu)</a></li>
<li> . <a href="#">X20 vivo藍(lán)新色上市</a></li>
<li> . <a href="#">榮耀暢玩7X新品上市</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--手機(jī)-->
<div class="JD_ipone">
<div class="JD_ipone_bar">
<div class="JD_ipone_one a">
<a href="#">手機(jī)</a>
</div>
<i><img src="/static/search/image/right-@1x.png" alt=""></i>
<div class="JD_ipone_one b">
<a href="#" class="qqq">手機(jī)通訊錄 <img src="/static/search/image/down-@1x.png" alt=""></a>
<div>
<a href="#">手機(jī)通訊</a>
<a href="#">運(yùn)營(yíng)商</a>
<a href="#">手機(jī)配件</a>
<a href="#">手機(jī)服務(wù)</a>
</div>
</div>
<i><img src="/static/search/image/right-@1x.png" alt=""></i>
<div class="JD_ipone_one c">
<a href="#" class="qqq">手機(jī) <img src="/static/search/image/down-@1x.png" alt=""></a>
<div>
<a href="#">手機(jī)</a>
<a href="#">老人機(jī)</a>
<a href="#">對(duì)講機(jī)</a>
<a href="#">女性手機(jī)</a>
<a href="#">超續(xù)航手機(jī)</a>
<a href="#">全面屏手機(jī)</a>
<a href="#">拍照手機(jī)</a>
<a href="#">游戲手機(jī)</a>
</div>
</div>
<div class="JD_ipone_one c">
<a th:href="${nav.link}" th:each="nav:${result.navs}"><span th:text="${nav.navName}"></span> : <span th:text="${nav.navValue}"></span>×</a>
</div>
<i><img src="/static/search/image/right-@1x.png" alt=""></i>
</div>
</div>
<!--商品篩選和排序-->
<div class="JD_banner w">
<div class="JD_nav">
<div class="JD_selector">
<!--手機(jī)商品篩選-->
<div class="title">
<h3><b>手機(jī)</b><em>商品篩選</em></h3>
<div class="st-ext">共 <span>10135</span>個(gè)商品 </div>
</div>
<div class="JD_nav_logo" th:with="brandid = ${param.brandId}" >
<!--品牌-->
<div class="JD_nav_wrap" th:if="${#strings.isEmpty(brandid)}">
<div class="sl_key">
<span><b>品牌：</b></span>
</div>
<div class="sl_value">
<div class="sl_value_logo">
<ul>
<li th:each="brand:${result.brands}">
<a href="#" th:href="${'javascript:searchProducts("brandId",'+brand.brandId+')'}">
<img th:src="${brand.brandImg}" alt="">
<div th:text="${brand.brandName}">
華為(HUAWEI)
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="sl_ext">
<a href="#">
更多
<i style='background: url("static/search/image/search.ele.png")no-repeat 3px 7px'></i>
<b style='background: url("static/search/image/search.ele.png")no-repeat 3px -44px'></b>
</a>
<a href="#">
多選
<i>+</i>
<span>+</span>
</a>
</div>
</div>
<!--分類-->
<div class="JD_pre">
<div class="sl_key">
<span><b>分類：</b></span>
</div>
<div class="sl_value">
<ul>
<li th:each="catalog:${result.catalogs}">
<a href="#"
th:href="${'javascript:searchProducts("catalog3Id",'+catalog.catalogId+')'}"
th:text="${catalog.catalogName}">5.56英寸及以上</a>
</li>
</ul>
</div>
<div class="sl_ext">
<a href="#">
更多
<i style='background: url("static/search/image/search.ele.png")no-repeat 3px 7px'></i>
<b style='background: url("static/search/image/search.ele.png")no-repeat 3px -44px'></b>
</a>
<a href="#">
多選
<i>+</i>
<span>+</span>
</a>
</div>
</div>
<!--其他的所有需要展示的屬性-->
<div class="JD_pre" th:each="attr:${result.attrs}" th:if="${!#lists.contains(result.attrIds,attr.attrId)}">
<div class="sl_key">
<span th:text="${attr.attrName}">屏幕尺寸：</span>
</div>
<div class="sl_value">
<ul>
<li th:each="val:${attr.attrValue}">
<a href="#"
th:href="${'javascript:searchProducts("attrs","'+attr.attrId+'_'+val+'")'}"
th:text="${val}">5.56英寸及以上</a>
</li>
</ul>
</div>
</div>
</div>
<div class="JD_show">
<a href="#">
<span>
更多選項(xiàng)（ CPU核數(shù)、網(wǎng)絡(luò)、機(jī)身顏色 等）
</span>
</a>
</div>
</div>
<!--排序-->
<div class="JD_banner_main">
<!--商品精選-->
<div class="JD_con_left">
<div class="JD_con_left_bar">
<div class="JD_con_one">
<div class="mt">
<h3>商品精選</h3>
<span>廣告</span>
</div>
<div class="mc">
<ul>
<li>
<a href="#" title="vivo X9s 全網(wǎng)通 4GB+64GB 磨砂黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待"><img src="/static/search/img/59bf3c47n91d65c73.jpg" alt=""></a>
<a href="#" title="【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待">
<em>華為 HUAWEI nova 2S 全面屏四攝 6GB +64GB 曜石黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥2999.00</span>
</strong>
<span class="mc-ico" title="購(gòu)買本商品送贈(zèng)品">
<i class="goods-icons">贈(zèng)品</i>
</span>
</div>
<div class="mc_rev">
已有
<a href="#" class="number">12466</a>
人評(píng)價(jià)
</div>
</li>
<li>
<a href="#" title="vivo X9s 全網(wǎng)通 4GB+64GB 磨砂黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待"><img src="/static/search/img/59bf3c47n91d65c73.jpg" alt=""></a>
<a href="#" title="【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待">
<em>華為 HUAWEI nova 2S 全面屏四攝 6GB +64GB 曜石黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥2999.00</span>
</strong>
<span class="mc-ico" title="購(gòu)買本商品送贈(zèng)品">
<i class="goods-icons">贈(zèng)品</i>
</span>
</div>
<div class="mc_rev">
已有
<a href="#" class="number">12466</a>
人評(píng)價(jià)
</div>
</li>
<li>
<a href="#" title="vivo X9s 全網(wǎng)通 4GB+64GB 磨砂黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待"><img src="/static/search/img/593ba628n8794c6a6.jpg" alt=""></a>
<a href="#" title="【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待">
<em>諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥1799.00</span>
</strong>
<span class="mc-ico" title="購(gòu)買本商品送贈(zèng)品">
<i class="goods-icons">贈(zèng)品</i>
</span>
</div>
<div class="mc_rev">
已有
<a href="#" class="number">15600</a>
人評(píng)價(jià)
</div>
</li>
<li>
<a href="#" title="vivo X9s 全網(wǎng)通 4GB+64GB 磨砂黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待"><img src="/static/search/img/5919637an271a1301.jpg" alt=""></a>
<a href="#" title="【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待">
<em>vivo Xplay6 全網(wǎng)通 6GB+64GB 磨砂黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥3498.00</span>
</strong>
<span class="mc-ico" title="購(gòu)買本商品送贈(zèng)品">
<i class="goods-icons">贈(zèng)品</i>
</span>
</div>
<div class="mc_rev">
已有
<a href="#" class="number">5369</a>
人評(píng)價(jià)
</div>
</li>
</ul>
</div>
</div>
<div class="JD_con_one">
<div class="mt">
<h3>達(dá)人選購(gòu)</h3>
</div>
<div class="mc">
<ul>
<li>
<a href="#" title="vivo X9s 全網(wǎng)通 4GB+64GB 磨砂黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待"><img src="/static/search/img/59bf3c47n91d65c73.jpg" alt=""></a>
<a href="#">
<em>華為 HUAWEI nova 2S 全面屏四攝 6GB +64GB 曜石黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥2999.00</span>
</strong>
</div>
</li>
<li>
<a href="#" title="vivo X9s 全網(wǎng)通 4GB+64GB 磨砂黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待"><img src="/static/search/img/59bf3c47n91d65c73.jpg" alt=""></a>
<a href="#">
<em>華為 HUAWEI nova 2S 全面屏四攝 6GB +64GB 曜石黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥2999.00</span>
</strong>
</div>
</li>
<li>
<a href="#" title="vivo X9s 全網(wǎng)通 4GB+64GB 磨砂黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待"><img src="/static/search/img/593ba628n8794c6a6.jpg" alt=""></a>
<a href="#">
<em>諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥1799.00</span>
</strong>
</div>
</li>
<li>
<a href="#" title="vivo X9s 全網(wǎng)通 4GB+64GB 磨砂黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待"><img src="/static/search/img/5919637an271a1301.jpg" alt=""></a>
<a href="#">
<em>vivo Xplay6 全網(wǎng)通 6GB+64GB 磨砂黑 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥3498.00</span>
</strong>
</div>
</li>
</ul>
</div>
</div>
<div class="JD_con_one" style="border:none;">
<div class="mt">
<h3>商品精選</h3>
<span>廣告</span>
</div>
<div class="mc">
<ul>
<li>
<a href="#"><img src="/static/search/img/599a806bn9d829c1c.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="/static/search/img/593e4de0n5ff878a4.jpg" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--綜合排序-->
<div class="JD_con_right">
<div class="filter">
<!--綜合排序-->
<!--saleCount_asc/desc skuPrice_asc/desc -->
<div class="filter_top">
<div class="filter_top_left" th:with="p=${param.sort},priceRange=${param.skuPrice}">
<a th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p,'hotScore') && #strings.endsWith(p,'desc'))?'sort_a desc':'sort_a'}"
th:attr="style=${(#strings.isEmpty(p) || #strings.startsWith(p,'hotScore'))?'color: #FFF;border-color: #e4393c;background: #e4393c':'color: #333;border-color: #CCC;background: #FFF'}"
sort="hotScore" href="#">綜合排序[[${(!#strings.isEmpty(p) && #strings.startsWith(p,'hotScore') && #strings.endsWith(p,'desc'))?'↓':'↑'}]]</a>
<a th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p,'saleCount') && #strings.endsWith(p,'desc'))?'sort_a desc':'sort_a'}"
th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p,'saleCount'))?'color: #FFF;border-color: #e4393c;background: #e4393c':'color: #333;border-color: #CCC;background: #FFF'}"
sort="saleCount" href="#">銷量[[${(!#strings.isEmpty(p) && #strings.startsWith(p,'saleCount') && #strings.endsWith(p,'desc'))?'↓':'↑'}]]</a>
<a th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p,'skuPrice') && #strings.endsWith(p,'desc'))?'sort_a desc':'sort_a'}"
th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p,'skuPrice'))?'color: #FFF;border-color: #e4393c;background: #e4393c':'color: #333;border-color: #CCC;background: #FFF'}"
sort="skuPrice" href="#">價(jià)格[[${(!#strings.isEmpty(p) && #strings.startsWith(p,'skuPrice') && #strings.endsWith(p,'desc'))?'↓':'↑'}]]</a>
<a class="sort_a" href="#">評(píng)論分</a>
<a class="sort_a" href="#">上架時(shí)間</a>
<input id="skuPriceFrom" type="number"
th:value="${#strings.isEmpty(priceRange)?'':#strings.substringBefore(priceRange,'_')}"
style="width: 100px; margin-left: 30px;"> -
<input id="skuPriceTo" type="number"
th:value="${#strings.isEmpty(priceRange)?'':#strings.substringAfter(priceRange,'_')}"
style="width: 100px;">
<button id="skuPriceSearchBtn">確定</button>
</div>
<div class="filter_top_right">
<span class="fp-text">
<b>1</b><em>/</em><i>169</i>
</span>
<a href="#" class="prev"><</a>
<a href="#" class="next"> > </a>
</div>
</div>
<!--收貨地址-->
<div class="filter_bottom">
<div class="filter_bottom_left">
<div class="fs-cell">收貨地</div>
<div class="dizhi">
<div class="dizhi_show">
<em>北京朝陽(yáng)區(qū)三環(huán)以內(nèi)</em>
<b></b>
</div>
</div>
<div class="dizhi_con">
<ul id="tab">
<li id="tab1" value="1">北京 <img src="/static/search/image/down-@1x.png" alt=""></li>
<li id="tab2" value="2">朝陽(yáng) <img src="/static/search/image/down-@1x.png" alt=""></li>
<li id="tab3" value="3">三環(huán)以內(nèi) <img src="/static/search/image/down-@1x.png" alt=""></li>
</ul>
<div id="container">
<div id="content1" style="z-index: 1;">
<a href="#">北京</a>
<a href="#">上海</a>
<a href="#">天津</a>
<a href="#">重慶</a>
<a href="#">河北</a>
<a href="#">山西</a>
<a href="#">河南</a>
<a href="#">遼寧</a>
<a href="#">吉林</a>
<a href="#">黑龍江</a>
<a href="#">內(nèi)蒙古</a>
<a href="#">江蘇</a>
<a href="#">山東</a>
<a href="#">安徽</a>
<a href="#">浙江</a>
<a href="#">福建</a>
<a href="#">湖北</a>
<a href="#">湖南</a>
<a href="#">廣東</a>
<a href="#">廣西</a>
<a href="#">江西</a>
<a href="#">四川</a>
<a href="#">海南</a>
<a href="#">貴州</a>
<a href="#">云南</a>
<a href="#">西藏</a>
<a href="#">陜西</a>
<a href="#">甘肅</a>
<a href="#">青海</a>
<a href="#">寧夏</a>
<a href="#">新疆</a>
<a href="#">港澳</a>
<a href="#">臺(tái)灣</a>
<a href="#">釣魚島</a>
<a href="#">海外</a>
</div>
<div id="content2">
<a href="#">朝陽(yáng)區(qū)</a>
<a href="#">海淀區(qū)</a>
<a href="#">西城區(qū)</a>
<a href="#">東城區(qū)</a>
<a href="#">大興區(qū)</a>
<a href="#">豐臺(tái)區(qū)</a>
<a href="#">昌平區(qū)</a>
<a href="#">順義區(qū)</a>
</div>
<div id="content3">
<a href="#">三環(huán)以內(nèi)</a>
<a href="#">管莊</a>
<a href="#">北苑</a>
<a href="#">定福莊</a>
<a href="#">三環(huán)到四環(huán)之間</a>
<a href="#">四環(huán)到五環(huán)之間</a>
<a href="#">五環(huán)到六環(huán)之間</a>
</div>
</div>
</div>
</div>
<div class="filter_bottom_right">
<ul>
<li>
<a href="#">
<i></i>
谷粒商城配送
</a>
</li>
<li>
<a href="#">
<i></i>
京尊達(dá) </a>
</li>
<li>
<a href="#">
<i></i>
貨到付款
</a>
</li>
<li>
<a href="#" th:with="check = ${param.hasStock}">
<input id="showHasStock" type="checkbox" th:checked="${#strings.equals(check,'1')}">
僅顯示有貨
</a>
</li>
<li>
<a href="#">
<i></i>
可配送全球
</a>
</li>
</ul>
</div>
</div>
<!--排序內(nèi)容-->
<div class="rig_tab">
<div th:each="product:${result.getProducts()}">
<div class="ico">
<i class="iconfont icon-weiguanzhu"></i>
<a href="#">關(guān)注</a>
</div>
<p class="da">
<a href="#" >
<img th:src="${product.skuImg}" class="dim">
</a>
</p>
<ul class="tab_im">
<li><a href="#" title="黑色">
<img th:src="${product.skuImg}"></a></li>
</ul>
<p class="tab_R">
<span th:text="'￥'+${product.skuPrice}">￥5199.00</span>
</p>
<p class="tab_JE">
<a href="#" th:utext="${product.skuTitle}">
Apple iPhone 7 Plus (A1661) 32G 黑色 移動(dòng)聯(lián)通電信4G手機(jī)
</a>
</p>
<p class="tab_PI">已有<span>11萬(wàn)+</span>熱門評(píng)價(jià)
<a href="#">二手有售</a>
</p>
<p class="tab_CP"><a href="#" title="谷粒商城Apple產(chǎn)品專營(yíng)店">谷粒商城Apple產(chǎn)品...</a>
<a href='#' title="聯(lián)系供應(yīng)商進(jìn)行咨詢">
<img src="/static/search/img/xcxc.png">
</a>
</p>
<div class="tab_FO">
<div class="FO_one">
<p>自營(yíng)
<span>谷粒商城自營(yíng),品質(zhì)保證</span>
</p>
<p>滿贈(zèng)
<span>該商品參加滿贈(zèng)活動(dòng)</span>
</p>
</div>
</div>
</div>
</div>
<!--分頁(yè)-->
<div class="filter_page">
<div class="page_wrap">
<span class="page_span1">
<a class="page_a" th:attr="pn=${result.pageNum - 1}" href="#" th:if="${result.pageNum>1}">
< 上一頁(yè)
</a>
<a class="page_a" th:attr="pn=${nav},style=${nav == result.pageNum?'border: 0;color:#ee2222;background: #fff':''}" href="#"
th:each="nav:${result.pageNavs}">[[${nav}]]</a>
<a class="page_a" th:attr="pn=${result.pageNum + 1}" href="#" th:if="${result.pageNum<result.totalPages}">
下一頁(yè) >
</a>
</span>
<span class="page_span2">
<em>共<b>[[${result.totalPages}]]</b>頁(yè) 到第</em>
<input class="page_nb" type="number" th:value="${result.pageNum}" min="1" th:max="${result.totalPages}">
<em>頁(yè)</em>
<a class="page_submit" href="#">確定</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--商品精選-->
<div class="JD_jx">
<div class="JD_jx_title">
<div class="mt">
<strong class="mt-title">商品精選</strong>
<img src="/static/search/image/u-ad.gif" alt="">
</div>
<div class="mc">
<ul>
<li>
<div class="mc_img">
<a href="#" title="【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a href="#" title="【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待">
<em>【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="購(gòu)買本商品送贈(zèng)品">贈(zèng)品</span>
</div>
<div class="mc_rev">
<a href="#">15930</a>
<span>人好評(píng)</span>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a href="#" title="【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待">
<em>【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="購(gòu)買本商品送贈(zèng)品">贈(zèng)品</span>
</div>
<div class="mc_rev">
<a href="#">15930</a>
<span>人好評(píng)</span>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a href="#" title="【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待">
<em>【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="購(gòu)買本商品送贈(zèng)品">贈(zèng)品</span>
</div>
<div class="mc_rev">
<a href="#">15930</a>
<span>人好評(píng)</span>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a href="#" title="【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待">
<em>【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="購(gòu)買本商品送贈(zèng)品">贈(zèng)品</span>
</div>
<div class="mc_rev">
<a href="#">15930</a>
<span>人好評(píng)</span>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a href="#" title="【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待">
<em>【預(yù)約版】華為 HUAWEI 暢享7S 全面屏雙攝 4GB +64GB 黑色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="購(gòu)買本商品送贈(zèng)品">贈(zèng)品</span>
</div>
<div class="mc_rev">
<a href="#">15930</a>
<span>人好評(píng)</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--猜你喜歡-->
<div class="JD_cnxh">
<div class="JD_jx_title">
<div class="mt">
<strong class="mt-title">猜你喜歡</strong>
<a href="#">
<img src="/static/search/image/update.png" alt="">
換一批
</a>
</div>
<div class="mc">
<ul>
<li>
<div class="mc_img">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)">
<img src="/static/search/img/59bf3c47n91d65c73.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)">
<em>諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)</em>
</a>
</div>
<div class="mc_rev">
<a href="#">已有80萬(wàn)+人評(píng)價(jià)</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)">
<img src="/static/search/img/5a28b5c6Ndec5088f.jpg" alt=""></a>
</div>
<div class="mc_name">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)">
<em>諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)</em>
</a>
</div>
<div class="mc_rev">
<a href="#">已有80萬(wàn)+人評(píng)價(jià)</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)"><img src="/static/search/img/593e4de0n5ff878a4.jpg" alt=""></a>
</div>
<div class="mc_name">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)">
<em>諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)</em>
</a>
</div>
<div class="mc_rev">
<a href="#">已有80萬(wàn)+人評(píng)價(jià)</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)"><img src="/static/search/img/593e4de0n5ff878a4.jpg" alt=""></a>
</div>
<div class="mc_name">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)">
<em>諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)</em>
</a>
</div>
<div class="mc_rev">
<a href="#">已有80萬(wàn)+人評(píng)價(jià)</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)"><img src="/static/search/img/59c493a7N3f9b9c85 (1).jpg" alt=""></a>
</div>
<div class="mc_name">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)">
<em>諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)</em>
</a>
</div>
<div class="mc_rev">
<a href="#">已有80萬(wàn)+人評(píng)價(jià)</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)"><img src="/static/search/img/59c493a7N3f9b9c85 (1).jpg" alt=""></a>
</div>
<div class="mc_name">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)">
<em>諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)</em>
</a>
</div>
<div class="mc_rev">
<a href="#">已有80萬(wàn)+人評(píng)價(jià)</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--我的足跡-->
<div class="JD_zuji">
<div class="JD_jx_title">
<div class="mt">
<strong class="mt-title">我的足跡</strong>
<a href="#">
更多瀏覽記錄
</a>
</div>
<div class="mc">
<ul>
<li>
<div class="mc_img">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)">
<img src="/static/search/img/59e58a11Nc38676d5.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥2998.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)">
<img src="/static/search/img/5a28acccN73689386.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥88.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)">
<img src="/static/search/img/5a1690ddN441b5dce.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥199.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)">
<img src="/static/search/img/5a02bde7N7d4453b1.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥799.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)">
<img src="/static/search/img/5a122dbeN044ebf19.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥599.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)">
<img src="/static/search/img/59c493a7N3f9b9c85.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥699.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="諾基亞 7 (Nokia 7) 4GB+64GB 黑色 全網(wǎng)通 雙卡雙待 移動(dòng)聯(lián)通電信4G手機(jī)">
<img src="/static/search/img/5a08f6f6N5bab2c1c.jpg" alt="">
</a>
</div>
<div class="mc_price">
<strong>
<span>￥715.00</span>
</strong>
</div>
</li>
</ul>
</div>
</div>
</div>
<div style="width: 1210px;margin: 0 auto;margin-bottom: 10px"><img src="/static/search/img/5a33a2e0N9a04b4af.jpg" alt=""></div>
<!--底部-->
<footer class="footer">
<div class="footer_top">
<ul>
<li>
<span></span>
<h3>品類齊全，輕松購(gòu)物</h3>
</li>
<li>
<span></span>
<h3>多倉(cāng)直發(fā)，極速配發(fā)</h3>
</li>
<li>
<span></span>
<h3>正品行貨，精致服務(wù)</h3>
</li>
<li>
<span></span>
<h3>天天低價(jià)，暢選無(wú)憂</h3>
</li>
</ul>
</div>
<div class="footer_center">
<ol>
<li>購(gòu)物指南</li>
<li><a href="#" style="color: rgb(114, 114, 114);">購(gòu)物流程</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">會(huì)員介紹</a>
</li>
<li><a href="#">生活旅行</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">常見(jiàn)問(wèn)題</a>
</li>
<li><a href="#">大家電</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">聯(lián)系客服</a>
</li>
</ol>
<ol>
<li>配送方式</li>
<li><a href="#" style="color: rgb(114, 114, 114);">上門自提</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">211限時(shí)達(dá)</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">配送服務(wù)查詢</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">配送費(fèi)收取標(biāo)準(zhǔn)</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">海外配送</a>
</li>
</ol>
<ol>
<li>支付方式</li>
<li><a href="#" style="color: rgb(114, 114, 114);">貨到付款</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">在線支付</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">分期付款</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">郵局匯款</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">公司轉(zhuǎn)賬</a>
</li>
</ol>
<ol>
<li>售后服務(wù)</li>
<li><a href="#" style="color: rgb(114, 114, 114);">售后政策</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">價(jià)格保護(hù)</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">退款說(shuō)明</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">返修/退換貨</a>
</li>
<li><a href="#">取消訂單</a>
</li>
</ol>
<ol>
<li>特色服務(wù)</li>
<li><a href="#" style="color: rgb(114, 114, 114);">奪寶島</a>
</li>
<li><a href="#">DIY裝機(jī)</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">延保服務(wù)</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">谷粒商城E卡</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">谷粒商城通信</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">谷粒商城gulimall+</a>
</li>
</ol>
<ol>
<li>谷粒商城自營(yíng)覆蓋區(qū)域</li>
<li>
谷粒商城已向全國(guó)2661個(gè)區(qū)縣提供自<br> 營(yíng)配送服務(wù)，支持貨到付款、
<br> POS機(jī)刷卡和售后上門服務(wù)。
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">查看詳情></a>
</li>
</ol>
</div>
<div class="footer_foot">
<p class="footer_p p1">
<a href="#">關(guān)于我們</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">聯(lián)系我們</a>
<span></span>
<a href="#">聯(lián)系客服</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">合作招商</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">商家?guī)椭?lt;/a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">營(yíng)銷中心</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">手機(jī)谷粒商城</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">友情鏈接</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">銷售聯(lián)盟</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">谷粒商城社區(qū)</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">風(fēng)險(xiǎn)監(jiān)測(cè)</a>
<span></span>
<a href="#">隱私政策</a>
<span></span>
<a href="#">谷粒商城公益</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">English Site</a>
<span></span>
<a href="#">media & IR</a>
</p>
<p class="footer_p">
<a href="#">京公網(wǎng)安備 11000002000088號(hào)</a>
<span></span>
<a href="#">京ICP證070359號(hào)</a>
<span></span>
<a href="#">互聯(lián)網(wǎng)藥品信息服務(wù)資格證編號(hào)(京)-經(jīng)營(yíng)性-2014-0008</a>
<span></span>
<a href="#">新出發(fā)京零 字第大120007號(hào)</a>
</p>
<p class="footer_p">
<a href="#">互聯(lián)網(wǎng)出版許可證編號(hào)新出網(wǎng)證(京)字150號(hào)</a>
<span></span>
<a href="#">出版物經(jīng)營(yíng)許可證</a>
<span></span>
<a href="#">網(wǎng)絡(luò)文化經(jīng)營(yíng)許可證京網(wǎng)文[2014]2148-348號(hào)</a>
<span></span>
<a href="#">違法和不良信息舉報(bào)電話：4006561155</a>
</p>
<p class="footer_p">
<a href="#">Copyright ? 2004 - 2017 谷粒商城JD.com 版權(quán)所有</a>
<span></span>
<a href="#">消費(fèi)者維權(quán)熱線：4006067733</a>
<a href="#">經(jīng)營(yíng)證照</a>
</p>
<p class="footer_p">
<a href="#">谷粒商城旗下網(wǎng)站:</a>
<a href="#">谷粒商城支付</a>
<span></span>
<a href="#">谷粒商城云</a>
</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</footer>
<!--右側(cè)側(cè)邊欄-->
<div class="header_bar">
<div class="header_bar_box">
<ul>
<li>
<a href="#"><img src="/static/search/img/wo.png" /></a>
<div class="div">
<a href="#">谷粒商城會(huì)員</a>
</div>
</li>
<li>
<a href="#"><img src="/static/search/img/gouwuche.png" /></a>
<div class="div">
<a href="#">購(gòu)物車</a>
</div>
</li>
<li>
<a href="#"><img src="/static/search/img/taoxin.png" /></a>
<div class="div">
<a href="#">我的關(guān)注</a>
</div>
</li>
<li>
<a href="#"><img src="/static/search/img/shi.png" /></a>
<div class="div">
<a href="#">我的足跡</a>
</div>
</li>
<li>
<a href="#"><img src="/static/search/img/xinxi.png" /></a>
<div class="div">
<a href="#">我的消息</a>
</div>
</li>
<li>
<a href="#"><img src="/static/search/img/qianbao.png" /></a>
<div class="div">
<a href="#">資訊JIMI</a>
</div>
</li>
</ul>
<ul>
<li>
<a href="#"><img src="/static/search/img/fa3f24a70d38bd439261cb7439e517a5.png" /></a>
<div class="div">
<a href="#">頂部</a>
</div>
</li>
<li>
<a href="#"><img src="/static/search/img/xinxi.png" /></a>
<div class="div">
<a href="#">反饋</a>
</div>
</li>
</ul>
</div>
</div>
<script>
$(".sl_ext a:nth-child(1)").hover(function(){
$(this).children("b").stop(true).animate({top:"3px"},50);
$(this).children("i").stop(true).animate({top:"-23px"},50)
},function(){
$(this).children("b").stop(true).animate({top:"24px"},50);
$(this).children("i").stop(true).animate({top:"3px"},50)
});
$(".sl_ext a:nth-child(2)").hover(function(){
$(this).children("span").stop(true).animate({top:"-1px"},100);
$(this).children("i").stop(true).animate({top:"-14px"},100).css({display:"none"})
},function(){
$(this).children("span").stop(true).animate({top:"14px"},100);
$(this).children("i").stop(true).animate({top:"-1px"},100).css({display:"block"})
});
$('.tab_im img').hover(function(){
var a=$(this).prop('src');
var index=$(this).parents('li').index();
$(this).parents('li').css('border','2px solid red').siblings('li').css('border','1px solid #ccc');
$(this).parents('ul').prev().find('img').prop('src',a);
$(this).parents('ul').siblings('.tab_JE').find('a').eq(list).css('display','block').siblings('a').css('display','none');
$(this).parents('ul').siblings('.tab_R').find('span').eq(list).css('display','block').siblings('span').css('display','none')
});
$(".JD_ipone_one").hover(function(){
$(this).children("div").css({display:"block"})
},function(){
$(this).children("div").css({display:"none"})
});
$("#tab>li").click(function() {
var i = $(this).index();
$("#container>div").hide().eq(i).show()
});
$(".dizhi_show").hover(function(){
$(".dizhi_con").css({display:"block"})
},function(){
$(".dizhi_con").css({display:"none"})
});
$(".dizhi_con").hover(function(){
$(this).css({display:"block"})
},function(){
$(this).css({display:"none"})
});
//顯示隱藏
var $li = $(".JD_nav_logo>div:gt(3)").hide();
$('.JD_show span').click(function(){
if($li.is(':hidden')){
$li.show();
$(this).css({width:"86px"}).text('收起 ^');
}else{
$li.hide();
$('.JD_show span').css({width:"291px"}).text('更多選項(xiàng)（ CPU核數(shù)、網(wǎng)絡(luò)、機(jī)身顏色 等）');
}
return false;
});
$(".rig_tab>div").hover(function(){
var i = $(this).index();
$(this).find('.ico').css({display:'block'}).stop(true).animate({top:"190px"},300)
},function(){
var i = $(this).index();
$(this).find('.ico').css({display:'none'}).stop(true).animate({top:"230px"})
});
$('.header_main_left>ul>li').hover(function() {
$(this).css({
background: "#f0f0f0"
}).find('.header_main_left_main').stop(true).fadeIn(300)
}, function() {
$(this).css({
background: "#fff"
}).find(".header_main_left_a").css({
color: "#000"
});
$(this).find('.header_main_left_main').stop(true).fadeOut(100)
});
$(".header_sj a").hover(function() {
$(this).css({
background: "#444"
})
}, function() {
$(this).css({
background: "#6e6568"
})
});
$(".nav_li1 a").hover(function(){
$(".header_main_left").stop(true).fadeIn()
},function(){
$(".header_main_left").stop(true).fadeOut()
});
$(".header_main_left").hover(function(){
$(this).stop(true).fadeIn()
},function(){
$(this).stop(true).fadeOut()
});
//右側(cè)側(cè)邊欄
$(".header_bar_box ul li").hover(function() {
$(this).css({
background: "#7A6E6E"
}).children(".div").css({
display: "block"
}).stop(true).animate({
left: "-60px"
}, 300)
}, function() {
$(this).css({
background: "#7A6E6E"
}).children(".div").css({
display: "none"
}).stop(true).animate({
left: "0"
}, 300)
});
//底部
$(".footer_foot .p1 a").hover(function(){
$(this).css("color","#D70B1C")
},function(){
$(this).css("color","#727272")
});
$(".footer .footer_center ol li a").hover(function(){
$(this).css("color","#D70B1C")
},function(){
$(this).css("color","#727272")
})
function searchProducts(name,value){
// 原來(lái)的頁(yè)面
// var href = location.href + "";
// if(href.includes("?")){
// location.href = location.href + "&"+name+"="+value;
// }else {
// location.href = location.href + "?"+name+"="+value;
// }
location.href = replaceAndAddParamVal(location.href,name,value,true)
}
function searchByKeyword(){
searchProducts("keyword",$('#keyword_input').val());
}
$(".page_a").click(function (){
var pn = $(this).attr("pn");
var href = location.href;
// if(href.includes("pageNum")){
// 替換pageNum
location.href = replaceAndAddParamVal(href,"pageNum",pn);
// }else {
// location.href = location.href + "&pageNum="+pn;
// }
return false;
})
function replaceAndAddParamVal(url,paramName,replaceVal,forceAdd){
var oUrl = url.toString();
// 沒(méi)有就添加，有就替換
if(oUrl.includes(paramName)){
if(forceAdd){
var nUrl = "";
if(oUrl.includes("?")){
nUrl = oUrl + "&" + paramName+'='+replaceVal;
}else {
nUrl = oUrl + "?" + paramName+'='+replaceVal;
}
return nUrl;
}else {
var re = eval('/('+paramName+'=)([^&]*)/gi');
var nUrl = oUrl.replace(re,paramName+'='+replaceVal)
return nUrl;
}
}else {
var nUrl = "";
if(oUrl.includes("?")){
nUrl = oUrl + "&" + paramName+'='+replaceVal;
}else {
nUrl = oUrl + "?" + paramName+'='+replaceVal;
}
return nUrl;
}
}
// 分頁(yè) - 點(diǎn)擊確定，跳轉(zhuǎn)到指定頁(yè)面
$('.page_submit').click(function (){
var pageNum = $('.page_nb').val();
var href = location.href;
// if(href.includes("pageNum")){
// 替換pageNum
location.href = replaceAndAddParamVal(href,"pageNum",pageNum);
// }else {
// location.href = location.href + "&pageNum="+pageNum;
// }
return false;
})
// 排序
$('.sort_a').click(function (){
// 1. 當(dāng)前被點(diǎn)擊的元素變?yōu)檫x中狀態(tài)
// 改變當(dāng)前元素及兄弟元素的樣式
// changeStyle(this);
$(this).toggleClass("desc"); //對(duì)當(dāng)前被選中的元素進(jìn)行進(jìn)行class屬性的desc隱藏或顯示
// 2. 跳轉(zhuǎn)到指定位置 sort=saleCount_asc/desc
var sort = $(this).attr("sort");
sort = $(this).hasClass("desc")?sort+"_desc":sort+"_asc";
location.href = replaceAndAddParamVal(location.href,"sort",sort);
// 禁止默認(rèn)行為，a標(biāo)簽的跳轉(zhuǎn)行為
return false;
})
function changeStyle(ele){
// 'color: #333;border-color: #CCC;background: #FFF' 默認(rèn)樣式
// 'color: #FFF;border-color: #e4393c;background: #e4393c' 高亮樣式
$('.sort_a').css({"color":"#333","border-color":"#CCC","background":"#FFF"});
$('.sort_a').each(function (){
var text = $(this).text().replace("↓","").replace("↑","");
$(this).text(text);
});
$(ele).css({"color":"#FFF","border-color":"#e4393c","background":"#e4393c"});
// 改變升降序 toggleClass-對(duì)當(dāng)前被選中的元素進(jìn)行進(jìn)行class屬性的desc隱藏或顯示
$(ele).toggleClass("desc");// 加上就是降序，不加是升序
if($(ele).hasClass("desc")){
// 降序
var text = $(ele).text().replace("↓","").replace("↑","");
text = text + "↓";
$(ele).text(text);
}else {
// 升序
var text = $(ele).text().replace("↓","").replace("↑","");
text = text + "↑";
$(ele).text(text);
}
}
$('#skuPriceSearchBtn').click(function (){
// 1. 拼上價(jià)格區(qū)間的查詢條件
var from = $('#skuPriceFrom').val();
var to = $('#skuPriceTo').val();
var query = from + '_'+to;
location.href = replaceAndAddParamVal(location.href,"skuPrice",query);
})
$('#showHasStock').change(function (){
if($(this).prop('checked')){
location.href = replaceAndAddParamVal(location.href,"hasStock",1);
}else {
// 沒(méi)選中
var re = eval('/(hasStock=)([^&]*)/gi');
// var re = eval('/(&hasStock=)([^&]*)/gi');
location.href = (location.href+"").replace(re,"");
}
})
</script>
</body>
</html>1.9.2 檢索服務(wù)后端相關(guān)代碼
1.9.2.1 引入依賴
? ? ? ? 用于面包屑導(dǎo)航，遠(yuǎn)程調(diào)用商品服務(wù)，根據(jù)ID獲取名稱。注意要引入spring-cloud依賴管理，以及版本控制。
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-openfeign</artifactId>
</dependency>1.9.2.2 vo
包 gulimall-search/src/main/java/com/wen/gulimall/search/vo/
@Data
public class AttrResponseVo {
private Long attrId;
/**
* 屬性名
*/
private String attrName;
/**
* 是否需要檢索[0-不需要，1-需要]
*/
private Integer searchType;
/**
* 屬性圖標(biāo)
*/
private String icon;
/**
* 可選值列表[用逗號(hào)分隔]
*/
private String valueSelect;
/**
* 屬性類型[0-銷售屬性，1-基本屬性，2-既是銷售屬性又是基本屬性]
*/
private Integer attrType;
/**
* 啟用狀態(tài)[0 - 禁用，1 - 啟用]
*/
private Long enable;
/**
* 所屬分類
*/
private Long catelogId;
/**
* 快速展示【是否展示在介紹上；0-否 1-是】，在sku中仍然可以調(diào)整
*/
private Integer showDesc;
/**
* 值類型[0-為單個(gè)值，1-可以選擇多個(gè)值]
*/
private Integer valueType;
/**
* 所屬分組
*/
private Long attrGroupId;
/**
* 所屬分組名稱
*/
private String groupName;
/**
* 所屬分類名稱
*/
private String catelogName;
/**
* 所屬分類的路徑
*/
private Long[] catelogPath;
}@Data
public class BrandVo {
/**
* "brandId": 0,
* "brandName": "string",
*/
private Long brandId;
private String name;
}@Data
public class SearchParam {
private String keyword; // 頁(yè)面穿過(guò)來(lái)的全文匹配關(guān)鍵字
private Long catalog3Id; // 三級(jí)分類的id
/**
* sort=saleCount_asc/desc
* sort=skuPrice_asc/desc
* sort=hotScore_asc/desc
*/
private String sort; //排序條件
/**
* 好多的過(guò)濾條件
* hasStock=0/1
* skuPrice=1_500/_500/500_
* bandId=1
* attrs=2_5寸：6寸
*/
private Integer hasStock; // 是否只顯示有貨,0（無(wú)庫(kù)存）1（有庫(kù)存）
private String skuPrice;// 價(jià)格區(qū)間查詢
private List<Long> brandId;// 按照品牌進(jìn)行查詢，可以多選
private List<String> attrs;// 按照屬性進(jìn)行篩選
private Integer pageNum = 1;// 頁(yè)碼
private String _queryString; // 原生的所有查詢條件
}@Data
public class SearchResult {
// 查詢到的所有商品信息
private List<SkuEsModel> products;
/**
* 以下是分頁(yè)信息
*/
private Integer pageNum; // 當(dāng)前頁(yè)碼
private Long total; // 總記錄數(shù)
private Integer totalPages; // 總頁(yè)碼
private List<Integer> pageNavs; // 頁(yè)碼導(dǎo)航欄
private List<BrandVo> brands; // 當(dāng)前查詢到的結(jié)果，所有涉及到的品牌
private List<CatalogVo> catalogs; // 當(dāng)前查詢到的結(jié)果，所有涉及到的所有分類
private List<AttrVo> attrs; // 當(dāng)前查詢到的結(jié)果，所有涉及到的所有屬性
//========================以上是返回給頁(yè)面的所有信息==========================
// 面包屑導(dǎo)航數(shù)據(jù)
private List<NavVo> navs = new ArrayList<>();
private List<Long> attrIds = new ArrayList<>();
@Data
public static class NavVo{
private String navName;
private String navValue;
private String link;
}
@Data
public static class BrandVo{
private Long brandId;
private String brandName;
private String brandImg;
}
@Data
public static class CatalogVo{
private Long catalogId;
private String catalogName;
}
@Data
public static class AttrVo{
private Long attrId;
private String attrName;
private List<String> attrValue;
}
}1.9.2.3 controller
@Controller
public class SearchController {
@Resource
private MallSearchService mallSearchService;
/**
* 自動(dòng)將頁(yè)面提交過(guò)來(lái)的所有請(qǐng)求查詢參數(shù)封裝成指定的對(duì)象
* @param searchParam
* @return
*/
@GetMapping("/list.html")
public String listPage(SearchParam searchParam, Model model, HttpServletRequest request){
searchParam.set_queryString(request.getQueryString());
// 1. 根據(jù)傳遞來(lái)的頁(yè)面的查詢參數(shù)，去es中檢索商品
SearchResult result = mallSearchService.search(searchParam);
model.addAttribute("result", result);
return "list";
}
}1.9.2.4 service
@Service
public class MallSearchServiceImpl implements MallSearchService {
@Resource
private RestHighLevelClient restHighLevelClient;
@Resource
private ProductFeignService productFeignService;
// 根據(jù)條件去es中檢索
@Override
public SearchResult search(SearchParam searchParam) {
// 動(dòng)態(tài)的構(gòu)建出查詢所需要的DSL
SearchResult result = null;
// 1. 準(zhǔn)備檢索請(qǐng)求
SearchRequest searchRequest = buildSearchRequest(searchParam);
try {
// 2. 執(zhí)行檢索請(qǐng)求
SearchResponse searchResponse = restHighLevelClient.search(searchRequest, GulimallElasticsearchConfig.COMMON_OPTIONS);
// 3. 分析響應(yīng)數(shù)據(jù)，封裝成需要的格式
result = buildSearchResponse(searchParam,searchResponse);
} catch (IOException e) {
e.printStackTrace();
}
return result;
}
/**
* 準(zhǔn)備檢索請(qǐng)求
* # 模糊匹配，過(guò)濾（按照屬性，分類，品牌，價(jià)格區(qū)間，庫(kù)存），排序，分頁(yè)，高亮，聚合分析
* @return
*/
private SearchRequest buildSearchRequest(SearchParam searchParam) {
// 構(gòu)建DSL語(yǔ)句對(duì)象
SearchSourceBuilder sourceBuilder = new SearchSourceBuilder();
/**
* 查詢：模糊匹配，過(guò)濾（按照屬性，分類，品牌，價(jià)格區(qū)間，庫(kù)存）
*/
// 1. 構(gòu)建bool - query
BoolQueryBuilder boolQuery = QueryBuilders.boolQuery();
// 1.1 bool - must 模糊匹配
if(StrUtil.isNotEmpty(searchParam.getKeyword())){
boolQuery.must(QueryBuilders.matchQuery("skuTitle",searchParam.getKeyword()));
}
// 1.2 bool - filter - 按照三級(jí)分類id查詢
if(searchParam.getCatalog3Id() != null){
boolQuery.filter(QueryBuilders.termQuery("catalogId",searchParam.getCatalog3Id()));
}
// 1.2 bool -filter - 按照品牌id查詢
if(CollectionUtil.isNotEmpty(searchParam.getBrandId())){
boolQuery.filter(QueryBuilders.termsQuery("brandId",searchParam.getBrandId()));
}
// 1.2 bool - filter - 按照所有指定的屬性進(jìn)行查詢
if(CollectionUtil.isNotEmpty(searchParam.getAttrs())){
// attrs=1_5寸:6寸&attrs=2_8G:16G
for (String attrStr : searchParam.getAttrs()) {
String[] s = attrStr.split("_");
String attrId = s[0]; // 檢索的屬性id
String[] attrValues = s[1].split(":"); // 這個(gè)屬性檢索所需要的值
BoolQueryBuilder nestedBoolQuery = QueryBuilders.boolQuery();
nestedBoolQuery.must(QueryBuilders.termQuery("attrs.attrId",attrId));
nestedBoolQuery.must(QueryBuilders.termsQuery("attrs.attrValue",attrValues));
// ScoreMode.None 不參與評(píng)分
// 每一個(gè)必須都得生成一個(gè)nested查詢
NestedQueryBuilder nestedQuery = QueryBuilders.nestedQuery("attrs", nestedBoolQuery, ScoreMode.None);
boolQuery.filter(nestedQuery);
}
}
// 1.2 bool -filter - 按照庫(kù)存是否有進(jìn)行查詢
if(searchParam.getHasStock() != null) {
boolQuery.filter(QueryBuilders.termQuery("hasStock", searchParam.getHasStock() == 1));
}
// 1.2 bool -filter - 按照價(jià)格區(qū)間
if(StrUtil.isNotEmpty(searchParam.getSkuPrice())){
String[] s = searchParam.getSkuPrice().split("_");
RangeQueryBuilder rangeQuery = QueryBuilders.rangeQuery("skuPrice");
if(s.length == 2){
rangeQuery.gte(s[0]).lte(s[1]);
boolQuery.filter(rangeQuery);
}else if(s.length == 1){
if(searchParam.getSkuPrice().startsWith("_")){
rangeQuery.lte(s[0]);
boolQuery.filter(rangeQuery);
}
if(searchParam.getSkuPrice().endsWith("_")){
rangeQuery.gte(s[0]);
boolQuery.filter(rangeQuery);
}
}
}
// 把以上所有的條件都拿來(lái)進(jìn)行封裝
sourceBuilder.query(boolQuery);
/**
* 排序，分頁(yè)，高亮
*/
// 2.1 排序
if(StrUtil.isNotEmpty(searchParam.getSort())){
// sort=saleCount_asc/desc
String[] s = searchParam.getSort().split("_");
SortOrder order = s[1].equalsIgnoreCase("asc")?SortOrder.ASC:SortOrder.DESC;
sourceBuilder.sort(s[0],order);
}
// 2.2 分頁(yè) pageSize = 5
// pageNum:1 from:0 size:5
// pageNum:2 form:5 size:5
// from = (pageNum - 1)*size
sourceBuilder.from((searchParam.getPageNum()-1)*EsConstant.PRODUCT_PAGESIZE);
sourceBuilder.size(EsConstant.PRODUCT_PAGESIZE);
// 2.3 高亮
if(StrUtil.isNotEmpty(searchParam.getKeyword())) {
HighlightBuilder builder = new HighlightBuilder();
builder.field("skuTitle");
builder.preTags("<b style='color:red'>");
builder.postTags("</b>");
sourceBuilder.highlighter(builder);
}
/**
* 聚合分析
*/
// 1. 品牌聚合
TermsAggregationBuilder brand_agg = AggregationBuilders.terms("brand_agg");
brand_agg.field("brandId").size(50);
// 品牌聚合的子聚合
brand_agg.subAggregation(AggregationBuilders.terms("brand_name_agg").field("brandName").size(1));
brand_agg.subAggregation(AggregationBuilders.terms("brand_img_agg").field("brandImg").size(1));
// TODO 1.聚合brand
sourceBuilder.aggregation(brand_agg);
// 2. 分類聚合 catalog_agg
TermsAggregationBuilder catalog_agg = AggregationBuilders.terms("catalog_agg").field("catalogId").size(20);
// 分類聚合的子聚合
catalog_agg.subAggregation(AggregationBuilders.terms("catalog_name_agg").field("catalogName").size(1));
// TODO 1.聚合catalog
sourceBuilder.aggregation(catalog_agg);
// 3. 屬性聚合
NestedAggregationBuilder attr_agg = AggregationBuilders.nested("attr_agg", "attrs");
// 聚合出當(dāng)前所有的attrId
TermsAggregationBuilder attr_id_agg = AggregationBuilders.terms("attr_id_agg").field("attrs.attrId").size(10);
// 聚合出當(dāng)前所有的attr_id對(duì)應(yīng)的名字
attr_id_agg.subAggregation(AggregationBuilders.terms("attr_name_agg").field("attrs.attrName").size(1));
// 聚合出當(dāng)前所有的attr_id對(duì)應(yīng)的所有可能的屬性值attrValue
attr_id_agg.subAggregation(AggregationBuilders.terms("attr_value_agg").field("attrs.attrValue").size(50));
attr_agg.subAggregation(attr_id_agg);
// TODO 1.聚合attr
sourceBuilder.aggregation(attr_agg);
System.out.println("構(gòu)建的DSL語(yǔ)句"+sourceBuilder.toString());
SearchRequest searchRequest = new SearchRequest(new String[]{EsConstant.PRODUCT_INDEX},sourceBuilder);
return searchRequest;
}
/**
* 封裝檢索結(jié)果
* @param searchParam
* @param searchResponse
* @return
*/
private SearchResult buildSearchResponse(SearchParam searchParam, SearchResponse searchResponse) {
SearchResult result = new SearchResult();
// 1. 返回所有查詢到的商品
SearchHit[] hits = searchResponse.getHits().getHits();
List<SkuEsModel> skuEsModels = new ArrayList<>();
if(ArrayUtil.isNotEmpty(hits)) {
for (SearchHit hit : hits) {
String sourceAsString = hit.getSourceAsString();
SkuEsModel skuEsModel = JSON.parseObject(sourceAsString, SkuEsModel.class);
// keyword非空設(shè)置高亮
if(StrUtil.isNotEmpty(searchParam.getKeyword())) {
String skuTitle = hit.getHighlightFields().get("skuTitle").getFragments()[0].string();
skuEsModel.setSkuTitle(skuTitle);
}
skuEsModels.add(skuEsModel);
}
}
result.setProducts(skuEsModels);
2. 當(dāng)前所有商品涉及到的所有屬性信息
List<SearchResult.AttrVo> attrVos = new ArrayList<>();
ParsedNested attr_agg = searchResponse.getAggregations().get("attr_agg");
ParsedLongTerms attr_id_agg = attr_agg.getAggregations().get("attr_id_agg");
for (Terms.Bucket bucket : attr_id_agg.getBuckets()) {
// 1. 獲取屬性id
long attrId = bucket.getKeyAsNumber().longValue();
// 2. 獲取屬性的名字
String attrName = ((ParsedStringTerms) bucket.getAggregations().get("attr_name_agg")).getBuckets().get(0).getKeyAsString();
// 3. 獲取屬性的值
List<String> attrValues = ((ParsedStringTerms) bucket.getAggregations().get("attr_value_agg")).getBuckets().stream().map(item -> {
return ((Terms.Bucket) item).getKeyAsString();
}).collect(Collectors.toList());
SearchResult.AttrVo attrVo = new SearchResult.AttrVo();
attrVo.setAttrId(attrId);
attrVo.setAttrName(attrName);
attrVo.setAttrValue(attrValues);
attrVos.add(attrVo);
}
result.setAttrs(attrVos);
3. 當(dāng)前所有商品涉及到的所有品牌信息
List<SearchResult.BrandVo> brandVos = new ArrayList<>();
ParsedLongTerms brand_agg = searchResponse.getAggregations().get("brand_agg");
for (Terms.Bucket bucket : brand_agg.getBuckets()) {
// 1. 獲取品牌的id
long brandId = bucket.getKeyAsNumber().longValue();
// 2. 獲取品牌的名字
String brandName = ((ParsedStringTerms) bucket.getAggregations().get("brand_name_agg")).getBuckets().get(0).getKeyAsString();
// 3. 獲取平品牌的圖片
String brandImg = ((ParsedStringTerms) bucket.getAggregations().get("brand_img_agg")).getBuckets().get(0).getKeyAsString();
SearchResult.BrandVo brandVo = new SearchResult.BrandVo();
brandVo.setBrandId(brandId);
brandVo.setBrandName(brandName);
brandVo.setBrandImg(brandImg);
brandVos.add(brandVo);
}
result.setBrands(brandVos);
4. 當(dāng)前所有商品涉及到的所有分類信息
ParsedLongTerms catalog_agg = searchResponse.getAggregations().get("catalog_agg");
List<SearchResult.CatalogVo> catalogVos = new ArrayList<>();
List<? extends Terms.Bucket> buckets = catalog_agg.getBuckets();
if(CollectionUtil.isNotEmpty(buckets)){
for (Terms.Bucket bucket : buckets) {
SearchResult.CatalogVo catalogVo = new SearchResult.CatalogVo();
// 獲取分類id
String keyAsString = bucket.getKeyAsString();
catalogVo.setCatalogId(Long.parseLong(keyAsString));
// 獲取分類名稱
ParsedStringTerms catalog_name_agg = bucket.getAggregations().get("catalog_name_agg");
String catalog_name = catalog_name_agg.getBuckets().get(0).getKeyAsString();
catalogVo.setCatalogName(catalog_name);
catalogVos.add(catalogVo);
}
}
result.setCatalogs(catalogVos);
//
5. 分頁(yè)信息 - 當(dāng)前頁(yè)碼
result.setPageNum(searchParam.getPageNum());
5. 分頁(yè)信息 - 總記錄數(shù)
long total = searchResponse.getHits().getTotalHits().value;
result.setTotal(total);
5. 分頁(yè)信息 - 總頁(yè)數(shù)
Integer totalPages = (int)total%EsConstant.PRODUCT_PAGESIZE == 0?(int)total/EsConstant.PRODUCT_PAGESIZE:((int)total/EsConstant.PRODUCT_PAGESIZE + 1);
result.setTotalPages(totalPages);
5. 分頁(yè)信息 - 導(dǎo)航欄
List<Integer> pageNavs = new ArrayList<>();
for(int i = 1;i<=totalPages;i++){
pageNavs.add(i);
}
result.setPageNavs(pageNavs);
// 6. 構(gòu)建面包屑導(dǎo)航功能 - 屬性
if(CollectionUtil.isNotEmpty(searchParam.getAttrs())) {
List<SearchResult.NavVo> collect = searchParam.getAttrs().stream().map(attr -> {
// 1. 分析每一個(gè)參數(shù)傳過(guò)來(lái)的參數(shù)值
SearchResult.NavVo navVo = new SearchResult.NavVo();
// attrs=1_5寸:6寸
String[] s = attr.split("_");
navVo.setNavValue(s[1]);
R r = productFeignService.attrInfo(Long.parseLong(s[0]));
result.getAttrIds().add(Long.parseLong(s[0]));
if (r.getCode() == 0) {
AttrResponseVo data = r.getData("attr", new TypeReference<AttrResponseVo>() {
});
navVo.setNavName(data.getAttrName());
} else {
navVo.setNavName(s[0]);
}
// 2. 取消了這個(gè)面包屑以后，我們要跳轉(zhuǎn)到哪個(gè)地方
String replace = replaceQueryString(searchParam, attr, "attrs");
navVo.setLink("http://search.gulimall.com/list.html?" + replace);
return navVo;
}).collect(Collectors.toList());
result.setNavs(collect);
}
// 品牌、分類的面包屑
if(CollectionUtil.isNotEmpty(searchParam.getBrandId())){
List<SearchResult.NavVo> navs = result.getNavs();
SearchResult.NavVo navVo = new SearchResult.NavVo();
navVo.setNavName("品牌");
// TODO 遠(yuǎn)程查詢所有品牌
R r = productFeignService.brandsInfo(searchParam.getBrandId());
if(r.getCode() == 0){
List<BrandVo> brand = r.getData("brand", new TypeReference<List<BrandVo>>() {
});
StringBuffer stringBuffer = new StringBuffer();
String replace = "";
for (BrandVo brandVo : brand) {
stringBuffer.append(brandVo.getName()+";");
replace = replaceQueryString(searchParam,brandVo.getBrandId()+"","brandId");
}
navVo.setNavValue(stringBuffer.toString());
navVo.setLink("http://search.gulimall.com/list.html?" + replace);
}
navs.add(navVo);
}
return result;
}
private String replaceQueryString(SearchParam searchParam, String value, String key) {
String encode = null;
try {
encode = URLEncoder.encode(value, "UTF-8");
// 前端傳遞過(guò)來(lái)的空格被解碼成+，替換成%20
encode = encode.replace("+","%20"); //瀏覽器對(duì)空格的編碼和Java不一樣，差異化處理
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
String replace = searchParam.get_queryString().replace("&"+key+"=" + encode, "");
return replace;
}
}1.9.2.5 遠(yuǎn)程調(diào)用接口
開(kāi)啟openfeign
@EnableFeignClients // 開(kāi)啟openfeign接口
gulimall-search/src/main/java/com/wen/gulimall/search/feign/ProductFeignService.java
@FeignClient("gulimall-product")
public interface ProductFeignService {
@GetMapping("/product/attr/info/{attrId}")
public R attrInfo(@PathVariable("attrId") Long attrId);
@GetMapping("/product/brand/infos")
public R brandsInfo(@RequestParam("brandIds") List<Long> brandIds);
}1.9.3 遠(yuǎn)程服務(wù)相關(guān)接口
1.9.3.1 attrInfo接口
gulimall-product/src/main/java/com/wen/gulimall/product/app/AttrController.java
/**
* 修改回顯信息
*/
@RequestMapping("/info/{attrId}")
public R info(@PathVariable("attrId") Long attrId){
//AttrEntity attr = attrService.getById(attrId);
AttrRespVo attrRespVo = attrService.getAttrInfo(attrId);
return R.ok().put("attr", attrRespVo);
}gulimall-product/src/main/java/com/wen/gulimall/product/service/AttrService.java
AttrRespVo getAttrInfo(Long attrId);?gulimall-product/src/main/java/com/wen/gulimall/product/service/impl/AttrServiceImpl.java
@Cacheable(value = "attr",key = "'attrinfo:'+#root.args[0]")
@Override
public AttrRespVo getAttrInfo(Long attrId) {
AttrEntity attrEntity = this.getById(attrId);
AttrRespVo attrRespVo = new AttrRespVo();
BeanUtils.copyProperties(attrEntity, attrRespVo);
if (attrEntity.getCatelogId() != null) {
// 所屬分類
Long[] catelogPath = categoryService.findCatelogPath(attrEntity.getCatelogId());
attrRespVo.setCatelogPath(catelogPath);
CategoryEntity categoryEntity = categoryDao.selectById(attrEntity.getCatelogId());
if (categoryEntity != null) {
attrRespVo.setCatelogName(categoryEntity.getName());
}
}
if (attrEntity.getAttrType() == ProductConstant.AttrEnum.ATTR_TYPE_BASE.getCode()) {
// 所屬分組
AttrAttrgroupRelationEntity attrAttrgroupRelation = attrAttrgroupRelationDao.selectOne(new QueryWrapper<AttrAttrgroupRelationEntity>().eq("attr_id", attrId));
// 可能屬性與屬性分組沒(méi)有關(guān)聯(lián)關(guān)系
if (attrAttrgroupRelation != null) {
attrRespVo.setAttrGroupId(attrAttrgroupRelation.getAttrGroupId());
AttrGroupEntity groupEntity = attrGroupDao.selectById(attrAttrgroupRelation.getAttrGroupId());
if (groupEntity != null) {
attrRespVo.setGroupName(groupEntity.getAttrGroupName());
}
}
}
return attrRespVo;
}1.9.3.2 brandsInfo接口
gulimall-product/src/main/java/com/wen/gulimall/product/app/BrandController.java
@GetMapping("/infos")
public R info(@RequestParam("brandIds") List<Long> brandIds){
List<BrandEntity> brand = brandService.getBrandsByIds(brandIds);
return R.ok().put("brand", brand);
}gulimall-product/src/main/java/com/wen/gulimall/product/service/BrandService.java文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-608268.html
List<BrandEntity> getBrandsByIds(List<Long> brandIds);gulimall-product/src/main/java/com/wen/gulimall/product/service/impl/BrandServiceImpl.java文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-608268.html
@Override
public List<BrandEntity> getBrandsByIds(List<Long> brandIds) {
return baseMapper.selectList(new QueryWrapper<BrandEntity>().in("brand_id",brandIds));
}到了這里，關(guān)于谷粒商城篇章5 ---- P173-P192 ---- 檢索服務(wù)【分布式高級(jí)篇二】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![解決IDEA報(bào)錯(cuò):無(wú)法檢索應(yīng)用程序 JMX 服務(wù) URL[Failed to retrieve application JMX service URL]親測(cè)可用](https://imgs.yssmx.com/Uploads/2024/02/455728-1.png)
