1.引入检索页面

1.确保search目录和list.html都成功引入

2.修改list.html，增加命名空间

3.后端编写接口 SearchController.java

package com.sun.sunliving.commodity.web;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;/*** Description:** @Author sun* @Create 2024/4/26 14:54* @Version 1.0*/
@Controller
public class SearchController {/*** 转发到检索界面* @return*/@RequestMapping("/list.html")public String list() {return "list";}
}

4.测试访问

2.带条件分页检索

1.前端要求返回数据的格式

2.构建vo，SearchResult.java

package com.sun.sunliving.commodity.vo;import com.sun.sunliving.commodity.entity.SkuInfoEntity;
import lombok.Data;import java.util.List;/*** Description:** @Author sun* @Create 2024/4/26 15:21* @Version 1.0*/
@Data
public class SearchResult {// 检索到的商品信息private List<SkuInfoEntity> commodity;// 当前页码private Integer pageNum;// 总的记录数private Long total;// 总页数private Integer totalPages;// 总记录数private List<Integer> pageNavs;
}

3.SkuInfoService.java 购买用户根据检索条件查询商品信息

    /*** 购买用户根据检索条件查询商品信息* @param params* @return*/PageUtils querySearchPageByCondition(Map<String, Object> params);

4.SkuInfoServiceImpl.java

    @Overridepublic PageUtils querySearchPageByCondition(Map<String, Object> params) {// 创建一个查询条件对象QueryWrapper<SkuInfoEntity> queryWrapper = new QueryWrapper<>();// 获取keywordString keyword = (String) params.get("keyword");// 如果keyword不为空，那么就设置sku_id和sku_name的查询条件if (StringUtils.isNotBlank(keyword)) {// 查询条件为sku_id等于keyword或者sku_name包含keywordqueryWrapper.and((wrapper) -> {wrapper.eq("sku_id", keyword).or().like("sku_name", keyword);});}// 获取三级分类catalog3IdString catalog3Id = (String) params.get("catalog3Id");// 如果catalog3Id不为空，并且不等于0，那么就设置catalog_id的查询条件if (StringUtils.isNotBlank(catalog3Id) && !"0".equalsIgnoreCase(catalog3Id)) {queryWrapper.eq("catalog_id", catalog3Id);}// 获取brandIdString brandId = (String) params.get("brandId");// 如果brandId不为空，并且不等于0，那么就设置brand_id的查询条件if (StringUtils.isNotBlank(brandId) && !"0".equalsIgnoreCase(brandId)) {queryWrapper.eq("brand_id", brandId);}// 分页查询IPage<SkuInfoEntity> page = this.page(new Query<SkuInfoEntity>().getPage(params),queryWrapper);// 返回分页结果return new PageUtils(page);}

5.SearchController.java 测试返回结果

1.根据keyword查询

2.根据catalog3Id也就是一级商品id查询

3.根据brandId查询

6.二次封装vo，SearchController.java

package com.sun.sunliving.commodity.web;import com.sun.common.utils.PageUtils;
import com.sun.sunliving.commodity.entity.SkuInfoEntity;
import com.sun.sunliving.commodity.service.SkuInfoService;
import com.sun.sunliving.commodity.vo.SearchResult;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;/*** Description:** @Author sun* @Create 2024/4/26 14:54* @Version 1.0*/
@Controller
public class SearchController {@Resourceprivate SkuInfoService skuInfoService;/*** 转发到检索界面* @return*/@RequestMapping("/list.html")public String list(@RequestParam Map<String, Object> params, Model model) {// 调用service层的方法PageUtils pageUtils = skuInfoService.querySearchPageByCondition(params);// 将数据封装到vo中SearchResult searchResult = new SearchResult();searchResult.setCommodity((List<SkuInfoEntity>) pageUtils.getList());searchResult.setPageNum(pageUtils.getCurrPage());searchResult.setTotal((long) pageUtils.getTotalCount());searchResult.setTotalPages(pageUtils.getTotalPage());// 设置页码，只需遍历总页数即可List<Integer> pageNavs = new ArrayList<>();for (int i = 1; i <= pageUtils.getTotalPage(); i++) {pageNavs.add(i);}searchResult.setPageNavs(pageNavs);// 将数据传递到前端模板model.addAttribute("result", searchResult);return "list";}
}

7.模板渲染

1.list.html取出数据的代码

                    <!--排序内容--><div class="rig_tab"><!-- 取出每一个commodity--><div th:each="commodity : ${result.getCommodity()}"><div class="ico"><i class="iconfont icon-weiguanzhu"></i><a href="#">关注</a></div><p class="da"><a href="#"title="购买leCare+，获得原厂2年整机保修(含电池)，和多达2次意外损坏的保修服务。购买勾选：保障服务、原厂保2年。"><img th:src="${commodity.skuDefaultImg}" class="dim"></a></p><ul class="tab_im"><li><a href="#" title="黑色"><img th:src="${commodity.skuDefaultImg}" /></a></li></ul><p class="tab_R"><span th:text="'¥' + ${commodity.price}">¥5199.00</span></p><p class="tab_JE"><a href="#" th:utext="${commodity.skuTitle}">北欧风格沙发10000#号</a></p><p class="tab_PI">已有<span>11万+</span>热门评价<a href="#">二手有售</a></p><p class="tab_CP"><a href="#" title="家居网产品专营店">家居网产品...</a><a href='#' title="联系供应商进行咨询"><img src="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.结果展示，这里价钱为0是因为确实没写

3.测试检索

8.分页导航

1.list.html

                    <!--分页--><div class="filter_page"><div class="page_wrap"><span class="page_span1"><a class="page_a" href="#" th:attr="pn=${result.pageNum - 1}"th:if="${result.pageNum>1}">< 上一页</a><a class="page_a"th:attr="pn=${navs},style=${navs == result.pageNum?'border:0;color:#ee2222;background: #fff':''}"th:each="navs : ${result.pageNavs}">[[${navs}]]</a><a class="page_a" href="#" th:attr="pn=${result.pageNum + 1}"th:if="${result.pageNum<result.totalPages}">下一页 ></a></span><span class="page_span2"><em>共<b>[[${result.totalPages}]]</b>页&nbsp;&nbsp;到第</em><input type="number" value="1"><em>页</em><a href="#">确定</a></span></div></div>

2.结果展示

9.通过搜索框进行检索 list.html

1.在搜索位置添加点击事件

2.将这段代码放到js脚本最后

• 这个脚本的意思就是根据传入的参数，在location.href的url上添加参数

    //处理带条件搜索, 技术难点在于要把原来的条件带上.//得到最新的请求 url, 带有多个条件function searchProducts(name, value) {location.href = replaceParamVal(location.href, name, value, false)}function searchByKeyword() {searchProducts("keyword", $("#keyword_input").val());}//替换条件, 或者是添加条件，比较麻烦的代码function replaceParamVal(url, paramName, replaceVal, forceAdd) {var oUrl = url.toString();var nUrl;if (oUrl.indexOf(paramName) != -1) {if (forceAdd) {if (oUrl.indexOf("?") != -1) {nUrl = oUrl + "&" + paramName + "=" + replaceVal;} else {nUrl = oUrl + "?" + paramName + "=" + replaceVal;}} else {var re = eval('/(' + paramName + '=)([^&]*)/gi');nUrl = oUrl.replace(re, paramName + '=' + replaceVal);}} else {if (oUrl.indexOf("?") != -1) {nUrl = oUrl + "&" + paramName + "=" + replaceVal;} else {nUrl = oUrl + "?" + paramName + "=" + replaceVal;}}return nUrl;};

4.结果展示

10.完成点击三级分类也可以进入检索页面

1.修改 catalogLoader.js，注意需要baseUrl

2.结果展示

1.点击性价比手机

2.则根据分类查询

11.检索代码重构

1.当前检索代码问题分析

1.无论spu是否上架，都会被检索出来

2.比如查看这里的id为16的spu，是下架的

2.后端 sunliving-commodity模块

1.SpuInfoService.java 获取所有上架商品的id

    // 获取所有上架商品的idList<Long> getAllUpSpuId();

2.SpuInfoServiceImpl.java

    @Overridepublic List<Long> getAllUpSpuId() {// 查询所有publish_status为1的spu的idList<SpuInfoEntity> list = this.list(new QueryWrapper<SpuInfoEntity>().eq("publish_status", 1));return list.stream().map(SpuInfoEntity::getId).collect(Collectors.toList());}

3.修改SkuInfoServiceImpl.java的querySearchPageByCondition方法，增加判断是否上架的条件

4.测试，此时检索只会出现spu_id为17的两条sku记录

12.分页超链接

1.首先确保list.html的分页部分绑定了class为page_a

2.将script代码放到最后

    // 分页超链接$(".page_a").click(function () {var pn = $(this).attr("pn");var href = location.href;if (href.indexOf("page") != -1) {
//替换, 这里的"page" 是因为我们后台分页插件是按照 page 这个参数来当做当前页的参数location.href = replaceParamVal(href, "page", pn);} else {
//增加 pageNuwif (href.indexOf("?") != -1) {location.href = location.href + "&page=" + pn;} else {location.href = location.href + "?page=" + pn;}}return false;})

3.测试

1.点击第第二页

13.保留检索关键字

1.SearchResult.java 添加keyword字段

2.在SearchController.java返回时携带

3.list.html回显

4.测试