當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2025/3/21 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了实战SSM_O2O商铺_37【商品】商品列表之View层的实现小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

概述
productmanagement.html
productmanage.css
productmanage.js
聯調
Github地址

概述

在完成了后端的邏輯后，我們來實現商品列表的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></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商铺_36【商品】商品
下一篇：实战SSM_O2O商铺_38【商品类别】