00:00
那接下来我们再来加上我们的导航搜索功能,那们在这一块呢,我们来搜索华为,那我们来点击搜索的时候,那就会按照关键字来继续来进行搜索,那这个功能我们先来审查元素,来找到这个搜索按钮,审查元素我们现在是一个叫header form,好我们在这来找一下,直接来到我们这CTRLF,我们来搜一下headerphone,那就在这儿,这是一个搜索,当我们来点击这个搜索的时候呢,我们去来调用我们的检索逻辑,而且呢,我们这个检索由于要获取到我们输入的这个内容,所以呢,我们这个检索呢,我们让他调一个方法来,Java script,我们也不调我们原来的方法了,比如我们就来调一个我们search by keyword8keyword,好来调用这个方法,这个方法呢,也什么都不传,而且我们以后要获取它,所以我们为了方便,期间直接给它加一个叫keyword的input,我给它加一个ID keyword input。
01:00
然后呢,我们来声明这个方法,当他来调用我们这个方法的时候,好,我们来过来一直在下边来声明,我们来写一个function function。我们现在呢,按照keyword来进行搜索,而这个搜索呢,其实还是调用我们这个方法来进行检索,但这个方法要传我们的name跟Y6 name呢,那就是keyword,哎,我们输的这个keyword keyword我们用关键字检索的,而Y6值呢,我们得自己动态获取。那怎么获取呢?我们直接到了符小括号,然后呢,井号,我们按照ID,我们之前的这个,我们给它给了一个ID,我们的input框ID呢叫keyword input,那么就来获取到它的这个value值就行了,所以呢,我们拿到它点一个value值,这就是我们input的框输入的内容,这是我们解克瑞的写法,好,我们直接呢给这一放来调用这个方法就行了。
02:00
我们来测试一下CTRLF9来看页面,我们用keyword进行搜索可不可以,好,我们现在来刷新,把所有的检索条件呢,我们都清空,比如我们来留下一个三级分类的ID,好,那现在来在这搜索,我们来搜索一个华为,我们就叫华为,好,我来点击搜索,确实呢拼上了keyword华为,那这一块呢,按照关键字所有的华为呢,都高亮起来也没问题,那接下来我们把这个枫叶的条,我们也遍历一下,我们的整个枫叶条来又加检查元素来看一下。那么这个审查元素呢,现在来到我们的整个这有一个叫配置丝带,好我们整个枫叶条,我们来看一下它的这个位置,这是每一个的枫叶项,那都在这个span里边,那都在我们这个div里边,第二个span呢,好像没啥用,我们主要都是在第一个span里边有这些内容,好那我们就来拿到第一个SPA啊,第二个span,它是这个确定好,那么现在呢,拿到第一个span,那就在这个里边,封页里边,我们CTRLC来找到CTRLF,我们来搜一下这个封页,封页的上一页跳到哪,下一页跳到哪,我们先把这个链接地址,我们来写上,这个链接地址呢,只是给原来的。
03:16
所有属性我们又加一个封页,封页的参数呢,我们之前封装我们传递的是这个,我们来看一下,封页呢,多传一个配置number就行了,相当于我们就算想要页码,我们在这儿呢,再传一个配置number,那就有页码了,好,那么还是跟以前一样来调用我们这些方法,我们来写一个THTH那调用什么方法呢?我们把我们之前的这个方法的调用的值我们来复制过来,好,我们把这个超链接拿过来。好,我把这个复制过来,我们现在不是我们是th ref,好,我们现在想要它的超链接值。但这个超链接值呢,我们上一页我们现在要加的一个属性是PA置number,这个PA number最新的值,我把这一块呢,我们来去掉,它最新的值呢,那就是我们当前页减一,就是它最新的值,而且当前页的值到底是多少,我们其实可以来这么来获取当前页的值,我们可以看一下当前页呢,是我们result对象,我们之前返回的这个结果,这个结果里边呢,我们专门封装了这个页码,就叫配置number,这是我们的当前页,所以呢,我们这个当前页减一,那就是上一页,那当前页加一,那就是下一页,由这一块呢都要计算,而且这个页码跳转不是把配置number直接往上一加就行了,我们去到第二页,第三页往后边再加呢,就加了好多type配置number了,相当于是给原有的请求上来,把page number的值替换一下,所以呢,那这一块我们就为了简单,我们这么来做,我们让每一个。
04:57
分页点击跳转,我们都给它给一个class,我们就叫配置A标签,诶我们封页用的这个A标签,那每一个呢,我们都起成一个class,我们给它们统一来绑定我们的跳转事件,好,我们给这都来起上这个class。
05:17
我们为他们来绑定跳转事件,包括我们这一块页码有多少个,我们也不是在这儿全部显示的,我们是要进行遍历显示上一页,下一页可以有,而且呢,我们还得判断有上一页了我们才显示,所以呢,我们来加一个判断吧,Th if怎么。判断它要不要显示上页呢?那就是Dollar符大括号,我返回的当前结果里边,如果拿到的页码配置number它大于一,也就说它是第二页,第三页等等,那么才能显示上一页。包括有没有下一页,我们还是要判断th if,如果我们拿到的这个页码,我们当前页码点page number,如果它小于我们总页码,那就有下一页了,我们这个总页码我们也封装了,有一个叫total pages好,所以我们就会有下一页,包括有了要跳到哪个位置,我们也可以给它一个自定义属性,比如就叫PN,这个自定义属性的值是多少,我们动态取出来,想要动态取呢,们就得用语法好,而自定义属性呢,我们就得用TR的写法来整一个自定义属性。自定义属性比如我们就是参照我们的文档来看我们的at tr怎么用,这有一个c at tr,我们这个value。六如果我们有自定义属性了,我们来往下翻,我们可以用THTR,某一个属性等于什么值?好,我们属性名呢?我们就叫PN,那等于的值我们动态取到。
06:51
二幅大括号,那是下一页,那就是我们当前页加一就行了,Result,点一个page number我们来加一,那如果是上一页,我们把这一块呢,复制过来TR,我们的页码就是当前页减一,把这个减号呢给它隔离开,这个加号我们也一样给它隔离开,然后呢,我们现在到底有多少个页码,这个页码呢,我们也要进行遍历,来写一个TH,好,TH。
07:20
我们先来做一个简单遍历,怎么遍历呢?我们先来刀了符大括号相当于我们返回的这个结果里边,我们结果里边啊有一个total配死,只要我们小于这个总页码。总页码有多少页,我们就要变历多少页,但如果我们要便历,我们这一块呢,又得是一个数组,我们这是一个整数,那这没法变历,那想要变历呢,我们可以给结果里边我们来加上我们的整个页码数组,比如我们在search controller里边们看到我们最终会返回这个search result的结果,这有一个我们的总页码,然后呢,我们为了方便期间我们给它加上一个list,可便利的我们所有的导航页,比如我们聚叫page。
08:07
我们这些导航页码,那导航页码呢,有多少我们可以在构建的时候就给它加上,比如我们在这儿构建结果的时候,构建结果的时候呢,我们把所有的分页信息,总页码在这儿放好了,我们给一个便利。从int从I等于一开始到I小于等于,我们的总页码叫total pages,我们一直I加加,由于我们现在要用页码,所以我们呢,从一开始我们将这些页码呢,都放进这个集合里边,比如我们list的,我们就叫page等于new一个ist。然后呢,给他们里边我们都放入我们当前的I,这是我们可遍历的这些页码,那这样以后呢,我们的页面就有这些可遍历的值了,我们主要来遍历这个page nvi好到底有多少页,我们来遍历TH,有一个叫Dollar符大括号,我们result返回的结果里边我们有一个属性叫配置N来进行遍历,那每一个遍历生成我们的当前页的导航,而这一块的真正的页码内容这就不是一了,我们可以使用行内写法,双中括号刀乐福大括号,我们取出当前导航页的值,包括我们要跳转去哪一页,我们T,我们也可以取出这个值TR,我们都是在这儿来指定我们新的这个页码的,而这个页码呢,就是我们这个导航页了啊。
09:41
而且我们这一块注意,如果导航页是当前页,那我们的效果呢,还是这种样子的,那不是当前页上,像上一页下一页,那效果呢,就是他们原生的这种样子的,所以呢,我们在这儿得判断,虽然我们遍历出了每一个页码,当然如果是当前一页的话呢,我们这个样式也得变,我们这块内容呢,我们先放这,我们先来做一个整体测试,我们来把这个服务,我们来重新启动一下,他们的这个页码能不能遍历出来,现在其实呢,就两页数据,包括总共有多少页,我们在这儿也可以来取一下,总共来写上是Dollar符大括号,我们返回的这个result,这个结果里边我们有一个叫total pages,好,我们来找一下total pages,把它拿到,这就是我们的总页码,我们放到这,那么这个分页条呢,我们先来简单的显示一下。
10:35
CTRLF9,我们把这个页面呢改了,我们让它这个页面重新刷新一下,来看这一块来刷新来看我们的页面显示。好,那现在呢,总共有一页数据,所以我们这共一页,那如果我们有多页数据,那就多了,我们把这个Q2D呢,我们可以去掉,把这个Q2,比如我们来不输了。在这儿去掉走。多页儿数据,我们来看一下。
11:01
现在呢,两页数据,两页数据就得遍历来显示两个页码,只不过这两个页码没有,那还是我们构建的这块有问题,那配置nevis有了,我们就得在result里边放好result,点一个set我们的这个page na,好把这块页码放好。我们代码改了CTRLF9,那让代码呢也重新启动一下,然后我们在这儿来再来进行测试CTRL后,我们来准备来进行一个刷新,先来保证我们控制台先看启动起来没有好,现在呢一切正常,我们这个启动起来了。来进行一个刷新。来刷新,现在我们来看这个页码,这个页码放上了,那就一二没问题,但是呢,不是当前页效果呢,就不能这么显示,那么在这来细化一下。在我们这页码这一块,我们现在在这儿来做了一个便历CTRLL,我们来代码整理一下,那么这一块呢,需要判断我们这个便历的页码是不是我们当前页,当然我们现在的这些便历呢,只是给每一个这个A标签,我们来检查元素,我们设置了一个PN们来看PN,每一页呢都是这个页,但然如果是每一页这个PN正好等于我们当前页,那就不应该显示这个,诶不对,我们当前页应该显示这个,不是当前页不显示,那就应该是这个样子,那我们怎么做这个效果呢?我们就可以来在这一块来写一下,那相当于判断,如果我们便秘的这一页是我们这个当前页的话,我们就不应该给它显示这个样式。
12:35
但是呢,每一个我们都有这个PN的这个显示,好,我们来看一下这个怎么做,我来写一个这种写法,大家看能不能懂,我在这TR除了给PN赋值外,我还给style进行赋值,但style的值呢,肯定是后边这一串,但后边这一串呢,就是有情况的style等于什么?那我们就来做一个动态判断,Dollar符大括号,如果我当前正在变历的它等等于我们来写一个三元运算,等等于我们当前的这个页码吗?当前页码是result点配置,Number等等于它吗?如果等等于它,我们给的这一串值呢,就是这个相当于当前页就这么显示。
13:20
否则呢,那就是没样式,我这么来显示来CTRLF9,我写了这段代码,我们来做一个测试,把这个调呢,我就不用了,CTRLF9来看我们能不能正确的遍历出我们这个当前页这些信息来刷新一下。好诶,我们现在呢,发现如果当前页是第一页,哎,它就OK了,如果当前页呢,不是第一页它就变了,那么给它翻页来加上and page number,我们给它变成第二页走page number要等于二等于。二好,我们现在来看这是第二页内容,那第二页内容我发现二那就是这样了,一就不是了,好,那这个就没问题了,但这个翻页呢,肯定不是我们在这儿敲链接翻的,应该是我们点1.2翻过去的,那么这个点1.2怎么翻呢?我们又让每一个翻页方法,我们要来调用我们指定的方法,好我们把这一块呢都先删掉,那每一个翻页ctrl all我们来代码整理一下,我们先把他们之前的这个超链接我们都来删掉,诶他们之前想要指定跳转一个位置,诶这要指定跳转一个位置,来都来删掉,我们现在要跳到哪,我们说了算,CTRLF9我们先来看一下删了超链接这一块样式对不对?好这一块样式呢也都是对的,然后接下来当我们来点了这些超链接以后,点了这些配置A翻页以后到底要去哪一页,因为我们每一个都有一个自定义属性PN封装着他要去哪一页。
14:51
所以呢,一切都要以这个PN为准,那我们接下来就来继续。这一块确定我们也给他这一块来删掉,好,所有点击要跳转页码的,我们全部给他加上,我们这个叫配置。
15:06
A这一块确定要跳到第几页,它的这个自定义属性PN值呢,应该是我们这块书的这个值,所以呢,这个东西得特殊处理好,我们先留在这儿,我们就比如把它就叫配置submit,后来呢,我们把它做一个特殊处理,我们先来对配置A来绑定事件control end,好,我们在这来绑定事件Dollar符小括号点一个class,我们给他们来绑定事件,当他们被点击以后来写一个方式好。我们来传递一个回调函数,那当他们被点击以后呢,我们先来写一个return false return false呢就是禁用默认行为,因为有前超链接可能默认会跳转,我们先来禁用默认行为,那接下来要跳到哪一块去,我们就应该取出我们当前被点击的。这个元素自定义属性PN的值,所以我们就来使用Dollar符小括号this当前被点击的元素使用它的at tr方法,这是杰克瑞封装的at tr方法。我们取出这个自定义PN的值,我们要去哪一页,PN都指定好了,即使是要去末页,PN也是指定好的。好,我们来取出自定义属性PN的值,来画一个PN等于我们指定的值。现在我们要翻到这一页,那要翻到这一页怎么写?现在location的位置就应该等于location原来的值,来加上我们拼上我们要去的页码。
16:38
And,那么现在新的值是我们说的配置number,配置number等于几呢?那就是我们这个PN页码,那就是它了。哎,我们这个等于呢,应该拼在这个里边,我们这个页码等于我们这个值,好,这是我们心跳的位置,CTRLF9,我们来测试一下我们的这个翻页。
17:02
但是呢,我们不能一直调这个方法,一直调这个方法,一直给后边这个PPN什么。这也是有问题的,好,来刷新一下,那先来看第一次。我们现在是第二页,我来跳到第第一页,我来点一下,好,现在配置number等于一,我们发现呢,它直接拼到后边了,我们现在不要任何页码,我们先来点击翻页看一下,这是第一页,那我们第一次点肯定是对的,它给后边拼第二页走一平以后呢,我们来看,诶跳到第二页,那我们再来点第一页,那就应该是替换我们这个配置number的值,所以呢,我们在这一块location的这一块的值,我们还要做一个特殊处理,好我们来挖一个它。H ref,那么h ref,我们原来的这个值呢,我们先拿来,我们来看它有没有包含分页好来判断,如果说原来的这个值点一个我们这个包含们以前算过index of来看它如果包含了这个配置number。
18:04
它不等于负一,说明它有这个配置能把。那有这个配置number,我们要做的就是替换咱们这个。配置number的,咱们这个值如果没有,我们才需要直接往上拼,就像我们这样一样。走,我们来拿过来。那这个替换呢,又比较复杂,所以呢,我在网上复制了一段替换的方法,这个呢,其实就利用正则表达式直接来替换,这个正则表达式就是我们指定的这个参数名等于我们以按的符,相当于以下一个,我们查询参数结束,我们来替换某一个参数的值,我们最终调用它的replace方法,所以我们想要替换,那么就把这个拿过来,我们想要替换谁的值,我们先来传入。我们第一个我们要替换的整个URL地址们,整个URL地址就是这个h ref,然后呢,我们想要替换谁,我们想要替换配置number,好,我们来拿过来,然后把它替换成什么值,替换成我们最新的,我们想要翻到哪一页,那就是我们最新的这个值,我们把这个替换方法调用以后,会给我们返回新的值,我们让链接跳转到新的位置就好了,这是我们的替换方法。
19:23
我们就不着重在这来多写这么多的GS了,来,CTRLF9。我们把这个页面呢,重新来编译一下,我们来看一下我们的最终效果,来刷新我们的这个首页,好,那现在来准备好,我们现在这个呢是第二页,我来走到第一页。来点击一。好,我们现在到第一页,我们把这一块呢都清掉,好,我们现在重新来,现在是第一页,我点二,好跑到二,我现在点一,我们来点回来好替换成一没问题,我们整块查询呢,都是跳转正确的,那么这个分页呢也都是OK的,那这一块其他的细节我就不做了,包括这一块页码输了几点一个确定跳过去,我们这些公共方案都抽取了,大家继续来调用,包括我们分页这一块你还可以做的细节,如果有100多页,我们只连续显示五六页,这块大家做过任何一类的。
20:17
管理系统自己构建过,分页逻辑肯定都做过,我就不在这儿重复再来写代码了,这块的内容呢,就留给大家细化,我的基本效果呢就全出来了,我在这儿来检索,比我们来检索华为的时候,我们整个的信息呢也能检索出来,当然大家注意我们一旦页面跳转过来以后,我们还要回想我们之前检索的这个数据,华为,所以我们在这分页条里边来control home,我们来找到我们的这个检索keyword,在模拟导航里边,我们这个搜索导航里边,我们来找这个keyword,这个input框的这个value值,我们就可以来取出来,这是th value。它的value值是什么呢?
21:00
能用Dollar符大括号,就是如果我们以前查过华为手机,我们会有一个参数叫keyword,能把这个参数呢进行回显就行了。SIM live要使用参数也非常简单,来参照SIM live的文档还是在这个附录里边,附录里边在外B的这些上下文里边,那就有一个叫参数PM到了福大括号,我们直接P取出某个参数的值就行了,来P点一个我们这个P里边呢,用过这个keyword,那么就来取出keyword,就给这一放,那么就可以回显成功了。好,我们来测试一下。CTRLF9我们来刷新页面,那现在呢,搜索的是华为,我来刷新页面,好这一块呢,显示的是华为没问题,那么整个封叶这一块的效果我们也细化好了。
我来说两句