00:00
那前面呢,我们根据我们检索得到的response结果对象,我们最终呢,构造出我们页面要用的search result对象,好把这个断联呢先取消,把这个方法做完以后,我们的整个检索的简单逻辑我们就做好了,首先我们来准备好了检索请求,我们根据页面传过来的查询参数,构建出各种动态请求条件,能构建出一个检索请求,然后我们用ES的客户端去来执行了这次检索,然后最终把执行。到的整个结果响应,我们又封装成了我们想要的这个result数据,我们来看controller,那接下来controlrler呢,调用了我们这个search方法,将这个result数据呢,我们放给页面result,那我们接下来就来对页面的结果来进行一个展示,所有的展示呢,我们先得参照我们的页面模板,好在这,那么先来把它里边所有的商品我们都展示到这儿,那所有的商品我们可以先来看一下,我们来到这个list页面来找一下所有的商品都在哪,我们先来审查元素,右键我们来检查元素,在这个检查元素之前,我们先把页面的每一个标签我们都来合并一下,我们来大致的看一下页面的结构,好把这个都来合并起来,那页面的结构呢大致就是这样,那下边的这些东西都不是我们想要的,这右边侧边栏包括我们的script脚本。
01:21
底部栏我的足迹猜你喜欢,我们来看一下,我猜你喜欢应该是在下边,还有我,我的足迹,那就在这儿,我的足迹,这都是我们浏览过的商品。那我们继续来看,我们这一块呢,还有商品精选,那商品精选的就是这边的我们现在所有的动态内容,我们只管这一块,我们的所有商品,涉及到属性信息,以及我们查询到的所有商品信息。好那这两块内容呢,我们来看一下,在有一个叫商品筛选和排序里边,那这个商品筛选和排序我们先来审查一下元素,看我们的这个商品它是在哪一块展示,那么这个商品呢,在我们这个div,好,我们鼠标放在这儿,我发现这个div把它就包住了,那这个DYIV呢,在我们这个right。
02:07
Tab,那就是rig这个tab里边,那这个tab的每一个tab里边四个div相当于我们四个数据,那我们第二行呢,那就是第二个我们这个tab,那么接下来就来找这个我们所有的商品,就应该便利在这儿,好我们来CTRLF来直接来找这个right tab,好我们把它这个缩了,那这一块呢,有很多,我们把这一块都来删掉。把页面里边该有的其他部分我们都来删掉,只留上一项啊。这是我们排序里边的商品,那这个商品呢,每四个是一组,我们在这儿来写一下商品每。四个是一组,然后呢,我们的商品都在这儿来进行便利,每一个商品呢,都是一个完整的div,好,我们把这个div缩起来,缩起来,缩起来,好我们来留上一个div就行了,但是这个div内容有多少,我们肯定得便利,好我们来先来写遍历,来写TH冒号each。
03:07
我们来要进行遍历,我把这个展开div展开好,我们来编写TH,我们来进行遍历,遍历呢,我们来写上Dollar福大括号result,这是我们放的这个结果们给controller里边放的这个结果,将result,那result里边我们要取出所有的商品result点一个它这一块还有提示get products,这是我们所有的商品,要便利这些东西,好每一个商品呢,我们就叫product,我们拿到这些商品以后,我们接下来需要修改商品的一些信息,比如商品的价格,我们来看它是在哪一块展示的5199,在这个里边来找这个5199的这价格,主要是我们这个table r,这个class,我们来找一下,在它的这个里边,这个div里边,我们来看有没有什么table r。诶,在这儿,这是我们的价格,但大家发现这呢有很多价格,但很多价格的原因是我们在这儿相当于展示了好多不同的商品,这其实就是我们当前查询的SKU,它对应的SKU所涉及到的其他商品信息,比如我们是白色的,把其他商品粉色各种也都在这展示好,我们暂时呢先不考虑这个功能,那么这个商品价格我们就来留上一个,然后呢,商品的这些图片效果,那都在这个Li里边,我们也来留上一个,留上一个。
04:31
我们的整个大图片,那就在这儿,大图片呢,能看到应该是在上面这一块,抬头什么的,我们可以暂时都先不要把这个删掉,把这个大图片呢,我们也来留上一个,我们来遍历这个信息,好先来写价格,那价格的这一块我们就直接在th span里边来写th test,那span里边的内容,内容是什么呢?我们可以先让我们的这个特殊字符,再加上它取出来的价格来做一个拼串,加上我们来。
05:00
Dollar福大括号,我们是这个商品product里边呢,有我们这个商品的价格SQ price,我们来找一下就是它。那我们在这呢,就相当于得到了价格替换我们原来的价格,然后接下来我们的这个图片,我们把当前图片的路径我们也拿来,那么这个src呢,我们就变成THSRC,那么图片的路径呢,也在我们这个商品里边,我们用Dollar服大号我来取出来,那是product里边有一个。SKU的image,这是我们图片的路径,当然这是我们各种其他颜色的小图,还有一个大图,大图我们就直接也给这儿来写上,把这个大图在上边使用THRC还是我们这个路径,我把这个呢再取一下就行了,好,我们要使用Dollar福大括号的写法,刀乐福大括号,然后图片路径再取了,然后接下来我们把这一块呢都缩一下,这是我们的图片的。
06:03
路径,包括我们图片的价格,那接下来还有我们这个商品的名字,来看我们这个商品的名字,右键我们来检查元素,这商品的名字呢,与我们这个动态切换可能有很多商品,所以这一块名字呢,都是在这个A标签里边的,这个文本内容里边的,所以我们就留上一个,我们现在还没有很多的商品切换,所以我们只来保留一个内容,把这个P标签和闭合在这儿,那这个A标签的内容title我们先不要了,把这个title呢都先删掉。A,标签的内容就是我们这个商品的名字,那主要就是在这里边,那它的内容呢,我们这么来显示,我们使用th test,那这个test呢,那就是Dollar福号,我们这个商品product里边的我们这个商品的title,好我们取出了这个内容,好我们这一块内容都取出来以后呢,我们这个div一个便利,相当于我们这个商品就出来了。
07:02
商品有多少个,我们就是通过遍历得到的,好,我们这块全部做完了以后,我们让它页面重新渲染一下,我们来使用CTRLF9,让它页面呢,重新刷新CTRLF9,来测试一下我们的效果。现在我们来刷新我们的这个首页,好,我们现在来刷新首页,我们来看我们最终的效果来刷新。来看我们的这一块展示,是不是有我们自己的商品,好,那现在呢,查到两个,诶确定呢,这都是我们的商品,没问题,我们在这儿呢也展示出来了,但现在的问题就是我们的这个商品的名字,华为什么什么的,这个东西呢,我们应该会有一个高亮效果。我们现在呢,没有高亮效果,那是因为我们没有使用这个检索条件,好,比如我们再来加上检索条件and,我们来写一个keyword。等于我们写一个手机好,我来回车检索,那检索到以后呢,那么查出来的这个商品的标题,那就应该有这个高亮效果,那么确定呢,也带了qword值了,但是我们商品的这个名字,我们来右键检查元素,我们来看一下。
08:09
我们检查元素的时候,我们发现好这块呢,确实有这个手机,只不过是我们这个商品名字呢没写全,而且呢,这个手机在这儿,它没有显示成什么红颜色的,这是一个标签类似的这种东西,那如果我们让它显示全。这块呢,是我们这个CSS样式做的,它没显示全,那我们来搜成华为吧,们为了明显起见,来搜个华为,一会儿来改样式,那么这个华为呢,那就应该是加粗红色的,但是它在这儿没显示,没显示呢是因为我们这个标签被它呢进行了转移。变成了他原本的内容显示。那应该让它真正的作为一个标签还加样式的,所以呢,我们可以在这来取出我们商品的名字的时候,别使用test,有一个叫th test u test呢,那就是不转E,那不转E,我们CTRLF9,我们这个标签如果加红了,那就加红,不会把这些减口号转过来,我们来刷新,我们发现我们的这个标题,那就加红了,华为没问题,那么这一块的商品我们就遍利出来了。
09:14
那这呢还算简单,接下来我们来便利上边,上边呢就是我们当前所有检索到的这些商品,我们所涉及到的所有属性,他们的品牌有多少种,价格,包括他们的分类到底有多少个,我们都可以展示在这儿,好,我们来看这一块的位置在哪,我们来右键审查元素来找到这个品牌,我们来看选中我们发现呢品牌,那就是在这儿,除了品牌外,其他的属性呢,都是以一个叫class叫京东这个P的这个样式,我们这个直接扒到京东网页。好,我们现在呢,就来修改品牌,我们先将所有的品牌内容我们展示到指定位置,我们就来找一下我们的这个位置,我们来edit as HTML,我们先来找这个品牌,好,我们来CTRLF来搜索一下,好,我们就在这儿,那品牌的所有内容呢,全部在这展示,那我们的品牌好没问题,接下来每一个品牌信息来右键检查元素,每一个品牌信息呢,都是这么一个Li标签,所以我们这个UI里边可能有非常多的Li来一个两个,那么就留上一个,把其他的一删就行了,把u Li里边其他的Li删掉,好留上一个我们这个Li,我们现在要取出它的品牌信息。
10:30
超链接这一块呢,还是先不管,然后呢,在a image标签这这个是我们当前品牌的名字,那有多少Li,我们还是要遍历取出来,TH,我们给大家页面的返回结果,Result里边不仅封装了所有的商品信息,包含当前商品所涉及到的所有品牌,我们也有封装,我们可以拿到它的所有品牌,我们就不用调调的方法了,直接用属性brands好拿到所有品牌,那每一个品牌呢,我们在这儿来进行遍历,品牌的这个图片路径,好,我们拿过来使用THSRC品牌的图片路径呢。
11:09
我们来用Dollar福大括号来取出我们这个brand,那这个商品信息里边,品牌里边有一个品牌图片,好,我们直接用它的属性,可以不用调它的方法,Brand image,好品牌的图片取出来了,包含我们这个品牌的名字,我们也要取出来,这个名字呢,我们可以直接使用th past,好,我把这个名字呢取出,把它原来的这个默认值,它就会自动覆盖来刀福大括号这个品牌brand brand里边呢,还会有它的品牌名字brand name。我就叫name,好,这个呢也取出来来,CTRLF9,我们让页面呢重新刷新一下,我们看我们这一块的显示效果,我来刷新。好,那么这个页面呢,展示出来了,我们这个品牌呢,也有叫华为,只不过这一块样式呢稍微有点不好,那这个不是我们的工作范围,我们就先留在这儿吧,下边我们把它调精细了,可以再往上放,我们现在有一个品牌了,那接下来还有我们这个商品,所有查询到的商品,所涉及到的所有属性,我们也应该便利在这儿。
12:21
所以呢,接下来每一种属性,好我们把这个品牌便利的信息,这是我们的这个叫navy wap,好我们这个品牌,然后其他的信息我们都要在这儿进行属性获取,那我把其他的这些呢,我全部删掉,留上一个,好我们把这个删掉,比如我们来留上一个屏幕尺寸,我们就以它为例,我们其他的属性呢,我们都放在这要进行便利,好我把这个热点也删掉,这个div在这儿。包括这个机身颜色,还有机身内存,好我们把这一块呢,全部来删掉,现在呢,只留一个我们这个屏幕尺寸,好接下来我们来挨个遍历其他的所有属性,其他的所有需要展示的属性,那其他的这个属性呢,比如我们有多少种属性,所以我们这就会有多少种这个div,所以我们第一。
13:16
要做的事情就是我们先来在这一层div上PH来便利每一个属性。我们当前渠道的这个商品里边,我们来Dollar幅大括号,我们给的这个结果集里边,我们有一个所有的属性我们都封装成at t RS,那每一个属性我都拿到at t。那么当前属性的名字是什么,以及它有多少种可供选择的值,我们都应该在展示在这,那名字我们就来写上。我们使用PH test。名字呢,那就是Dollar福大括号,我们当前正在遍历的属性的at tr name,这是我们这个属性的名字,还有它多少种可能的值,每一种可能的值都是一个Li,把这个去掉,每一种可能的值我们全部给它里边的文本来th test,主要是这个A标签的文本,我们来加上是我们当前属性的这个值,而且这个Li有多少个,我们也是便利的,所以我们在这来写一个PH,我们来遍历。
14:25
便利什么呢?我们的这个属性里边呀,我们来看一下,我放到这个result,我们的这个属性at t RS,便利出每一个是个at t r VO,我们能取出来at tr name,但是它的值呢,也是一个list,所以我们先要遍历这个at t r y6的这个list,所以我们这一块T,我们就写的是Dollar符大括号,那当前正在遍历的属性的at tr所有的Y6值我们来给它遍历,那每一个Y6值我们就放在这,就叫Val,好,每一个Y6值呢,我们都要显示在我们这,我们就叫Dollar符大括号,Dollar符大括号好,大括号我们就来显示成我们的va al,好,我来CTRLF9,我们页面刷新一下,我们重新再来看一下我们的这一块内容,好,我们来重新刷新,我们来看,诶,我们CPU品牌海思CPU型号是这个没问题,我们检索到商品呢,确实是这些属性,那好们现在不检索华为了,我们检索所有的商品回车。
15:26
那这一块呢,就应该展示我们所有商品,但是我们发现呢,这没展示出来,我们来看一下我们的这个DSL,我们最后发送的这一次DSL,我们现在只相当于检索手机分类下的所有手机,当我发现这个手机呢,只有一个华为牌,实际应该有很多的,我们把我们的这个DSL我复制过来,来看一下是什么原因,我们在这儿重新来搜索。Get,我们叫鼓励mail product,我们来进行search检索,好我来这一块呢,我们来重新让它格式化一下,我们来看我们确实是来检索225号这个属性的,对了,我们默认呢,是来检索这些有库存的,因为我们这个有库存的手机呢,本来就少,那这样我们这个库存这一块,我们来修改一下默认检索,你给我们带库存了,我们就检索有库存的没带我们就算是默认值,好我们controltrler里边传的这个,我们给库存有没有,我们就不给一个默认值了,然后呢,我们接下来在这构建检索条件的时候,Build的request search的时候,我们在这来判断库存,在这库存是否要进行查询,我们也来做一个判断,如果前端页面怎么传来了get handsto传来了这个integer,它不等于空,那不等于空了,我们再来给你进行是否有库存的匹配,那等于。
16:49
那么我们就不管了,有无库存我们全部来查,好,我们现在呢,重新来启动一下,我们现在不以debug了,我就来直接重新启动,来看我们现在查到的所有商品,涉及了多少种品牌,多少种属性,我们就应该在这儿能展示到,好我们来看一下有没有启动成功啊,这块启动成功先来查225号的,好,我们来回车。
17:12
好,我们发现呢,现在我们来查出来的所有商品里边,我们有两种品牌,一种是苹果,一种是华为,他们的CPU品牌也有两种,然后呢,CPU型号也有两种,然后更多选项我们没有加,那么这一块呢,暂时先不管,那么呢,所有的属性确实在这儿了,我们查到的商品呢,也都在这儿了,那我们这一块呢,相当于就便利成功了,那接下来最难的就是你要点某一个属性,真正的把这些查询条件,那最终带上去查询,得到我们一个动态结果。而我们这一块呢,显示我们还忘了没显示一个叫分类,分类跟品牌这两个我们都可以给它固定,全都显示上,无论查询什么东西,我们品牌呢,在这儿也要显示上,我们给它做一个加粗,这都是默认显示的,好,我们来都给它做一个加粗,然后呢,品牌跟分类这两个呢,都来默认显示好品牌,我们来复制上,我们再来复制一个分类。
18:10
这个呢,我们就叫分类,分类我们来复制上,它牵扯到多少种分类,我们在这呢,也要便利,现在便利的呢,就不是我们这个品牌了,现在遍利我们的catalogs所有的分类就叫catalog,然后这个分类里边有分类的名字,这些信息,这个图片呢,我们就不要了,走。主要呢,A标签里边有我们这个分类的名字,所以我们A标签里边直接来写TH,我们的task当前分类的名字,那就是Dollar福大括号cat log点一个。分类的名字看到了个name,我们有多少种分类,我们也在这都遍历了,我们在这来写上一个分类,好,我们来CTRLF9页面刷新一下,来看一下我们的页面效果。品牌跟分类这两个好固定都有,而且我们分类这一块呢,展示跟他们一样,不整这个div了,所以我们把他们的这些效果拿过来。
19:09
这是我们的分类,我们把他们其他属性的这个效果直接是ul的,我复制过来,我放在分类里边,把这一块呢,我们来也换上,我们叫U。我们要遍历的就是我们所有结果里边所涉及到的所有分类,Result里边的我们叫cat logs,好,我们现在遍历每一个cat log,然后呢,我们把分类的这个名字拿出来就行了,Catallo点一个点一个cat log name。然后主要就是这样式的话呢,我们要跟其他人保持一样,都要使用这个样式,GD这个样式好,我们拿过来,包括它里边的这些样式,我们也都来统一一下。这个分类里边什么SLTSLY6,然后呢,这个Y6里边我们来看它原来还有一个这个Y6LOGO是一个div的,我们这个东西就不用了,我们的这个Y6里边直接都是这些ul,好,我们把这个div的这个删掉,这个呢删掉ctrl all,我们来代码整理一下,主要这个Li里边套了我们这个A标签,我们把这个A标签拿过来。
20:19
CTRLF9,我们重新来代码整构建一下,我们现在来刷新,我们来看页面效果走。好,我们牵扯到分类呢,只有一个牵扯到两个品牌,然后呢,他们CPU的型号是什么,我们现在呢,全部都成功了,那下一节课我们就来点一个,就来给它拼装上一个条件,在下边呢再来动态查出结果,那现在呢,这些结果有点少。我们就把默认的这个封页大小我们来调整一下,默认的我们让它显示16个,那下一节课我们就来拼装这些条件,并且呢,把这个封页它下边的封页条我们也给它完成了。
我来说两句