淘淘商城-商城后台商品列表之商品编辑（商品管理-查询商品-编辑商品）

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我修改了一点，与原页面不一样。

淘淘商城-商城后台商品列表之商品编辑（商品管理-查询商品-编辑商品）相关推荐

java商品列表展示_springMVC入门程序。使用springmvc实现商品列表的展示。
1.1 开发环境本教程使用环境: Jdk:jdk1.7.0_72 Eclipse:mars Tomcat:apache-tomcat-7.0.53 Springmvc:4.1.3 1.2 需求使用 ...
关于淘淘商城的一些基本说明
关于淘淘商城的一些基本说明 1. maven Maven的常见打包方式:jar.war.pom Pom工程一般都是父工程,管理jar包的版本.maven插件的版本.统一的依赖管理.聚合工程. jar包 ...
1688、淘宝、京东多平台根据关键词取商品列表 API 返回值说明
多平台根据关键词取商品列表 API 返回值说明 item_search-根据关键词取商品列表 t1j.item_search 公共参数名称类型必须描述 key String 是调用key(必 ...
商城项目商品列表页的渲染实现(含动图)
有了v-for循环,渲染商品列表简直不要太方便了,以前写一个商品列表页要一天,现在只需要几分钟,除了模拟数据会耗一点时间.这里可以了解下Mock模拟数据,它可使前端工程师独立于后端进行开发,在前端可以 ...
黑马淘淘商城第十二天购物车实现、订单确认页面展示
1. 课程计划第十二天: 1.购物车实现 2.订单确认页面展示 2. 购物车的实现 2.1. 功能分析 1.购物车是一个独立的表现层工程. 2.添加购物车不要求登录.可以指定购买商品的数量. 3.展 ...
Django项目实践（商城）：十五、商品列表页面
(根据居然老师直播课内容整理) 一.商品列表页面分析 1.商品频道分类 -已经在"首页广告""首页商品频道分类"中实现,将相关代码封装到contents.uti ...
微信小程序开发一个小型商城（四、商品列表）
上一篇文章,微信小程序开发一个小型商城(三.商品分类设计) 在从上一个界面跳转过来,会看到商品列表这个界面:如下图所示: 页面分析:从上到下:分别是一个已经定义好的自定义组件,下面的综合,销量,也是一 ...
实现淘宝搜索后界面显示商品列表效果
目录 activity_main.xml list_view_header.xml mainactivity.xml 用于高校Android studio课程课后作业实例,如无必要,请勿抄袭实现了商 ...
淘淘商城业务--加油
介绍这个项目的结构我们整个的项目框架采用的是spring+springmvc+mybatis框架搭建的.考虑到项目的安全性.海量数据.高并发,我们项目采用的是分布式架构,首先我们搭建一个大的聚合父工 ...
美多商城之商品(商品列表页)
四.商品列表页 4.1 商品列表页分析 4.1.1. 商品列表页组成结构分析 1.商品频道分类已经提前封装在contents.utils.py文件中,直接调用即可. 2.面包屑导航可以使用三级分类 ...

淘淘商城-商城后台商品列表之商品编辑（商品管理-查询商品-编辑商品）

淘淘商城-商城后台商品列表之商品编辑（商品管理-查询商品-编辑商品）相关推荐

最新文章

热门文章