移动商城第十五篇【单品查询】

最新推荐文章于 2025-09-06 08:01:57 发布

转载最新推荐文章于 2025-09-06 08:01:57 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a647921518825734e3e5cdf

文章标签：

#javascript #json #ViewUI

本文介绍了一种在商品详情页实现价格、规格和库存联动更新的方法，包括使用外连接进行多表联合查询以确保数据完整性和利用Ajax实现前端动态更新。

tags: 移动商城项目

单品页查询

当点击某个商品的时候，查看该商品的详细信息：

修改每个商品的超链接：



                <a href="${path}/item/toProductDetail.do?itemId=${item.itemId}" title="张同来" target="_blank" class="pic"><img
                        src="${file_path}${item.imgs}" alt="摩托罗拉XT319"/></a>
复制代码

提供对应的controller方法



    /**
     * 查看商品的单品页信息
     *
     * @return
     */
    @RequestMapping("/toProductDetail.do")
    public String toProductDetail() {



        return "productDetail";
    }
复制代码

进入到页面上，我们来查看一下有什么属性要展示出来的：

我们发现这些数据涉及到了多张表的查询，下面就来分析一下吧：

item实体表
feature属性表
paraValue存放属性值的表
sku库存表
specValue库存特殊属性值表
大字段数据 clob表

我们主要查询的是商品的信息，因此商品需要联合上边那些关联关系一次查询出来！

编写SQL


SELECT *
FROM EB_ITEM eb, EB_SKU sku, EB_PARA_VALUE pa, EB_FEATURE fe, EB_SPEC_VALUE sv,EB_ITEM_CLOB ic
WHERE eb.ITEM_ID = sku.ITEM_ID
      AND fe.FEATURE_ID = pa.FEATURE_ID
	  AND ic.ITEM_ID = eb.ITEM_ID	
      AND pa.ITEM_ID = eb.ITEM_ID
      AND sku.SKU_ID = sv.SKU_ID
      AND eb.ITEM_ID = 3100

复制代码

上面就是我们的sql语句。联合了6张表进行查询。

在联合查询的时候需要注意，如果某一张表的数据不存在，在联合的时候另一张表的数据就查询不出来了。因此，我们是需要考虑是否需要外连接把数据查询出来的。！

经过我们的分析得出，商品是可以没有最小销售单元的特殊值的。因此用到了外连接



SELECT *
FROM EB_ITEM eb, EB_SKU sku, EB_PARA_VALUE pa, EB_FEATURE fe, EB_SPEC_VALUE sv, EB_ITEM_CLOB ic
WHERE eb.ITEM_ID = sku.ITEM_ID
      AND fe.FEATURE_ID = pa.FEATURE_ID
      AND ic.ITEM_ID = eb.ITEM_ID
      AND pa.ITEM_ID = eb.ITEM_ID
      AND sku.SKU_ID = sv.SKU_ID(+)
      AND eb.ITEM_ID = 3100

复制代码

实体关联数据

在Item实体中，我们需要关联对应的数据！



    //对应大字段关系
    private EbItemClob clob;

    //对应最小销售单元关系
    private List<EbSku> ebSkus;
    
    //参数值数据
    private List<EbParaValue> paraList;

	//set\get方法
复制代码

在参数值实体表中关联属性表的名称：



    //关联与属性表的关系，由于通过featureId已经能够体现一对一的，我们这里就可以直接使用名称了。
	//当然了，我们在这里也是可以直接使用对象的，但是为了方便就使用属性而已。
    private String featureName;
复制代码

编写dao、service、mapper、controller

