概述

在完成了后端的逻辑后，我们来实现商品列表的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

实战SSM_O2O商铺_37【商品】商品列表之View层的实现相关推荐

实战SSM_O2O商铺_34【商品】商品编辑之Controller层的实现
文章目录概述 ProductController 单元测试 Github地址概述在完成了实战SSM_O2O商铺_33[商品]商品编辑之Service层的实现之后,我们继续来实现Controll ...
实战SSM_O2O商铺_32【商品】商品编辑之Dao层的实现
文章目录概述 Dao层接口 ProductDao#selectProductById ProductDao#updateProduct ProductImgDao#deleteProductImgB ...
实战SSM_O2O商铺_28【商品】商品添加之Dao层的实现
文章目录概述重温实体类 Prouct ProductImg ProductDao接口 Mapper配置文件 ProductImgDao接口 Mapper配置文件单元测试 #ProductDaoT ...
实战SSM_O2O商铺_26【商品类别】批量新增商品类别从Dao到View层的开发
文章目录概述 Dao层 ProductCategoryDao接口 ProductCategoryDao SQL映射文件单元测试 Service层 ProductCategoryExecution ...
实战SSM_O2O商铺_38【商品类别】解除商品与商品类别的关联
文章目录概述 Dao层 ProductDao.java ProductDao.xml 单元测试 Service层完善 ProductCategoryServiceImpl#deleteProduct ...
实战SSM_O2O商铺_31【商品】商品添加之View层的实现
文章目录概述 productoperation.html productoperation.js 联调检查结果库表数据: 磁盘上的图片 Github地址概述在完成了实战SSM_O2O商铺_ ...
实战SSM_O2O商铺_27【商品类别】删除商品类别从Dao到View层的开发
文章目录概述 Dao层 ProductCategoryDao接口增加接口方法 ProductCategoryDao SQL映射文件闭环的单元测试 Servie层接口接口实现单元测试 Cont ...
实战SSM_O2O商铺_25【商品类别】商品类别列表展示从Dao到View层的开发
文章目录概述 Dao层 ProductCategoryDao接口 ProductCategoryDao Mapper配置文件单元测试 Service层 ProductCategoryService ...
实战SSM_O2O商铺_35【商品】商品编辑之View层的实现
文章目录概述 productoperation.js 验证 Github地址概述接下来,我们来实现下 View层部分的操作. productoperation.js /*** 因为商品的添加和编 ...

实战SSM_O2O商铺_37【商品】商品列表之View层的实现

文章目录

概述

productmanagement.html

productmanage.css

productmanage.js

联调

Github地址

实战SSM_O2O商铺_37【商品】商品列表之View层的实现相关推荐

最新文章

热门文章