【Spring+Mybatis+SpringMVC整合项目七】天猫商城（前台-搜索）

短命女 2022-04-11 09:44 147阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70][]

search.jsp

<form action="foresearch" method="post" >
            <div class="searchDiv">
                <input name="keyword" type="text" value="${param.keyword}" placeholder="时尚男鞋  太阳镜 ">
                <button  type="submit" class="searchButton">搜索</button>
                <div class="searchBelow">
                    <c:forEach items="${cs}" var="c" varStatus="st">
                        <c:if test="${st.count>=5 and st.count<=8}">
                            <span>
                                <a href="forecategory?cid=${c.id}">
                                    ${c.name}
                                </a>
                                <c:if test="${st.count!=8}">             
                                    <span>|</span>             
                                </c:if>
                            </span>          
                        </c:if>
                    </c:forEach>     
                </div>
            </div>
        </form>

通过search.jsp或者simpleSearch.jsp提交数据到路径 /foresearch， 导致ForeController.search()方法被调用  
1. 获取参数keyword  
2. 根据keyword进行模糊查询，获取满足条件的前20个产品  
3. 为这些产品设置销量和评价数量  
4. 把产品结合设置在model的"ps"属性上  
5. 服务端跳转到 searchResult.jsp 页面

@RequestMapping("foresearch")
        public String search( String keyword,Model model){
     
            PageHelper.offsetPage(0,20);
            List<Product> ps= productService.search(keyword);
            productService.setSaleAndReviewNumber(ps);
            model.addAttribute("ps",ps);
            return "fore/searchResult";
        }
    }

其中，有productService提供的search方法和setSaleAndReviewNumber方法

这两个方法的实现如下

首先修改ProductService，增加search方法

package com.how2java.tmall.service;
     
    import java.util.List;
     
    import com.how2java.tmall.pojo.Category;
    import com.how2java.tmall.pojo.Product;
     
    public interface ProductService {
        void add(Product p);
        void delete(int id);
        void update(Product p);
        Product get(int id);
        List list(int cid);
        void setFirstProductImage(Product p);
     
        void fill(List<Category> cs);
     
        void fill(Category c);
     
        void fillByRow(List<Category> cs);
     
        void setSaleAndReviewNumber(Product p);
     
        void setSaleAndReviewNumber(List<Product> ps);
     
        List<Product> search(String keyword);
    }

修改ProductServiceImpl实现search方法，通过关键字进行模糊查询

@Override
        public List<Product> search(String keyword) {
            ProductExample example = new ProductExample();
            example.createCriteria().andNameLike("%" + keyword + "%");
            example.setOrderByClause("id desc");
            List result = productMapper.selectByExample(example);
            setFirstProductImage(result);
            setCategory(result);
            return result;
        }

再来时setSaleAndReviewNumber的方法，为商品附上评论和销量信息

@Override
        public void setSaleAndReviewNumber(Product p) {
            int saleCount = orderItemService.getSaleCount(p.getId());
            p.setSaleCount(saleCount);
     
            int reviewCount = reviewService.getCount(p.getId());
            p.setReviewCount(reviewCount);
        }
     
        @Override
        public void setSaleAndReviewNumber(List<Product> ps) {
            for (Product p : ps) {
                setSaleAndReviewNumber(p);
            }
        }

最后，把查询出来的结果放到searchResult.jsp上显示

代码片段

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8" isELIgnored="false"%>
         
    <div class="searchProducts">
         
        <c:forEach items="${ps}" var="p">
            <div class="productUnit" price="${p.promotePrice}">
                <a href="foreproduct?pid=${p.id}">
                    <img class="productImage" src="img/productSingle/${p.firstProductImage.id}.jpg">
                </a>
                <span class="productPrice">¥<fmt:formatNumber type="number" value="${p.promotePrice}" minFractionDigits="2"/></span>
                <a class="productLink" href="foreproduct?pid=${p.id}">
                 ${fn:substring(p.name, 0, 50)}
                </a>
                 
                <a class="tmallLink" href="foreproduct?pid=${p.id}">天猫专卖</a>
     
                <div class="productInfo">
                    <span class="monthDeal ">月成交 <span class="productDealNumber">${p.saleCount}笔</span></span>
                    <span class="productReview">评价<span class="productReviewNumber">${p.reviewCount}</span></span>
                    <span class="wangwang"><img src="img/site/wangwang.png"></span>
                </div>
                 
            </div>
        </c:forEach>
        <c:if test="${empty ps}">
            <div class="noMatch">没有满足条件的产品<div>
        </c:if>
         
            <div style="clear:both"></div>
    </div>

到这里，搜索的功能大致上就算完成了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTg2Njk2MA_size_16_color_FFFFFF_t_70]: /images/20220411/0f40345701ac49109f542ebafdf14cf8.png