实战SSM_O2O商铺_31【商品】商品添加之View层的实现
生活随笔
收集整理的這篇文章主要介紹了
实战SSM_O2O商铺_31【商品】商品添加之View层的实现
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- 概述
- productoperation.html
- productoperation.js
- 聯(lián)調(diào)
- 檢查結(jié)果
- 庫(kù)表數(shù)據(jù)：
- 磁盤上的圖片
- Github地址
概述
在完成了 實(shí)戰(zhàn)SSM_O2O商鋪_30【商品】商品添加之Controller層的實(shí)現(xiàn)之后，我們繼續(xù)來(lái)實(shí)現(xiàn)View層的代碼部分。
商品添加和商品編輯使用的是同一個(gè)頁(yè)面，所以需要根據(jù)請(qǐng)求的url來(lái)判斷是編輯還是新增。
按照頁(yè)面原型和數(shù)據(jù)模型，商品添加頁(yè)面需要加載該shopId對(duì)應(yīng)的productCategory。 這個(gè)功能前面已經(jīng)開發(fā)好了，直接調(diào)用即可。
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">優(yōu)先級(jí)</div><div class="item-input"><input type="number" id="priority" placeholder="數(shù)字越大越排前面"></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">原價(jià)</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">現(xiàn)價(jià)</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">驗(yàn)證碼</label> <inputid="j_captcha" name="j_captcha" type="text"class="form-control in" placeholder="驗(yàn)證碼" /><div class="item-input"><img id="captcha_img" alt="點(diǎn)擊更換" title="點(diǎn)擊更換"onclick="changeVerifyCode(this)" src="../Kaptcha" /></div></div></div></li></ul></div><div class="content-block"><!-- 預(yù)留兩個(gè)按鈕 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
/*** 因?yàn)樯唐返奶砑雍途庉嫃?fù)用同一個(gè)頁(yè)面，所以需要根據(jù)url中的商品Id來(lái)判斷*/ $(function(){//通過(guò)url是否含有productId來(lái)判斷是添加商品還是編輯var productId = getQueryString('productId');// 標(biāo)示符 productId非空則為true即編輯，否則為添加商品var isEdit = productId ? true : false ;// 商品添加URLvar addProductURL = '/o2o/shopadmin/addproduct';// 商品編輯URL TODOvar editProductURL = '';// 獲取商品初始化信息的URL 根據(jù)頁(yè)面原型只需要獲取productCategory即可，后臺(tái)調(diào)用之前寫好的路由方法即可var initProductURL = '/o2o/shopadmin/getproductcategorybyshopId';// 通過(guò)標(biāo)示符，確定調(diào)用的方法if(isEdit){// 為true，則根據(jù)productId調(diào)用獲取product信息的方法 TODOgetProductInfoById(productId);}else{// 為false，則初始化新增product頁(yè)面getProductInitInfo();}/*** 始化新增product頁(yè)面* * 根據(jù)頁(yè)面原型和數(shù)據(jù)模型，需要加載該shop對(duì)應(yīng)的productCategory信息(shop信息從服務(wù)端session中獲取)*/function getProductInitInfo(){$.getJSON(initProductURL,function(data){if(data.success){// 設(shè)置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)}});};/*** 點(diǎn)擊控件的最后一個(gè)且圖片數(shù)量小于6個(gè)的時(shí)候，生成一個(gè)選擇框*/$('.detail-img-div').on('change', '.detail-img:last-child', function() {if ($('.detail-img').length < 6) {$('#detail-img').append('<input type="file" class="detail-img">');}});/*** 提交按鈕的響應(yīng)時(shí)間,分別對(duì)商品添加和商品編輯做不同的相應(yīng)*/$('#submit').click(function(){// 創(chuàng)建商品Json對(duì)象，并從表單對(duì)象中獲取對(duì)應(yīng)的屬性值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();// 生成表單對(duì)象用于接收參數(shù)并傳遞給后臺(tái)var formData = new FormData();// 縮略圖 （只有一張），獲取縮略圖的文件流var thumbnail = $('#small-img')[0].files[0];formData.append('thumbnail',thumbnail);// 圖片詳情$('.detail-img').map(function(index, item) {// 判斷該控件是否已經(jīng)選擇了文件 if ($('.detail-img')[index].files.length > 0) {// 將第i個(gè)文件流賦值給key為productImgi的表單鍵值對(duì)里formData.append('productImg' + index,$('.detail-img')[index].files[0]);}});// 將product 轉(zhuǎn)換為json ,添加到forDataformData.append('productStr', JSON.stringify(product));// 獲取表單中的驗(yàn)證碼var verifyCodeActual = $('#j_captcha').val();if (!verifyCodeActual) {$.toast('請(qǐng)輸入驗(yàn)證碼！');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();}}});}); });聯(lián)調(diào)
前端加入斷點(diǎn)，逐步調(diào)測(cè)，檢查前端獲取的數(shù)據(jù)的準(zhǔn)確性
后端Controller層加入斷點(diǎn)，待前端無(wú)誤后進(jìn)入Controller逐步調(diào)測(cè)，觀察數(shù)據(jù)，確保結(jié)果正確。
檢查結(jié)果
庫(kù)表數(shù)據(jù)：
select * from tb_product where product_id = 7; select * from tb_product_img where product_id = 7;我這里生成的product_id為7，具體視實(shí)際情況
磁盤上的圖片
核對(duì)下圖片是否和上傳的圖片一致以及圖片名稱是否和數(shù)據(jù)庫(kù)中的記錄匹配。
Github地址
代碼地址： https://github.com/yangshangwei/o2o
總結(jié)
以上是生活随笔為你收集整理的实战SSM_O2O商铺_31【商品】商品添加之View层的实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 实战SSM_O2O商铺_30【商品】商品
- 下一篇： 实战SSM_O2O商铺_32【商品】商品