11、商品审核导入solr、查询商品高亮显示、过滤查询分类条件、过滤查询品牌条件、item设置动态注解导入含规格的数据、过滤搜索规格搜索、价格搜索、价格升降序、前端面包屑查询条件、分页显示商品

商品审核导入solr

需求分析:在shop-web模块的good.html页面添加上架(转态码5)和下架(状态码6),然后在goodsController的更改状态的方法中,判断状态码5和6.如果是5,调用itemSearchService的importItem或removeItem方法,进行向solr中添加或移除。

一、前端部分
1、在页面绑定上架下架方法
在这里插入图片描述
2、在js文件的controller中添加updateStatus方法
在这里插入图片描述
二、后端部分
1、在controller中的updateStatus方法中添加一个判断,判断是上架(5)还是下架(6)
先引入dao映射类
在这里插入图片描述
再调用方法
在这里插入图片描述
2、调用itemSearchService方法中的添加或者删除方法,传入ids
添加的方法
在这里插入图片描述
在这里插入图片描述
在itemSearchServiceImpl实现类中,定义向solr中添加和删除的方法,
先调用itemMapper根据ids查询所有的item,再向solr中添加这些item。

查询商品高亮显示

一、前端部分
1、在js文件的controller.js文件中引入一个app

特别注意:虽然是引入到congtroller.js文件中,但是不要放在controller中(即不要放在大括号里边)

在这里插入图片描述
2、在页面需要进行变色高亮的标签上添加标签
在这里插入图片描述

二、后端部分
在ItemSearchServiceImpl实现类的search方法中,添加高亮的选项
在这里插入图片描述
在这里插入图片描述

过滤查询分类条件

一、前端部分
1、在页面添加分类的a标签,为了方便,直接写在页面上。常规方法应该是从数据库中查出来,动态添加。
在这里插入图片描述
2、在js文件的controller.js文件中定义上边绑定的方法
在这里插入图片描述

二、后端部分
在itemSearchServiceImpl实现类的search中,获取传入的searchMap中的数据。进行非空判断后添加到过滤条件中。
在这里插入图片描述

过滤查询品牌条件
一、前端部分
在页面添加品牌的a标签,为了方便,直接写在页面上。常规方法应该是从数据库中查出来,动态添加。

在这里插入图片描述
js文件绑定的方法:
在这里插入图片描述
二、后端部分
在itemSearchServiceImpl实现类的search中,获取传入的searchMap中的数据。进行非空判断后添加到过滤条件中。
在这里插入图片描述

item设置动态注解导入含规格的数据

一、前端部分
不用动。

二、后端部分
1、在pojo类的specMap属性上添加动态标签。

在这里插入图片描述
2、在solr—util类中运行批量插入数据的方法,注意需要将数据进行遍历处理
在这里插入图片描述
附:SolrUtil的全文如下:


@Component
public class SolrUtil {
    @Autowired
    private SolrTemplate solrTemplate;

    @Autowired
    private TbItemMapper itemMapper;

    public void importItemData(){
        List<TbItem> itemList = itemMapper.selectByExample(null);
        for (TbItem item : itemList) {
            System.out.println(item.getId()+" "+item.getTitle()+" "+item.getPrice());

            //向pojo中的spcMap设置值,在pojo中的Dynamic注解会根据key拆成一个一个的选项
            Map<String,String> spcMap = JSON.parseObject(item.getSpec(), Map.class);
            item.setSpecMap(spcMap);
        }
        solrTemplate.saveBeans(itemList);
        solrTemplate.commit();
    }

    public static void main(String[] args) {
        ApplicationContext applicationContext = new ClassPathXmlApplicationContext("classpath*:spring/applicationContext*.xml");
        SolrUtil solrUtil = (SolrUtil) applicationContext.getBean("solrUtil");
        solrUtil.importItemData();
    }
}

过滤搜索规格搜索

一、前端部分
1、在页面绑定,同样为了方便直接手写在页面上,常规方法是从数据库中查找。
在这里插入图片描述
2、在js文件中实现绑定的方法,由于规格选项的特殊,需要额外处理
需要先定义spec
在这里插入图片描述

