关于商品列表前端开发商品管理的问题

来源:8-11 商品列表展示之前端开发

慕仙8394361

2019-05-11

老师好,我在进行商品管理的验证时,第一次会出现图一的情况,在点击新增按钮然后返回,会变为图二正常的情况,请问是什么原因呢?

图片描述图片描述

写回答

2回答

翔仔

2019-05-12

修改后,记得清空页面缓存

0
3
慕仙8394361
非常感谢!
2019-05-14
共3条回复

翔仔

2019-05-12

同学好,图1的情况同学需要看看为什么前端访问后端的方法没有被加载,需要在前端chrome开发者模式设置断点调试一下,以及后端Debug模式下看看controller的方法有没有被访问到,感觉还是哪里写错了

$(function() {
	// 获取此店铺下的商品列表的URL
	var listUrl = '/o2o/shopadmin/getproductlistbyshop?pageIndex=1&pageSize=999';
	// 商品下架URL
	var statusUrl = '/o2o/shopadmin/modifyproduct';
	getList();
	/**
	 * 获取此店铺下的商品列表
	 * 
	 * @returns
	 */
	function getList() {
		// 从后台获取此店铺的商品列表
		$.getJSON(listUrl, function(data) {
			if (data.success) {
				var productList = data.productList;
				var tempHtml = '';
				// 遍历每条商品信息,拼接成一行显示,列信息包括:
				// 商品名称,优先级,上架\下架(含productId),编辑按钮(含productId)
				// 预览(含productId)
				productList.map(function(item, index) {
					var textOp = "下架";
					var contraryStatus = 0;
					if (item.enableStatus == 0) {
						// 若状态值为0,表明是已下架的商品,操作变为上架(即点击上架按钮上架相关商品)
						textOp = "上架";
						contraryStatus = 1;
					} else {
						contraryStatus = 0;
					}
					// 拼接每件商品的行信息
					tempHtml += '' + '<div class="row row-product">'
							+ '<div class="col-33">'
							+ item.productName
							+ '</div>'
							+ '<div class="col-20">'
							+ item.point
							+ '</div>'
							+ '<div class="col-40">'
							+ '<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>';
				});
				// 将拼接好的信息赋值进html控件中
				$('.product-wrap').html(tempHtml);
			}
		});
	}
	// 将class为product-wrap里面的a标签绑定上点击的事件
	$('.product-wrap')
			.on(
					'click',
					'a',
					function(e) {
						var target = $(e.currentTarget);
						if (target.hasClass('edit')) {
							// 如果有class edit则点击就进入店铺信息编辑页面,并带有productId参数
							window.location.href = '/myo2o/shopadmin/productoperation?productId='
									+ e.currentTarget.dataset.id;
						} else if (target.hasClass('status')) {
							// 如果有class status则调用后台功能上/下架相关商品,并带有productId参数
							changeItemStatus(e.currentTarget.dataset.id,
									e.currentTarget.dataset.status);
						} else if (target.hasClass('preview')) {
							// 如果有class preview则去前台展示系统该商品详情页预览商品情况
							window.location.href = '/myo2o/frontend/productdetail?productId='
									+ e.currentTarget.dataset.id;
						}
					});
	function changeItemStatus(id, enableStatus) {
		// 定义product json对象并添加productId以及状态(上架/下架)
		var product = {};
		product.productId = id;
		product.enableStatus = enableStatus;
		$.confirm('确定么?', function() {
			// 上下架相关商品
			$.ajax({
				url : statusUrl,
				type : 'POST',
				data : {
					productStr : JSON.stringify(product),
					statusChange : true
				},
				dataType : 'json',
				success : function(data) {
					if (data.success) {
						$.toast('操作成功!');
						getList();
					} else {
						$.toast('操作失败!');
					}
				}
			});
		});
	}
});


0
0

Java双版本(SSM到SpringBoot)校园商铺全栈开发

SSM商铺V1.0,解决毕设痛点;SpringBoot商铺V2.0,满足工作刚需

5101 学习 · 8139 问题

查看课程