概述
在完成了后端的逻辑后，我们来实现商品列表的View层的实现。
先看下效果
productmanagement.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="content-block"> <div class="row row-product"> <div class="col-33">商品名称</div> <div class="col-33">优先级</div> <div class="col-33">操作</div> </div> <div class="product-wrap"> <!-- <div class="row row-product"> <div class="col-40">商品名称</div> <div class="col-60"> <a href="#">编辑</a> <a href="#">删除</a> <a href="#">预览</a> </div> </div> --> </div> </div> <div class="content-block"> <div class="row"> <div class="col-50"> <a href="/o2o/shopadmin/shopmanagement" class="button button-big button-fill button-danger">返回</a> </div> <div class="col-50"> <a href="#" class="button button-big button-fill button-success" id="new">新增</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/shop/productmanage.js' charset='utf-8'></script> </body> </html>
productmanage.css
.row-product { border: 1px solid #999; padding: .5rem; border-bottom: none; } .row-product:last-child { border-bottom: 1px solid #999; } .product-name { white-space: nowrap; overflow-x: scroll; } .product-wrap a { margin-right: 1rem; }
productmanage.js
$(function() { var listUrl = '/o2o/shopadmin/getproductlist?pageIndex=1&pageSize=9999'; var changeStuatusURL = '/o2o/shopadmin/changestatus'; getList(); function getList() { $.getJSON(listUrl, function(data) { if (data.success) { var productList = data.productList; var tempHtml = ''; productList.map(function(item, index) { var textOp = "下架"; var contraryStatus = 0; if (item.enableStatus == 0) { textOp = "上架"; contraryStatus = 1; } else { contraryStatus = 0; } tempHtml += '' + '<div class="row row-product">' + '<div class="col-33">' + item.productName + '</div>' + '<div class="col-33">' + item.priority + '</div>' + '<div class="col-33">' + '<a href="#" class="edit" data-id="' + item.productId + '" data-status="' + item.enableStatus + '">编辑</a>' + '<a href="#" class="status" data-id="' + item.productId + '" data-status="' + contraryStatus + '">' + textOp + '</a>' + '<a href="#" class="preview" data-id="' + item.productId + '" data-status="' + item.enableStatus + '">预览</a>' + '</div>' + '</div>'; }); $('.product-wrap').html(tempHtml); } }); } /** * 下架操作 */ function changeStatus(id, enableStatus) { var product = {}; product.productId = id; product.enableStatus = enableStatus; $.confirm('确定么?', function() { $.ajax({ url : changeStuatusURL, type : 'POST', data : { productStr : JSON.stringify(product) }, dataType : 'json', success : function(data) { if (data.success) { $.toast(data.errMsg); getList(); } else { $.toast(data.errMsg); } } }); }); } $('.product-wrap').on( 'click', 'a', function(e) { var target = $(e.currentTarget); if (target.hasClass('edit')) { window.location.href = '/o2o/shopadmin/productoperation?productId=' + e.currentTarget.dataset.id; } else if (target.hasClass('status')) { changeStatus(e.currentTarget.dataset.id, e.currentTarget.dataset.status); } else if (target.hasClass('preview')) { // TODO window.location.href = '/o2o/frontend/productdetail?productId=' + e.currentTarget.dataset.id; } }); $('#new').click(function() { window.location.href = '/o2o/shopadmin/productoperation'; }); });
联调
前端开启debug调测，后端加入断点，debug模式开启tomcat，逐步调测功能。
Github地址
代码地址： https://github.com/yangshangwei/o2o
