電商網站首頁商品分類列表功能實現


首先我們看下這個功能實現的效果:

后期理解補充:

其實這個功能的關鍵點就是分析這個模塊的數據格式怎么樣的?

對於這種商品列表展示的功能:

我們思路如下:

第一:開始展示的都是頂級列表,即parentId為0,即每頁父類,他就是最頂級的。

第二:根據數據格式分析各級的區別:頂級與二級的區別,二級與三級的區別(這些區別就是在寫代碼時候的條件約束)

第三:子列表包含子列表,這里使用遞歸調用。即將根據本身的id作為父類id傳遞給函數本身,進行查詢子類,即子類的parentId就是這個對象的id。

第四:調用方式:采用jsonP調用還是httpClient調用。

如果是jsonp調用的話,需要在controller層接收callback函數,因為jsonp調用就是js中有這個函數,而在另一個地方需要使用這個函數。

前台頁面出現亂碼的解決方案:

至於這個MediaType作用是什么,感覺就是解決前台亂碼的作用,返回json格式的數據。

 

 

 

這篇博文主要是分析很多大型網站采用這種方式來顯示這樣的列表的功能。

首先:

首先弄明白,什么樣子的才能成為父節點:即含有子節點的節點才為父節點。無子節點的稱為葉子節點。

其中最左側是parentId為0的父節點,我們成為一級節點,全部現在在左側,這是一個在程序中可以使用List集合類存放。

當點擊左側的每個鏈接時,會顯示右側的數據,而右側紫色框框的也是一個二級父節點,當點擊每個二級節點時,下面會有幾個子節點的url,這時候這些節點沒有孩子了,是葉子節點。

這幾個列表都是這樣的結構。

我們看下這個數據格式在數據庫中是如何存儲的:

這是所有的一級父節點:

上圖是既有父節點也有子節點,每個節點都有唯一的id,但是他們is_parent這個1表示是父節點,0表示是葉子節點。

或許上面的還不夠清楚,我們再看下圖:

這里用到了分析json數據顯示的jsonView工具:

分析這個數據:

 

 

從上面我們可以看到這個數據的格式,每個都有一個url,name,i集合列表。url是點擊時的鏈接,name是代表這個名字,i是它的子列表,然而自列表也是保護u,n,i的格式,但是注意第三層就只要一個葉子節點了。

補充:我們這里需要注意區別:頂級菜單的名稱與二級菜單的名稱的類型是不一樣的,即格式是不一樣的。所以這里需要進行區別。

       二級菜單與三級菜單的格式是不一樣的。

所以我們這里需要進行分析,從數據庫中讀取這些內容:

具體分析如下:

 

 

1.傳入的參數

首頁顯示商品列表,無參數請求,但是我們這里是利用了jsop的跨域請求(具體見上一篇博文),即protal客戶端,訪問rest服務端的數據,所以有個callback的回調。

2.返回值的格式

這里采用的方式可以借鑒下:設立了兩個pojo對象來裝載這個數據列表:

一個是:

(1)對應的數據格式的pojo類:

public class ItemCat {

     //轉換成json數據時使用u作為key,利用springMVC這個注解可以實現名稱的轉換

     @JsonProperty("u")

     private String url;

     @JsonProperty("n")

     private String name;

     @JsonProperty("i")

     private List<?> item;

}

(2)一個是對應的最后的結果,即父節點為0的剛開始顯示的大類目的pojo類:

 

public class ItemCatResult {

 

     private List<?> data;

 

     public List<?> getData() {

 

         return data;

 

     }

 

     public void setData(List<?> data) {

 

         this.data = data;

 

     }

2相當於是1的父親,是一個大的框架,1是它的孩子列表。

 

這里的返回格式我們需要注意下:

3.service和controller的實現。

這里的controller的實現是利用jsonp的形式,一種新的方式來返回的:

service主要是查詢列表,返回上面的兩個pojo對象:

這里的service層獲取這個列表采用了遞歸的算法,比循環好用很多。中間加上約束條件:比如葉子節點的不同,一層目錄和二層目錄的,中二層目錄的name沒有<a href>的標簽。

關於遞歸的理解,大家可以上網百度下:歸根到底就是循環調用函數自身。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM