Spring Boot前端开发笔记(HTML+jQuery+Ajax)【三】

Spring Boot前端开发笔记(HTML+jQuery+Ajax)【三】

今天先吐槽HTML，没有变量真是让人伤透脑筋，后端数据传输只能靠Ajax续命，简直了。。。为什么Spring Boot还要推荐它？？？无奈的我开始了Ajax替代方法的研究。

1）Thymeleaf替代Ajax局部刷新

言归正传，说一下这几天写的BUG，网站中想实现一个订单列表界面(orderList)，显示一个用户所有的订单信息，本想抛弃Ajax，通过button调用controller中的方法，也就是查询该用户的订单数据(showCurrentOrder)，计划是先把查询到的数据存入session，在HTML界面中使用Thymeleaf来显示，这样就不必使用Ajax来局部刷新。

前期写的很顺利，但当我想实现订单状态显示这一功能时，问题来了，我的数据库结构是这样的：

这样的结构要求我在判断的时候需要使用if else if…语句，当我满心欢喜的搜索Thymeleaf判断语句用法时，我发现Thymeleaf只有switch case语句…我内心极度崩溃，然后我开始在网上搜索替代方法，网友给出的<c:choose><c:when>语句如救命稻草一般给了我希望，然而现实是HTML无法注入jstl标签！！！

其实在后台进行订单状态判断并存入session也可以实现这个功能，但我还是想说Ajax真香！！！所以订单列表界面(orderList)我依然用了Ajax。

但只要不在HTML页面进行复杂的判断，只用来显示数据，Thymeleaf还是可以满足需求的，于是我在订单详情页面(orderDetails)使用了Thymeleaf替代Ajax局部刷新，原理同上，详见下面代码：

前端代码

<!-- 显示订单号 -->
<div class="bs-callout bs-callout-success">
	<h4 th:text="'当前订单号：'+${session.CURRENT_ORDER}"></h4>
</div>

<!-- 订单详情 -->
<div class="panel panel-default">
	<!-- .panel-heading 面板头信息。 -->
	<div class="panel-heading">
		<!-- .panel-title 面板标题。 -->
		<h3 class="panel-title">订单详情</h3>
	</div>
	
	 <!-- Table -->
	<table class="table"> 
		<thead> 
			<tr> 
				<th>图片</th> 
				<th>商品名称</th> 
				<th>单价</th> 
				<th>数量</th>
				<th>单项总价</th>
			</tr> 
		</thead> 
		<tbody>
			<tr th:each="orderdetails : ${session.CURRENT_ORDERDETAILS}">
				<td><img id="order_img" alt="64x64" th:src="'img/'+${orderdetails.picAddress}"/></td>
				<td th:text="${orderdetails.productName}"></td>
				<td th:text="${orderdetails.price}"></td>
				<td th:text="${orderdetails.quantity}"></td>
				<td th:text="${orderdetails.itemTotalPrice}"></td>
			</tr>
		</tbody>
	</table>
	<!-- /.table -->
</div>
<!-- /.panel panel-default -->	
<!-- /订单详情 -->

<!-- 物流信息 -->
<div class="panel panel-default">
	<!-- .panel-heading 面板头信息。 -->
	<div class="panel-heading">
		<!-- .panel-title 面板标题。 -->
		<h3 class="panel-title">物流信息</h3>
	</div>
	
	 <!-- Table -->
	<table class="table"> 
		<thead> 
			<tr> 
				<th>快递单号</th> 
				<th>地址</th> 
				<th>邮政编码</th> 
				<th>收件人</th>
				<th>收件人联系方式</th>
			</tr> 
		</thead> 
		<tbody>
			<tr th:each="logistics : ${session.CURRENT_LOGISTICS}">
				<td th:text="${logistics.trackingNumber}">暂无快递信息</td>
				<td th:text="${logistics.address}+${logistics.addressDetail}"></td>
				<td th:text="${logistics.postcode}"></td>
				<td th:text="${logistics.recipientName}"></td>
				<td th:text="${logistics.telephoneNumber}"></td>
			</tr>
		</tbody>
	</table>
	<!-- /.table -->			
