概述
在完成了 实战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> <input id="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 ; // 商品添加URL var addProductURL = '/o2o/shopadmin/addproduct'; // 商品编辑URL TODO var editProductURL = ''; // 获取商品初始化信息的URL 根据页面原型只需要获取productCategory即可，后台调用之前写好的路由方法即可 var initProductURL = '/o2o/shopadmin/getproductcategorybyshopId'; // 通过标示符，确定调用的方法 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_category var 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 = {}; // 如果是编辑操作,需要传入productId if(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 ,添加到forData formData.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
