类似于京东商城等的商品分类搜索筛选功能实现
?
前言
隨著電子商務的迅速發展,各大專業和獨立蓬勃而出。如京東,凡客等為眾人皆知的。作為一個技術領域的人來說,我們會更多的看到其中的技術差別。今天我們就來說一下搜索結果中的篩選功能實現。這個問題有不少的朋友經常問起他的實現原理,在這里我以我的實現方法來給大家講解一下。以期起到拋磚引玉的作用,希望能夠幫助到大家。
效果預覽
效果1:
效果2:
提供2張效果圖的預覽。如果您看不到圖片,請前往相應的網址查看。
效果1網址:http://sports.8t8x.com/product/yumaoqiu.htm
效果2網址:http://sports.8t8x.com/product/lunhuahuabang.htm
實現原理
這個功能的實現,歸根到底,是數據庫的設計問題。如果你的數據庫設計得比較好,那么實現起來是件輕而易舉的事情。另一方面,是網址傳參上的難度。由于需要對搜索引擎的收錄比較友好,通常商城類型的網址,都要進行url重寫。本文將著手于這兩方面給大家講解。
數據庫設計
商品分類表
搜索屬性表
搜索屬性“值”表
一共是3張表。設計上比較簡單。
簡單歸簡單,但是要注意看清中間的關系。另外要注意表中的冗余字段運用。這可以為你在設計表的時候省去不少麻煩。當然如果數據頻繁更新,你要記得同步數據。
?
后臺程序實現
先看一下我們的界面圖
這是屬性綁定。我們的商品屬性很多。如果你們沒有屬性表,可以自己逐個添加屬性名稱即可。我們的實現是直接在系統的商品屬性中選取的。后面的數字文本框,是指排序。
綁定的屬性名稱后,我們就會得到下圖所示的一個商品屬性表。當然,剛開始綁定的時候,“屬性值”是空的。這里您看到“屬性值”這一列中有值,是因為我們已經綁定好了。
上面是“屬性”表。下面這張圖是為這些“屬性”添加“屬性值”。這些值,將被前臺顯示。具體的顯示效果,您可以看上面網址中的實際效果。
效果1網址:http://sports.8t8x.com/product/yumaoqiu.htm
效果2網址:http://sports.8t8x.com/product/lunhuahuabang.htm
很好,相信提供的這些頁面步驟,已經能夠讓您了解到了后臺的制作的整個過程,至于數據庫的數據添加修改和刪除功能,這是每一個程序員最基本的,這里沒有什么技術含量,您直接代碼實現即可。
上面的后臺程序實現中,有個關鍵點,就是里面有一個字段叫“搜索值”。這個搜索值,是用來查數據庫的。前臺顯示成“尤尼克斯/Yonex”,但是我們的數據庫中實際存放的值可能并不是它。而是“尤尼克斯”這個值,所以,需要進行區分。
前臺程序實現
由于需要實現Url重寫。您在演示網址中,能夠看到我們的演示網址,是已經實現了URL路徑重寫功能的。這里需要注意的點是:“由于你不知道用戶會使用哪個篩選條件,所以,你在URL中,必須要保持用戶的所有已經選擇的篩選條件”。您可以在演示網址中,看到這種網址變化效果。
那么這個網址的篩選是如何實現的呢?
首選是路徑重寫的配置。
這個配置的實現效果在http://sports.8t8x.com/product/yumaoqiu-85-81-97.htm中可以全部看到。這個網址,已經選取了相關的選項。譬如演示圖中的“品牌”、“重量”、“價格”。我們需要將用戶已經選擇的這些多個條件在URL網址中保持起來。
還是以上面給的演示URL路徑來講解。http://sports.8t8x.com/product/yumaoqiu-85-81-97.htm經過URL重寫后,我們的RequestQuerystring["SearchPropertyID"]會得到這樣的一個值:“-85-81-97”,是一串數字。我們需要對它進行解析,并保存下來,這一串數字代表了它們是用戶已經選好了篩選條件。
解析URL參數的代碼如下:
int[] searchPropertyValueIDArray = null;
#region 解析Url屬性參數
??????????? //解析Url傳的屬性參數
??????????? if (!string.IsNullOrEmpty(searchPropertyIDReq))
??????????? {
??????????????? ArrayList tempSearchPropertyValueIDArrayList = new ArrayList();
??????????????? string[] tempSearchPropertyValueIDArray = searchPropertyIDReq.Split('-');
??????????????? foreach (string item in tempSearchPropertyValueIDArray)
??????????????? {
??????????????????? if (string.IsNullOrEmpty(item))
??????????????????? {
??????????????????????? continue;
??????????????????? }
??????????????????? try
??????????????????? {
??????????????????????? Convert.ToInt32(item);
??????????????????? }
??????????????????? catch
??????????????????? {
??????????????????????? continue;
??????????????????? }
??????????????????? tempSearchPropertyValueIDArrayList.Add(Convert.ToInt32(item));
??????????????? }
??????????????? searchPropertyValueIDArray = (int[])tempSearchPropertyValueIDArrayList.ToArray(typeof(int));
??????????? }
??????????? #endregion
?
?
前臺顯示綁定的時候事件代碼如下:
protected void SearchPropertyValueRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
??? {
??????? if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
??????? {
??????????? string curPropertyName = DataBinder.eval_r(e.Item.DataItem, "PropertyName").ToString();
??????????? string curPropertyValue = DataBinder.eval_r(e.Item.DataItem, "PropertyValue").ToString();
??????????? string curPropertyValueID = DataBinder.eval_r(e.Item.DataItem, "ID").ToString();
??????????? bool isHasCurrentPropertyName = false;
??????????? int? urlPropertyValueID = null;
??????????? if (searchPropertyValueIDArray != null)
??????????? {
??????????????? foreach (int searchPropertyValueID in searchPropertyValueIDArray)
??????????????? {
??????????????????? Sports_Category_SearchProperty_Value sports_Category_SearchProperty_ValueEntity = CategoryCache.SelectCategorySearchPropertyValueByID(searchPropertyValueID);
??????????????????? int searchPropertyID = sports_Category_SearchProperty_ValueEntity.SearchPropertyID;
??????????????????? Sports_Category_SearchProperty sports_Category_SearchPropertyEntity = CategoryCache.SelectCategorySearchProperty(searchPropertyID);
??????????????????? if (sports_Category_SearchPropertyEntity.PropertyName == curPropertyName)
??????????????????? {
??????????????????????? urlPropertyValueID = searchPropertyValueID;
??????????????????????? isHasCurrentPropertyName = true;
??????????????????????? break;
??????????????????? }
??????????????? }
??????????? }
??????????? string searchPropertyIDUrl = "";
??????????? if (searchPropertyValueIDArray != null)
??????????? {
??????????????? foreach (int searchPropertyValueID in searchPropertyValueIDArray)
??????????????? {
??????????????????? if (searchPropertyValueID != urlPropertyValueID)
??????????????????? {
??????????????????????? searchPropertyIDUrl += "-" + searchPropertyValueID.ToString();
??????????????????? }
??????????????? }
??????????? }
??????????? //具體屬性
??????????? Literal litPropertyValue = (Literal)e.Item.FindControl("litPropertyValue");
??????????? if (isHasCurrentPropertyName)
??????????? {
??????????????? if (urlPropertyValueID != null && urlPropertyValueID.ToString() == curPropertyValueID)
??????????????? {
??????????????????? litPropertyValue.Text = "<a href=\"http://sports.8t8x.com/product/" + cNo + searchPropertyIDUrl + "-" + curPropertyValueID + ".htm\" class=\"curSearchProperty\" isCurrent=\"true\">" + curPropertyValue + "</a>";
??????????????? }
??????????????? else
??????????????? {
??????????????????? litPropertyValue.Text = "<a href=\"http://sports.8t8x.com/product/" + cNo + searchPropertyIDUrl + "-" + curPropertyValueID + ".htm\" class=\"normal\">" + curPropertyValue + "</a>";
??????????????? }
??????????? }
??????????? else
??????????? {
??????????????? litPropertyValue.Text = "<a href=\"http://sports.8t8x.com/product/" + cNo + searchPropertyIDUrl + "-" + curPropertyValueID + ".htm\" class=\"normal\">" + curPropertyValue + "</a>";
??????????? }
??????? }
??? }
?
如此,我們就正式完成了這一個篩選的效果設計。
?
也許您會問,我有了“搜索的屬性值”,要怎么去查找出商品呢,怎么出價格區間呢?模糊匹配會不會影響性能呢?是的。這是需要注意和解決的問題。
在我們的程序里,用的商品分類索引,然后再用模糊匹配,性能很高。價格區間,是按價格來進行Sql中的between篩選的。
請回頭看我們的這張圖:
您在圖中會看到一關鍵的地方,叫“屬性類型”。您在截圖上,只能看到“字符串”這一種,實際中,下拉列表中我們還有一種,叫“貨幣”。這些類型的不同,決定了,解析方式的不同。您現在應該不會感到困惑了吧?!
?
關于文章作者的介紹
馬志遠(Marc),1981年,2002年湖北大學肄業,現蝸居廣州。2004年學習編程,至今已經有8年的編程經驗,長期從事asp.net B/S方面的開發和設計。在項目解決方案上、在項目性能和擴展等上,具有深強的能力。您可以使用mazhiyuan1981@163.com與我取得聯系。
轉載于:https://www.cnblogs.com/mazhiyuan/archive/2011/06/16/mazhiyuan.html
總結
以上是生活随笔為你收集整理的类似于京东商城等的商品分类搜索筛选功能实现的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Windows 8 HTML5/JS评论
- 下一篇: 在Python Shell中输入prin