博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
类似于京东商城等的商品分类搜索筛选功能实现
阅读量:5964 次
发布时间:2019-06-19

本文共 4802 字,大约阅读时间需要 16 分钟。

 

前言

    随着电子商务的迅速发展,各大专业和独立蓬勃而出。如京东,凡客等为众人皆知的。作为一个技术领域的人来说,我们会更多的看到其中的技术差别。今天我们就来说一下搜索结果中的筛选功能实现。这个问题有不少的朋友经常问起他的实现原理,在这里我以我的实现方法来给大家讲解一下。以期起到抛砖引玉的作用,希望能够帮助到大家。

效果预览

    效果1:

    
    效果2:

    

    提供2张效果图的预览。如果您看不到图片,请前往相应的网址查看。

    效果1网址:
    效果2网址:实现原理

    这个功能的实现,归根到底,是数据库的设计问题。如果你的数据库设计得比较好,那么实现起来是件轻而易举的事情。另一方面,是网址传参上的难度。由于需要对搜索引擎的收录比较友好,通常商城类型的网址,都要进行url重写。本文将着手于这两方面给大家讲解。

数据库设计

    

    商品分类表

    

    搜索属性表

    

    搜索属性“值”表

    

    一共是3张表。设计上比较简单。

    简单归简单,但是要注意看清中间的关系。另外要注意表中的冗余字段运用。这可以为你在设计表的时候省去不少麻烦。当然如果数据频繁更新,你要记得同步数据。

 

后台程序实现

    先看一下我们的界面图 

    这是属性绑定。我们的商品属性很多。如果你们没有属性表,可以自己逐个添加属性名称即可。我们的实现是直接在系统的商品属性中选取的。后面的数字文本框,是指排序。   

    
    绑定的属性名称后,我们就会得到下图所示的一个商品属性表。当然,刚开始绑定的时候,“属性值”是空的。这里您看到“属性值”这一列中有值,是因为我们已经绑定好了。
                 上面是“属性”表。下面这张图是为这些“属性”添加“属性值”。这些值,将被前台显示。具体的显示效果,您可以看上面网址中的实际效果。   

    效果1网址:http://sports.8t8x.com/product/yumaoqiu.htm

    效果2网址:

    

    很好,相信提供的这些页面步骤,已经能够让您了解到了后台的制作的整个过程,至于数据库的数据添加修改和删除功能,这是每一个程序员最基本的,这里没有什么技术含量,您直接代码实现即可。

    上面的后台程序实现中,有个关键点,就是里面有一个字段叫“搜索值”。这个搜索值,是用来查数据库的。前台显示成“尤尼克斯/Yonex”,但是我们的数据库中实际存放的值可能并不是它。而是“尤尼克斯”这个值,所以,需要进行区分。

前台程序实现

    由于需要实现Url重写。您在演示网址中,能够看到我们的演示网址,是已经实现了URL路径重写功能的。这里需要注意的点是:“由于你不知道用户会使用哪个筛选条件,所以,你在URL中,必须要保持用户的所有已经选择的筛选条件”。您可以在演示网址中,看到这种网址变化效果。

    那么这个网址的筛选是如何实现的呢?

    首选是路径重写的配置。

    

    这个配置的实现效果在中可以全部看到。这个网址,已经选取了相关的选项。譬如演示图中的“品牌”、“重量”、“价格”。我们需要将用户已经选择的这些多个条件在URL网址中保持起来。

    还是以上面给的演示URL路径来讲解。经过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=\"" + cNo + searchPropertyIDUrl + "-" + curPropertyValueID + ".htm\" class=\"curSearchProperty\" isCurrent=\"true\">" + curPropertyValue + "</a>";
                }
                else
                {
                    litPropertyValue.Text = "<a href=\"" + cNo + searchPropertyIDUrl + "-" + curPropertyValueID + ".htm\" class=\"normal\">" + curPropertyValue + "</a>";
                }
            }
            else
            {
                litPropertyValue.Text = "<a href=\"" + cNo + searchPropertyIDUrl + "-" + curPropertyValueID + ".htm\" class=\"normal\">" + curPropertyValue + "</a>";
            }
        }
    }

       

 

    如此,我们就正式完成了这一个筛选的效果设计。

 

    也许您会问,我有了“搜索的属性值”,要怎么去查找出商品呢,怎么出价格区间呢?模糊匹配会不会影响性能呢?是的。这是需要注意和解决的问题。

    在我们的程序里,用的商品分类索引,然后再用模糊匹配,性能很高。价格区间,是按价格来进行Sql中的between筛选的。

    请回头看我们的这张图:

    

    您在图中会看到一关键的地方,叫“属性类型”。您在截图上,只能看到“字符串”这一种,实际中,下拉列表中我们还有一种,叫“货币”。这些类型的不同,决定了,解析方式的不同。您现在应该不会感到困惑了吧?!

 

关于文章作者的介绍

    马志远(Marc),1981年,2002年湖北大学肄业,现蜗居广州。2004年学习编程,至今已经有8年的编程经验,长期从事asp.net B/S方面的开发和设计。在项目解决方案上、在项目性能和扩展等上,具有深强的能力。您可以使用与我取得联系。

转载于:https://www.cnblogs.com/mazhiyuan/archive/2011/06/16/mazhiyuan.html

你可能感兴趣的文章
Python访问PostGIS(建表、空间索引、分区表)
查看>>
quick-cocos2d-x开发环境Lua for IntelliJ IDEA的安装
查看>>
Target-Action回调模式
查看>>
换个红圈1微信头像恶搞一下好友
查看>>
Socket网络编程--简单Web服务器(3)
查看>>
ylbtech_dbs_article_五大主流数据库模型
查看>>
Java并发专题 带返回结果的批量任务运行 CompletionService ExecutorService.invokeAll
查看>>
10行Python代码解决约瑟夫环(模拟)
查看>>
一个简单好用的日志框架NLog
查看>>
超级硬盘数据恢复软件 4.6.5.0注冊码破解版
查看>>
一款基于jquery和css3实现的摩天轮式分享按钮
查看>>
Android创建启动画面
查看>>
Linux中date命令的各种实用方法--转载
查看>>
mysqld -install命令时出现install/remove of the service denied错误的原因和解决办法
查看>>
玩家游戏状态
查看>>
Android 小技巧-- TextView与EditText 同步显示
查看>>
苹果企业版帐号申请记录
查看>>
C++ Error: error LNK2019: unresolved external symbol
查看>>
Bitmap 和Drawable 的区别
查看>>
Java操作mongoDB2.6的常见API使用方法
查看>>