移动商城第五篇【查看、删除、编辑品牌】-优快云博客

tags: 移动商城项目

查看品牌

上一篇中我们已经可以顺利添加商品了，一般地，我们添加完商品之后会跳转到我们的查看商品的页面上...

Contoller拿到数据库中的数据


    @RequestMapping("/listBrand.do")
    public String  listBrand(Model model) throws IOException {
        List<EbBrand> brandList = ebBrandService.selectBrand();
        model.addAttribute("brandList", brandList);
        return "item/listbrand";
    }
复制代码

把文件服务器的路径添加到总配置文件中


<c:set var="file_path" value="http://localhost:8081/file"/>

复制代码


		<c:forEach items="${brandList}" var="brand">
			<tr>
				<td>${brand.brandId}</td>
				<td>
					<%--这里需要图片的全路径，最好我们把前部分的路径在配置文件中写起来--%>
					<img id='imgsImgSrc' src="${file_path}${brand.imgs}" height="50" width="50"/></td>
				<td>${brand.brandName}</td>
				<td class="nwp">${brand.website}</td>
				<td class="nwp">${brand.brandDesc}</td>
				<td>${brand.brandSort}</td>
				<td>
					<a href="${path }/shop/item/editbrand.jsp?brandId="${brand.brandId}>编辑</a>
					<a href="#" onclick="singleDel(${brand.brandId})">删除</a>
				</td>
			</tr>
		</c:forEach>
复制代码

编辑品牌

一般地，我们的品牌名称是不会轻易变更的，因此我们在编辑的时候默认不让它变更。

我们有两种方式让用户修改不了

disable
readonly

一般地，我们都是使用readonly，因为使用disable的话，后台是获取不到值的

在更新的时候，注意要把id和我们的图片值传递过去，好让它修改


      <input type='hidden' id='imgs' name='imgs' value="${brand.imgs }" reg2="^.+$" tip="亲！您忘记上传图片了。"/>
      <input type="hidden" name="brandId" value="${brand.brandId }">
复制代码

删除品牌

在删除品牌之前，询问是否要删除

    function singleDel(brandId){
    	if(confirm("你确认要删除该品牌吗?")){
    		window.location.href = "${path}/brand/deleteBrand.do?brandId="+brandId;
    	}
    }
复制代码

添加品牌优化

有的时候，可能因为我们的网络原因，用户填写完表单的时候，可能会多次发送添加品牌的请求，因此我们可以使用模态窗口来阻止这种情况的发生：


<%--操作请求中--%>
<div id="refundLoadDiv" class="alt" style="display:none">
	<div class="t"></div>
	<div class="c set">
		<ul class="uls">
			<li style="text-align:center;">
				<img src="<c:url value='/ecps/console/res/imgs/loading.gif'/>" />操作请求中... ...
			</li>
		</ul>
	</div>
	<div class="f"></div>
</div>
复制代码


function tipShow(idName){

	var idObj = $(idName);
	var idBgObj = $("#bgWindow");

	if(idBgObj.length == 0){
		var iframe,div;
		div = $("<div></div>");
		div.attr({id:"bgWindow",style:"display:none"});
		iframe = $("<iframe></iframe>");
		iframe.attr({id:"bgWindowIframe",src:"about:blank",marginwidth:"0",marginheight:"0",frameBorder:"no",framespacing:"0",allowtransparency:"true"});
		div.append(iframe);
		$(document.body).append(div);
		idBgObj = $("#bgWindow");	
	}

	var winH = $(window).height();
	var docH = $(document.body).height();
	if(winH > docH){docH = winH;}
	
	var winW = $(window).width();
	var docW = $(document.body).width();
	if(winW > docW){docW = winW;}

	var scrollH = $(document).scrollTop();
	if(scrollH == undefined){scrollH = 0}
	//alert(idObj.height());
	var t = parseInt((winH - idObj.height())/2);
	if(idObj.css("position") == "absolute"){t = t + scrollH;}
	if(t != parseInt(idObj.css("top"))){idObj.css("top",t);}

	var l = parseInt((winW - idObj.width())/2);
	if(l < 0){l = 0;}
	if(l != parseInt(idObj.css("left"))){idObj.css("left",l);}
	
	if(docW != parseInt(idBgObj.css("width"))){idBgObj.css("width",docW);}
	if(docH != parseInt(idBgObj.css("height"))){idBgObj.css("height",docH);idBgObj.find("iframe").css("height",docH);}

	idBgObj.show();
	idObj.show();

	window.onresize = function(){
		if(idObj.css("display") == "block"){tipShow(idName);}
	};
	window.onscroll = function(){
		if(idObj.css("display") == "block"){tipShow(idName);}
	};
	
	var close = idName + "Close";
	var reset = idName + "Reset";
	var ok = idName + "Ok";
	if($(close).length == 1){$(close).click(function(){tipHide(idName);});}
	if($(reset).length == 1){$(reset).click(function(){tipHide(idName);});}
	if($(ok).length == 1){$(ok).click(function(){tipHide(idName);});}
}

复制代码

如果校验没有问题，那么就弹出模态窗口


if(isSubmit) {
    showTip("#refundLoadDiv");
}
复制代码

总结

图片服务器的路径我们可以自定义在总配置文件中，需要用的时候直接使用EL表达式来获取就行了。
对于更新品牌而言，我们品牌的名字一般是不会有太大的变更的，因此我们可以设置为readonly
编辑品牌时，记得要把id和图片的相对路径给带过去给服务器。不然就丢失了。
在删除品牌之前，做一个认证框，会相对好一些。

如果您觉得这篇文章帮助到了您，可以给作者一点鼓励