实战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模式逐步的调测。

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

图片数据：