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

    @Override
    public PageUtils querySearchPageByCondition(Map<String, Object> params) {
        // 创建一个查询条件对象
        QueryWrapper<SkuInfoEntity> queryWrapper = new QueryWrapper<>();
        // 获取keyword
        String keyword = (String) params.get("keyword");
        // 如果keyword不为空，那么就设置sku_id和sku_name的查询条件
        if (StringUtils.isNotBlank(keyword)) {
            // 查询条件为sku_id等于keyword或者sku_name包含keyword
            queryWrapper.and((wrapper) -> {
                wrapper.eq("sku_id", keyword).or().like("sku_name", keyword);
            });
        }
        // 获取三级分类catalog3Id
        String catalog3Id = (String) params.get("catalog3Id");
        // 如果catalog3Id不为空，并且不等于0，那么就设置catalog_id的查询条件
        if (StringUtils.isNotBlank(catalog3Id) && !"0".equalsIgnoreCase(catalog3Id)) {
            queryWrapper.eq("catalog_id", catalog3Id);
        }
        // 获取brandId
        String 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 {
    @Resource
    private 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

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

2.SpuInfoServiceImpl.java

    @Override
    public List<Long> getAllUpSpuId() {
        // 查询所有publish_status为1的spu的id
        List<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 {
//增加 pageNuw
            if (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.测试