當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

shop--10.商品--商品添加（前端）及问题的解决

發布時間：2023/12/20 HTML 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 shop--10.商品--商品添加（前端）及问题的解决小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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"> </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"></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"><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><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來判斷是編輯還是新增。

/*** 因為商品的添加和編輯復用同一個頁面，所以需要根據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/getproductcategorylist';// 通過標示符，確定調用的方法if(isEdit){// 為true，則根據productId調用獲取product信息的方法 TODO getProductInfoById(productId);}else{// 為false，則初始化新增product頁面 getProductInitInfo();}/*** 始化新增product頁面* * 根據頁面原型和數據模型，需要加載該shop對應的productCategory信息(shop信息從服務端session中獲取)*/function getProductInitInfo(){$.getJSON(initProductURL,function(data){if(data.success){// 設置product_categoryvar productCategoryTempHtml = '';data.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(){console.log(data)if (data.success) {$.toast('提交成功！');$('#captcha_img').click();} else {$.toast('提交失敗！');$('#captcha_img').click();}},error:function(err){console.log(err.status);console.log('異常');}});}); });

問題

在調試的時候發現String index out of range: -1超出索引

debug 發現是ImageUtil里的獲取后綴名方法出錯了

但是在測試Service時候是可以插入的那么問題肯定出現在Controller層了，看看哪里使用到了ImageUtil方法

try {//若請求中存在文件流，則取出相關的文件（包括縮略圖和詳情圖）if(commonsMultipartResolver.isMultipart(request)) {// 將HttpServletRequest轉型為MultipartHttpServletRequest，可以很方便地得到文件名和文件內容multipartHttpServletRequest = (MultipartHttpServletRequest) request;//1.接收商品縮略圖取出縮略圖并構建ImageHolder對象 CommonsMultipartFile thumbnailFile = (CommonsMultipartFile) multipartHttpServletRequest.getFile("thumbnail");//2.轉化為ImageHolder，使用service層的參數類型要求thumbnail = new ImageHolder(thumbnailFile.getOriginalFilename(), thumbnailFile.getInputStream());//3.取出詳情圖列表并構建List<ImageHolder>列表對象，最多支持六張圖上傳for(int i = 0; i < IMAGEMAXCOUNT; i++){CommonsMultipartFile File = (CommonsMultipartFile) multipartHttpServletRequest.getFile("productImg" + i);if(File != null){//若取出的第i個詳情圖片文件流不為空，則將其加入詳情圖列表ImageHolder productImg = new ImageHolder(File.getName(), File.getInputStream());productImgList.add(productImg);} else {//若取出的第i個詳情圖片文件流為空，則終止循環break;}}}

原來是

getName : 獲取表單中文件組件的名字
getOriginalFilename : 獲取上傳文件的原名

這里出錯了將getName() 改成 getOriginalFilename()即可

同時將之前的改過來

shop--10.商品--商品添加（后端）

轉載于:https://www.cnblogs.com/windbag7/p/9412538.html

總結

以上是生活随笔為你收集整理的shop--10.商品--商品添加（前端）及问题的解决的全部內容，希望文章能夠幫你解決所遇到的問題。

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

商品
shop

上一篇：洛谷 P2324 [SCOI2005]骑
下一篇： P2038 无线网络发射器选址