文章目录
- 概述
- 步骤
- 前后端调测
- Github地址
概述
按照设计，有如下几个点
- 修改商铺和注册商铺肯定是一个页面，这个毋庸置疑
- 商铺名称不能修改，店铺类别不能修改，其余信息可编辑修改
- 修改商铺的时候，图片上传不是必须的
- 需要动态的根据URL来判断是注册还是修改店铺
步骤
首先新增两个url
/o2o/src/main/webapp/resources/js/shop/shopoperation.js
代码语言：javascript复制 // 通过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中写个公共方法
代码语言：javascript复制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来判断是注册还是编辑商铺。
代码语言：javascript复制 // 通过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);
代码语言：javascript复制/**
* 通过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 = ' shop.shopCategory.shopCategoryId '" selected>'
shop.shopCategory.shopCategoryName '';
$('#shop-category').html(shopCategory);
// 设置为不可编辑
$('#shop-category').attr('disabled','disabled');
// 区域进行赋值 区域可以进行编辑，并且初始设置为后台对应的区域
var tempShopAreaHtml = '';
data.areaList.map(function(item, index) {
tempShopAreaHtml = ' item.areaId
'">' item.areaName '';
});
$('#shop-area').html(tempShopAreaHtml);
//初始设置为后台对应的区域
$("#shop-area option[data-id='" shop.area.areaId "']").attr("selected","selected");
}else{
$.toast(data.errMsg);
}
});
};submit方法修改
代码语言：javascript复制// 如果是编辑，需要传入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
