实战SSM_O2O商铺_20【商铺编辑】View层开发

概述

按照设计，有如下几个点

• 修改商铺和注册商铺肯定是一个页面，这个毋庸置疑

• 商铺名称不能修改，店铺类别不能修改，其余信息可编辑修改

• 修改商铺的时候，图片上传不是必须的

• 需要动态的根据URL来判断是注册还是修改店铺

步骤

首先新增两个url

/o2o/src/main/webapp/resources/js/shop/shopoperation.js

	// 通过shopId获取商铺信息的URL
	var getShopInfoByShopId = '/o2o/shopadmin/getshopinfobyId?shopId=' + shopId;
	// 修改商铺的URL
	var modifyShopUrl = '/o2o/shopadmin/modifyshop';

shopId 如何获取呢？

/o2o/src/main/webapp/resources/js/common/common.js中写个公共方法

function getQueryString(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	if (r != null) {
		return decodeURIComponent(r[2]);
	}
	return '';
}

在shopoperation.js 调用即可，同时根据请求的URL来判断是注册还是编辑商铺。

	// 通过url是否含有shopId来判断是注册还是编辑商铺
	var shopId  = getQueryString('shopId');
	// shopId非空返回true，空者返回false
	var isEdit = shopId ? true :false;

	// 根据isEdit 来判断 是注册商品还是修改商铺
	if(!isEdit){
		// 调用getShopInitInfo，注册店铺用
		getShopInitInfo();
	}else{
		// 调用getShopInfoById，修改店铺用
		getShopInfoById(shopId);
	}

编写getShopInfoById(shopId);

/**
	 * 通过shopId获取shop信息
	 */
	function getShopInfoById(shopId){
		$.getJSON(getShopInfoByShopId,function(data){
			if(data.success){
				// 将后台返回的shop通过shop变量接收，方便赋值
				var shop =  data.shop;
				// 赋值   要和shop实体类中的属性名保持一致
				$('#shop-name').val(shop.shopName);
				$('#shop-name').attr('disabled','disabled');
				$('#shop-addr').val(shop.shopAddr);
				$('#shop-phone').val(shop.phone);
				$('#shop-desc').val(shop.shopDesc);
				
				// 商品目录进行赋值   商品目录仅仅加载对应的目录，且不可编辑
				var shopCategory = '<option data-id="'
					+shop.shopCategory.shopCategoryId + '" selected>'
					+shop.shopCategory.shopCategoryName +'</option>';
				$('#shop-category').html(shopCategory);
				// 设置为不可编辑
				$('#shop-category').attr('disabled','disabled');
				
				// 区域进行赋值  区域可以进行编辑，并且初始设置为后台对应的区域
				var tempShopAreaHtml = '';
				data.areaList.map(function(item, index) {
					tempShopAreaHtml += '<option data-id="' + item.areaId
							+ '">' + item.areaName + '</option>';
				});
				$('#shop-area').html(tempShopAreaHtml);
				//初始设置为后台对应的区域 
				$("#shop-area option[data-id='"+shop.area.areaId+"']").attr("selected","selected");

			}else{
				$.toast(data.errMsg);
			}
		});
	};
	

submit方法修改

// 如果是编辑，需要传入shopId
if(isEdit){
   shop.shopId=shopId;
          }


..... 省略，注意url处的修改

// 利用ajax提交
		$.ajax({
			// 动态判断 url
			url:isEdit ? modifyShopUrl:registerShopUrl,
			type:'POST',
			data:formData,
			contentType:false,
			processData:false,
			cache:false,
			success:function(data){
				if(data.success){
					$.toast('提示信息:'+data.errMsg);
				}else{
					$.toast('提示信息:' + data.errMsg);
				}
				// 点击提交后 不管成功失败都更换验证码，防止重复提交
				$('#kaptcha_img').click();
			}
		});

---

前后端调测

可以看到商铺名称和商铺类别不可以修改

可以在前端进行debug，controller层的两个方法也加入断点，tomcat开启debug模式逐步的调测。

访问http://localhost:8080/o2o/shopadmin/shopoperation?shopId=28

右侧加入断点，可以进行前端的调测。

(上面这两个图是发布文章后补充的，数据和下图表中的数据不完全一致，请忽略)

---

对shopId=28的数据进行修改，
修改后的数据如下：

图片数据：

---

Github地址

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