制作销售属性的组合的集合为哈希表，根据用户点击的属性组合判断某个skuId并跳转到对应的页面

最新推荐文章于 2024-05-21 00:38:45 发布

Hiber12

最新推荐文章于 2024-05-21 00:38:45 发布

阅读量979

点赞数

文章标签： java

本文链接：https://blog.csdn.net/Hiber12/article/details/109733965

版权

一、查询spu系列商品：

1、查询spu系列商品中所有属性值之间的组合（一个组合，即一个sku商品）！！！
这里的数据苹果11
颜色：黑色、白色、红色；
版本：128G、256G；
总共6种组合：

SELECT
	a.id,b.sale_attr_value_id
FROM
	pms_sku_info a,
	pms_sku_sale_attr_value b
WHERE
	a.id = b.sku_id
AND a.product_id = 67

在这里插入图片描述

二、制作哈希表：

2、把查到的结果，生成一个k是销售属性值组合，v是skuId的hash哈希表：
k:244|247| v:118
k:244|248| v:119
k:245|247| v:120
k:245|248| v:121
K:246|247| v:122
K:246|248| v:123

把这个哈希表，封装成一个json字符串，再传递过去给前端页面。
用户一打开这个sku商品页面，后台就能查询该spu系列下他的其他兄弟姐妹，转化为哈希表！并封装成json格式的字符串传递给前端页面！
当用户要点击该系列下其他属性版本的手机的时候，使用前端JavaScript根据哈希表的值，直接判断该属性的组合k属于哪个v：skuId，根据v：skuId跳转页面！
在这里插入图片描述
3、这个方法查询比异步查询还要好，异步还要开两次数据库。用这个方法直接查出所有组合给前端，前端根据这个组合，直接请求sku即可！

——当然也可以这样：当用户请求到某个sku商品的时候，不采取查询该spu系列其他的兄弟姐妹。
而是等待用户选择完颜色、版本等属性的时候，前端把用户选择的属性值返回给后端，去请求数据库（查询这些颜色、版本属性等组合属于哪个skuId？），再请求数据库根据这skuId查询sku商品并且返回这个商品对象！

（1）这样做也是可以的，但是这样的效率未免太低了！用户选择完这些属性组合，你再去数据库查询，并且还开了两次数据库。
如果用户一直在点击其他属性值，每次点击，你就去查两次数据库。这样的操作，效率太低，性能太差了！

（2）而如果采用hash哈希表法，每次请求sku商品页面的时候。就把其他所有的属性值组合查询出来。
如果用户一直在点击其他属性值，每次点击，只需要前端JavaScript做判断用户选择了哪些属性组合，根据这属性组合就能知道skuId，直接请求该id的html地址。这样的操作，是不是快很多呢？？

三、代码实现：

Controller层：

//根据当前sku所属的spuId，查询其他的sku集合的哈希hash表
List<PmsSkuInfo> pmsSkuInfos = skuService.getSkuSaleAttrValueListBySpu(spuId);
//new一个哈希hashMap，写好string，string接收类型，快捷键Ctrl+alt+v生成。
HashMap<String, String> hashMap = new HashMap<>();
//循环后端传递过来的列表
for (PmsSkuInfo skuInfo : pmsSkuInfos) {
    String k="";   //定义k：为空字符串
    String v=skuInfo.getId();   //v是：skuId
    //遍历销售属性值列表，获取外键ID：SaleAttrValueId，即spu销售属性值的主键ID
    List<PmsSkuSaleAttrValue> skuSaleAttrValueList = skuInfo.getSkuSaleAttrValueList();
    for (PmsSkuSaleAttrValue skuSaleAttrValue : skuSaleAttrValueList) {
        k = k + skuSaleAttrValue.getSaleAttrValueId() + "|";  //每一个k值后+管道符“|”，不要使用逗号，避免java解析为数组
    }
    //插入每一对k和v到hash哈希表中
    hashMap.put(k,v);
}
//用阿里巴巴的fastJson技术，把哈希表hash转化为json的字符串格式！
String jsonStr = JSON.toJSONString(hashMap);
//把json传递给前端页面
modelMap.put("jsonStr",jsonStr);

实现层：

@Override
public List<PmsSkuInfo> getSkuSaleAttrValueListBySpu(String spuId) {
    List<PmsSkuInfo> pmsSkuInfos = pmsSkuInfoMapper.selectSkuSaleAttrValueListBySpu(spuId);
    return pmsSkuInfos;
}

Mybatis查询数据库（双层集合，需要添加映射关系！！！）：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.atguigu.gmall.manage.service.mapper.PmsSkuInfoMapper">

    <select id="selectSkuSaleAttrValueListBySpu" resultMap="selectSkuSaleAttrValueListBySpuMap">
    SELECT
        a.id as a_id,
        b.id as b_id,
        b.sale_attr_value_id
    FROM
        pms_sku_info a,
        pms_sku_sale_attr_value b
    WHERE
        a.id = b.sku_id
    AND a.product_id = #{spuId}
    </select>

    <resultMap id="selectSkuSaleAttrValueListBySpuMap" type="com.atguigu.gmall.bean.PmsSkuInfo" autoMapping="true">
        <result column="a_id" property="id"></result>
        <collection property="skuSaleAttrValueList" ofType="com.atguigu.gmall.bean.PmsSkuSaleAttrValue" autoMapping="true">
            <result column="b_id" property="id"></result>
        </collection>
    </resultMap>

