tags: 移动商城项目
单品页查询
当点击某个商品的时候，查看该商品的详细信息：
修改每个商品的超链接：
复制代码提供对应的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 icWHERE 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 icWHERE 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 ListebSkus; //参数值数据 private List paraList; //set\get方法复制代码
在参数值实体表中关联属性表的名称：
//关联与属性表的关系，由于通过featureId已经能够体现一对一的，我们这里就可以直接使用名称了。 //当然了，我们在这里也是可以直接使用对象的，但是为了方便就使用属性而已。 private String featureName;复制代码
编写dao、service、mapper、controller
mapper:
复制代码
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标签绑定单机事件
.....a标签复制代码
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方法能够用程序的方式来响应我们的事件
如果您觉得这篇文章帮助到了您，可以给作者一点鼓励