概述

接下来，我们来实现下 View层部分的操作。

productoperation.js

/***  因为商品的添加和编辑复用同一个页面，所以需要根据url中的商品Id来判断*/
$(function(){//通过url是否含有productId来判断是添加商品还是编辑var productId = getQueryString('productId');// 标示符  productId非空则为true即编辑，否则为添加商品var isEdit = productId ? true : false ;// 商品添加URL 用于提交 var addProductURL = '/o2o/shopadmin/addproduct';// 商品编辑URL 用于提交 var editProductURL = '/o2o/shopadmin/modifyproduct?productId=' + productId;// 获取商品初始化信息的URL  根据页面原型只需要获取productCategory即可，后台调用之前写好的路由方法即可var categoryInfoURL = '/o2o/shopadmin/getproductcategorybyshopId';// 商品编辑URL 用于从后台加载该product的基本信息，页面展示用var productInitURL = '/o2o/shopadmin/getproductbyid?productId=' + productId;// 通过标示符，确定调用的方法if(isEdit){// 为true，则根据productId调用获取product信息的方法  showEditProductPage(productId);}else{// 为false，则初始化新增product页面showAddProductPage();}/*** 始化新增product页面* * 根据页面原型和数据模型，需要加载该shop对应的productCategory信息(shop信息从服务端session中获取)*/function showAddProductPage(){$.getJSON(categoryInfoURL,function(data){if(data.success){// 设置product_categoryvar productCategoryList = data.data;var productCategoryTempHtml = '';productCategoryList.map(function(item, index) {//                          productCategoryTempHtml += '<option data-id="'
//                                  + item.productCategoryId + '">' + item.productCategoryName
//                                  + '</option>';productCategoryTempHtml += '<option data-value="'+ item.productCategoryId + '">'+ item.productCategoryName + '</option>';});$('#product-category').html(productCategoryTempHtml);}else{$.toast(data.errMsg)}});};/*** 点击控件的最后一个且图片数量小于6个的时候，生成一个选择框*/$('.detail-img-div').on('change', '.detail-img:last-child', function() {if ($('.detail-img').length < 6) {$('#detail-img').append('<input type="file" class="detail-img">');}});/*** 编辑页面调用的function*/function showEditProductPage(productId){$.getJSON(productInitURL,function(data) {if (data.success) {var product = data.product;$('#product-name').val(product.productName);$('#product-desc').val(product.productDesc);$('#priority').val(product.priority);$('#normal-price').val(product.normalPrice);$('#promotion-price').val(product.promotionPrice);var optionHtml = '';var optionArr = data.productCategoryList;var optionSelected = product.productCategory.productCategoryId;optionArr.map(function(item, index) {var isSelect = optionSelected === item.productCategoryId ? 'selected': '';optionHtml += '<option data-value="'+ item.productCategoryId+ '"'+ isSelect+ '>'+ item.productCategoryName+ '</option>';});$('#product-category').html(optionHtml);}});};/*** 提交按钮的响应时间,分别对商品添加和商品编辑做不同的相应*/$('#submit').click(function(){// 创建商品Json对象，并从表单对象中获取对应的属性值var product = {};// 如果是编辑操作,需要传入productIdif(isEdit){product.productId = productId;}product.productName = $('#product-name').val();product.productDesc = $('#product-desc').val();// 获取商品的特定目录值product.productCategory = {productCategoryId : $('#product-category').find('option').not(function() {return !this.selected;}).data('value')};product.priority = $('#priority').val();product.normalPrice = $('#normal-price').val();product.promotionPrice = $('#promotion-price').val();// 生成表单对象用于接收参数并传递给后台var formData = new FormData();// 缩略图 （只有一张），获取缩略图的文件流var thumbnail = $('#small-img')[0].files[0];formData.append('thumbnail',thumbnail);// 图片详情$('.detail-img').map(function(index, item) {// 判断该控件是否已经选择了文件    if ($('.detail-img')[index].files.length > 0) {// 将第i个文件流赋值给key为productImgi的表单键值对里formData.append('productImg' + index,$('.detail-img')[index].files[0]);}});// 将product 转换为json ,添加到forDataformData.append('productStr', JSON.stringify(product));// 获取表单中的验证码var verifyCodeActual = $('#j_captcha').val();if (!verifyCodeActual) {$.toast('请输入验证码！');return;}formData.append("verifyCodeActual", verifyCodeActual);// 使用ajax异步提交$.ajax({url: isEdit?editProductURL:addProductURL,type: 'POST' ,data : formData,contentType : false,processData : false,cache : false,success: function(data){if (data.success) {$.toast('提交成功！');$('#captcha_img').click();} else {$.toast('提交失败！');$('#captcha_img').click();}}});});
});

