精华内容
下载资源
问答
  • web商品搜索功能实现
    千次阅读
    2021-02-24 10:45:57

    一、实现搜索框的部分代码

    【注:涉及api接口和中后台数据交互】
    1. 最终呈现形式:
    在这里插入图片描述
    2. 代码实现:
    HTML文件中:

    <!--  搜索框部分 -->
          <div class="search-bar"  fxFlexAlign="center" style=" margin: 0 auto;max-width: 700px;">
            <div ngbDropdown fxLayout="row"
                 style="border: none;padding: 0;margin: 0;width: 100%;">
                <button class="out-btn" id="dropdownBasic1" ngbDropdownToggle  fxFlex=18
                        style="border: none;margin-bottom: 7px;background-color: #fff;height: 36px;">
                        易出
                </button>
                <div ngbDropdownMenu aria-labelledby="dropdownBasic1" style="width: 100%;" >
                    <ul class="history" fxLayout="column">
                        <li class="history-title">
                          最近搜索<button (click)="deleteHistory()" class="delete-all-btn" >清除</button>
                        </li>
                        <li  *ngFor="let item of historyList;let key=index;">
                            <a (click)="doSearch1(item)">{{item}}<button (click)="deleteOneHistory(key)" class="delete-btn"><i class="material-icons">remove_circle_outline</i></button></a>
                        </li>
                    </ul>
                </div>
                <input  class="searcch-inp" type="text" [(ngModel)]="model" [ngbTypeahead]="search" [resultFormatter]="formatter" fxFlex
                       (keyup)="doAdd($event)" placeholder="{{ 'product-list.title3' | translate }}">
                <button class="search-btn" fxFlex="30 1 1" (click)="doSearch()" (click)="doStorage()">
                    <i class="material-icons">search</i>搜索
                </button>
            </div>
          </div>
    

    TS文件中:

    export class ProductListComponent implements OnInit {
      //图片懒加载
      defaultImage = '../../../assets/img/ebarter.jpg';
      protected:any;
      rprice:any=[];
      price:any=[];
      title:any=[];
      rtitle:any=[];
      local:any=[];
      rlocal:any=[];
      bgPictrue:any=[];
      bgPictrue_raw:any=[];
      bgPictrue_rep:any=[];
      bgPictrue_str:any=[];
      bgPictrue_r:any=[];
      bgPictrue_raw_r:any=[];
      bgPictrue_rep_r:any=[];
      bgPictrue_str_r:any=[];
      awsImgUrl:string = 'https://s3.cn-north-1.amazonaws.com.cn/linda-trades-archive-1/';
      public list:any;
      //声明新的对象数组
      public productList:any=[];
      public currentPage:any;
    
      public rlist:any;
      public pObj:any=[];
      public temp:any=[];
      //搜索商品
      price_s:any=[];
      title_s:any=[];
      local_s:any=[];
      rlocal_s:any=[];
      bgPictrue_s:any=[];
      bgPictrue_raw_s:any=[];
      bgPictrue_rep_s:any=[];
      bgPictrue_str_s:any=[];
      public pObj_s:any=[];
      //搜索商品的定义
      public slist:any;
      //声明新的对象数组
      public searchList1:any=[];
    
      //2.搜索提示数组
      states:any= [];
      //3.定义属性进行双向数据绑
      public model: any;
      public historyList:any=[]; //定义的数组,存储输入的值
    
     //3.使用服务,实例化,即初始化
        // 初始化路由
      constructor(
        private product:ProductService,
        private storageServe: StorageService,
        private sanitizer:DomSanitizer,
        public storage:StorageService,
        private route: ActivatedRoute,
        private router: Router,
        private homeService: HomeService,
        //搜索框
        private http: HttpClient,
        @Inject(API_CONFIG) private uri: string,
        ) { }
    
      ngOnInit(): void {
        //数据持久化
        console.log('页面刷新会触发这个生命周期函数');
        var searchlist:any=this.storage.get('searchlist');
        if(searchlist){
          this.historyList=searchlist;
        }
    
        //获得产品列表
        this.product.productlist().subscribe(product => {
          console.log('productlist',product);
          var re = /:/gi;
          this.list = product;
          this.list= this.list.filter(function(item){
            return JSON.parse(item.content.toString()).isOnSale == 'yes';
       })
          var listLength = this.list.length;
          var userID = this.storageServe.getStorage('UserID');
          for(var i = 0;i<listLength;i++){
            this.pObj[i] = JSON.parse(this.list[i].content.toString());
            this.title.push(this.pObj[i].supplierAds[0].m_title);
            this.price.push(this.pObj[i].supplierAds[0].m_price);
            this.local.push(this.pObj[i].supplierAds[0].m_supplierInfo.region);
            this.bgPictrue_raw.push(this.pObj[i].supplierAds[0].m_supplierOrderId);
            this.bgPictrue_rep[i] = this.bgPictrue_raw[i].replace(re,"-");
            this.bgPictrue_str[i] = this.awsImgUrl + this.bgPictrue_rep[i] + '1000.jpg';
            this.bgPictrue.push(this.bgPictrue_str[i])
          }
          console.log(111,this.title)
      //重新创建一含对象的数组,把原来的各个属性的数组动态循环进新数组的对象里
          //console.log(11,this.pObj[0])
          for(let i=0;i<this.local.length;i++){
              var item = {//创建新数组的对象属性
                bgPictrue: '',
                local: '',
                price: '',
                title: '',
                id: 0
              }
              //对对象属性进行实例化赋值
              item.bgPictrue = this.bgPictrue[i];
              item.local = this.local[i];
              item.price = this.price[i];
              item.title = this.title[i];
              item.id = this.list[i].id;
            //动态循环进数组里
            //全部商品列表
            this.productList.push(item);
            }
    
        //2.给搜索提示数组赋值
        for(var i = 0;i<this.title.length;i++){
          this.states[i] = this.title[i];
        }
    
        this.searchList1=this.productList;
    
        })
    
      }
      // 自定义方法
    
    //1.改变页码触发的事件
      onPageChange(number: number){
        this.currentPage = number;
      }
      //2.关闭广告条
      public flag:boolean=false;
      close(){
        this.flag=true;
      }
      // 3.搜索框提示功能
      formatter = (result: string) => result.toUpperCase();
      search = (text$: Observable<string>) =>
        text$.pipe(
          debounceTime(200),
          distinctUntilChanged(),
          map(term => term === '' ? []
            : this.states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
        )
    
      //4.搜索框历史记录显示和数据持久化方法
          //4.1 搜索函数
          //在搜素框里调用的搜索函数
          doSearch(){
            //console.log("输入的搜索词:",this.model);
          if(this.model == ''){
              this.price_s=[];
              this.title_s=[];
              this.local_s=[];
              this.bgPictrue_s=[];
              this.bgPictrue_raw_s=[];
              this.bgPictrue_rep_s=[];
              this.bgPictrue_str_s=[];
              this.searchList1=[];
              this.searchList1=this.productList;
          }else{
              this.price_s=[];
              this.title_s=[];
              this.local_s=[];
              this.bgPictrue_s=[];
              this.bgPictrue_raw_s=[];
              this.bgPictrue_rep_s=[];
              this.bgPictrue_str_s=[];
              this.searchList1=[];
            var temp = {parameters: {keyWord: this.model}}
              return this.http.get(this.uri + 'Product/Search?keyWord=' + JSON.stringify(temp)).subscribe(search => {
              this.slist = search;
              //console.log('slist搜索数组:',this.slist)
              var re = /:/gi;
              for(var i = 0;i< this.slist.length;i++){
                  //把json字符串转成对象
                      this.pObj_s[i] = JSON.parse(this.slist[i].content.toString());
                      this.title_s.push(this.pObj_s[i].supplierAds[0].m_title);
                      this.price_s.push(this.pObj_s[i].supplierAds[0].m_price);
                      this.local_s.push(this.pObj_s[i].supplierAds[0].m_supplierInfo.region);
                      this.bgPictrue_raw_s.push(this.pObj_s[i].supplierAds[0].m_supplierOrderId);
                      this.bgPictrue_rep_s[i] = this.bgPictrue_raw_s[i].replace(re,"-");
                      this.bgPictrue_str_s[i] = this.awsImgUrl + this.bgPictrue_rep_s[i] + '1000.jpg';
    
                      for(let i=0;i<this.local_s.length;i++){
                      var item = {
                        bgPictrue: '',
                        local: '',
                        price: '',
                        title: '',
                        id: 0
                      }
                      item.bgPictrue = this.bgPictrue_str_s[i];
                      item.local = this.local_s[i];
                      item.price = this.price_s[i];
                      item.title = this.title_s[i];
                      item.id = this.slist[i].id;
                      this.searchList1.push(item);
                    }
            }
            //console.log("输入的搜索词:",this.model);
          })
        }
      }
      //在历史记录里调用的搜索函数
          doSearch1(model:string){
            //console.log("输入的搜索词:", model);
              this.price_s=[];
              this.title_s=[];
              this.local_s=[];
              this.bgPictrue_s=[];
              this.bgPictrue_raw_s=[];
              this.bgPictrue_rep_s=[];
              this.bgPictrue_str_s=[];
              this.searchList1=[];
            var temp = {parameters: {keyWord: model}}
                return this.http.get(this.uri + 'Product/Search?keyWord=' + JSON.stringify(temp)).subscribe(search => {
              this.slist = search;
              //console.log('slist搜索数组:',this.slist)
              var re = /:/gi;
              for(var i = 0;i< this.slist.length;i++){
                  //把json字符串转成对象
                      this.pObj_s[i] = JSON.parse(this.slist[i].content.toString());
                      this.title_s.push(this.pObj_s[i].supplierAds[0].m_title);
                      this.price_s.push(this.pObj_s[i].supplierAds[0].m_price);
                      this.local_s.push(this.pObj_s[i].supplierAds[0].m_supplierInfo.region);
                      this.bgPictrue_raw_s.push(this.pObj_s[i].supplierAds[0].m_supplierOrderId);
                      this.bgPictrue_rep_s[i] = this.bgPictrue_raw_s[i].replace(re,"-");
                      this.bgPictrue_str_s[i] = this.awsImgUrl + this.bgPictrue_rep_s[i] + '.jpg';
    
                      for(let i=0;i<this.local_s.length;i++){
                      var item = {
                        bgPictrue: '',
                        local: '',
                        price: '',
                        title: '',
                        id: 0
                      }
                      item.bgPictrue = this.bgPictrue_str_s[i];
                      item.local = this.local_s[i];
                      item.price = this.price_s[i];
                      item.title = this.title_s[i];
                      item.id = this.slist[i].id;
                      this.searchList1.push(item);
                    }
            }
            //console.log("输入的搜索词:", model);
          })
        }
    
    
         //4.2 存储函数
          doStorage(){
            //if语句检查输入的值在列表中是否存在,如果=-1说明不存在,则需要push进去
            if(this.historyList.indexOf(this.model)==-1 && this.model!=''){
              this.historyList.push(this.model);//理解push是什么意思
            }
            //自动清空搜索框里填入的内容
              this.model='';
            //获取属性的值
              console.log(this.model);
            //缓存数据,实现数据持久化
            this.storage.set('searchlist',this.historyList);
          }
    
        //4.3 接听回车事件,一按回车就把输入的内容push到列表中(此方法暂时不用)
        //了解对象怎么表示
          doAdd(e){
            if (e.keyCode==13) { //这里判断数据是否存在不可行,如果是一个对象,所以需要封装一个方法
              if(!this.historyListHasKeyword(this.historyList,this.model)){
              this.historyList.push(this.model)
              this.model='';
          }else{
            this.model='';
          }
        }
        //缓存数据,实现数据持久化
        this.storage.set('searchlist',this.historyList);//用到this一定要注意this的指向
      }
        //封装方法
        //如果数组里面有keyword返回true,否则返回false
          historyListHasKeyword(historyList:any,model:any){
            //用异步存在问题,所以用另一种方法,用到for循环
              if (!model) return false;
              for (var i=0;i<historyList.length;i++) {
                if (historyList[i]==model) {
                  return true;
                }
              }
            return false;
          }
    
        //4.4 删除单个历史记录函数
          deleteOneHistory(key){
            this.historyList.splice(key,1);//splice可以在数组里删除,增加,修改一个值。在这里表示从key位置往后删除一个值。
            this.storage.set('searchlist',this.historyList);
          }
        //4.5 一次性删除历史记录
        deleteHistory(){
          alert("删除全部历史记录?")
          this.historyList.splice(0,this.historyList.length);//splice可以在数组里删除,增加,修改一个值。在这里表示从key位置往后删除一个值。
          this.storage.set('searchlist',this.historyList);
        }
    
    
    }
    
    

    CSS文件中:

    /*  搜索框部分 */
        /* 设置搜索框的容器 */
          .search-bar{
            /* max-width: 400px; */
            height: 40px;
            background-color:#bbb;
            border: 2px solid  rgb(0, 99, 186) ;
          }
        /* 搜索文本框 */
          .search-bar .searcch-inp{
                  min-width: 100px;
                  /* min-width: 150px; */
                  height: 36px;
                  /* 去掉边框 */
                  border: none;
                  color:rgb(121, 121,121);
              }
        /* 易出按钮 */
           .search-bar .out-btn{
                  color: rgb(0, 99, 186);
              }
        /* 搜索按钮 */
           .search-bar .search-btn{
                  min-width: 100px;
                  /* min-width: 120px; */
                  height: 38px;
                  padding: 0;
                  border: none;
                  color: #fff;
                  background:rgb(0, 99, 186);
                  text-align: center;
              }
           .search-bar .search-btn:hover{
                  background:rgb(4, 51, 92);
              }
        /* 搜索图标样式 */
            .search-bar .search-btn .material-icons{
                  vertical-align:bottom;
                  margin-bottom: -1px;
                  margin-right: 7px;
              }
        /* 清除整个历史记录按钮样式*/
            .search-bar .delete-all-btn{
                  float: right;
                  margin-right: 20px;
                  color: rgb(0, 99, 186);
                  background-color: #fff;
                  border: none;
                  font-weight: bold;
              }
      /* 清除单个历史记录按钮样式*/
            .search-bar .delete-btn{
                  float: right;
                  margin-right: 20px;
                  background-color: #fff;
                  color: rgb(112, 112, 112);
                  border: none;
                  padding: 0;
                  width: 20px;
                  height: 20px;
              }
            .search-bar .delete-btn .material-icons{
                  vertical-align:bottom;
                  color: rgb(202,202, 202);
              }
      /* 下拉框的列表样式 */
            .search-bar li{
                  color:rgb(121, 121,121);
                  font-size: 13px;
                  line-height: 25px;
              }
            .search-bar .history-title{
                  color:rgb(0, 99, 186);
                  font-size: 18px;
                  font-weight: bold;
                  margin-bottom: 10px;
              }
            .search-bar ul{
                  margin-left: 20px;
                  margin-top: 15px;
              }
    
    

    二、参考资料:(存在的困难)

    1. input搜索框实时检索功能实现(超简单,核心原理请看思路即可):https://blog.csdn.net/qq_39974331/article/details/80410032
    2. 前端和中后台的数据交互(用到json数据)
    参考资料如下:
    「前端」Angular 中的数据交互(get jsonp post):https://zhuanlan.zhihu.com/p/147852215
    angular2——前后端交互:http://www.voidcn.com/article/p-aiycehtq-bms.html
    3. 需要熟练使用API接口
    4. 搜索框搜索时候的搜索值存储问题,以及需要点击两次搜索按钮才能在前端页面显示搜索的商品(存在异步问题)
    参考资料——面试精选之Promise:https://juejin.cn/post/6844903625609707534


    三、后续完善搜索框功能

    1.前端搜索模糊搜索提示框:
    功能参考链接:https://material.angular.io/components/autocomplete/examples

    2.搜索框按照商品标题进行搜索:
    使用indexof函数进行筛选;

    更多相关内容
  •  完成关键字搜索功能  能够实现高亮显示效果  完成查询分类列表的功能  完成条件过滤构建功能  完成分页动态页码展示 一、完成关键字搜索 1.首先构建工程 pinyougou_search_interface pinyougou_search_...

    今日目标:

        完成关键字搜索功能
        能够实现高亮显示效果
        完成查询分类列表的功能
        完成条件过滤构建功能
        完成分页动态页码展示

    一、完成关键字搜索

    1.首先构建工程    pinyougou_search_interface    pinyougou_search_service    pinyougou_search_web

    参考content的工程,因为也不需要安全框架

    2.关键字的需求分析

    我们分析输入关键字,可以通过商品或者商家或者title等四个参数进行所有

    参数的分析:首先我们的返回的参数可能是itemList   规格  品牌   分类   价格区间    当前页   每页显示的条数,两种方法,一种是自己封装一个类,把这些参数封装起来,还有一种是通过Map实现,因为考虑到还要维护这个类,所以我们采用map的方式进行封装

    后端代码实现:

    service层的代码实现过程
    /**
     * 搜索功能的实现类
     */
    @Service
    @Transactional
    public class SearchServiceImpl implements SearchService {
    
        @Autowired
        private SolrTemplate solrTemplate;//注意添加solr的配置文件
        @Override
        public Map<String, Object> search(Map searchMap) {
            //创建高亮显示对象
            HighlightQuery query = new SimpleHighlightQuery();//接口我们通过其子类实现即可
     // 一.  1.关键字搜索
            String keywords = (String) searchMap.get("keywords");
            Criteria criteria = null;
            //2.判断关键字是否为空
            if (keywords!=null&&!"".equals(keywords)){
                //不等于空
                //输入关键字条件条件
                criteria = new Criteria("item_keywords").is(keywords);
            }else{
                //关键字为空,查询所有 通过一个表达式  *:*
                criteria = new Criteria().expression("*:*");
            }
    
            //3.将查询的条件添加到criteria中
            query.addCriteria(criteria);
            //4.这个条件已经封装了,query需要查询的所有条件
            HighlightPage<TbItem> page = solrTemplate.queryForHighlightPage(query, TbItem.class);
            //当前页的信息
            List<TbItem>  content = page.getContent();
            Map<String,Object> resultMap = new HashMap<>();
            resultMap.put("rows",content);
            return resultMap;
        }
    }
    
    接口方法;
    /**
     * 搜索接口的方法
     */
    public interface SearchService {
        //商品的搜索参数   通过map格式,Object是不同的类型,包括品牌,规格,分类 价格区间 每页显示条数 每页记录数
        public Map<String,Object> search(Map searchMap);
    }

    controller层的实现

    @RestController
    @RequestMapping("search")
    public class SearchController {
    
        @Reference
        private SearchService searchService;
    
        /**
         * 搜索功能那的实现
         * @param searchMap
         * @return
         */
        @RequestMapping("searchMap")
        Map <String,Object> search(@RequestBody Map searchMap){
          return  searchService.search(searchMap);
        }
    }
    

    前台代码的实现:

    controller层

    app.controller("searchController",function ($scope,$controller,searchService) {
    
        //控制器继承代码
        $controller("baseController",{$scope:$scope});
    
        //构建封装搜索条件的对象
        $scope.searchMap={
          keywords:"",
            category:"",
            brand:"",
            spec:{},//规格属性,需要规格名称和规格选项
            price:"",
            sort:"ASC",
            sortField:"",
            pageNo:1,//当前页
            pageSize:60//每页记录数
        };
        //商品搜索
        $scope.search=function () {
            searchService.search($scope.searchMap).success(function (response) {
                $scope.resultMap=response;
                //构建分页工具条
                //
            })
        }
        
    })

    service:

    //服务层
    app.service('searchService',function($http){
    
        //搜索功能的实现
        this.search=function(searchMap){
            return $http.post('itemsearch/search.do',searchMap);
        }
    });
    

    注意:一定要把方法里面的参数写对

    二.实现搜索高亮显示

    思路分析:我们通过在一个搜索关键字上添加前缀和后缀,以此来显示关键字的高亮,我们把业务模块都写在service层

    我们通过分析,在返回值的resultMap中的title没有设置高亮的样式,那么我们继续往上面找,如上图所示,我们通过遍历highlighted来获取,注意判断里面的list集合是否为空,得到值后直接进行赋值操作

    后端代码实现:

    //当前页的信息
            List<TbItem>  content = page.getContent();
            for (TbItem item : content) {
                //处理高亮结果
                List<HighlightEntry.Highlight> highlights = page.getHighlights(item);
                //判断highlightsshif为空
                if (highlights!=null&& highlights.size()>0){
                    //获取高亮结果集
                    List<String> snipplets = highlights.get(0).getSnipplets();
                    //在判断是否为空
                    if (snipplets!=null&& snipplets.size()>0){
                        item.setTitle(snipplets.get(0));
                    }
                }
            }

    注意出现这个问题,html代码直接没有被解析而是直接显示在页面上,这是angularjs出于安全考虑,防止hmtl注入,我们将设置权限

    我们写一个filter的过滤器

    定义过滤器,处理字符串为HTML标签
    //使用方式:<em ng-bind-html="带标签的数据 | trustHtml"></em>
    app.filter("trustHtml",function($sce){
    	return function(data){
    		return $sce.trustAsHtml(data);
    	};
    });

    页面处理:

    通过angularjs的一个指令实现:

    <em ng-bind-html="entity.title | trustHtml"></em>

    效果如图:

    三.过滤添加条件

    思路分析:在这我们只涉及一些写死的数据提交,也可以通过查询实现,分类,品牌,以及规格的显示,通过模板关联品牌和规格,注意:规格我们需要提交精确的其值,那么我们需要判断要对那个条件进行封装

    1.组合查询条件的实现  

    前端代码实现:

     //组合条件的查询
        $scope.addFilterCondition=function (key,value) {
            if (key=="category" || key=="price" || key=="brand"){
                $scope.searchMap[key]=value;
            }else{
                $scope.searchMap.spec[key]=value;
            }
    
            //调用查询方法
            $scope.search();
        }

    后台实现:

     //3.将查询的条件添加到criteria中
            query.addCriteria(criteria);
            //三.1.构建分类的查询条件
            String category = (String) searchMap.get("category");
            //2.判断查询条件是否为空
            if (category!=null&&!"".equals(category)){
                //构建分类查询条件
                Criteria categoryCriteria = new Criteria("item_category").is(category);
                //构建过滤条件查询
                FilterQuery filterQuery = new SimpleFilterQuery(categoryCriteria);
                //将查询的条件添加到query 中
                query.addFilterQuery(filterQuery);
            }
            //四.构建品牌查询条件
            String brand = (String)searchMap.get("brand");
            //判断是否为空
            if (brand!=null&&!"".equals(brand)){
                //构建品牌查询提哦案件
                Criteria brandCriteria = new Criteria("item_brand").is(brand);
                //构建过滤条件查询
                FilterQuery filterQuery  = new SimpleFilterQuery(brandCriteria);
                //将查询的条件添加到总的query 中
                query.addFilterQuery(filterQuery);
            }

    2.规格的功能的实现,由于我们分装的是一个实体类 spec  所以我们也没有必要在创建一个实体类,我们通过Map格式封装

    后台代码实现:

    //五.  封装规格
            //获取spec的对象格式
            Map<String,String> specMap = (Map<String, String>) searchMap.get("spec");
            //判断map的结果是否Wie空
            if (specMap!=null){
                //通过遍历它的key值,获得value值,就是规格选项的值
                for (String key: specMap.keySet()){
                    //构建品牌查询提哦案件
                    Criteria specificationCriteria = new Criteria("item_spec_"+key).is(specMap.get(key));
                    //构建过滤条件查询
                    FilterQuery filterQuery  = new SimpleFilterQuery(specificationCriteria);
                    //将查询的条件添加到总的query 中
                    query.addFilterQuery(filterQuery);
                }
            }

    3.根据价格实现功能

    思路:我们要对字符串进行判断处理,splic("-")   然后通过这个第一个值  0 和最后一个值*  判断

     //六.价格的条件查询
            String price = (String)searchMap.get("price");
            //分析:
            /*
            ('price','0-500')
            ('price','500-1000')
            ('price','1000-1500')
            ('price','2000-3000')
              ('price','3000-*')分析可知通过分隔符分开,然后分割后成为一个数组,最后
              通过临界值判断
             */
            //判断是否为空
            if (price!=null&&!"".equals(price)){
                String[] split = price.split("-");
                //通过价格临界值判断
                if (!"0".equals(split[0])){
                    //构建查询条件  大于0这个区间
                    Criteria priceCriteria= new Criteria("item_price").greaterThanEqual(split[0]);
                    //构建过滤条件查询
                    FilterQuery filterQuery  = new SimpleFilterQuery(priceCriteria);
                    //将查询的条件添加到总的query 中
                    query.addFilterQuery(filterQuery);
                }
    
                //通过* 判断  小于等于1的这个区间
                if (!"*".equals(split[1])){
                    //构建查询条件
                    Criteria priceCriteria= new Criteria("item_price").lessThanEqual(split[1]);
                    //构建过滤条件查询
                    FilterQuery filterQuery  = new SimpleFilterQuery(priceCriteria);
                    //将查询的条件添加到总的query 中
                    query.addFilterQuery(filterQuery);
                }
            }

     

    四.排序功能实现

    需求:

    实现如下图:

    查询操作实现,新品和价格排序

     

     

     

     

    这个是上一个模块移除的内容,点击已经添加的条件,实现移除的功能

    思路:我们通过点击传过来的的key值,删除value注意还要判断是spec,因为这个是对象,我们通过这个delete   方法删除这个key以及value

    //移除查询条件操作  //通过key移除值
    $scope.removeSearchItem=function (key) {
    
        if (key=="category" || key=="price" || key=="brand"){
            $scope.searchMap[key]="";
        }else{
          delete  $scope.searchMap.spec[key];
        }
        //调用查询方法
        $scope.search();
    }

    五.搜索分页功能实现

    思想:通过传过来pageNo当前页,pageSize总页数,作为条件,后台做处理,然后返回给前台

     

    后台代码:

     //八.构建分页查询
            Integer pageNo = (Integer) searchMap.get("pageNo");
            Integer pageSize = (Integer) searchMap.get("pageSize");
            query.setOffset((pageNo-1)*pageSize);//设置分页起始值
            query.setRows(pageSize);//设置总页数
    //最后还的封装一下
     Map<String,Object> resultMap = new HashMap<>();
            resultMap.put("rows",content);
            resultMap.put("totalpagee",page.getTotalPages());//总页数
            resultMap.put("pageNo",pageNo);//当前页
            return resultMap;

    前台代码实现:

       //构建分页工具条代码
        buildPageLabel=function(){
            $scope.pageLabel = [];// 新增分页栏属性,存放分页的页面
            var maxPageNo = $scope.resultMap.totalPages;// 得到最后页码
    
            // 定义属性,显示省略号
            $scope.firstDot = true;
            $scope.lastDot = true;
    
            var firstPage = 1;// 开始页码
            var lastPage = maxPageNo;// 截止页码
    
            if ($scope.resultMap.totalPages > 5) { // 如果总页数大于5页,显示部分页码
                if ($scope.resultMap.pageNo <= 3) {// 如果当前页小于等于3
                    lastPage = 5; // 前5页
                    // 前面没有省略号
                    $scope.firstDot = false;
    
                } else if ($scope.searchMap.pageNo >= lastPage - 2) {// 如果当前页大于等于最大页码-2
                    firstPage = maxPageNo - 4; // 后5页
                    // 后面没有省略号
                    $scope.lastDot = false;
                } else {// 显示当前页为中心的5页
                    firstPage = $scope.searchMap.pageNo - 2;
                    lastPage = $scope.searchMap.pageNo + 2;
                }
            } else {
                // 页码数小于5页  前后都没有省略号
                $scope.firstDot = false;
                $scope.lastDot = false;
            }
            // 循环产生页码标签
            for (var i = firstPage; i <= lastPage; i++) {
                $scope.pageLabel.push(i);
            }
        }
    
    
        //分页查询
        $scope.queryForPage=function(pageNo){
            $scope.searchMap.pageNo=pageNo;
    
            //执行查询操作
            $scope.search();
    
        }
    
        //分页页码显示逻辑分析:
        // 1,如果页面数不足5页,展示所有页号
        // 2,如果页码数大于5页
        // 1) 如果展示最前面的5页,后面必须有省略号.....
        // 2) 如果展示是后5页,前面必须有省略号
        // 3) 如果展示是中间5页,前后都有省略号
    
        // 定义函数,判断是否是第一页
        $scope.isTopPage = function() {
            if ($scope.searchMap.pageNo == 1) {
                return true;
            } else {
                return false;
            }
        }
        // 定义函数,判断是否最后一页
        $scope.isLastPage = function() {
            if ($scope.searchMap.pageNo == $scope.resultMap.totalPages) {
                return true;
            } else {
                return false;
            }
        }
    

    六.总结

     

    展开全文
  • JavaWeb实现简单查询商品功能

    千次阅读 2021-03-22 17:21:06
    本文实例为大家分享了javaWeb实现简单查询商品功能的具体代码,供大家参考,具体内容如下CustomerServlet.javapackage com.subing.web;import java.io.IOException;import java.io.PrintWritewww.cppcns.comws ...

    本文实例为大家分享了javaWeb实现简单查询商品功能的具体代码,供大家参考,具体内容如下

    CustomerServlet.java

    package com.subing.web;

    import java.io.IOException;

    import java.io.PrintWritewww.cppcns.comws Exception {

    super();

    sql = new SqlDemo(); // 进行数据库访问的类

    // TODO Auto-generated constructor stub

    }

    /**

    * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse

    * response)

    */

    protected void doGet(HttpServletRequest request,

    HttpServletResponse response) throws ServletException, IOException {

    // TODO Auto-generated method stub

    this.doPost(request, response);

    }

    /**

    * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

    * response)

    */

    protected void doPost(HttpServletRequest request,

    HttpServletResponse response) throws ServletException, IOException {

    response.setContentType("text/html;charset=gb2312");

    request.setCharacterEncoding("gb2312");

    PrintWriter pw = response.getWriter();

    String sub = request.getParameter("sub");

    String login = request.getParameter("login");

    if (login != null && login.length() > 0) {

    String admin_id = request.getParameter("admin_id");

    String password = request.getParameter("password");

    if (isLoginProv(admin_id, password)) {

    try {

    if (sql.loginVerify(admin_id, password)) {

    pw.println(s1);

    } else {

    pw.println("

    登录失败!2秒自动跳转到登录页面!");

    response.setHeader("refresh", "2;url=login.html");

    }

    } catch (Exception e) {

    e.printStackTrace();

    }

    } else {

    pw.println("

    登录失败!5秒自动跳转到登录页面!");

    response.setHeader("refresh", "5;url=login.html");

    }

    } else if (sub != null && sub.length() > 0) {

    pw.println(s1);

    String jqmess = request.getParameter("jqmess");

    String mhmess = request.getParameter("mhmess");

    if (jqmess != null && jqmess.length() > 0) {

    try {

    String s = sql.getJqMess(jqmess);

    String mess[] = s.split(",");

    String html = "

    Id号码

    + "

    商品名称" + "商品价格"

    + "

    商品库存数量" + "商品描述";

    String main = "

    " + "" + messwww.cppcns.com[0] + "" + ""

    + mess[1] + "

    " + "" + mess[2] + ""

    + "

    " + mess[3] + "" + "" + mess[4]

    + "

    ";

    String head = html + main;

    pw.println(head);

    } catch (Exception e) {

    e.printStackTrace();

    }

    } else if (mhmess != null && mhmess.length() > 0) {

    try {

    String head = "";

    String html = "

    Id号码

    + "

    商品名称" + "商品价格"

    + "

    商品库存数量" + "商品描述";

    head += html;

    String s = sql.getMhMess(mhmess);

    String m[] = s.split(",,");

    for (int i = 0; i < m.length; i++) {

    String mess[] = m[i].split(",");

    String main = "

    " + "" + mess[0] + ""

    + "

    " + mess[1] + "" + "" + mess[2]

    + "

    " + "" + mess[3] + "" + ""

    + mess[4] + "

    ";

    head += main;

    }

    head += "

    ";

    pw.println(head);

    } catch (Exception e) {

    e.printStackTrace();

    }

    }

    }

    }

    }

    数据库访问类:

    SqlDemo.java

    package com.subing.web;

    import java.sql.Connection;

    import java.sql.DriverManager;

    import java.sql.PreparedStatement;

    import java.sql.ResultSet;

    public class SqlDemo {

    private Connection conn = null;

    private PreparedStatement preparedStatement = null;

    public SqlDemo() throws Exception {

    conn = getConnection();

    }

    private Connection getConnection() throws Exception {

    String driverClass = "com.mysql.jdbc.Driver";

    String url = "jdbc:mysql:///shop?useUnicode=true&characterEncoding=gb2312";

    String user = "root";

    String password = "12345";

    // 注册加载驱动

    Class.forName(driverClass);

    // 获取连接

    Connection conn = DriverManager.getConnection(url, user, password);

    System.out.println(conn);

    return conn;

    }

    // 登录的时候 进行验证

    public boolean loginVerify(String userinfo, String password)

    throws Exception {

    String sql = "select * from admin where admin_id = ?";

    preparedStatement = conn.prepareStatement(sql);

    preparedStatement.setString(1, userinfo);

    ResultSet rs = preparedStatement.executeQuery();

    if (rs.next()) {

    if (rs.getString("password").equals(password)) {

    System.out.println("成功!");

    return true;

    }

    }

    System.out.println("失败!");

    return false;

    }

    public String getJqMess(String admin_id) throws Exception {

    String s = "";

    String sql = "select * from product1 where product_id = ? OR product_name LIKE ?"

    + "OR product_price LIKE ?"

    + "OR product_num LIKE ?"

    + "OR product_describe LIKE ?";

    preparedStatement = conn.prepareStatement(sql);

    preparedStatement.setString(1, admin_id);

    preparedStatement.setString(2, admin_id);

    preparedStatement.setString(3, admin_id);

    preparedStatement.setString(4, admin_id);

    preparedStatement.setString(5, admin_id);

    //查询到记录的时候,返回一个resultSet,也处理了该方法查找失败的时候返回null的情况

    ResultSet rs = preparedStatement.executeQuery();

    while (rs.next()) {

    s = rs.getInt(1) + "," + rs.getString(2) + "," + rs.getInt(3) + ","

    + rs.getInt(4) + "," + rs.getString(5);

    }

    return s;

    }

    public String getMhMess(String admin_id) throws Exception {

    String mess = "";

    String sql = "select * from product1 where product_i编程客栈d like ? OR product_name LIKE ? OR product_price LIKE ? OR product_num LIKE ?"

    + "OR product_describe LIKE ?";

    preparedStatement = conn.prepareStatement(sql);

    preparedStatement.setString(1, "%" + admin_id + "%");

    preparedStatement.setString(2, "%" + admin_id + "%");

    preparedStatement.setString(3, "%" + admin_id + "%");

    preparedStatement.setString(4, "%" + admin_id + "%");

    preparedStatement.setString(5, "%" + admin_id + "%");

    ResultSet rs = preparedStatement.executeQuery();

    while (rs.next()) {

    String s = rs.getInt(1) + "," + rs.getString(2) + ","

    + rs.getInt(3) + "," + rs.getInt(4) + "," + rs.getString(5);

    mess += s + ",,";

    }

    return mess;

    }

    public static void main(String[] args) throws Exception {

    SqlDemo sqlDemo = new SqlDemo();

    String s = sqlDemo.getMhMess("xi");

    String m[] = s.split(",,");

    for (int i = 0; i < m.length; i++) {

    System.out.println(m[i]);

    }

    }

    }

    html文件:

    login.html

    &http://www.cppcns.comlt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    Insert title here

    登录

    账号:

    密码:

    数据库里面的表数据

    7c36535b883ab8ae6a5ff9f74b574024.png

    运行效果

    b795829ec8b23fde75e86a3e38429c8d.png

    809770ca85d63a2cb53b97ead03df8df.png

    58d775ef3f0df74e3f46a8209f02eed8.png

    f4716383637447e1e4d40be45bd2c69b.png

    cb89a8836ca62bc7b73141880902af10.png

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

    本文标题: JavaWeb实现简单查询商品功能

    本文地址: http://www.cppcns.com/ruanjian/java/235278.html

    展开全文
  • (3)商品搜索(搜索内容进行分词,提取关键字,模糊查询)。(4) QQ在线咨询功能。本项目基本实现完整的B2C网站的功能。二,项目部署:本项目使用Eclipse_EE + Tomcat7.0 + MySql5.6的开发环境。1,安装Eclipse_EE...
  • 1.下拉框选择商品搜索 2.点击图片放大 3.点击详情,查看商品详情 4.用饼图查看交易量占比 运行: 1.新建命令行记录文件。命令行记录文件是记录爬虫时,你输入的商品名字和数据库名字(具体位置是E:\a\cmd.txt) 2.pip...
  • 在开发电商项目时,我们需要实现一个最基本的功能:点击商品的图片,打开商品详情页面。其中,商品页面分为三大部分: a) 商品基本信息 b) 延迟加载商品详情。延迟一秒加载使用ajax c) 商品的规格参数。按需加载,当...

    概述

    在开发电商项目时,我们需要实现一个最基本的功能:点击商品的图片,打开商品详情页面。其中,商品页面分为三大部分:

    a) 商品基本信息

    b) 延迟加载商品详情。延迟一秒加载使用ajax

    c) 商品的规格参数。按需加载,当用户点击商品规格参数tab页,加载ajax。

    1.功能分析

    1、Taotao-portal接收页面请求,接收到商品id。

    2、调用taotao-rest提供的商品详情的服务,把商品id作为参数传递给服务。接收到商品详细详细。

    3、渲染结果,展示商品详细页面

    4、为了提高响应速度,商品详情页的内容需要分步骤加载。

    第一步:先展示商品基本信息,例如商品的名称、图片、价格。

    第二步:展示商品的描述,此时商品页面已经展示完毕,需要ajax请求商品描述。展示的时机是页面加载完毕后一秒钟。

    第三步:展示商品规格。当用户点击商品规格选项卡时展示。使用ajax请求商品规格。

    5、在搜索页面点击商品的图片或者商品名称请求商品详情页面。

    商品详情页请求的url:/item/{itemId}.html

    商品描述请求的url:/item/desc/{itemId}.html

    商品规格请求的url:/item/param/{itemId}.html

    2.处理流程

    img

    3.taotao-rest服务发布

    需要在taotao-rest工程中发布服务

    1、取商品基本信息的服务

    2、取商品描述的服务

    3、取商品规格的服务

    由于商品详情也是客户经常访问的,需要把商品信息添加到缓存中。Redis是内存数据库也属于稀缺资源,所以不应该永久占用,所以要设置过期时间。过期时间为一天。需要缓存同步。

    3.1添加缓存逻辑

    Redis的hash类型中的key是不能设置过期时间。如果还需要对key进行分类可以使用折中的方案。

    Key的命名方式:XXXX:xxxx:~~~~

    这样存放在redis中,当我们用可视化客户端时就会以文件夹形式存储

    img

    因此,在配置文件resource.properties添加url

    #商品基本信息url
    ITEM_INFO_URL=/item/info/
    #商品描述url
    ITEM_DESC_URL=/item/desc/
    #商品规格参数url
    ITEM_PARAM_URL=/item/param/
    

    3.2Dao层

    因为都是单表查询所以使用逆向工程生成的mapper文件即可。

    tb_item

    tb_item_desc

    tb_item_param_item

    3.3Service层

    @Service
    public class ItemServiceImpl implements ItemService {
    	@Autowired
    	private TbItemMapper itemMapper;
    	@Autowired
    	private TbItemDescMapper itemDescMapper;
    	@Autowired
    	private TbItemParamItemMapper itemParamItemMapper;
    	@Value("${REDIS_ITEM_KEY}")
    	private String REDIS_ITEM_KEY;
    	@Value("${REDIS_ITEM_EXPIRE}")
    	private Integer REDIS_ITEM_EXPIRE;
    	@Autowired
    	private JedisClientSingle jedisClientSingle;
    
    	@Override
    	public TaotaoResult getItemBaseInfo(long itemId) {
    		//添加缓存逻辑
    		try {
    			//从缓存中取商品信息,商品id对应的信息
    			String json = jedisClientSingle.get(REDIS_ITEM_KEY+":"+itemId+":base");
    			if(!StringUtils.isBlank(json)) {
    				//把json转换成java对象
    				TbItem item = JsonUtils.jsonToPojo(json, TbItem.class);
    				return TaotaoResult.ok(item);
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		//根据商品id查询商品信息
    		TbItem item = itemMapper.selectByPrimaryKey(itemId);
    		//把商品信息写入缓存
    		try {
    			jedisClientSingle.set(REDIS_ITEM_KEY+":"+itemId+":base", JsonUtils.objectToJson(item));
    			//设置key的有效期
    			jedisClientSingle.expire(REDIS_ITEM_KEY+":"+itemId+":base", REDIS_ITEM_EXPIRE);
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		return TaotaoResult.ok(item);
    	}
    
    	@Override
    	public TaotaoResult getItemDesc(long itemId) {
    		//添加缓存
    		try {
    			//添加缓存逻辑
    			//从缓存中取商品信息,商品id对应的信息
    			String json = jedisClientSingle.get(REDIS_ITEM_KEY + ":" + itemId + ":desc");
    			//判断是否有值
    			if (!StringUtils.isBlank(json)) {
    				//把json转换成java对象
    				TbItemDesc itemDesc = JsonUtils.jsonToPojo(json, TbItemDesc.class);
    				return TaotaoResult.ok(itemDesc);
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		//创建查询条件
    		TbItemDesc itemDesc = itemDescMapper.selectByPrimaryKey(itemId);
    		
    		try {
    			//把商品信息写入缓存
    			jedisClientSingle.set(REDIS_ITEM_KEY + ":" + itemId + ":desc", JsonUtils.objectToJson(itemDesc));
    			//设置key的有效期
    			jedisClientSingle.expire(REDIS_ITEM_KEY + ":" + itemId + ":desc", REDIS_ITEM_EXPIRE);
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		
    		return TaotaoResult.ok(itemDesc);
    	}
    
    	@Override
    	public TaotaoResult getItemParam(long itemId) {
    		//添加缓存
    		try {
    			//添加缓存逻辑
    			//从缓存中取商品信息,商品id对应的信息
    			String json = jedisClientSingle.get(REDIS_ITEM_KEY + ":" + itemId + ":param");
    			//判断是否有值
    			if (!StringUtils.isBlank(json)) {
    				//把json转换成java对象
    				TbItemParamItem paramItem = JsonUtils.jsonToPojo(json, TbItemParamItem.class);
    				return TaotaoResult.ok(paramItem);
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		//根据商品id查询规格参数
    		//设置查询条件
    		TbItemParamItemExample example = new TbItemParamItemExample();
    		Criteria criteria = example.createCriteria();
    		criteria.andItemIdEqualTo(itemId);
    		//执行查询
    		List<TbItemParamItem> list = itemParamItemMapper.selectByExampleWithBLOBs(example);
    		if (list != null && list.size()>0) {
    			TbItemParamItem paramItem = list.get(0);
    			try {
    				//把商品信息写入缓存
    				jedisClientSingle.set(REDIS_ITEM_KEY + ":" + itemId + ":param", JsonUtils.objectToJson(paramItem));
    				//设置key的有效期
    				jedisClientSingle.expire(REDIS_ITEM_KEY + ":" + itemId + ":param", REDIS_ITEM_EXPIRE);
    			} catch (Exception e) {
    				e.printStackTrace();
    			}
    			return TaotaoResult.ok(paramItem);
    		}
    		return TaotaoResult.build(400, "无此商品规格");
    	}
    
    }
    

    3.4Controller层

    @Controller
    @RequestMapping("/item")
    public class ItemController {
    	@Autowired
    	private ItemService itemService;
    	
    	@RequestMapping("/info/{itemId}")
    	@ResponseBody
    	public TaotaoResult getItemBaseInfo(@PathVariable Long itemId) {
    		TaotaoResult result = itemService.getItemBaseInfo(itemId);
    		return result;
    	}
    	
    	@RequestMapping("/desc/{itemId}")
    	@ResponseBody
    	public TaotaoResult getItemDesc(@PathVariable Long itemId) {
    		TaotaoResult result = itemService.getItemDesc(itemId);
    		return result;
    	}
    
    	@RequestMapping("/param/{itemId}")
    	@ResponseBody
    	public TaotaoResult getItemParam(@PathVariable Long itemId) {
    		TaotaoResult result = itemService.getItemParam(itemId);
    		return result;
    	}
    
    }
    

    4.taotao-portal商品详情页实现

    4.1需求分析

    当用户访问商品详情页面时,需要加载商品基本信息。延迟加载商品描述、按需加载商品的规格参数。

    img

    由于页面展示商品信息时,需要展示图片列表。多张图片在数据库中存储的格式是存储在同一个字段中使用逗号分隔的。所以商品展示时需要在pojo中做处理。故此在portal中自定义一个商品的pojo类继承TbItem同时新增一个get方法。

    //添加此方法拆分图片列表
    public String[] getImages() {
        if (image != null && image != "") {
            String[] strings = image.split(",");
            return strings;
        }
        return null;
    }
    

    4.2Service层

    商品基本信息的查询:

    接收商品id调用mapper查询商品规格参数,返回规格参数pojo使用TaotaoResult包装。添加缓存逻辑。

    商品描述延迟加载:

    接收商品id,调用taotao-rest的服务,查询商品的基本信息。得到一个json字符串。需要把json转换成java对象。然后在jsp页面渲染。

    商品规格参数展示:

    接收商品id,调用taotao-rest的服务根据商品id查询商品描述信息。得到json数据。把json转换成java对象从java对象中把商品描述取出来。返回商品描述字符串。

    参数:商品id

    返回值:字符串(商品描述的html片段)

    /**
     * 商品内容展示Service
     * @author JY
     *
     */
    @Service
    public class ItemServiceImpl implements ItemService {
    	@Value("${ITEM_INFO_URL}")
    	private String ITEM_INFO_URL;
    	@Value("${REST_BASE_URL}")
    	private String REST_BASE_URL;
    	@Value("${ITEM_DESC_URL}")
    	private String ITEM_DESC_URL;
    	@Value("${ITEM_PARAM_URL}")
    	private String ITEM_PARAM_URL;
    
    	@Override
    	public ItemInfo getItemInfoById(long itemId) {
    		try {
    			//调用rest的服务查询商品基本信息
    			String json = HttpClientUtil.doGet(REST_BASE_URL+ITEM_INFO_URL+itemId);
    			if(!StringUtils.isBlank(json)) {
    				TaotaoResult taotaoResult = TaotaoResult.formatToPojo(json, ItemInfo.class);
    				if(taotaoResult.getStatus()==200) {
    					ItemInfo itemInfo = (ItemInfo) taotaoResult.getData();
    					return itemInfo;
    				}
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		return null;
    	}
    
    	//取商品描述
    	@Override
    	public String getItemDescById(Long itemId) {
    		try {
    			String json = HttpClientUtil.doGet(REST_BASE_URL + ITEM_DESC_URL + itemId);
    			//转换成java对象
    			TaotaoResult taotaoResult = TaotaoResult.formatToPojo(json, TbItemDesc.class);
    			if (taotaoResult.getStatus() == 200) {
    				TbItemDesc itemDesc = (TbItemDesc) taotaoResult.getData();
    				//取商品描述信息
    				String result = itemDesc.getItemDesc();
    				return result;
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		return null;
    	}
    
    	//根据商品id查询规格参数
    	@Override
    	public String getItemParam(Long itemId) {
    		try {
    			String json = HttpClientUtil.doGet(REST_BASE_URL + ITEM_PARAM_URL + itemId);
    			//把json转换成java对象
    			TaotaoResult taotaoResult = TaotaoResult.formatToPojo(json, TbItemParamItem.class);
    			if (taotaoResult.getStatus() == 200) {
    				TbItemParamItem itemParamItem = (TbItemParamItem) taotaoResult.getData();
    				String paramData = itemParamItem.getParamData();
    				//生成html
    				// 把规格参数json数据转换成java对象
    				List<Map> jsonList = JsonUtils.jsonToList(paramData, Map.class);
    				StringBuffer sb = new StringBuffer();
    				sb.append("<table cellpadding=\"0\" cellspacing=\"1\" width=\"100%\" border=\"0\" class=\"Ptable\">\n");
    				sb.append("    <tbody>\n");
    				for(Map m1:jsonList) {
    					sb.append("        <tr>\n");
    					sb.append("            <th class=\"tdTitle\" colspan=\"2\">"+m1.get("group")+"</th>\n");
    					sb.append("        </tr>\n");
    					List<Map> list2 = (List<Map>) m1.get("params");
    					for(Map m2:list2) {
    						sb.append("        <tr>\n");
    						sb.append("            <td class=\"tdTitle\">"+m2.get("k")+"</td>\n");
    						sb.append("            <td>"+m2.get("v")+"</td>\n");
    						sb.append("        </tr>\n");
    					}
    				}
    				sb.append("    </tbody>\n");
    				sb.append("</table>");
    				//返回html片段
    				return sb.toString();
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		
    		return "";
    
    	}
    	
    }
    

    4.3Controller层

    /**
     * 商品内容展示
     * @author JY
     *
     */
    @Controller
    public class ItemController {
    	@Autowired
    	private ItemService itemService;
    	
    	@RequestMapping("/item/{itemId}")
    	public String showItem(@PathVariable Long itemId,Model model) {
    		ItemInfo item = itemService.getItemInfoById(itemId);
    		model.addAttribute("item", item);
    		return "item";
    	}
    	
    	@RequestMapping(value="/item/desc/{itemId}",produces=MediaType.TEXT_HTML_VALUE+";charset=utf-8")
    	@ResponseBody
    	public String getItemDesc(@PathVariable Long itemId) {
    		String itemDescById = itemService.getItemDescById(itemId);
    		return itemDescById;
    	}
    	
    	@RequestMapping(value="/item/param/{itemId}", produces=MediaType.TEXT_HTML_VALUE+";charset=utf-8")
    	@ResponseBody
    	public String getItemParam(@PathVariable Long itemId) {
    		String string = itemService.getItemParam(itemId);
    		return string;
    	}
    }
    

    结语

    最近看老马打斗地主,真相一拳👊干碎他的眼镜👀

    展开全文
  • 微信小程序云开发实现搜索功能

    千次阅读 2021-12-30 00:58:33
    微信小程序云开发实现搜索功能欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中...
  • 其主要功能在于交互式地浏览和修改数据,生成动态Web内容.狭义的Servlet ... Eclipse附加项目中的某个jar包的源码 1.这里以web项目为例,打开项目应用的jar包:如下图 2.在想要引入源码的jar包上右键>属性(Properties) ...
  • JavaWeb实现商品列表多条件查询和分页功能
  • Django+Vue开发生鲜电商平台之8.商品详情页功能实现

    千次阅读 多人点赞 2020-07-29 21:35:37
    用户收藏功能需要先定义序列化进行验证,添加收藏时添加到当前用户下,可以添加、列举和删除收藏,还需要限制同一用户对同一商品只能收藏一次;实现权限验证,限制用户只能操作自己的收藏,进行局部定义;结合前端...
  • 在taotao-search-web工程需要添加对Search服务的引用,如下图所示。  springmvc.xml文件所有代码如下: xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmln
  • 博客目录SSH-WEB商场系统实现功能截图主要流程图技术点总结代码写在最后 SSH-WEB商场系统 本系统是一套电商管理的系统,方便人们在线购买商品,方便商家后台管理自己的商品实现功能截图 功能点: (1) 登录功能:...
  • solr实现商品搜索功能和安装

    千次阅读 2018-10-06 11:06:14
    Solr简介 用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成...同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置、可扩展并对查询性能进行了优化,并且提供了一个完善...
  • IDEA+Java+SSM+Jsp+Mysql实现Web商品信息管理系统

    万次阅读 多人点赞 2022-03-20 11:23:31
    Java+SSM+Bootstrap+Jsp+Mysql实现Web商品信息管理系统,sql在sql文件夹下面。系统功能包含,注册登录系统,管理员对商品信息的增删改查。界面良好,功能完善。
  • 实现主页、按条件搜索商品商品详情、评论商品、收藏、商品后台管理等等完整功能,可用作毕业设计,提供对应毕业设计报告范文可用作参考修改,工程文档以及完整报告私聊扣扣, 三一2625138,附带环境安装和程序运行...
  • 商品详情页静态化功能实现 1.详情页静态化操作 2.填充基础数据 Spu、List<Sku> 3.规格切换 搜索页面渲染 1.数据展示 2.搜索条件展示 3.实现条件搜索控制 1.Thymeleaf 1.1 介绍 thymeleaf是一个XML/XHTML/...
  • 淘宝搜索案例的实现

    千次阅读 多人点赞 2021-11-10 18:57:25
    实现步骤: 1. 获取用户输入的搜索关键词:为了获取到用户每次按下键盘输入的内容,需要监听输入 框的 keyup 事件 2. 封装 getSuggestList 函数:将获取搜索建议列表的代码,封装到 getSuggestList 函数中 3. ...
  • JavaWeb实现查询功能

    万次阅读 多人点赞 2020-01-09 22:52:20
    需求:当搜索框为空时,查询数据库所有商品,输入商品名时,进行模糊查询 实现思路:运用表单提交的方式访问Servlet,然后将输入的值传到后台,运用sql语句对数据库进行查询。 具体来看代码吧! 搜索框代码 &...
  • 淘淘商城——商品搜索功能测试

    千次阅读 2018-05-29 11:48:52
    之前我们就差不多把商品搜索功能实现了,本文我们来一起测试下该搜索功能。 首先我们要保证zookeeper、redis、image、solr服务都开启。接着我们把taotao-common工程重新打包到本地maven仓库,由于taotao-search-...
  • springboot+elasticsearch实现一个搜索引擎的功能 一、elasticsearch的安装 ElasticSearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口。Elasticsearch是用Java...
  • web实现全景图的交互展示

    千次阅读 2020-08-21 03:40:00
    Web实现全景图的交互展示不需要学习其他知识,小白也能实现全景图AR展示一、webVR全景图多种方案实现(aframe,Krpano,three,jquery-vrview等等)二、用krpano之前的一些知识准备三、krpano的购买、下载、注册四、...
  • 零基础搭建web项目,并整合mybatis框架实现增删改查。比较适合新手
  • 商品搜索 购物车 留言板 查看订单,会员注册、登录 后台 会员管理 新闻管理 商品类别管理 商品管理 库存管理 订单管理 留言板管理 销售统计 系统管理 三、注意事项 1、管理员账号:admin 密码:1 2、开发环境为...
  • 步骤一:新建动态web项目 这个没什么可说的,需要注意的是选择正确的项目版本和服务器版本。 比如我新建了一个叫SSM_001的动态web项目。 它的初始结构是这样的: 步骤二:导入jar包 建好项目后我们需要导入所有SSM...
  • 用户前台功能:商品分类多级展示、商品搜索、商品查看、用户注册登录、收藏商品、加入购物车、提交订单、个人心信息管理、收货地址管理、收藏管理、评价管理、订单管理等。后台管理功能(脚手架的基础功能这里不再...
  • vue开发web实现列表左右联动效果

    千次阅读 2019-08-13 09:58:08
    先谈需求:左侧为分类列表,点击分类名右侧商品列表会滑动对应分类到顶部;右侧商品列表滑动到某一分类时左侧分类列表对应分类会滑动到顶部高亮显示。...实现步骤:1,左右两侧均使用v-for循环列表,使...
  • 本网上商城系统以MVC分层思想为原则,使用SSH框架进行整合开发。...后台管理功能则包括商品的修改、添加、删除、用户管理和订单管理等主要功能。本系统具有操作简单、页面友善、灵活性好、运行稳定等特点。......
  • 交互功能只写了一部分,仅供学习参考。如想下载源码,请移步https://github.com/guozi007a/taobao-homepage.git我传到github上了。在这个页面点Code选项,下载压缩包即可。 老规矩:直接上货,先看效果图~~ 上传的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,639
精华内容 11,455
热门标签
关键字:

web商品搜索功能实现