文章目錄

• 概述
• 步驟
• 前后端調(diào)測
• Github地址

概述

按照設(shè)計，有如下幾個點

• 修改商鋪和注冊商鋪肯定是一個頁面，這個毋庸置疑

• 商鋪名稱不能修改，店鋪類別不能修改，其余信息可編輯修改

• 修改商鋪的時候，圖片上傳不是必須的

• 需要動態(tài)的根據(jù)URL來判斷是注冊還是修改店鋪

步驟

首先新增兩個url

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

// 通過shopId獲取商鋪信息的URLvar getShopInfoByShopId = '/o2o/shopadmin/getshopinfobyId?shopId=' + shopId;// 修改商鋪的URLvar 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 調(diào)用即可，同時根據(jù)請求的URL來判斷是注冊還是編輯商鋪。

// 通過url是否含有shopId來判斷是注冊還是編輯商鋪var shopId = getQueryString('shopId');// shopId非空返回true，空者返回falsevar isEdit = shopId ? true :false;// 根據(jù)isEdit 來判斷 是注冊商品還是修改商鋪if(!isEdit){// 調(diào)用getShopInitInfo，注冊店鋪用getShopInitInfo();}else{// 調(diào)用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);// 商品目錄進(jìn)行賦值 商品目錄僅僅加載對應(yīng)的目錄，且不可編輯var shopCategory = '<option data-id="'+shop.shopCategory.shopCategoryId + '" selected>'+shop.shopCategory.shopCategoryName +'</option>';$('#shop-category').html(shopCategory);// 設(shè)置為不可編輯$('#shop-category').attr('disabled','disabled');// 區(qū)域進(jìn)行賦值 區(qū)域可以進(jìn)行編輯，并且初始設(shè)置為后臺對應(yīng)的區(qū)域var tempShopAreaHtml = '';data.areaList.map(function(item, index) {tempShopAreaHtml += '<option data-id="' + item.areaId+ '">' + item.areaName + '</option>';});$('#shop-area').html(tempShopAreaHtml);//初始設(shè)置為后臺對應(yīng)的區(qū)域 $("#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({// 動態(tài)判斷 urlurl: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);}// 點擊提交后 不管成功失敗都更換驗證碼，防止重復(fù)提交$('#kaptcha_img').click();}});

---

前后端調(diào)測

可以看到商鋪名稱和商鋪類別不可以修改

可以在前端進(jìn)行debug，controller層的兩個方法也加入斷點，tomcat開啟debug模式逐步的調(diào)測。

訪問http://localhost:8080/o2o/shopadmin/shopoperation?shopId=28

右側(cè)加入斷點，可以進(jìn)行前端的調(diào)測。

(上面這兩個圖是發(fā)布文章后補充的，數(shù)據(jù)和下圖表中的數(shù)據(jù)不完全一致，請忽略)

---

對shopId=28的數(shù)據(jù)進(jìn)行修改，
修改后的數(shù)據(jù)如下：

圖片數(shù)據(jù)：

---

Github地址

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

總結(jié)

以上是生活随笔為你收集整理的实战SSM_O2O商铺_20【商铺编辑】View层开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。