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>标签