</div>
<!-- /.panel panel-default -->			
<!-- /物流信息 -->

后端代码(repository和service代码就先不放了，有需要可以联系我)

//订单详情
@RequestMapping("/showOrderDetails")
public ModelAndView showOrderDetails(@RequestParam("orderID") String orderID, ModelAndView mv,HttpSession session) {
	System.out.println("showOrderDetails方法被调用......");	
	List<Orderitems> currentOrderItems = orderitemsService.selectByOrderID(orderID);
	List<Orderdetails> currentOrderDetails = new ArrayList<Orderdetails>();
	for (Orderitems tempItems : currentOrderItems) {
		Orderdetails currentDetais = new Orderdetails();
		currentDetais.setOrderItemsID(tempItems.getOrderItemsID());
		currentDetais.setOrderID(tempItems.getOrderID());
		currentDetais.setProductID(tempItems.getProductID());
		Product currentProduct = productService.findProductById(tempItems.getProductID());
		currentDetais.setProductName(currentProduct.getProductName());
		currentDetais.setCategory(currentProduct.getCategory());
		currentDetais.setPrice(currentProduct.getPrice());
		currentDetais.setPicAddress(currentProduct.getPicAddress());
		currentDetais.setQuantity(tempItems.getQuantity());
		currentDetais.setItemTotalPrice(tempItems.getItemTotalPrice());
		currentOrderDetails.add(currentDetais);
	}
	
	session.setAttribute("CURRENT_ORDER", orderID);
	session.setAttribute("CURRENT_ORDERDETAILS", currentOrderDetails);
	Logistics currentLogistics = logisticsService.selectByLogisticsID("wl"+orderID);	
	session.setAttribute("CURRENT_LOGISTICS", currentLogistics);
	mv.setViewName("redirect:/orderDetails");		
	return mv;
}

2）Button调用后台controller中方法并传递参数

基本思想：使用button的onclick属性，调用controller中的方法，并使用GET方法传值。

<button type="button" onclick="javascript:window.location='/controller路径/controller操作?keyName=value'">button显示的文字</button>

具体方法参考下面Ajax生成订单列表中button部分。(注释已括出)

前端代码

Ajax部分
生成订单列表代码

<script type="text/javascript">
	//显示订单
	$(document).ready(function(){
		$.ajax({
	        type: 'POST',
	        url: "/order/showCurrentOrder",
	        contentType: "application/json;cherset=utf-8",
	        dataType: "json",
	 		error : function() {
	 			alert("订单加载失败！！！");	
	 	    },
	        success: function (data){
				var orderList = data;
				var emptyBtn = "<td></td>";
				var btnList = "";
				$.each(orderList, function (index, n) {
					var payBtn = "<td><button class='btn btn-sm btn-success' type='button' onclick=\"javascript:window.location='/order/orderPaidInList?orderID="+orderList[index].orderID+"'\">付款</button></td>";
//******************具体事例**********************************
					var receiveBtn = "<td><button class='btn btn-sm btn-info' type='button' onclick=\"javascript:window.location='/order/orderReceived?orderID="+orderList[index].orderID+"'\">确认收货</button></td>";
//******************仅供参考**********************************
					var refundBtn = "<td><button class='btn btn-sm btn-danger' type='button' onclick=\"javascript:window.location='/order/refundPrepare?orderID="+orderList[index].orderID+"'\">退货</button></td>";
					var cancelBtn = "<td><button class='btn btn-sm btn-default' type='button' onclick=\"javascript:window.location='/order/orderCanceled?orderID="+orderList[index].orderID+"'\">取消订单</button></td>";
					var orderCondition = "未支付";
					btnList = payBtn + emptyBtn + emptyBtn + cancelBtn;
		
					if(orderList[index].canceled=="1"){
						orderCondition = "已取消";
						btnList = emptyBtn + emptyBtn + emptyBtn + emptyBtn;
					}else if(orderList[index].refunded=="1"){
						orderCondition = "已退货";
						btnList = emptyBtn + emptyBtn + emptyBtn + emptyBtn;
					}else if(orderList[index].received=="1"){
						orderCondition = "已完成";
						btnList = emptyBtn + emptyBtn + refundBtn + emptyBtn;
					}else if(orderList[index].delivered=="1"){
						orderCondition = "已发货";
						btnList = emptyBtn + receiveBtn + emptyBtn + emptyBtn;;
					}else if(orderList[index].paid=="1"){
						orderCondition = "已付款";
						btnList = emptyBtn + receiveBtn + emptyBtn + cancelBtn;
					}
					var number = index + 1;
					var htmlCode = "<tr> "
 							+ "<td>" + number + "</td>"
							+ "<td>" + orderList[index].orderDate + "</td>"
							+ "<td>" + orderList[index].itemsNumber + "</td>"
							+ "<td>" + orderList[index].totalPrice + ".00</td>"
							+ "<td>" + orderCondition + "</td>"
							+ "<td><button class='btn btn-sm btn-warning' type='button' onclick=\"javascript:window.location='/order/showOrderDetails?orderID="+orderList[index].orderID+"'\">订单详情</button></td>"
							+ btnList
					+ "</tr> ";
					$("#newCode").append(htmlCode);					
				})
			}
		})
	})	
	
