实战SSM_O2O商铺_31【商品】商品添加之View层的实现
生活随笔
收集整理的這篇文章主要介紹了
实战SSM_O2O商铺_31【商品】商品添加之View层的实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 概述
- productoperation.html
- productoperation.js
- 聯調
- 檢查結果
- 庫表數據：
- 磁盤上的圖片
- Github地址
概述
在完成了 實戰SSM_O2O商鋪_30【商品】商品添加之Controller層的實現之后，我們繼續來實現View層的代碼部分。
商品添加和商品編輯使用的是同一個頁面，所以需要根據請求的url來判斷是編輯還是新增。
按照頁面原型和數據模型，商品添加頁面需要加載該shopId對應的productCategory。 這個功能前面已經開發好了，直接調用即可。
productoperation.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>商品操作</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <link rel="shortcut icon" href="/favicon.ico"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet"href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"> <link rel="stylesheet"href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"> <link rel="stylesheet" href="../resources/css/shop/productmanage.css"> </head> <body><header class="bar bar-nav"><h1 class="title">商品操作</h1></header><div class="content"><div class="list-block"><ul><li><div class="item-content"><div class="item-media"><i class="icon icon-form-name"></i></div><div class="item-inner"><div class="item-title label">商品名稱</div><div class="item-input"><input type="text" id="product-name" placeholder="商品名稱"></div></div></div></li><li><div class="item-content"><div class="item-media"><i class="icon icon-form-email"></i></div><div class="item-inner"><div class="item-title label">目錄</div><div class="item-input"><select id="product-category"></select></div></div></div></li><li><div class="item-content"><div class="item-media"><i class="icon icon-form-email"></i></div><div class="item-inner"><div class="item-title label">優先級</div><div class="item-input"><input type="number" id="priority" placeholder="數字越大越排前面"></div></div></div></li><li><div class="item-content"><div class="item-media"><i class="icon icon-form-email"></i></div><div class="item-inner"><div class="item-title label">原價</div><div class="item-input"><input type="number" id="normal-price" placeholder="可選"></div></div></div></li><li><div class="item-content"><div class="item-media"><i class="icon icon-form-email"></i></div><div class="item-inner"><div class="item-title label">現價</div><div class="item-input"><input type="number" id="promotion-price" placeholder="可選"></div></div></div></li><li><div class="item-content"><div class="item-media"><i class="icon icon-form-email"></i></div><div class="item-inner"><div class="item-title label">縮略圖</div><div class="item-input"><input type="file" id="small-img"></div></div></div></li><li><div class="item-content"><div class="item-media"><i class="icon icon-form-email"></i></div><div class="item-inner detail-img-div"><div class="item-title label">詳情圖片</div><div class="item-input" id="detail-img"><input type="file" class="detail-img"><!-- <input type="file" class="detail-img" id="detail-img-1"><input type="file" class="detail-img" id="detail-img-2"> --></div></div></div></li><li><div class="item-content"><div class="item-media"><i class="icon icon-form-email"></i></div><div class="item-inner"><div class="item-title label">商品描述</div><div class="item-input"><textarea id="product-desc" placeholder="商品描述"></textarea></div></div></div></li><li><div class="item-content"><div class="item-media"><i class="icon icon-form-email"></i></div><div class="item-inner"><label for="j_captcha" class="item-title label">驗證碼</label> <inputid="j_captcha" name="j_captcha" type="text"class="form-control in" placeholder="驗證碼" /><div class="item-input"><img id="captcha_img" alt="點擊更換" title="點擊更換"onclick="changeVerifyCode(this)" src="../Kaptcha" /></div></div></div></li></ul></div><div class="content-block"><!-- 預留兩個按鈕 TODO --><div class="row"><div class="col-50"><a href="#"class="button button-big button-fill button-danger" id="back">返回商品管理</a></div><div class="col-50"><a href="#" class="button button-big button-fill" id="submit">提交</a></div></div></div></div><script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script><script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script><script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script><!-- 引入自定義的JS --><script type='text/javascript' src='../resources/js/common/common.js' charset='utf-8'></script><script type='text/javascript' src='../resources/js/shop/productoperation.js' charset='utf-8'></script></body> </html>productoperation.js
/*** 因為商品的添加和編輯復用同一個頁面，所以需要根據url中的商品Id來判斷*/ $(function(){//通過url是否含有productId來判斷是添加商品還是編輯var productId = getQueryString('productId');// 標示符 productId非空則為true即編輯，否則為添加商品var isEdit = productId ? true : false ;// 商品添加URLvar addProductURL = '/o2o/shopadmin/addproduct';// 商品編輯URL TODOvar editProductURL = '';// 獲取商品初始化信息的URL 根據頁面原型只需要獲取productCategory即可，后臺調用之前寫好的路由方法即可var initProductURL = '/o2o/shopadmin/getproductcategorybyshopId';// 通過標示符，確定調用的方法if(isEdit){// 為true，則根據productId調用獲取product信息的方法 TODOgetProductInfoById(productId);}else{// 為false，則初始化新增product頁面getProductInitInfo();}/*** 始化新增product頁面* * 根據頁面原型和數據模型，需要加載該shop對應的productCategory信息(shop信息從服務端session中獲取)*/function getProductInitInfo(){$.getJSON(initProductURL,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">');}});/*** 提交按鈕的響應時間,分別對商品添加和商品編輯做不同的相應*/$('#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(){if (data.success) {$.toast('提交成功！');$('#captcha_img').click();} else {$.toast('提交失敗！');$('#captcha_img').click();}}});}); });聯調
前端加入斷點，逐步調測，檢查前端獲取的數據的準確性
后端Controller層加入斷點，待前端無誤后進入Controller逐步調測，觀察數據，確保結果正確。
檢查結果
庫表數據：
select * from tb_product where product_id = 7; select * from tb_product_img where product_id = 7;我這里生成的product_id為7，具體視實際情況
磁盤上的圖片
核對下圖片是否和上傳的圖片一致以及圖片名稱是否和數據庫中的記錄匹配。
Github地址
代碼地址： https://github.com/yangshangwei/o2o
總結
以上是生活随笔為你收集整理的实战SSM_O2O商铺_31【商品】商品添加之View层的实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实战SSM_O2O商铺_30【商品】商品
- 下一篇： 实战SSM_O2O商铺_32【商品】商品