文章目錄

• 概述
• productoperation.js
• 驗證
• Github地址

概述

接下來，我們來實現下 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层的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。