</mapper>

Controller层封装好的hash表，转换为json字符串格式，使用阿里巴巴的fastJson技术
在这里插入图片描述
测试结果（成功！）：

四、前端处理该哈希表：

k:244|247| v:118
k:244|248| v:119
k:245|247| v:120
k:245|248| v:121
K:246|247| v:122
K:246|248| v:123
前端页面处理这个json字符串：

（1）js控制：点击一次方框，被选中的方框就变红，不被选中的方框红色移除。并且调用
switchSkuId()函数
在这里插入图片描述
（2）先测试一下接收到的这个哈希表json字符串并弹窗

<!--接收后端的json字符串，隐藏的text-->
<input type="text" th:value="${jsonStr}" id="valuesSku"/>

function switchSkuId() {
    var hashstr = $("#valuesSku").val();  //使用美元id选择器，选择input的对象（id）valuesSku，并获得里面的值val（json字符串！！！）
    alert(hashstr);
}

在这里插入图片描述
（3）那么怎么知道用户点击了哪些属性值呢？
其实在js里的代码就告诉你了，被选中的属性的方框会被标记为红色redborder！！！
只需要获取被标红方框里面的属性值ID即可！！！

（4）代码实现，用户点击了方框，方框标红。获取标红方框的div数组，循环遍历获取被选中的数值ID，并把这个属性值的ID组合成hash哈希表的K。

<!--接收后端的json字符串，隐藏的text-->
<input type="text" th:value="${jsonStr}" id="valuesSku"/>

function switchSkuId() {
    var hashstr = $("#valuesSku").val();  //使用美元id选择器，选择input的对象（id）valuesSku，并获得里面的值val（json字符串！！！）
    alert(hashstr);
    var saleAttrValueIds = $(".redborder div");  //使用样式选择器，选择了被标红的方框样式，并获取层级选择器下一层的div的数组！

    var k = "";
    $(saleAttrValueIds).each(function (i,saleAttrValueId) {  //循环遍历这个数组，并获取被标红方框div里的id：saleAttrValueId
        k=k+($(saleAttrValueId).attr("value"))+"|";
    });
    alert(k);
}

弹窗测试（获得被选中的销售属性值ID成功）：
在这里插入图片描述

（5）知道用户选择的属性值组合k了。那么就可以根据后端传过来的哈希json判断是属于哪个v了。
k:244|247| v:118
k:244|248| v:119
k:245|247| v:120
k:245|248| v:121
K:246|247| v:122
K:246|248| v:123

这里注意了！！！！一开始后端传递过来的是一个json字符串，是一个字符串！！！要把这个字符串转换为json才行！！！

var hashstr_json =  JSON.parse(hashstr);   //把接收后端的json字符串 转换 为json
var skuId = hashstr_json[k];       //直接把k放进哈希json里，即可获得相对于的v（skuId）
alert(skuId);

弹窗测试（获得skuId成功）：
在这里插入图片描述

（6）既然知道被选中的属性值ID，也获取了skuId，即知道用户点击了哪件sku商品了。接下来就是直接请求跳转到该skuId下的html页面即可！！！

if(skuId) {
    window.location.href = "http://item.gmall.com/" + skuId + ".html";
}

测试（根据skuId跳转成功）：
在这里插入图片描述
好了现在功能是实现了！但是！！！有没有想过每次请求sku的html页面，都要制作一次哈希表，是不是性能也比较低？？？
还有一种静态文件的处理，就是把当前的spu系列所有的sku商品制作成的哈希表保存为一个spuId文件！！！这里可以应用前端技术生成这个文件！！！
在这里插入图片描述

在前端页面引入这个spuId的js文件！！！

当用户第一次访问一个sku商品的时候，制作好哈希表，并存储为js文件！
如果用户再次在当前spu系列商品里访问其他sku商品，前端根据这个js哈希表文件的skuId，直接进行页面请求过去即可了！

就不需要再一次请求数据库，再一次制作哈希表，省去每次请求页面都制作哈希表！！！
这样的话，制作哈希的代码就不应该放在item项目的controller层了
在这里插入图片描述

Hiber12

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
制作销售属性的组合的集合为哈希表，根据用户点击的属性组合判断某个skuId并跳转到对应的页面

一、查询spu系列商品：1、查询spu系列商品中所有属性值之间的组合（一个组合，即一个sku商品）！！！这里的数据苹果11颜色：黑色、白色、红色；版本：128G、256G；总共6种组合：SELECT a.id,b.sale_attr_value_idFROM pms_sku_info a, pms_sku_sale_attr_value bWHERE a.id = b.sku_idAND a.product_id = 67二、制作哈希表：2、把查到的结果，生成一个k是销售
复制链接

扫一扫