类似于京东商城等的商品分类搜索筛选功能实现
前言
随着电子商务的迅速发展,各大专业和独立蓬勃而出。如京东,凡客等为众人皆知的。作为一个技术领域的人来说,我们会更多的看到其中的技术差别。今天我们就来说一下搜索结果中的筛选功能实现。这个问题有不少的朋友经常问起他的实现原理,在这里我以我的实现方法来给大家讲解一下。以期起到抛砖引玉的作用,希望能够帮助到大家。
效果预览
效果1:
效果2:
提供2张效果图的预览。如果您看不到图片,请前往相应的网址查看。
效果1网址:http://sports.8t8x.com/product/yumaoqiu.htm
效果2网址:http://sports.8t8x.com/product/lunhuahuabang.htm
实现原理
这个功能的实现,归根到底,是数据库的设计问题。如果你的数据库设计得比较好,那么实现起来是件轻而易举的事情。另一方面,是网址传参上的难度。由于需要对搜索引擎的收录比较友好,通常商城类型的网址,都要进行url重写。本文将着手于这两方面给大家讲解。
数据库设计
商品分类表
搜索属性表
搜索属性“值”表
一共是3张表。设计上比较简单。
简单归简单,但是要注意看清中间的关系。另外要注意表中的冗余字段运用。这可以为你在设计表的时候省去不少麻烦。当然如果数据频繁更新,你要记得同步数据。
后台程序实现
先看一下我们的界面图
这是属性绑定。我们的商品属性很多。如果你们没有属性表,可以自己逐个添加属性名称即可。我们的实现是直接在系统的商品属性中选取的。后面的数字文本框,是指排序。
绑定的属性名称后,我们就会得到下图所示的一个商品属性表。当然,刚开始绑定的时候,“属性值”是空的。这里您看到“属性值”这一列中有值,是因为我们已经绑定好了。
上面是“属性”表。下面这张图是为这些“属性”添加“属性值”。这些值,将被前台显示。具体的显示效果,您可以看上面网址中的实际效果。
很好,相信提供的这些页面步骤,已经能够让您了解到了后台的制作的整个过程,至于数据库的数据添加修改和删除功能,这是每一个程序员最基本的,这里没有什么技术含量,您直接代码实现即可。
这个配置的实现效果在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
类似于京东商城等的商品分类搜索筛选功能实现相关推荐
- 手机京东菜单html,jQuery仿京东商城手机端商品分类滑动切换特效
jQuery仿京东商城手机端商品分类滑动切换特效 一款仿京商城东手机移动端商品图片分类导航滑动效果,jQuery商品二级分类菜单切换特效. js代码 //设置cookie function setCo ...
- html table 筛选记录,JS实现table表格内针对某列内容进行即时搜索筛选功能
JS实现table表格内针对某列内容进行即时搜索筛选功能 发布时间:2020-08-29 09:26:37 来源:脚本之家 阅读:103 作者:Marx-link 本文实例讲述了JS实现table表格 ...
- 如何使用计算机搜索文件,win7系统如何使用搜索筛选功能快速查找文件
win7系统使用搜索筛选功能可以快速查找文件所需文件,能够大大提高工作效率, win7纯净版系统 电脑中储存着各种文件或图片等资料,这些数据的名称大小及时间归类不一,查找起来非常不容易.虽然windo ...
- 基于Django开发的购物网站,类似于京东商城Django_Store
Django_Store 本项目基于Django1.11.11等来开发一个购物商城Web程序,本项目集成注册,登录,购物,购物车,评论,搜索,第三方qq登录,微信登录,手机号登录,支付宝支付等功能 G ...
- React-Native-版高仿淘宝、京东商城首页、商品分类页面,android快速开发框架
滚动条监听事件 @param event */ onScrollFunc = (event) => { // 将滚动的值绑定到渐变动画 Animated.event([{nativeEvent: ...
- 计算机没有搜索筛选功能,EXCEL中筛选工具怎么没有搜索功能
EXCEL中筛选工具怎么没有搜索功能 卡饭网 本站整理 2018-04-01 excel是一款数据处理工具,可以在众多的数据中找到想要的经过处理之后的数据,而最直接方便的功能就是筛选.请阅读下文,了解 ...
- 基于JSON+JQuery实现的多条件筛选功能(类似京东和淘宝功能)
首先看一下实现效果: 现在JSON用于数据的封装和管理越来越流行,一直想着通过JSON实现很多的小工具,比如多条件筛选.表格定制化.数据验证.tree树等等,最近没事就用JSON和JQuery实现了类 ...
- 产品开发必看!一篇讲透,京东商城双轮驱动的核心业务模式!
点击"技术领导力"关注∆每天早上8:30推送 京东商城入驻有两大主要模式,一是京东自营的采销模式,另外一个是POP模式,也就是第三方商家入驻模式. 1 自营 京东自营的操作方式是属 ...
- 京东商城(HTML和CSS实现京东商城网站)
学习京东商城(HTML和CSS实现京东商城网站),本文实现该系统的功能截图,HTML和CSS部分关键语句,系统功能图等供大家学习参考 本页面模仿京东商城 本系统完全模仿京东商城写的页面,页面功能齐全 ...
最新文章
- 没有会员wps合并多个sheet_WPS「合并文档」功能,如何“唰”一下把多个文档合并到一起?...
- Python之max(num, key=lambda x:x[0])用法的详细解析
- Working copy XXX locked and cleanup failed in SVN
- 横河川仪压力变送器故障代码_YOKOGAWA/重庆横河川仪EJA变送器三大优秀性能!
- php调用md5.js,PHP和JS实现HTTP上安全地传输密码
- 解决el-select后台一次返回大数据量渲染慢导致页面卡顿的问题
- AliOS Things声源定位应用演示 1
- 第三届“信息论与编码”中大论坛诚邀您的参加
- clickhouse 同步 mysql数据
- 今晚直播丨Oracle DataGuard 备份恢复最佳实践
- 获取当前图层所处的坐标系统(C++)(ArcObject开发)
- 使用客户端登陆ftp 500 OOPS: cannot change directory:/home/virftp解决
- git 远程代码回滚master
- OpenGL基础10:变换
- linux里怎么解压war包,Linux压缩war和解压war包
- 推荐几个好用的后台管理框架
- 微软经典面试题(数字翻译为中文)
- Kubernetes(k8s)四、Pod生命周期(初始化容器的应用,探针liveness、readliness应用,)
- honoo 门禁控制器参数配置表
- TSP问题(贪心法)最近邻点和最短连接
热门文章
- Google 开源图形着色器测试框架 GraphicsFuzz
- angular2学习记录-给后端程序员的经验分享
- Spring-Mybatis MapperScannerConfigurer 取不到PropertyPlaceholderConfigurer里的值
- Hadoop运维记录系列(十七)
- 二叉树(2)——遍历的非递归实现
- POJ 1861 Network
- 看下completablefuture(暂时没看完)
- RuntimeError: Model class cmdb.models.UserInfo doesn't declare an explicit app_label
- ubuntu18.10 cosmic更换阿里云的源
- kaggle奖牌发放体系(转)