验证

因为后台有多session进行校验，所以需要先进入店铺管理页面（先进入shoplist页面，然后进入已经审核过的店铺，即可完成将session写入到服务端。）。我们还没实现商品列表页面，所以需要手工输入下商品编辑的地址。

假设前面的步骤操作完成，我们直接来编辑下页面，以productId=7为例
http://localhost:8080/o2o/shopadmin/productoperation?productId=7

前端debug方式调测下能否正确的获取到值，后端在modifyProduct方法中加入断点，debug的方式启动tomcat，逐步调测，最后检查库表中的记录以及磁盘上的文件。

select * from tb_product  where product_id = 7;

select * from tb_product_img  where product_id = 7;

磁盘上的文件：

有个问题，当不传入图片的时候，会报错。需要加个判断，后续完善。
前端的content-type：multipart/form-data

Controller中判断，然后进入了改方法，获取文件时空指针异常。

Github地址

代码地址： https://github.com/yangshangwei/o2o

实战SSM_O2O商铺_35【商品】商品编辑之View层的实现相关推荐

实战SSM_O2O商铺_34【商品】商品编辑之Controller层的实现
文章目录概述 ProductController 单元测试 Github地址概述在完成了实战SSM_O2O商铺_33[商品]商品编辑之Service层的实现之后,我们继续来实现Controll ...
实战SSM_O2O商铺_32【商品】商品编辑之Dao层的实现
文章目录概述 Dao层接口 ProductDao#selectProductById ProductDao#updateProduct ProductImgDao#deleteProductImgB ...
实战SSM_O2O商铺_31【商品】商品添加之View层的实现
文章目录概述 productoperation.html productoperation.js 联调检查结果库表数据: 磁盘上的图片 Github地址概述在完成了实战SSM_O2O商铺_ ...
实战SSM_O2O商铺_38【商品类别】解除商品与商品类别的关联
文章目录概述 Dao层 ProductDao.java ProductDao.xml 单元测试 Service层完善 ProductCategoryServiceImpl#deleteProduct ...
实战SSM_O2O商铺_28【商品】商品添加之Dao层的实现
文章目录概述重温实体类 Prouct ProductImg ProductDao接口 Mapper配置文件 ProductImgDao接口 Mapper配置文件单元测试 #ProductDaoT ...
实战SSM_O2O商铺_27【商品类别】删除商品类别从Dao到View层的开发
文章目录概述 Dao层 ProductCategoryDao接口增加接口方法 ProductCategoryDao SQL映射文件闭环的单元测试 Servie层接口接口实现单元测试 Cont ...
实战SSM_O2O商铺_26【商品类别】批量新增商品类别从Dao到View层的开发
文章目录概述 Dao层 ProductCategoryDao接口 ProductCategoryDao SQL映射文件单元测试 Service层 ProductCategoryExecution ...
实战SSM_O2O商铺_37【商品】商品列表之View层的实现
文章目录概述 productmanagement.html productmanage.css productmanage.js 联调 Github地址概述在完成了后端的逻辑后,我们来实现商品列 ...
实战SSM_O2O商铺_25【商品类别】商品类别列表展示从Dao到View层的开发
文章目录概述 Dao层 ProductCategoryDao接口 ProductCategoryDao Mapper配置文件单元测试 Service层 ProductCategoryService ...

实战SSM_O2O商铺_35【商品】商品编辑之View层的实现

文章目录

概述

productoperation.js

验证

Github地址

实战SSM_O2O商铺_35【商品】商品编辑之View层的实现相关推荐

最新文章

热门文章