基于MAVEN的SSM+bootstrap的电商测试项目搭建日志(三)

到目前为止,后台的商品功能算是基本完成了,昨天看着各种403和500的各种报错,很没有干劲,就稍微拖沓了下回去看基础了,不过今天还是很顺利,成功的完成了修改和删除的业务逻辑,其主要的难点有以下几点:

1、如何在点击编辑按钮的时候,弹出含有对应信息的模态框,因为编辑和删除都是采用了ajax的遍历进行插入,导致了获取信息可能有些麻烦的问题。

2、如何发送一个PUT修改请求,由于tomcat的一些原因,不能把获取到的put信息直接进行打包,所以要采用POST的方法,之后在data后面加上+"&_method=PUT",这时还要注意的是url中的id获取,可以通过使用attr自定义添加完成一个id的标记,以此来获得id值,其次在controller层中,@requestMapping的value值最后花括号{}中,需要和pojo文件中的id保持一致,才能成功被springmvc进行包装。

3、删除的基本逻辑与编辑修改大同小异,无非是在发送ajax请求时不会带有data值。

代码如下:

controller:

	@RequestMapping(value="/item/{itmId}",method=RequestMethod.PUT)
	@ResponseBody
	public Msg edititem(itemInfo iteminfo) {
/*		String newUrl = CodeUtil.jsonToCode(url);
		String sb = newUrl.substring(1, newUrl.length()-2);
		iteminfo.setItmImg(sb);*/
		itemservice.editItem(iteminfo);
		System.out.println(iteminfo.getItmName());
		System.out.println(iteminfo.getItmId());
		System.out.println(iteminfo.getItmMes());
		return Msg.success();
	}
	
	@RequestMapping(value="/item/{id}",method=RequestMethod.DELETE)
	@ResponseBody
	public Msg delItem(@PathVariable("id")Integer itemId) {
		itemservice.deleteItem(itemId);
		return Msg.success();
	}

index.jsp:

	$(document).on("click", ".edit_btn", function() {
	getItem($(this).attr("edit-id")); 
		$("#editItemModal").modal({
			backdrop : false
	});
		$("#edit_btn").attr("edit-id",$(this).attr("edit-id"));
	 
	});
	
	function getItem(id){
		$.ajax({
			url:"/item/"+id,
			type:"get",
			success:function(result){
				// console.log(result); 
				var iteminfo = result.extend.item;
				$("#itmName_e").val(iteminfo.itmName);
				$("#itmNub_e").val(iteminfo.itmNub);
				$("#itmRate_e").val(iteminfo.itmRate);
				$("#itmMes_e").text(iteminfo.itmMes);
			}
		});

	}
	
		$("#edit_btn").click(function() {
/* 		$.post("/item/edit", $("#editItemModal form").serialize()); */
/* 		$.ajax({
			url : "/picUpload",
			type : 'GET',
			data : $("#editItemModal form").serialize()+"_method=PUT",
			dataType : 'JSON',
			cache : false,
			processData : false,
			contentType : false,
			success : function(result) {
				var data = JSON.stringify(result.itmImg);
				$.post("/item/pic", data);
				$('#editItemModal').modal('hide');
				to_page(maxPage);
				console.log(JSON.stringify(result));
			}
		}); */
		$.ajax({
			url:"item/"+$(this).attr("edit-id"),
			type:"POST",
			data: $("#editItemModal form").serialize()+"&_method=PUT",
			success:function(result){
				alert(result.msg);
			}
		});
	});
	
		$(document).on("click", ".del_btn", function() {
		alert("ok1");
			$.ajax({
				url:"item/"+$(this).attr("del-id"),
				type:"DELETE",
				success:function(result){
					alert(result.msg);
				}
			});
		});

接下来就是对商品的浏览进行显示的业务逻辑了

你可能感兴趣的:(练习项目:电商)