企业WEB项目中商品规格的实现


阅读数: 次   

概述

在开发WEB项目时商品规格的实现是一个比较复杂实现的点，因为商品规格和商品以及商品类目三者互相都有大量的关联。本文将一步步带你了解实现每个商品展示自己独有的商品规格需要哪些步骤和分析。

一、商品规格

1.什么是商品规格

以京东为例：

img

我们可以从中看出规律：

  1. 同一类商品的组名还有组成员相同，但是同一类商品组成员里的内容不一样
  2. 不同类商品组名和组成员不一样

商品规格参数的模板是和商品类目关联的，不同的类目拥有不同的商品规格参数模板。

商品规格参数是和商品数据关联的，不同的商品拥有不同的商品规格参数数据。

2.实现方案

2.1方案一：使用多个表来存储

1、每一类商品有多个分组

2、每个分组下有多个项

3、每个商品对应不同的规格参数

image-20200522103016094

使用二维表来维护规格数据

表一：规格组信息

列名 类型 长度 可以null 键 说明
Id Int 否 P 主键（自增长）
group_name varchar 20 否 规格分组名称
item_cat_id Int 否 F 商品分类id（外键）

表二：规格项信息

列名 类型 长度 可以null 键 说明
Id Int 否 P 主键（自增长）
param_name varchar 20 否 规格项目名称
group_id Int 否 F 规格分组id（外键）

表三：商品规格信息

列名 类型 长度 可以null 键 说明
item_id Int 否 P 商品id（联合主键）
param_id varchar 否 P 规格项id（联合主键）
param_value varchar 500 否 规格信息

实现查询的sql语句

1
2
3
4
5
6
7
8
SELECT
	pg.group_name,pk.param_name,pv.param_value
FROM
	tb_item_param_value pv
LEFT JOIN tb_item_param_key pk ON pv.param_id = pk.id
LEFT JOIN tb_item_param_group pg ON pk.group_id = pg.id
WHERE
	item_id = 855739

2.2方案一存在的问题

1、需要创建多张表来描述规格参数之间的关系，查询时需要大量的关联。

2、查询时需要复杂的sql语句查询。

3、规格参数数据量是商品信息的几十倍，数据量十分庞大。查询时效率很低。

4、维护不方便，如果删除某个规格分组信息，则所有与之相关的商品的规格信息都发生变化。

解决方案：

使用模板的方式来解决。

3.方案二：模板

使用一种动态的方法描述参数模板，每个商品分类对应一个参数模板。添加商品信息时，根据规格参数模板生成规格参数录入项。保存商品时将规格参数生成一个字符串保存到数据库中。展示商品详情时，从数据库中取出规格参数信息，转换成html展示给用户。

这个动态的数据结构我们可以使用json，也就是说，在创建商品规格组时向数据库中存放此组格式的json数据，在添加商品页面时，读取规格组的json数据生成一个表格供用户填写商品的具体规格参数。然后商品添加提交的时候，我们再将用户填写的表中信息转化为json格式数据导入进商品规格参数表。当用户查看此商品的具体参数时，我们直接从商品规格参数表中读取json格式数据，转化为html页面供用户观看。

3.1流程图

image-20200522105514039

3.2需要创建的表

模板表：每个不同的种类商品都有不同的规格组和规格项，故外键为类id

image-20200522105605178

商品规格数据表：

image-20200522105748546

3.3模板格式

1、每一个商品分类对一个规格参数模板。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[
    {
        "group": "主体",  //组名称
        "params": [ // 记录规格成员
            "品牌",
            "型号",
            "颜色",
            "上市年份",
            "上市月份"
        ]
}，
{
        "group": "网络",  //组名称
        "params": [ // 记录规格成员
            "4G",
            "3G,
            "2G"
        ]
}
]

2、使用模板

每个商品对应一唯一的规格参数。在添加商品时，可以根据规格参数的模板。生成一个表单。保存规格参数时。还可以生成规格参数的json数据。保存到数据库中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
[
    {
        "group": "主体",
        "params": [
            {
                "k": "品牌",
                "v": "苹果（Apple）"
            },
            {
                "k": "型号",
                "v": "iPhone 6 A1589"
            },
{
                "k": "智能机",
                "v": "是 "
            }

        ]
}
]

3.4优缺点

优点：

1、不需要做多表管理。

2、如果要求新添加的商品规格项发生改变，之前的商品不变是很简单的。

缺点：

复杂的表单和json之间的转换。对js的编写要求很高。

二、创建规格参数模板

1.选择商品分类

选择商品分类后根据选择的商品分类到tb_item_param规格参数模板表中取规格模板，取到了说明此商品分类的规格模板已经添加提示不能添加。如果没有取得正常添加。

img

img

img

img

功能分析：

请求的url：

/item/param/query/itemcatid/{itemCatId}

参数：itemCatId，从url中获得

返回值：TaotaoResult

1.1Dao层

从tb_item_param表中根据商品分类id查询内容。单表操作。可以实现逆向工程的代码。

1.2Service层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * 商品规格参数模板管理
 * @author JY
 *
 */
@Service
public class ItemParamServiceImpl implements ItemParamService{
	@Autowired
	private TbItemParamMapper itemParamMapper;

	@Override
	public TaotaoResult getItemParamByCid(long cid) {
		TbItemParamExample example = new TbItemParamExample();
		Criteria criteria = example.createCriteria();
		criteria.andItemCatIdEqualTo(cid);
		List<TbItemParam> list = itemParamMapper.selectByExampleWithBLOBs(example);
		//判断是否查询到结果
		if(list!=null&&list.size()>0) {
			return TaotaoResult.ok(list.get(0));
		}
		return TaotaoResult.ok();
	}
}

