Shop專案後臺--4.所有訂單的訂單詳情/admin/order/list.jsp
阿新 • • 發佈：2019-02-15
contrl+H 可以快速查詢全部工程下，你所提高關鍵字的位置
分析：
1、在list.jsp訂單詳情需要彈出層外掛，外掛程式碼有表示，觸發按鈕，彈出的內容，關閉按鈕。
AdminServlet
2、根據彈出層外掛程式碼，找到入口，“訂單詳情”。點選後觸發事件，進行ajax非同步查詢，目的是得到，該訂單下的所有訂單項與商品詳細資訊，需要攜帶oid查詢。查詢得到的結果要用List<Map<String,Object>> ，其實Map<String,Object>就是一個物件的實體，然後把多個物件實體裝在List集合中。List<Map<String,Object>>
本質與List<Product>結構一樣。
根據業務需要進行多表查詢product、orderitem，多表查詢要找到表與表之間的關係。sql語句為：
select p.pimage, p.pname, p.shop_price, i.count, i.subtotal
from product p, orderitem i
where p.pid=i.pid and i.oid=oid
3、查詢得到的是一個Map型別的集合 List<Map<String,Object>> mapList
4、利用Gson 把mapList轉為json格式字串，然後返回給ajax
list.jsp
5、通過ajax返回的資料開始拼字串，動態顯示查詢到的資料。（最繁瑣的拼串）“訂單詳情”彈出層裡所有需要的資料，圖片，名字，價格，件數，小計，訂單編號。需要把這些寫死的東西刪除，遍歷ajax返回的data資料獲取活的資料，拼接字串。
6、為了使用者體現，讀取資料庫，時候ajax返回可能需要幾秒鐘，為了這幾秒鐘不出現“白板頁面”，需要新增一個<div>專門顯示等待的圖片，當ajax有資料返回的時候該，隱藏該<div> 當點選下個"訂單詳情"清空content，與訂單編號內容，同時把該<div>顯示。
步驟：
在list.jsp頁面
0、編寫"訂單詳情"的單擊事件，攜帶oid 注意攜帶的資料加上單引號.通過ajax查詢資料庫，獲取所需的資料
在AdminServlet
1、獲取oid，根據oid、p.pid=i.pid查詢product、orderitem表、返回List<Map<String,Object> mapList
2、把mapList轉為json格式字串，傳回給ajax
在list.jsp
3、把返回的資料，進行拼串content，圖片、名字、價格、件數、小計。
4、加上友好的圖片等待體驗。設定預設顯示等待圖片<div> 顯示，ajax成功返回資料時候隱藏。點選“訂單詳情”事件時，把整個彈出層清空，並顯示等待圖片<div>
list.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<HTML>
<HEAD>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="${pageContext.request.contextPath}/css/Style1.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="${pageContext.request.contextPath}/js/public.js"></script>
<!-- 彈出層外掛 -->
<link href="${pageContext.request.contextPath}/css/popup_layer.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/popup_layer.js"></script>
<!-- 呼叫外掛彈出層的方法 -->
<script type="text/javascript">
$(function(){
//彈出層外掛呼叫
new PopupLayer({
trigger:".clickedElement",//點選哪個地方，觸發彈出層
popupBlk:"#showDiv",//觸發後顯示哪些頁面內容
closeBtn:"#closeBtn",//關閉彈出層的按鈕
useOverlay:true
});
});
//點選按鈕查詢某個訂單詳情
function findOrderInfoByOid(oid){
//清理上一次顯示的內容覆蓋
$("#showDivTab").html("");
$("#shodDivOid").html("");
$("#loading").css("display","block");
//ajax非同步訪問資料
$.post(
//1.執行的url
"${pageContext.request.contextPath}/admin?method=findOrderInfoByOid",
//2.傳遞的資料，資料以json格式傳遞
{"oid":oid},
//3.返回資料後執行的函式
function(data){
//隱藏載入圖片
$("#loading").css("display","none");
//拼串，雙印變為單引
var content = "<tr id='showTableTitle'><th width='20%'>圖片</th><th width='25%'>商品</th><th width='20%'>價格</th><th width='15%'>數量</th><th width='20%'>小計</th></tr>";
//遍歷data，開始拼接content
for(var i=0;i<data.length;i++){
content+="<tr style='text-align: center;'>"+
"<td>"+
"<img src='${pageContext.request.contextPath }/"+data[i].pimage+"' width='70' height='60'>"+
"</td>"+
"<td><a target='_blank'>"+data[i].pname+"</a></td>"+
"<td>￥"+data[i].shop_price+"</td>"+
"<td>"+data[i].count+"</td>"+
"<td><span class='subtotal'>￥"+data[i].subtotal+"</span></td>"+
"</tr>";
}
//把拼好的content放到showDivTab
$("#showDivTab").html(content);
//把訂單編號改為活的
$("#shodDivOid").html(oid);
},
//4.返回資料的格式
"json"
);
}
</script>
</HEAD>
<body>
<form id="Form1" name="Form1" action="${pageContext.request.contextPath}/user/list.jsp" method="post">
<table cellSpacing="1" cellPadding="0" width="100%" align="center" bgColor="#f5fafe" border="0">
<TBODY>
<tr>
<td class="ta_01" align="center" bgColor="#afd1f3">
<strong>訂單列表</strong>
</TD>
</tr>
<tr>
<td class="ta_01" align="center" bgColor="#f5fafe">
<table cellspacing="0" cellpadding="1" rules="all"
bordercolor="gray" border="1" id="DataGrid1"
style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: 100%; WORD-BREAK: break-all; BORDER-BOTTOM: gray 1px solid; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #f5fafe; WORD-WRAP: break-word">
<tr
style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; HEIGHT: 25px; BACKGROUND-COLOR: #afd1f3">
<td align="center" width="10%">
序號
</td>
<td align="center" width="10%">
訂單編號
</td>
<td align="center" width="10%">
訂單金額
</td>
<td align="center" width="10%">
收貨人
</td>
<td align="center" width="10%">
訂單狀態
</td>
<td align="center" width="50%">
訂單詳情
</td>
</tr>
<!-- 動態顯示order所有資訊 -->
<c:forEach items="${orderList }" var="order" varStatus="vs">
<tr onmouseover="this.style.backgroundColor = 'white'"
onmouseout="this.style.backgroundColor = '#F5FAFE';">
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="18%">${vs.count }</td>
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="17%">${order.oid }</td>
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="17%">${order.total }</td>
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="17%">${order.name }</td>
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="17%">${order.state==0?"未付款":"已付款" }</td>
<td align="center" style="HEIGHT: 22px"><input
type="button" value="訂單詳情" class="clickedElement"
onclick="findOrderInfoByOid('${order.oid}')" />
</td>
</tr>
</c:forEach>
</table>
</td>
</tr>
</TBODY>
</table>
</form>
<!-- 彈出層 HaoHao added -->
<div id="showDiv" class="blk" style="display:none;">
<div class="main">
<h2>訂單編號：<span id="shodDivOid" style="font-size: 13px;color: #999">123456789</span></h2>
<a href="javascript:void(0);" id="closeBtn" class="closeBtn">關閉</a>
<div id="loading" style="padding-top:30px;text-align: center;">
<!-- 等待圖片 -->
<img alt="" src="${pageContext.request.contextPath }/images/loading.gif">
</div>
<div style="padding:20px;">
<table id="showDivTab" style="width:100%">
<!-- 在這裡開始拼串 -->
<!-- 把固定的這個頭，先移去拼串的開始content -->
<!-- <tr id='showTableTitle'>
<th width='20%'>圖片</th>
<th width='25%'>商品</th>
<th width='20%'>價格</th>
<th width='15%'>數量</th>
<th width='20%'>小計</th>
</tr> -->
<!-- 迴圈拼串部分 -->
<%-- <tr style='text-align: center;'>
<td>
<img src='${pageContext.request.contextPath }/products/1/c_0014' width='70' height='60'>
</td>
<td><a target='_blank'>電視機</a></td>
<td>￥3000</td>
<td>3</td>
<td><span class='subtotal'>￥9000</span></td>
</tr> --%>
</table>
</div>
</div>
</div>
</body>
</HTML>
AdminServlet
package com.itheima.web.servlet;
import java.io.IOException;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import com.itheima.domain.Category;
import com.itheima.domain.Order;
import com.itheima.service.AdminService;
public class AdminServlet extends BaseServlet {
//根據訂單id查詢訂單項與商品
public void findOrderInfoByOid(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//ajax訪問，目的：獲取該訂單下的訂單項
//獲得oid
String oid = request.getParameter("oid");
//根據oid查詢product表orderitem表
AdminService service = new AdminService();
List<Map<String,Object>> mapList = service.findOrderInfoByOid(oid);
//把mapList轉為json的字串格式
Gson gson = new Gson();
String json = gson.toJson(mapList);
//可以直接列印到控制檯檢視格式,以下為例子，返回一個數組，數組裡裝有json格式物件
/*[{"pimage":"products/1/c_0048.jpg","shop_price":1888.0,"pname":"Apple iPad mini 2 ME279CH/A","subtotal":1888.0,"count":1},{"pimage":"products/1/c_0050.jpg","shop_price":2299.0,"pname":"Apple iPad Air 2 MGLW2CH/A","subtotal":2299.0,"count":1},{"pimage":"products/1/c_0032.jpg","shop_price":6688.0,"pname":"Apple MacBook Air MJVE2CH/A 13.3英寸","subtotal":6688.0,"count":1},{"pimage":"products/1/c_0026.jpg","shop_price":6088.0,"pname":"Apple iPhone 6s (A1700) 64G 玫瑰金色","subtotal":6088.0,"count":1},{"pimage":"products/1/c_0015.jpg","shop_price":4288.0,"pname":"Apple iPhone 6 (A1586)","subtotal":4288.0,"count":1},{"pimage":"products/1/c_0039.jpg","shop_price":10288.0,"pname":"Apple 配備 Retina 顯示屏的 MacBook","subtotal":10288.0,"count":1}]*/
System.out.println(json);
//把json字串格式的mapList傳回給ajax，記得設定UTF-8格式
response.setContentType("text/json;charset=UTF-8");
response.getWriter().write(json);
}
//獲取所有的訂單集合
public void findAllOrders(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//目的：獲取所有的訂單，存到list集合 orderList
AdminService service = new AdminService();
List<Order> orderList = service.findAllOrders();
//把orderList傳到request域
request.setAttribute("orderList", orderList);
//轉發到list.jsp顯示
request.getRequestDispatcher("/admin/order/list.jsp").forward(request, response);
}
//獲取商品的所有分類
public void findAllCategory(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//提供一個List<Category> 轉成jason字串
AdminService service = new AdminService();
List<Category> categoryList = service.findAllCategory();
//把categoryList轉為jason字串
Gson gson = new Gson();
String json = gson.toJson(categoryList);
//因為可能有中文，需要指定編碼
response.setContentType("text/json;charset=UTF-8");
//把json字串傳回給ajax
response.getWriter().write(json);
}
}package com.itheima.service;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import com.itheima.dao.AdminDao;
import com.itheima.domain.Category;
import com.itheima.domain.Order;
import com.itheima.domain.Product;
public class AdminService {
//獲取商品所有分類列表
public List<Category> findAllCategory() {
AdminDao dao = new AdminDao();
List<Category> categoryList=null;
try {
categoryList = dao.findAllCategory();
} catch (SQLException e) {
e.printStackTrace();
}
return categoryList;
}
//把商品存到資料庫
public void saveProduct(Product product) {
AdminDao dao = new AdminDao();
try {
dao.saveProduct(product);
} catch (SQLException e) {
e.printStackTrace();
}
}
//獲取所有的訂單
public List<Order> findAllOrders() {
AdminDao dao = new AdminDao();
List<Order> orderList =null;
try {
orderList = dao.findAllOrders();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return orderList;
}
//根據oid多表查詢product，orderitem
public List<Map<String, Object>> findOrderInfoByOid(String oid) {
AdminDao dao = new AdminDao();
List<Map<String, Object>> mapList =null;
try {
mapList = dao.findOrderInfoByOid(oid);
} catch (SQLException e) {
e.printStackTrace();
}
return mapList;
}
}
package com.itheima.dao;
import java.sql.SQLException;
import java.text.SimpleDateFormat;
import java.util.List;
import java.util.Map;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.MapListHandler;
import com.itheima.domain.Category;
import com.itheima.domain.Order;
import com.itheima.domain.Product;
import com.itheima.utils.DataSourceUtils;
public class AdminDao {
//獲取所有商品分類列表集合
public List<Category> findAllCategory() throws SQLException {
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "select * from category";
List<Category> query = runner.query(sql, new BeanListHandler<Category>(Category.class));
return query;
}
//把商品存到資料庫
public void saveProduct(Product product) throws SQLException {
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "insert into product values(?,?,?,?,?,?,?,?,?,?)";
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
String dateStr = format.format(product.getPdate());
runner.update(sql, product.getPid(),product.getPname(),product.getMarket_price(),
product.getShop_price(),product.getPimage(),dateStr,
product.getIs_hot(),product.getPdesc(),product.getPflag(),product.getCategory().getCid());
}
//獲取所有的訂單
public List<Order> findAllOrders() throws SQLException {
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
String sql ="select * from orders";
List<Order> query = runner.query(sql, new BeanListHandler<Order>(Order.class));
return query;
}
//根據oid查詢product，orderitem多表查詢
public List<Map<String, Object>> findOrderInfoByOid(String oid) throws SQLException {
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "select p.pimage,p.pname,p.shop_price,i.count,i.subtotal "+
"from product p,orderitem i "+
"where p.pid=i.pid and i.oid=? ";
List<Map<String, Object>> query = runner.query(sql, new MapListHandler(), oid);
return query;
}
}