mapper:


 <resultMap id="itemDetailMap" type="com.rl.ecps.model.EbItem" extends="BaseResultMap">

        <!--与大字段的关系-->
        <association property="clob" javaType="com.rl.ecps.model.EbItemClob">
            <id column="ITEM_ID" jdbcType="DECIMAL" property="itemId" />
            <result column="ITEM_DESC" jdbcType="CLOB" property="itemDesc" />
            <result column="PACKING_LIST" jdbcType="CLOB" property="packingList" />
        </association>
        

        <collection property="paraList" ofType="com.rl.ecps.model.EbParaValue">
            <id column="PARA_ID" jdbcType="DECIMAL" property="paraId" />
            <result column="ITEM_ID" jdbcType="DECIMAL" property="itemId" />
            <result column="FEATURE_ID" jdbcType="DECIMAL" property="featureId" />
            <result column="PARA_VALUE" jdbcType="VARCHAR" property="paraValue" />
            <result column="FEATURE_NAME" property="featureName"/>
        </collection>

        <!--与最小销售单元的关系-->
        <collection property="ebSkus" ofType="com.rl.ecps.model.EbSku">
            <id column="SKU_ID" jdbcType="DECIMAL" property="skuId" />
            <result column="ITEM_ID" jdbcType="DECIMAL" property="itemId" />
            <result column="SKU" jdbcType="VARCHAR" property="sku" />
            <result column="SKU_PRICE" jdbcType="DECIMAL" property="skuPrice" />
            <result column="SHOW_STATUS" jdbcType="DECIMAL" property="showStatus" />
            <result column="STOCK_INVENTORY" jdbcType="DECIMAL" property="stockInventory" />
            <result column="SKU_UPPER_LIMIT" jdbcType="DECIMAL" property="skuUpperLimit" />
            <result column="LOCATION" jdbcType="VARCHAR" property="location" />
            <result column="SKU_IMG" jdbcType="VARCHAR" property="skuImg" />
            <result column="SKU_SORT" jdbcType="DECIMAL" property="skuSort" />
            <result column="SKU_NAME" jdbcType="VARCHAR" property="skuName" />
            <result column="MARKET_PRICE" jdbcType="DECIMAL" property="marketPrice" />
            <result column="CREATE_TIME" jdbcType="TIMESTAMP" property="createTime" />
            <result column="UPDATE_TIME" jdbcType="TIMESTAMP" property="updateTime" />
            <result column="CREATE_USER_ID" jdbcType="DECIMAL" property="createUserId" />
            <result column="UPDATE_USER_ID" jdbcType="DECIMAL" property="updateUserId" />
            <result column="ORIGINAL_SKU_ID" jdbcType="DECIMAL" property="originalSkuId" />
            <result column="LAST_STATUS" jdbcType="DECIMAL" property="lastStatus" />
            <result column="MERCHANT_ID" jdbcType="DECIMAL" property="merchantId" />
            <result column="SKU_TYPE" jdbcType="DECIMAL" property="skuType" />
            <result column="SALES" jdbcType="DECIMAL" property="sales" />
            <result column="RES_CODE" jdbcType="VARCHAR" property="resCode" />
            <result column="PACK_ID" jdbcType="DECIMAL" property="packId" />
            <collection property="specList" ofType="com.rl.ecps.model.EbSpecValue">
                <id column="SPEC_ID" jdbcType="DECIMAL" property="specId" />
                <result column="SKU_ID" jdbcType="DECIMAL" property="skuId" />
                <result column="FEATURE_ID" jdbcType="DECIMAL" property="featureId" />
                <result column="SPEC_VALUE" jdbcType="VARCHAR" property="specValue" />
            </collection>
        </collection>
    </resultMap>

    <select id="selectItemDetail" parameterType="long" resultMap="itemDetailMap">

        SELECT *
        FROM EB_ITEM eb, EB_SKU sku, EB_PARA_VALUE pa, EB_FEATURE fe, EB_SPEC_VALUE sv, EB_ITEM_CLOB ic
        WHERE eb.ITEM_ID = sku.ITEM_ID
              AND fe.FEATURE_ID = pa.FEATURE_ID
              AND ic.ITEM_ID = eb.ITEM_ID
              AND pa.ITEM_ID = eb.ITEM_ID
              AND sku.SKU_ID = sv.SKU_ID(+)
              AND eb.ITEM_ID = #{itemId}
    </select>


