本文主要介绍了谷粒商城项目的检索服务整合，包括前端整合和检索业务两个部分。在前端整合中，详细讲述了引入thymeleaf依赖、前端页面整合、nginx配置以及页面跳转逻辑的调整。在检索业务部分，提到了新建过程实体、业务接口和实现类的完善，以及前端页面代码回显的优化措施。
第八章：检索服务
一、前端整合
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>关闭thymeleaf缓存
spring.thymeleaf.cache=false2.前端页面整合
将检索服务的前端页面放置到nginx上
修改index.html的样式地址
3.nginx的配置
1）、修改host文件为
nginx的地址 search.gulimall.com2）、进入conf.d修改nginx的gulimall.conf配置将静态资源转给网关
修改gulimall.com 为*.gulimall.com
3）、修改网关
- id: gulimall_host_route
uri: lb://gulimall_product
predicates:
- Host=gulimall.com
- id: gulimall_search_route
uri: lb://gulimall_search
predicates:
- Host=search.gulimall.com4.调整页面跳转逻辑
更改search的服务首页名称为list.html
添加转跳控制器SearchController
@Controller
public class SearchController {
// @Autowired
// MallSearchService mallSearchService;
/**
* 自动将页面提交过来的所有请求查询参数封装成指定的对象
* @return
*/
@GetMapping("/list.html")
public String listPage(/*SearchParam param, Model model, HttpServletRequest request*/){
// param.set_queryString(request.getQueryString());
// //1、根据传递来的页面的查询参数，去es中检索商品
// SearchResult result = mallSearchService.search(param);
//
// model.addAttribute("result",result);
return "list";
}
}
跳转首页到跳转页的环境
1）、完善lish.html服务中点击商城首页的文字和图片跳转到gulimall.com地址的功能。
2）、完善index.html中点击三级分类和检索框跳转到search.gulimall.com地址的功能。
避坑注意catalogLoader.js中跳转地址要改为自己的域名地址
二、检索业务
1.新建过程实体
传入参数SearchParam和传出结果SearchResult
@Data
public class SearchParam {
private String keyword;//页面传递过来的全文匹配关键字 v
private Long catalog3Id;//三级分类id v
/**
* sort=saleCount_asc/desc
* sort=skuPrice_asc/desc
* sort=hotScore_asc/desc
*/
private String sort;//排序条件 v
/**
* 好多的过滤条件
* hasStock(是否有货)、skuPrice区间、brandId、catalog3Id、attrs
* hasStock=0/1
* skuPrice=1_500/_500/500_
* brandId=1
* attrs=2_5存:6寸
*
*/
private Integer hasStock;//是否只显示有货 v 0（无库存）1（有库存）
private String skuPrice;//价格区间查询 v
private List<Long> brandId;//按照品牌进行查询，可以多选 v
private List<String> attrs;//按照属性进行筛选 v
private Integer pageNum = 1;//页码
private String _queryString;//原生的所有查询条件
}
@Data
public class SearchResult {
//查询到的所有商品信息
private List<SkuEsModel> products;
/**
* 以下是分页信息
*/
private Integer pageNum;//当前页码
private Long total;//总记录数
private Integer totalPages;//总页码
private List<Integer> pageNavs;
private List<BrandVo> brands;//当前查询到的结果，所有涉及到的品牌
private List<CatalogVo> catalogs;//当前查询到的结果，所有涉及到的所有分类
private List<AttrVo> attrs;//当前查询到的结果，所有涉及到的所有属性
//==========以上是返回给页面的所有信息============
//面包屑导航数据
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;
}
}2.完善业务接口和实现类
@Resource
MallSearchService mallSearchService;
/**
* 自动将页面提交过来的所有请求查询参数封装成指定的对象
* @return
*/
@GetMapping("/list.html")
public String listPage(SearchParam param, Model model, HttpServletRequest request){
param.set_queryString(request.getQueryString());
//1、根据传递来的页面的查询参数，去es中检索商品
SearchResult result = mallSearchService.search(param);
model.addAttribute("result",result);
return "list";
}3.优化前端页面代码的回显
1）优化商品
<!--排序内容-->
<div class="rig_tab">
<div th:each="product:${result.getProducts()}">
<div class="ico">
<i class="iconfont icon-weiguanzhu"></i>
<a href="/static/search/#">关注</a>
</div>
<p class="da">
<a href="/static/search/#" >
<img th:src="${product.skuImg}" class="dim">
</a>
</p>
<ul class="tab_im">
<li><a href="/static/search/#" 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="/static/search/#" th:text="${product.skuTitle}">
Apple iPhone 7 Plus (A1661) 32G 黑色 移动联通电信4G手机
</a>
</p>
<p class="tab_PI">已有<span>11万+</span>热门评价
<a href="/static/search/#">二手有售</a>
</p>
<p class="tab_CP"><a href="/static/search/#" title="谷粒商城Apple产品专营店">谷粒商城Apple产品...</a>
<a href='#' title="联系供应商进行咨询">
<img src="/static/search/img/xcxc.png">
</a>
</p>
<div class="tab_FO">
<div class="FO_one">
<p>自营
<span>谷粒商城自营,品质保证</span>
</p>
<p>满赠
<span>该商品参加满赠活动</span>
</p>
</div>
</div>
</div>
</div>
2）优化品牌和其属性
<!--品牌-->
<div class="JD_nav_wrap">
<div class="sl_key">
<span>品牌：</span>
</div>
<div class="sl_value">
<div class="sl_value_logo">
<ul>
<li th:each="brand:${result.brands}">
<a href="/static/search/#">
<img th:src="${brand.brandImg}" alt="">
<div th:text="${brand.brandName}">
华为(HUAWEI)
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="sl_ext">
<a href="/static/search/#">
更多
<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="/static/search/#">
多选
<i>+</i>
<span>+</span>
</a>
</div>
</div> <div class="JD_pre" th:each="attr:${result.attrs}">
<div class="sl_key">
<span th:text="${attr.attrName}">屏幕尺寸：</span>
</div>
<div class="sl_value">
<ul>
<li th:each="val:${attr.attrValue}">
<a href="/static/search/#" th:text="val">5.56英寸及以上</a>
</li>
</ul>
</div>
</div>3）//TODO
扫一扫
607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
