商品属性设计

最新推荐文章于 2022-03-11 18:20:59 发布

marian_mey

最新推荐文章于 2022-03-11 18:20:59 发布

阅读量5.9k

点赞数 1

分类专栏：项目设计文章标签：淘宝商品商品属性属性搜索

本文链接：https://blog.csdn.net/hanmeiyan/article/details/39523343

版权

项目设计专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这几个月一直做网上购物商城，设计到商品属性这儿遇到了难题，如何展示商品的属性；让用户选择自己想要的颜色、尺码？如何让商家通过不同的属性来设定产品的价格？

从网上找了很多资料；比较好的设计有以下几种：

第一种：SKU设计

SKU设计中，把商品属性分为三个部分：基本属性、销售属性、关键属性

基本属性：一些对商品进行描述的属性，例如材质，保质期，衣长等等。

销售属性：组成SKU的特殊属性，它会影响买家的购买和卖家的库存管理，如服装的"颜色"、"套餐"和"尺码"，注意这里的SKU，淘宝销售属性组合成SKU

关键属性：能够确认唯一产品的属性，可以是一个，或者多个关键属性的组合，比如：相机的"品牌""型号"能确定唯一的产品，服装的"品牌""货号"能确定唯一的产品

特征量与特征值

属性和属性值分为两张表存储，我们分别称为特征量与特征值。

表结构如下

注：

1. 类目和特征量，特征量和特征值并不是多对多的关系，是一对多的关系

2. 类目和特征量都是父子表

3. 商品的关键属性如：品牌系列（只存放子及ID），其它属性，比如说裤子的裤型，适合人群，等属性存入基本属性表，这里品牌系列只存放子及ID是因为考虑到，不想建立过多的表，用户搜索用例如lunce把全部信息建好索引，做统计或者数据分析的时候也是可以通过父子特征量的父子关系进行的。

4.销售属性的分开是因为，比如洗发水，我们的特征值表中的值可能不能符合用户需求，那么可以让用户自定义值，颜色可以上传图片等，而且销售属性一般为多个组合，所以单独建立一个表。

5. 商品的SKU表，这个特征量ID的组合实际上就是销售属性表的ID组合

当我们添加一个商品的时候，在不考虑页面展现的情况下需要这几步：

1.插入商品基本信息到商品表

2.插入基本属性和关键属性到商品基本属性表

3.插入销售属性到销售属性表

4.插入销售属性ID组合，数量，价格等到商品SKU表。

当我们在页面上展示商品的时候:

1.级联6个表查询出商品所需要的信息，由于关键属性有多级，这里只存了子及，需要做一次递归。当然可以考虑缓存等自己的实现方法

2.分析商品SKU组合，生成销售属性组合及约束，比如颜色+尺码选择之后的不同价格，是否还有货。颜色有图片的用上传的图片代替默认背景

难点在于：

1.页面的展现不管前台还是后台都必须动态构建，在动态构建的基础上加上基本的验证，比如用户选择了颜色A+尺码，库存只有3件，数量填写了5，必要提示用户没有了这么多数量，动态构建中还存在某些属性有层级关系，需要按照自己的策略选择一次性加载或者 AJAX加载，进行分析显示

2.几个表关联查询的设计，何种方法能最大化减小程序的复杂程度，是直接在数据库中搞定，还是数据库结合内存表(缓存特征量和特征值).