复制代码

dao:


    public EbItem selectItemDetail(Long itemId) {
        return this.getSqlSession().selectOne(nameSpace + "selectItemDetail", itemId);
    }
复制代码

service:


    public EbItem selectItemDetail(Long itemId) {
        return itemDao.selectItemDetail(itemId);
    }



复制代码

controller:



    /**
     * 查看商品的单品页信息
     *
     * @return
     */
    @RequestMapping("/toProductDetail.do")
    public String toProductDetail(Long itemId,Model model) {

        EbItem ebItem = itemService.selectItemDetail(itemId);
        model.addAttribute("item", ebItem);
        return "productDetail";
    }
复制代码

同步价钱、规格、库存

当我们点击16g、32G、64G的时候，价钱和库存应该要同步起来。

因此，我们需要用到ajax

首先，为每个a标签绑定单机事件


  <div class="pre spec" id="skuChange">
		.....a标签
	</div>
复制代码

ajax:


            //为每个a标签绑定事件
            $("#skuChange a").click(function () {

                //点击某一个时，样式发生改变
                $(this).attr("class", "here");
                //其他的样式去除掉
                $(this).siblings().attr("class","");

                //得到a标签的自定义属性skuId
                var skuId = $(this).attr("skuId");

                $.ajax({

                    url: "${path}/item/updatePriceAndStock",
                    type: "post",
                    data:{skuId:skuId},
                    success: function (responseText) {
                        
                    },
                    error:function () {
                    }
                });

复制代码

controller:



    /**
     * 更新页面上的库存和价钱
     *
     * @return
     */
    @RequestMapping("/updatePriceAndStock.do")
    public void updatePriceAndStock(Long skuId, HttpServletResponse response) {

        if (skuId != null) {

            //得到具体的库存对象
            EbSku ebSku = skuService.selectByPrimaryKey(skuId);

            //将对象写成JSON返回出去
            JSONObject jsonObject = new JSONObject();
            jsonObject.accumulate("sku", ebSku);
            String result = jsonObject.toString();

            ResourcesUtils.printJSON(result,response);
        }
    }
复制代码

ajax补全：



            //为每个a标签绑定事件
            $("#skuChange a").click(function () {

                //点击某一个时，样式发生改变
                $(this).attr("class", "here");
                //其他的样式去除掉
                $(this).siblings().attr("class","");

                //得到a标签的自定义属性skuId
                var skuId = $(this).attr("skuId");

                $.ajax({

                    url: "${path}/item/updatePriceAndStock.do",
                    type: "post",
                    data:{skuId:skuId},
                    success: function (responseText) {


                        var parseJSON = $.parseJSON(responseText);

                        //将价钱设置为当前库存的

                        $("#skuPrice").html(parseJSON.sku.skuPrice);
                        $("#marketPrice").html(parseJSON.sku.marketPrice);

                        //判断是否有货
                        var stock = parseJSON.sku.stockInventory;
                        console.log(stock);
                        if(stock>0) {
                            $("#stock").html("有货");
                        }else {
                            $("#stock").html("无货");

                        }
                    },
                    error:function () {
                    }
                });


            });
复制代码

到目前为止，我们已经能够联动更新了...

还有值得注意的是：想要一进去就联动更新我们的库存和价钱。我们可以使用jquery的trigger方法：


    $("#skuChange a:first").trigger("click");

复制代码

#总结 #

关联查询数据的时候，要想想如果有一张表没有数据时，另一张表的数据是否要查询出来。要使用外连接!
在获取后台数据的时候，可以在html中自定义属性来进行获取。很好用。
使用trigger方法能够用程序的方式来响应我们的事件

如果您觉得这篇文章帮助到了您，可以给作者一点鼓励