過(guò)濾條件功能分析:
一.分類\品牌\規(guī)格的過(guò)濾
1.功能要求:在我們的搜索頁(yè)中,當(dāng)我們輸入一個(gè)關(guān)鍵字,相關(guān)商品的屬性(品牌,分類,規(guī)格等等)就會(huì)出現(xiàn)在下面.我們要做的就是根據(jù)商品的這些屬性來(lái)就行篩選.要達(dá)到的效果是:我們點(diǎn)擊品牌\分類\規(guī)格,這些篩選條件會(huì)出現(xiàn)在面包屑中,同時(shí)相關(guān)屬性的選擇框會(huì)消失,通過(guò)一步步的篩選就能得到想要的商品
2.業(yè)務(wù)思考:怎么做這個(gè)功能呢
前臺(tái)搜索條件的構(gòu)建
①:首先我們要把商品分類\品牌\規(guī)格以map的形式放入一個(gè)集合中,方便我們做面包屑時(shí)使用,需要注意的一點(diǎn)是,我們的規(guī)格是一個(gè)集合(因?yàn)橛凶右?guī)格);所以我們?cè)谶M(jìn)行具體的業(yè)務(wù)之前需要先定義出來(lái)這個(gè)集合:{'關(guān)鍵字':'','商品分類':'','品牌':'','規(guī)格':{}}
②:下一步就是增加搜索選項(xiàng)了,我們之前有一個(gè)搜索的Map集合是searchMap,我們現(xiàn)在要做的就是往這個(gè)集合中添加元素;由于商品分類和品牌列表是一樣的,但是規(guī)格是不一樣的,規(guī)格是集合的形式,所以在這里就要進(jìn)行了一個(gè)判斷---->我們定一個(gè)addSearchResult的方法,這個(gè)方法的參數(shù)是key和Value,也就是要添加的屬性和屬性值;我們?cè)龠M(jìn)行判斷,如果key是商品分類或者品牌,我們就直接在searchMap(之前的搜索條件集合)中添加就行了;如果key是規(guī)格,我們就要再點(diǎn)上規(guī)格在進(jìn)行添加;我們?cè)谶@還要添加ng-if,為的是我們?cè)诓樵儠r(shí)如果沒(méi)有多余的屬性,就不要顯示,所以加了ng-if判斷返回結(jié)果中所屬屬性的集合是不是空的,空的就不顯示
③然后在頁(yè)面上的商品分類\品牌\規(guī)格標(biāo)簽上分別綁定上方法,里面放入的是屬性(比如分類就是category)和值,然后可以在面包屑的位置寫上searchMap集合進(jìn)行測(cè)試
④:接著就是處理面包屑了,在這里有一點(diǎn)要注意:就是我們的分類和品牌這兩個(gè)屬性是寫死的,當(dāng)我們沒(méi)有點(diǎn)擊分類或者品牌時(shí),面包屑中是不能顯示的(由于規(guī)格不能寫死所以不用處理);我們采取的措施是用ng-if標(biāo)簽判斷一下我們要處理的選項(xiàng)的集合是不是空的,只有不是空的才讓它顯示
⑤:我們可以添加搜索條件,那么我們也應(yīng)該可以撤除搜索條件,就是我們可以移除面包屑中的搜索條件,換句話說(shuō)就是我們可以有一個(gè)方法可以從searchMap集合中移除元素就行了,參照add方法再controller中增加移除方法,然后在頁(yè)面找那個(gè)的搜索條件位置調(diào)用方法就行了
⑥:接下來(lái)就是隱藏查詢面板的功能:這個(gè)功能是我們選擇完一個(gè)選項(xiàng)后,就應(yīng)該讓這個(gè)選項(xiàng)框消失,想要達(dá)到這個(gè)效果也很容易,就是再在ng-if標(biāo)簽的后面再加一個(gè)判斷就行了,但是這個(gè)判斷是什么呢?我們想什么時(shí)候才讓這個(gè)選擇面板顯示呢?就是搜索條件的集合里對(duì)應(yīng)的屬性沒(méi)有值的時(shí)候就讓它顯示,一旦有值就表示用戶已經(jīng)點(diǎn)擊了對(duì)應(yīng)的選項(xiàng),就可以隱藏了;注意:這和之前的根據(jù)查詢結(jié)果隱藏面板的條件是&&的關(guān)系,需要寫在一起;還要就是規(guī)格的判斷時(shí),讓規(guī)格的對(duì)應(yīng)選項(xiàng)為null,而分類和品牌的屬性就要讓對(duì)應(yīng)的='',因?yàn)榉诸惡推放茮](méi)有時(shí)是有占位符的
⑦:既然我們?cè)谇芭_(tái)添加或者刪除了搜索條件,那么就應(yīng)該執(zhí)行響應(yīng)的方法,再js的controller中添加或者移除添加時(shí),要執(zhí)行搜索方法,重新進(jìn)行刷新搜索
后臺(tái)過(guò)濾查詢
①:我們?cè)谇芭_(tái)建立了搜索項(xiàng),那么最終的過(guò)濾業(yè)務(wù)還是后臺(tái)來(lái)執(zhí)行;怎么執(zhí)行這個(gè)業(yè)務(wù)邏輯呢?其實(shí)和關(guān)鍵字查詢差不多,在關(guān)鍵字查詢的后面再加上每個(gè)選項(xiàng)的判斷就行了,在這個(gè)業(yè)務(wù)中主要是用SimpleFilterQuery這個(gè)類的對(duì)象進(jìn)行條件過(guò)濾
②:我們添加了過(guò)濾條件后,就要在查詢方法中修改查詢品牌和規(guī)格列表,不過(guò)在真正執(zhí)行業(yè)務(wù)之前,需要進(jìn)行判斷,先判斷從搜索條件中獲取的分類選項(xiàng)是不是空的,如果有值,就按這個(gè)分類選項(xiàng)進(jìn)行查詢;如果是空的就要從上面按照關(guān)鍵字查詢的商品分類集合中的值進(jìn)行查詢,當(dāng)然在這里面也要進(jìn)行判斷,只有這個(gè)集合的長(zhǎng)度大于0時(shí)(有值時(shí)),才進(jìn)行查詢
二. 價(jià)格區(qū)間的過(guò)濾
1.功能要求: 我們這個(gè)價(jià)格區(qū)間的搜索呢也很常見(jiàn),就是前臺(tái)頁(yè)面上,有多個(gè)價(jià)格區(qū)間,比如0-500,500-1000,1000-2000,....我們點(diǎn)擊這些區(qū)間,就會(huì)增加搜索條件來(lái)幫我們進(jìn)行商品的篩選
2.業(yè)務(wù)思考:
前臺(tái)條件的構(gòu)建:
這個(gè)功能和前面的分類品牌差不多,前臺(tái)要做的就是把用戶選中的價(jià)格區(qū)間傳到后臺(tái),這里頁(yè)面上的操作就不多敘述,注意就是:面包屑上不要忘了加上價(jià)格這個(gè)選項(xiàng);還有就是js中的controller的搜索條件的集合中加上價(jià)格,增加和刪除條件中也要加上價(jià)格這個(gè)選項(xiàng)
后臺(tái)的業(yè)務(wù)邏輯
后臺(tái)的和前面的邏輯也差不太多,就是我們要用一個(gè)數(shù)組來(lái)接收我們傳進(jìn)來(lái)的幾個(gè)區(qū)間的最小價(jià)格和最大價(jià)格,用的是一個(gè)api,就是split("-"),返回的數(shù)組中,0號(hào)元素是最小值,1號(hào)元素是最大值;這個(gè)價(jià)格的過(guò)濾就復(fù)雜在下面:我們要在這進(jìn)行兩個(gè)判斷,一個(gè)是看看最小結(jié)果是不是0,是0就不用進(jìn)行下面的邏輯(其實(shí)就是為了做出0<**<=500而不影響其他幾個(gè)區(qū)間判斷的效果),如果不等于0,就加上過(guò)濾條件:大于最小價(jià)格;同理,對(duì)于最大價(jià)格也是這樣操作,因?yàn)槲覀冏詈蟮膮^(qū)間是3000-*,后面是沒(méi)有限制的,所以判斷最大價(jià)格是不是*就可以了,是*不進(jìn)行操作,讓它只大于等于最小價(jià)格好了