商品表单构建实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script> 
</head> 
<body> 
<table> 
<tr> 
<td align="right"> 
产品名称： 
</td> 
<td> 
<input type="text" name="1" /> 
</td> 
</tr> 
<tbody id="tbodyAppend"> 
</tbody> 
<tr> 
<td> 
</td> 
<td> 
<input type="button" value="验证输入" id="btnCheck" name="btnCheck" /> 
</td> 
</tr> 
</table> 
<script type="text/javascript"> 
//扩展属性定义(实际开发中通常从后台输出 或 利用ajax异步加载) 
var _data = { "Head": [ 
{ "F_DisplayName": "品牌", "F_FieldName": "PinPai", "F_ValueType": "字符串", "F_ValueLength": "50", "F_InputType": "单选框", "F_DefaultValue": "康师傅|统一|其它,KangShiFu|TongYi|Others,TongYi", "F_IsRequired": "1" }, 
{ "F_DisplayName": "保质期", "F_FieldName": "BaoZhiQi", "F_ValueType": "整数", "F_ValueLength": "4", "F_InputType": "文本框", "F_DefaultValue": "12", "F_IsRequired": "0" }, 
{ "F_DisplayName": "产品描述", "F_FieldName": "MiaoShu", "F_ValueType": "字符串", "F_ValueLength": "20", "F_InputType": "文本域", "F_DefaultValue": "请输入详细描述", "F_IsRequired": "1" }, 
{ "F_DisplayName": "食用方式", "F_FieldName": "ShiYong", "F_ValueType": "字符串", "F_ValueLength": "50", "F_InputType": "复选框", "F_DefaultValue": "开袋即食|加热|冰冻|其它,开袋即食|加热|冰冻|其它,加热|其它", "F_IsRequired": "1" }, 
{ "F_DisplayName": "可选颜色", "F_FieldName": "Color", "F_ValueType": "字符串", "F_ValueLength": "50", "F_InputType": "下拉框", "F_DefaultValue": "红色|蓝色,Red|Blue,Blue", "F_IsRequired": "1" }, 
{ "F_DisplayName": "是否包邮", "F_FieldName": "BaoYou", "F_ValueType": "逻辑型", "F_ValueLength": "1", "F_InputType": "文本框", "F_DefaultValue": "", "F_IsRequired": "1" }, 
{ "F_DisplayName": "重量", "F_FieldName": "Weight", "F_ValueType": "浮点数", "F_ValueLength": "10", "F_InputType": "文本框", "F_DefaultValue": "", "F_IsRequired": "0" }, 
{ "F_DisplayName": "出厂日期", "F_FieldName": "CreateDate", "F_ValueType": "日期", "F_ValueLength": "50", "F_InputType": "文本框", "F_DefaultValue": "", "F_IsRequired": "1" } 
] 
} 
var _append = $("#tbodyAppend"); 
var _html = ""; 
for (var i = 0; i < _data.Head.length; i++) { 
var _displayName = _data.Head[i].F_DisplayName; 
var _fieldName = _data.Head[i].F_FieldName; 
var _valueType = _data.Head[i].F_ValueType; 
var _valueLength = _data.Head[i].F_ValueLength; 
var _inputType = _data.Head[i].F_InputType; 
var _defaultValue = _data.Head[i].F_DefaultValue; 
var _isRequire = _data.Head[i].F_IsRequired; 
var _dvArr, _arrDisplay, _arrDisplay, j, _dv, _dvArr2, k; 
_html += "<tr><td align='right'>" + (_isRequire == "1" ? "<span style='color:red'>(*)</span>" : "") + _displayName + "：</td><td align='left'>"; 
switch (_data.Head[i].F_InputType) { 
case "单选框": 
_dvArr = _defaultValue.split(','); 
if (_dvArr.length < 2) { 
alert("单选框[" + _displayName + "]默认值设置有误，请联系管理员!"); 
break; 
} 
_arrDisplay = _dvArr[0].split('|'); 
_arrValue = _dvArr[1].split('|'); 
if (_arrDisplay.length != _arrValue.length) { 
alert("单选框[" + _displayName + "]默认值设置有误，请联系管理员!"); 
break; 
} 
if (_dvArr.length == 3) { 
_dv = _dvArr[2]; 
} 
for (j = 0; j < _arrDisplay.length; j++) { 
_html += "<input type='radio' " + (_dv == _arrValue[j] ? "checked" : "") + " value='" + _arrValue[j] + "' name='" + _fieldName + "' id='" + _fieldName + "_" + j + "' dataType='" + _valueType + "' isRequired='" + _isRequire + "' maxLength='" + _valueLength + "' label='" + _displayName + "' /><label for='" + _fieldName + "_" + j + "'>" + _arrDisplay[j] + "</label>" 
} 
break; 
case "复选框": 
_dvArr = _defaultValue.split(','); 
if (_dvArr.length < 2) { 
alert("复选框[" + _displayName + "]默认值设置有误，请联系管理员!"); 
break; 
} 
_arrDisplay = _dvArr[0].split('|'); 
_arrValue = _dvArr[1].split('|'); 
if (_arrDisplay.length != _arrValue.length) { 
alert("复选框[" + _displayName + "]默认值设置有误，请联系管理员!"); 
break; 
} 
if (_dvArr.length == 3) { 
_dv = _dvArr[2]; 
} 
_dvArr2 = _dv.split('|'); 
for (j = 0; j < _arrDisplay.length; j++) { 
var _checked = false; 
for (k = 0; k < _dvArr2.length; k++) { 
if (_dvArr2[k] == _arrValue[j]) { 
_checked = true; 
} 
} 
_html += "<input type='checkbox' " + (_checked ? "checked" : "") + " value='" + _arrValue[j] + "' name='" + _fieldName + "' id='" + _fieldName + "_" + j + "' dataType='" + _valueType + "' isRequired='" + _isRequire + "' maxLength='" + _valueLength + "' label='" + _displayName + "'/><label for='" + _fieldName + "_" + j + "'>" + _arrDisplay[j] + "</label>" 
} 
break; 
case "文本框": 
_html += "<input type='text' id='" + _fieldName + "' name='" + _fieldName + "' value='" + _defaultValue + "' dataType='" + _valueType + "' isRequired='" + _isRequire + "' maxLength='" + _valueLength + "' label='" + _displayName + "'/>" 
break; 
case "下拉框": 
_dvArr = _defaultValue.split(','); 
if (_dvArr.length < 2) { 
alert("下拉框[" + _displayName + "]默认值设置有误，请联系管理员!"); 
break; 
} 
_arrDisplay = _dvArr[0].split('|'); 
_arrValue = _dvArr[1].split('|'); 
if (_arrDisplay.length != _arrValue.length) { 
alert("下拉框[" + _displayName + "]默认值设置有误，请联系管理员!"); 
break; 
} 
if (_dvArr.length == 3) { 
_dv = _dvArr[2]; 
} 
_html += "<select name='" + _fieldName + "' id='" + _fieldName + "' dataType='" + _valueType + "' isRequired='" + _isRequire + "' maxLength='" + _valueLength + "' label='" + _displayName + "'>" 
for (j = 0; j < _arrDisplay.length; j++) { 
_html += "<option " + (_dv == _arrValue[j] ? "selected" : "") + " value='" + _arrValue[j] + "'>" + _arrDisplay[j] + "</option>"; 
} 
_html += "</select>" 
break; 
case "文本域": 
_html += "<textarea rows='4' cols='60' id='" + _fieldName + "' name='" + _fieldName + "' dataType='" + _valueType + "' isRequired='" + _isRequire + "' maxLength='" + _valueLength + "' label='" + _displayName + "'>" + _defaultValue + "</textarea>" 
break; 
default: 
break; 
} 
_html += "</td></tr>"; 
} 
_append.html(_html); 
//验证函数 
$("#btnCheck").click(function () { 
var nameArr = []; 
var objArr = $("#tbodyAppend [isRequired]"); 
var i = 0; 
objArr.each(function (i) { 
var _o = { name: $(this).attr("name"), maxlength: parseInt($(this).attr("maxlength"), 10), label: $(this).attr("label"), type: this.type, tagName: this.tagName, dataType: $(this).attr("dataType"), isRequire: $(this).attr("isRequired") }; 
if (!indexOfNameArr(nameArr, _o)) { 
nameArr.push(_o); 
} 
}) 
for (i = 0; i < nameArr.length; i++) { 
var obj = nameArr[i]; 
var _e = document.getElementsByName(obj.name)[0]; 
var v = _e.value; ; 
//单选框,或复选框 
if (obj.type == 'radio' || obj.type == 'checkbox') { 
if (obj.isRequire == "1") { 
v = getGroupValue(obj.name); 
if (v == "") { 
alert("请选择 [" + obj.label + "] ！"); 
setGroupfocus(obj.name); 
return false; 
} 
} 
} 
else if (obj.isRequire == "1")//其它类型：比如文本框，下拉框，文本域 
{ 
if (v == "") { 
alert("请输入 [" + obj.label + "] ！"); 
_e.focus(); 
return false; 
} 
} 

//检测数据长度 
if (obj.maxlength > 0 && v.length > obj.maxlength) { 
alert("[" + obj.label + "]的有效数据长度不得超过[" + obj.maxlength + "]个字符"); 
_e.focus(); 
return false; 
} 
//检测数据类型 
if (obj.dataType == "日期") { 
if (v.length > 0) { 
if (!(isDate(v) || isDateTime(v))) { 
alert("[" + obj.label + "]为日期/日期时间类型，必须输入有效的日期格式\n\n\t格式：“年-月-日”或“年-月-日 时:分:秒”"); 
_e.focus(); 
return false; 
} 
} 
} 
else if (obj.dataType == "整数") { 
var _intV = parseInt(v, 10); 
if (isNaN(_intV)) { 
alert("[" + obj.label + "]为整数类型，必须输入整数值"); 
_e.focus(); 
return false; 
} 
else { 
_e.value = _intV; 
} 
} 
else if (obj.dataType == "浮点数" || obj.dataType == "货币") { 
if (v.length > 0) { 
var _floatV = parseFloat(v); 
if (isNaN(_floatV)) { 
alert("[" + obj.label + "]为数字类型，必须输入有效的数字"); 
_e.focus(); 
return false; 
} 
else { 
_e.value = _floatV; 
} 
} 
} 
else if (obj.dataType == "逻辑型") { 
if (v.length > 0) { 
if (!(v == "1" || v == "0")) { 
alert("[" + obj.label + "]为逻辑型数据，其值只能为“1”或“0”"); 
_e.focus(); 
return false; 
} 
} 
} 
} 
alert("验证通过!"); 
return true; 
}) 