在这里插入图片描述

二、后端部分
在itemSearchServiceImpl实现类的search中,获取传入的searchMap中的数据。进行非空判断后添加到过滤条件中。
在这里插入图片描述

价格搜索

一、前端部分
1、在页面绑定,直接写。常规方法应该是从数据库中查。
在这里插入图片描述
2、在js文件中定义绑定的方法
在这里插入图片描述
二、后端部分
在itemSearchServiceImpl实现类的search中,获取传入的searchMap中的数据。进行非空判断后添加到过滤条件中。
在这里插入图片描述

价格升降序

一、前端部分
1、页面绑定升序降序的方法,并添加排序规则
在这里插入图片描述
2、在js文件的controller.js中实现绑定的方法
先初始化sort,赋值默认值。
在这里插入图片描述
在这里插入图片描述
二、后端部分(特殊)
在itemSearchServiceImpl实现类的search中,获取传入的searchMap中的数据。
注意:在这里使用了一个新的sort类,
在(import org.springframework.data.domain.Sort)包下,不要引入错误。
在这里插入图片描述

前端面包屑查询条件
一、前端部分
在如图示位置显示面包屑分类
在这里插入图片描述
1、在html对应位置添加标签并模型绑定和方法绑定。

模型绑定后,当点击过后,对象中有值,将会显示在这个位置。
方法绑定后,当点击X号后,将从对象中移除,同时不会显示在这个位置上。
使用了ng-if方法,如果对象值为null,将不会显示。
<ul class="tags-choose">
					<li ng-if="searchMap.category != null" class="tag">{{searchMap.category}}<i class="sui-icon icon-tb-close" ng-click="removeSearchItem('category')"></i></li>
					<li ng-if="searchMap.brand != null" class="tag">{{searchMap.brand}}<i class="sui-icon icon-tb-close" ng-click="removeSearchItem('brand')"></i></li>
					<li ng-repeat="(key,value)  in searchMap.spec" class="tag">{{key}}:{{value}}<i class="sui-icon icon-tb-close" ng-click="removeSearchItem(key)"></i></li>
					<li ng-if="searchMap.price != null" class="tag">{{searchMap.price}}<i class="sui-icon icon-tb-close" ng-click="removeSearchItem('price')"></i></li>
				</ul>

2、在js文件的controller中实现绑定的方法
在这里插入图片描述

二、后端部分
不用动。

分页显示商品

一、前端部分
1、由于页面css文件的冲突,所以重新引入

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>产品列表页</title>
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<link rel="icon" href="assets/img/favicon.ico">

	<script src="plugins/jquery/jquery.min.js"></script>
	<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">


	<link rel="stylesheet" type="text/css" href="css/webbase.css" />
	<link rel="stylesheet" type="text/css" href="css/pages-list.css" />
	<link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css" />


	<script src="plugins/angularjs/angular.min.js"></script>
	<script type="text/javascript" src="plugins/angularjs/pagination.js"></script>
	<link rel="stylesheet" href="plugins/angularjs/pagination.css">

	<script type="text/javascript" src="js/base_pagination.js"> </script>
	<script src="js/service/searchService.js" ></script>
	<script src="js/controller/searchController.js" ></script>
</head>

2、在页面的对应位置 添加分页的标签
在这里插入图片描述
3、在plugins文件夹中bootstrap文件夹。
在这里插入图片描述
4、在js文件的controller中添加分页控件的配置
在这里插入图片描述

5、初始化数据
在这里插入图片描述
6、将返回的数据接收
在这里插入图片描述

可能出现的bug分析:
如果没有接收total总记录数,页面的分页值有一页。
如果没有在第4步重新赋值,则无论怎么切换页码,总显示第一页数据。

二、后端部分
注意放置分页的条件时,setOffset等,需要放在获取page之前,否则没有效果。
在这里插入图片描述
将total值(所有商品的总记录数)返回
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43421537/article/details/88564281