</script>

HTML部分
订单列表页面，配合Ajax

<div class="panel panel-default">
<!-- .panel-heading 面板头信息。 -->
	<div class="panel-heading">
	<!-- .panel-title 面板标题。 -->
		<h3 class="panel-title">订单列表</h3>
	</div>
	
	<!-- Table -->
	<table class="table"> 
		<thead> 
			<tr> 
				<th>序号</th>
				<th>订单时间</th> 
				<th>订单项数</th> 
				<th>订单总价</th>
				<th>订单状态</th>
				<th>订单详情</th>  
				<th>付款</th> 
				<th>确认收货</th>
				<th>退货</th>
				<th>取消订单</th>      
			</tr> 
		</thead> 
		<tbody id="newCode"> 
			<!-- 订单列表 -->
		</tbody> 				
	</table>
	<!-- /.table -->
</div>
<!-- /.panel panel-default -->		

后端代码(repository和service代码就先不放了，有需要可以联系我)

从数据库查找并返回订单列表所需数据，配合Ajax

//显示当前用户订单
@RequestMapping("/showCurrentOrder")
public List<Order> showCurrentOrder(HttpSession session) {
	String username = (String) session.getAttribute("USER_NAME");
	List<Order> orderList = orderService.selectOrderByUsername(username);		
	session.setAttribute("USER_ORDERLIST", orderList);		
	System.out.println("showCurrentOrder方法被调用......");
	System.out.println("查询用户为："+username);			
	return orderList;
}

确认收货button的后端操作，其他button不再列举

//订单收货
@RequestMapping("/orderReceived")
public ModelAndView oorderReceived(@RequestParam("orderID") String orderID, ModelAndView mv) {
	System.out.println("orderReceived方法被调用......");
		int received = 1;
		Order newOrder = new Order();
		newOrder.setOrderID(orderID);
		newOrder.setReceived(received);
		int countUpdate = orderService.updateReceived(newOrder);
		System.out.println("tb_order更新订单记录" + countUpdate + "条!");	
		mv.setViewName("redirect:/orderList?receiveSuccess");		
	return mv;
}

3）Thymeleaf用法文章总结

1.Thymeleaf 官方文档
2.Thymeleaf 基本用法总结
3.spring boot(四)：thymeleaf使用详解
4.Thymeleaf的内置属性
个人推荐的学习顺序：只是轻度使用，学习2就够了；若是深度使用，则要学习3，根据需要查询4；官方文档为纯英文，可根据个人能力学习。

4）<c:choose><c:when>用法

下面这篇参考文章很详细，我就不复述了~
jstl <c:choose>, <c:when>, <c:otherwise>标签