//获取某一单选/复选组的值 
function getGroupValue(groupName) { 
var g = document.getElementsByName(groupName); 
var result = ""; 
for (var k = 0; k < g.length; k++) { 
if (g[k].checked) { 
result = g[k].value; 
break; 
} 
} 
return result; 
} 
//设置某一单选/复选组焦点 
function setGroupfocus(groupName) { 
document.getElementsByName(groupName)[0].focus(); 
} 
//辅助函数，用于查找arr中有无o元素 
function indexOfNameArr(arr, o) { 
var result = false; 
for (var i = 0; i < arr.length; i++) { 
if (arr[i].name == o.name) { 
result = true; 
break; 
} 
} 
return result; 
} 
//检测是否日期格式(格式: 年-月-日) 
function isDate(str) { 
var reg = /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/ 
if (reg.test(str)) return true; 
return false; 
} 
//检测是否日期时间格式(格式:年-月-日 时:分:秒) 
function isDateTime(str) { 
var reg = /^((\d{2}(([02468][048])|([13579][26]))[\-\/\s]?((((0?[13578])|(1[02]))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\-\/\s]?((0?[1-9])|([1-2][0-9])))))|(\d{2}(([02468][1235679])|([13579][01345789]))[\-\/\s]?((((0?[13578])|(1[02]))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\-\/\s]?((0?[1-9])|(1[0-9])|(2[0-8]))))))(\s(((0?[0-9])|([1][0-9])|([2][0-4]))\:([0-5]?[0-9])((\s)|(\:([0-5]?[0-9])))))?$/ 
if (reg.test(str)) return true; 
return false; 
} 

</script> 
</body> 
</html>