商城商品修改

@TOC

版权声明：本文为博主转载，出处为 https://blog.csdn.net/pdsu161530247/article/details/81808859

目录

1.商品编辑效果展示

2.前端

2.1准备商品信息

2.2更新商品信息

3.后端

3.1准备商品信息

3.1.1服务端

3.1.2表现层

3.2更新商品信息

3.2.1服务层

3.2.2表现层

4.注意事项

---

1.商品编辑效果展示

选择商品，点击编辑

会弹出编辑商品的窗口，然后显示商品信息

我们修改一些数据，比如价格、库存、商品图片以及商品描述

点击提交

发现该商品，价格、库存、商品图片以及商品描述都变为我们修改的了

2.前端

2.1准备商品信息

在item-list.jsp中，使用easyui中datagrid的toolbar属性实现了编辑按钮的添加。

  
  
text: '编辑',
iconCls: 'icon-edit',
handler: function(){
var ids = getSelectionsIds();
if(ids.length == 0){
$.messager.alert( '提示', '必须选择一个商品才能编辑!');
return ;
}
if(ids.indexOf( ',') > 0){
$.messager.alert( '提示', '只能选择一个商品!');
return ;
}

$( "#itemEditWindow").window({
onLoad : function(){
//回显数据
var data = $( "#itemList").datagrid( "getSelections")[ 0];
data.priceView = TAOTAO.formatPrice(data.price);
$( "#itemeEditForm").form( "load",data);

});
// 加载商品描述
$.getJSON( '/item/desc/'+data.id, function(_data){
if(_data.status == 200){
itemEditEditor.html(_data.data.itemDesc);
}
});
TAOTAO.init({
"pics" : data.image,
"cid" : data.cid,
fun: function(node){
TAOTAO.changeItemParam(node, "itemeEditForm");
}
});
}
}).window( "open");
}
  
  

在点击编辑按钮时，触发handler:function，首先判断，是否多选和不选，如果是则提示用户。

$("#itemEditWindow").window({}).window("open");这一步是打开商品编辑的页面，也就是item-edit.jsp页面。

此时触发onLoad函数准备数据

$("#itemList").datagrid("getSelections")是获取所有被选中行的信息，[0]是获取第一行

data.priceView = TAOTAO.formatPrice(data.price);将真实的价格（单位：分），转换为元

$("#itemeEditForm").form("load",data);调用easyui的form组件的load函数，渲染item-edit.jsp中id="itemeEditForm"的表单。

请求url：'/item/desc/'+data.id，并将选中行的商品id，使用rset格式发送请求。并渲染富文本编辑器的内容。

TAOTAO.init({})函数，在common.js中，初始化图片上传组件和选择类目组件。

图片上传组件initPicUpload会回显图片

  
  
if(data && data.pics){
var imgs = data.pics.split( ",");
for( var i in imgs){
if($.trim(imgs[i]).length > 0){
_ele.siblings( ".pics").find( "ul").append( "<li><a href='"+imgs[i]+ "' target='_blank'>" +
"<img src='"+imgs[i]+ "' width='80' height='50' /></a></li>");
}
}
}
  
  

 图片上传组件initPicUpload在用户上传新商品图片后，移除老图片

 选择类目组件initItemCat会回显选择的商品类目

2.2更新商品信息

$("#itemEditWindow").window({}).window("open");打开的窗口地址修改为/item-edit,因为@RequestMapping("/{page}")会拦截/xxx，并返回xxx.jsp的视图

打开item-edit.jsp页面后，TAOTAO.createEditor("#itemeEditForm [name=desc]")通过id和表单选择器，实例化编辑器。

当用户点击提交时先验证表单，然后将商品价格转换为，以为单位分的价格。

itemEditEditor.sync();同步富文本编辑器的内容到表单中的textarea里面去。

最后，发起ajax请求url：/item/update，$("#itemeEditForm").serialize()将表单中的项以key=value的形式post提交。

更新商品信息成功后，关闭item-edit.jsp，并清空表单内容，刷新item-list.jsp页面的内容。

3.后端

由于前端是拿别人现成的，所以分析起来比较累。

如果仅看功能的话，本质上就是用户从前端点击编辑，后端准备数据返回给前端。用户更新编辑的信息，从前端发送到后端保存到数据库中。所以后端就是提供数据，保存数据，编写比较容易。

3.1准备商品信息

由于商品的信息大部分都是通过$("#itemList").datagrid("getSelections")[0]从item-list.jsp页面取出来的，只有商品描述ItemDesc没有，所以我们根据商品id，从数据库中查询ItemDesc即可。

3.1.1服务端

在taotao-manager-interface的ItemService中添加接口

  
  
/**
* 根据id查询商品描述
* @param id
* @return
*/
TaotaoResult getItemDesc(Long id);
  
  

在taotao-manager-service的ItemServiceImpl中编写实现类

  
  
/**
* 根据id查询商品描述，封装到TaotaoResult中
*/
@Override
public TaotaoResult getItemDesc( Long id) {
TbItemDesc itemDesc = itemDescMapper.selectByPrimaryKey(id);
return TaotaoResult.ok(itemDesc);
}
  
  

3.1.2表现层

在taotao-manager-web的ItemCotroller中编写controller

由于前端发起请求的时候，请求的url：/item/desc/id，所以我们使用@RequestMapping(value="/item/desc/{id}")接受id

  
  
/**
* 根据id获取商品描述
*/
@RequestMapping(value="/item/desc/{id}")
@ResponseBody
public TaotaoResult getItemDesc( @PathVariable("id") Long id) {
TaotaoResult result = itemService.getItemDesc(id);
return result;
}
  
  

3.2更新商品信息

当用户编辑完商品信息后，就要保存商品信息了。

3.2.1服务层

在taotao-manager-interface的ItemService中添加接口

  
  
/**
* 更新商品
* @param item
* @param desc
* @return
*/
TaotaoResult updateItem(TbItem item, String desc);
  
  

 在taotao-manager-service的ItemServiceImpl中添加实现类

  
  
@Override
public TaotaoResult updateItem(TbItem item, String desc) {
// 1.根据商品id更新商品表
Long id = item.getId();
// 创建查询条件，根据id更新商品表
TbItemExample tbItemExample = new TbItemExample();
Criteria criteria = tbItemExample.createCriteria();
criteria.andIdEqualTo(id);
itemMapper.updateByExampleSelective(item, tbItemExample);

// 2.根据商品id更新商品描述表
TbItemDesc itemDesc = new TbItemDesc();
itemDesc.setItemDesc(desc);
TbItemDescExample tbItemDescExample = new TbItemDescExample();
com.taotao.pojo.TbItemDescExample.Criteria createCriteria = tbItemDescExample.createCriteria();
createCriteria.andItemIdEqualTo(id);
itemDescMapper.updateByExampleSelective(itemDesc, tbItemDescExample);

return TaotaoResult.ok();
}
  
  

 

3.2.2表现层

 在taotao-manager-web的ItemCotroller中编写controller

  
  
/**
* 更新商品信息
* @param item
* @param desc
* @return
*/
@RequestMapping(value="/item/update")
@ResponseBody
public TaotaoResult updateItem(TbItem item, String desc) {
TaotaoResult result = itemService.updateItem(item, desc);
return result;
}
  
  

4.注意事项

item-edit.jsp与item-list.jsp里面的url一定要与controller中的对应，因为item-edit.jsp与item-list.jsp我修改了一点，与原页面不一样。

版权声明：本文为博主转载，出处为 https://blog.csdn.net/pdsu161530247/article/details/81808859

目录