1.3Controller层

1
2
3
4
5
6
7
8
9
10
11
12
@Controller
@RequestMapping("/item/param")
public class ItemParamController {
	@Autowired
	private ItemParamService itemParamService;
	
	@RequestMapping("/query/itemcatid/{itemCatId}")
	@ResponseBody
	public TaotaoResult getItemParamByCid(@PathVariable Long itemCatId) {
		return itemParamService.getItemParamByCid(itemCatId);
	}
}

1.4jsp效果

img

img

2.提交规格参数模板

2.1需求分析

首先把页面中所有文本框中的内容转换成json数据。把json字符串提交给后台。保存到规格参数表中。

image-20200522111002253

img

请求的url：/item/param/save/{cid}

参数：String paramData

返回值：TaotaoResult

2.2Dao层

保存规格参数模板，向tb_item_param表添加一条记录。可以使用逆向工程生成的代码。

2.3Service层

1
2
3
4
5
6
7
8
@Override
public TaotaoResult insertItemParam(TbItemParam itemParam) {
    //补全itemParam
    itemParam.setCreated(new Date());
    itemParam.setUpdated(new Date());
    itemParamMapper.insert(itemParam);
    return TaotaoResult.ok();
}

2.4Controller层

1
2
3
4
5
6
7
8
9
10
@RequestMapping("/save/{cid}")
@ResponseBody
public TaotaoResult insertItemParam(@PathVariable Long cid,String paramData) {
    //创建itemParam对象
    TbItemParam itemParam = new TbItemParam();
    itemParam.setItemCatId(cid);
    itemParam.setParamData(paramData);
    TaotaoResult result = itemParamService.insertItemParam(itemParam);
    return result;
}

3.根据规格参数模板生成表单

img

img

img

三、保存并展示商品规格参数

1.保存

1.1需求分析

image-20200522111927563

转换后把规格参数的信息放到表单的hidden域中，随着表单的提交同时提交。

img

1.2Service层

1
2
3
4
5
6
7
8
9
10
//添加规格参数
private TaotaoResult insertItemParamItem(Long itemId,String itemParam) {
    TbItemParamItem itemParamItem = new TbItemParamItem();
    itemParamItem.setItemId(itemId);
    itemParamItem.setParamData(itemParam);
    itemParamItem.setCreated(new Date());
    itemParamItem.setUpdated(new Date());
    itemParamItemMapper.insert(itemParamItem);
    return TaotaoResult.ok();
}

image-20200522112219943

1.3Controller层

image-20200522112301664

2.展示

当现实商品详情页面时，需要把商品的规格参数根据商品id取出来，生成html展示到页面。

2.1Service层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/**
 * 商品规格展示管理
 * @author JY
 *
 */
@Service
public class ItemParamItemServiceImpl implements ItemParamItemService {
	@Autowired
	private TbItemParamItemMapper itemParamItemMapper;

	@Override
	public String getItemParamByItemId(Long itemId) {
		TbItemParamItemExample example = new TbItemParamItemExample();
		Criteria criteria = example.createCriteria();
		criteria.andItemIdEqualTo(itemId);
		List<TbItemParamItem> list = itemParamItemMapper.selectByExampleWithBLOBs(example);
		if(list==null||list.size()==0) {
			return "";
		}
		TbItemParamItem itemParamItem = list.get(0);
		String paramData = itemParamItem.getParamData();
		//生成html
		// 把规格参数json数据转换成java对象
		List<Map> jsonList = JsonUtils.jsonToList(paramData, Map.class);
		StringBuffer sb = new StringBuffer();
		sb.append("<table cellpadding=\"0\" cellspacing=\"1\" width=\"100%\" border=\"1\" class=\"Ptable\">\n");
		sb.append("    <tbody>\n");
		for(Map m1:jsonList) {
			sb.append("        <tr>\n");
			sb.append("            <th class=\"tdTitle\" colspan=\"2\">"+m1.get("group")+"</th>\n");
			sb.append("        </tr>\n");
			List<Map> list2 = (List<Map>) m1.get("params");
			for(Map m2:list2) {
				sb.append("        <tr>\n");
				sb.append("            <td class=\"tdTitle\">"+m2.get("k")+"</td>\n");
				sb.append("            <td>"+m2.get("v")+"</td>\n");
				sb.append("        </tr>\n");
			}
		}
		sb.append("    </tbody>\n");
		sb.append("</table>");
		return sb.toString();
	}
}

这里添加sb.append有个小技巧，eclipse中ALT+SHIFT+A是竖着选择多行一起编辑

2.2Controller层

接收商品id调用Service查询规格参数信息，得到规格参数的html。返回一个逻辑视图。把html展示到页面。

1
2
3
4
5
6
7
8
9
10
11
12
@Controller
public class ItemParamItemController {
	@Autowired
	private ItemParamItemService itemParamItemService;
	
	@RequestMapping("/showitem/{itemId}")
	public String showItemParam(@PathVariable Long itemId,Model model) {
		String itemParamByItemId = itemParamItemService.getItemParamByItemId(itemId);
		model.addAttribute("itemParam", itemParamByItemId);
		return "item";
	}
}

结语

最近是个废物，完全动不了脑子。。。一天的内容我搞了三四天

image-20200522113103528

分享一首喜欢过的人喜欢过的歌

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家