00:00
那我们就来分析一下这个功能,其实就是当我们取消了这个面包屑以后,我们要做的就是取消掉我们这个查询条件,而这个查询条件呢,我们肯定在UR上有,比如我们点击了CPU品牌,我这肯定会拼上at ts等于什么,我们只需要做到最简单的方式就是将请求地址的那一块URL给它替换掉就行了,将请求地址的URL替换掉,特别是地址的URL里边的当前条件给它替换掉,也就是质空,我们给它质控,这样呢我们就相当于删除了这个筛选条件了,那相当于我们取消掉这个面包屑,那这个条件呢,也就跟着删除了。那想要做这个功能也是非常简单的,比如我们来参照页面,我选中了某一个CPU品牌以后,我点一下。诶,我们发现这一块呢有问题,如果我们选中了CPU品牌,他把这一块给拼成keyword了,这块keyword的话,那肯定就是我们这个页面,我之前改的有问题,来打开找到页面,这块页面呢,我们来之前有一个方法叫search products,比如说我们选中这些商品的这个属性的时候,我们会调用search products,我们改ATS属性,但这个search products呢,我们改的时候给它变成了keyword,应该是我们指定的这个name值,好把它复制过来,CTRLF9。
01:25
我们页面重新刷新一下,好现在我来刷新来保证呢,我来点海思好拼的确实是at t RS,那就是这个,那说明我们这一块呢,查询是没什么问题的,他这服务器还内部500,我们这个连接可能有点问题,好我们来重新刷一下,因为我们要远程调用服务可能不稳定,也要说请求的UI地址会给我们带上这些查询条件,我们要做的呢,就是把当前查询条件从这剔除掉,所以呢,我们应该在这我们的service里边拿到我们所有的查询条件,然后呢,把当前的去掉,那就是点击当前我们要跳的地方,拿到所有的查询条件,去掉当前,去掉当前,那这个方法怎么做呢?其实在我们service里边可能比较麻烦,那在controller里边就简单了,Controller可以直接获取到我们整个请求的所有查询条件,那这个查询条件怎么获取?我们可以在这传入原生的HTTP。
02:26
Serve let request在request里边呢,有一个方法叫get query string,诶叫查询字符串,它呢可以帮我们拿到我们当前的后边这一串完整的查询字符串,我们只需要替换掉当前的,那拿到它以后我们就来替换result里边的数据,那么就直接交给service,如果在这来改方法签名比较麻烦,我呢就在search p里边,我来添加上一个新的属性private string,那么这个属性呢,就叫杠URL,杠就代表我们的原数据,诶这个相当于获取我们的应该不叫URL,我们就叫corry string我们的查询字符串,诶,我们原生的查询条件,原生的所有查询条件,这个都是从页面传来的,那么就在这儿来封装一下,把这个条件拿来以后,我们在power里边封装好set我们的杠corry string,把这个东西呢,放在这儿,我们以后呢,服务我们serve。
03:26
Always就能直接拿到我们的P里边就有封装内容了,我们来点进来,接下来呢,我们来继续,那么在这来检索的时候,最终封装的时候,我们要去掉当前条件,去掉怎么去,我们先从P里边找到我们当前所有的查询条件杠corry string,然后呢,我们点一个re replaces,我们来替换,替换什么呢?反正把它制空替换我们来看,因为前端会给我们传来at t RS等于15海思,相当于如果我们便历的话,便历所有at t RS,那么当前正在便历的这个at tr就是什么二五寸,我们在这还分割了,所以我们应该替换的就是由于我们当前遍历的是后边这一串,这个呢是属性名,等于我们后边这一串值,我们遍历的是值,所以呢,我们要替换的是at t RS等于我们当前正在变历的这个值,加上我们当前正在变历的值,我们叫at tr相当于我们呢,去掉它就行了,而且呢。
04:26
它肯定是在谁的后边平着的,所以呢,我们把这个暗的符跟着一起替换掉,好把这个呢一起替换掉,我们把它最终置为空得到的这个。替换了的这个地址,那就是我们最终想要跳去的地址,那么这个navy will,点一个set link,那要跳去哪呢?我们现在就来指定一个路径,这个路径呢,由于我们现在只得到是查询字符串,所以呢,我们把前面这一串我全部拿来,CTRLC,我们就叫HTTP冒号双斜杠,好前面这一串,然后呢,再来加上我们后边的问号。
05:05
问号,问号相当于得到了我们替换后以后新的所有的查询字符串,好,我们把它在这一放,这就是我们要跳去的位置,然后这一块写好了以后呢,我们来打一个断点,做一个单元测试,而且给我们这个方法呢,在这儿也打一个断点,我们来看它最终设置的这个值对不对,我们来重新启动我们的这个服务,我们以debug模式来启动。然后呢,我们就在这儿来进行测试,我们来看对不对,我们来看一下有没有启动成功,好我们这一块呢,现在已经启动成功了,那现在就来在页面在这来测试,那么就来直接来选中手机好来测试走,那服务呢还没启动成功,我们再来测一下走。好,现在呢,进到debug模式,好,我现在进到我们的这个service,那我们就应该直接进来看我们的下一个断点,我来放行,我们来看封装,诶这一块呢,出现了异常,我们来看页面,现在是空指针异常,我们340行,我们来找一下空指针异常点进来,诶那就是在这at ts,那在这相当于便利给它封装面包屑的时候,那对了,我们因为传了at ts查询条件,我们才需要封装面包屑,不传呢,我们这一块是空的,空的在这调用stream,那就控制帧异常,我们在做所有事之前,我们先来判断这个at t RS,因为它是一个集合,不等于呢,并且呢它它呢size是大于零的,我们就有必要来干下边的事,然后呢,我们来写一个大括号们下边的所有的处理,我们全部都放在这个判断里边,好,我们现在来重新启动们一得bug模式进来,那现在我们这个页面呢,我们就先来查手机。
06:46
然后我们来选中这个条件,我们来看能不能构建出面包线,好,我们把这一块控制台,我来等待它启动成功,我们来清空控制台,我们来选择一下,好,我们来选中手机回车,我们来刷新一下,好,现在呢,我们来看debug进入到我们这里边,我们来放行,放行以后呢,我们先查到所有的手机,来选中某一个条件以后,好,我来选中海子点,好我们现在debug来放心断点走,来看我们的封装,诶这一块呢,我们应该有封装东西。
07:16
当发现呢,没有debug断点给我们停到我们的封装这一块,那么这一块封装有没有打断点呢。诶,我们之前用于加了我们的判断这些代码,那么这个断联呢,可能失效了,我们来要重新打一下。好,我们在set link的时候,我们来给它打上断点,好来,重新来,先来走们来看我们的这一块,我们来封装面包屑,走,好,我们这个面包蟹呢,我们来看repl,那们想要替换的就是这个15号海丝,因为它。整个corry string,它的这个查询字符串,我们来看这有,诶,Keyword是什么,包括at tr是十五百分号,什么这块百分号呢,它是字符编码以后的结果,然后呢,我们在这替换,替换完了以后,应该后边没有这一串,但我们发现替换的结果呢,还有这一串,有的原因我们也看到了,我们想要替换的呢,是中文的,叫什么15杠海思,然而人家实际上呢,是15杠海思这一块呢,还给编码了,所以我们必须编码以后,我们才能进行字符串替换,我们这个at tr得进行中文编码,好由于我们前端传来的整个URL参数,我们进行编码了,所以我们这一块来整一下,怎么弄呢?我们有一个叫urco,我们叫URL urlco。
08:37
好,那相当于这个呢,URL的这个编码器,它呢有一个方法叫code编码,我们把我们的这个中文编成指定的格式,比如我们就叫UTF杠八来编成这个,因为我们现在全系统都是UTF8,那么in code的字符串,这才是我们要进行替换的,要不然中文它没法识别,好,我们来再让它。
09:01
直接down with the try catch,那们这个方法写了以后呢,我们来重新启动,我们来重新启动,然后呢,我们来重新给它打断点,我们来看一下我们编码的这个效果。好,重新启动起来,之前没有编码,没有替换掉我们编码了以后呢,我们来给这儿打一个断点,来看一下我们最终的效果,好,我们在这儿来等待。我们后台的整个启动成功,我们来清空控制台,我们现在来重新测试一下。好,我们现在来查at tr15海思,我们想要替换掉我们这个条件走。我们来到我们的debug断点,我们来直接放行到我们这。好,现在呢,我们来看in扣的编码以后的这个东西,它还叫at tr,那我们写错了,那这一块呢,不应该是双引号,好,应该是把我们真实的at tr给我们进行编码,我们来重新启动一下吧,走,我们再来在这进行测试,回车来刷新一下,好,现在呢,我们debug进来,我们直接放行到我们这。
10:02
我们现在来进行替换,先看我们中文编码后的,诶编码后呢,就是这一串来看能不能替换成功,诶我们发现呢,后边的at tr替换成功了,那我们的取消这个条件以后,整个link地址那就是我们自己拼装了,我们来看我们的link地址,我们在这个na VO里边set link,诶这就是我们新要去的地方,没有了当前的at tr属性,好我来放行,那么这一块呢,就是封装是正确的,我把这一块断点都去掉,那正确的以后呢,相当于我们result里边,页面上呢,就会有这个导航信息,我们的na VO,那接下来我们就在页面把这个导航取出来就行了,好,我们来到我们的list页面。我们先来审查元素,我们就放在手机后边来看一下这一块,我们来找到这个元素,这个A标签里边呢,有一个叫手机的,我们来找一下CTRLC。CLF来找。再来找,那么这个手机呢,是我们分类这边好就在这儿,那么在它的后边呢,来导入我们的面包屑导航,我们在这来便利便利我们的这个面包线功能,这个功能遍利呢,我们就来这么来写,我们把这个呢不写在这个手机里边,一些手机里边跟它就共用一个这个框了,我们看人家这个框呢,是一个div什么什么,那么也复制一个这个div啊杠,那这里边呢,就是我们的面包屑导航功能,我把这个拿过来,这个导航功能呢,我们就跟人家一样,这一块呢,还有什么div,我们先来直接写一个A标签,好这个A标签,A标签里边的内容,那就是我们的名字and我们的值,而这个名值呢,我们可以这么来取到,好,我直接写一个这样的,我们在里边写两个span,前面的span呢是明,后边的N呢是值,而我们到底有多少个面包屑,我们还要。
11:58
变历,所以我来写一个TH,我们从result里边Dollar幅大括号result我们返回到结果里边,我们封装了所有的面包线,我们就叫nay VO啊,就是这个navis,好,每一个nay呢,我们拿过来,我们拿到它里边的名字,名字呢我们就是th test。
12:19
等于我们Dollar符大括号,我们这个navy里边我们有我们的navy name,这就是我们的名字,而我们的值那就是两个SPA,我们用这个冒号给它隔开,它选中的值那就是我们来写th test,它选中的值呢,那就是Dollar福大括号,那当前navy点一个我们选中的值是叫navy value。而点击我们这个A标签,我们这个A标签呢,里面还有一个叉叉,那么就来写一个叉来模拟我们这个叉,点击这个叉呢,我们要跳到一个地方,跳到哪呢?我们就来写一个RF,我们的地址呢是Dollar福大括号们那里边呢也封装了,这个叫link,好我来CTRLF9来看一下页面效果,我们来刷新一下页面,我来刷新,好我们导航这里边呢有一个CPU品牌海思没问题,我们选中了海思就有海思,我们再来选中个型号,我点过来,那么这个呢,就应该再追加一个我们的CPU型号,但我们发现这一块呢没有追加,那先来看,那现在来我们选了一个型号,我再来选一个品牌,那这肯定是我们前端页面的问题,那还是这个属性选的时候我们是使用search products方法,我们来找一下CRLF,我们叫search products方法。
13:47
这个方法呢,我们在这是replace或者and,对了,我们如果要选属性的话,它默认呢是给我们进行replace操作的,但我们属性啊,我们有多个选择,所以我们在后边无论之前有没有我们都是要追加的,所以我们把这个方法呢,再来改为一个可强制添加的,比如后边给我传一个触货false是不是我们直接进行添加而不是替换,那来到我们这个方法呢,我们就来判断一下,我们这有一个强制添加,我就叫false and,如果我们这个false and是强制添加,那么就不进行这个替换流程了。
14:23
所以我们在这来判断一下,那么首先如果没有就添加,有呢,它这就替换,这下边呢,这是这块呢,这是有的流程,那么得来判断一下替不替换,我们这个说了算,如果false and,我们是强制添加模式,那么就不替换了,否则呢,我们就来进行替换,替换呢是下边这一串,而强制添加模式是我们下边这一串,我们把这一个拿过来,CTRLX,诶CTRL应该CTRLCCTRLV来剪过来,CTRLF9好,我们现在来看一下页面效果,我来刷新,我们选中了15号是CPU品牌海思,我们再来选个型号点来,我们现在呢,添加上来了,来取掉一个,如果我们去这个的话,我们拼的这个地址呢,那就应该筛选条件不带这个,那我们来看一下这个效果,那放到这个970上,那这个970拼装的这个筛选条件,诶,它居然还带970了,那我们来放。
15:24
海丝上,哎,我们放到海丝上呢,确定海斯确实没有带970。那这是什么问题呢?我们可以来看一下,因为我们在这来取消970的时候,再说一下这个特殊问题,我们这个这个字符中间有一个空格,这个空格呢,它被编码成20%是这个,然后呢,来到我们如果自己已经扣的话,我们来看一下,那Java是如何UUTF8来解析这个20%的,那在这来取消一个,好,我们来断点打到这儿来看,我们现在拿到的是。我们这个15杠海思,我没有空格的,一切都是正常的,我们给它放行,但如果是16,我们来看16呢,如果被我们一编码以后,我们编码呢,把空格改为加号了,但是呢,我们实际上前端这一块呢,是百分号,所以呢,我们从URL地址上肯定找不到我们这个加号,因为这个URL地址啊,它是百分号的这种方式来看一下我们的这个效果,我们ul地址,我们的corry string来无U来看一下它呢,这是一个百分20的方式,所以大家注意,如果有空格一定得进行特殊处理。
16:38
也就是说我们编码后的这里边儿空格被翻译成加号以后呢,我们接下来在下边再把所有的加号应该替换replace,我们里边呢有加号,我们应该替换成什么,我们这这个呢,就是我们看前端编码呢是20%,这就是浏览器给我跟我们这个Java的一些差异化处理,我们就是浏览器。
17:05
对空格的编码和咱们这个渣va不一样,不一样,所以呢,我们得差异化处理,处理完了以后呢,最终应扣的就应该等于替换后的这个值,那么重新来启动测试一下,好,我还是以debug模式,这两个断点呢,就已经失效了,我们来给它去掉,那之前呢,我们是在这来选择带空格的这些属性值的时候,它没法取消掉选择,那我们看现在我们把加号改为20%,替换以后能不能有正确的结果来测试一下我们的效果。好,我们在这来看一下,来选中还是这两个,我们先从手机开始,好来查所有的手机来刷新一下。好,现在呢,我们筛选到手机,我选中一个海思,好,我们海思呢有,而且我们放在上边,他把海思这个条件确实去掉了,我再来选中一个970带空格的,我们再放在970这边来看,诶他把970去掉了,把海思留下了,那我们的这一块品牌筛选其实效果呢就出来了,我们叉掉它以后,确实只留下了海思这个筛选选项,好,我们把它叉掉。
18:18
我们再来擦掉海思走,那就拥有更多的选项了,那么面包屑导航这块呢,我们就做好了。
我来说两句