Shop项目后台--4.所有订单的订单详情/admin/order/list.jsp
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,开始拼接contentfor(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"><trstyle="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 οnmοuseοver="this.style.backgroundColor = 'white'"οnmοuseοut="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"><inputtype="button" value="订单详情" class="clickedElement"οnclick="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访问,目的:获取该订单下的订单项//获得oidString 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集合 orderListAdminService 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字符串传回给ajaxresponse.getWriter().write(json);}}
AdminService
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 blocke.printStackTrace();}return orderList;}//根据oid多表查询product,orderitempublic 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;}}
AdminDao
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;}}
Shop项目后台--4.所有订单的订单详情/admin/order/list.jsp相关推荐
- Vue项目后台部分4,分类管理以及详情管理,添加和修改,loading效果,窗体弹出
目录 分类管理 顶部 底部 展示列表 添加分类和修改分类 删除分类 添加详情实例 详情列表展示 loading 详情管理 数据展示与分页器 上架与下架 单个详情内容的查看 深度选择器 代码 分类管理 ...
- 在后台实现按照状态查询订单列表功能
文章目录 在后台实现按照状态查询订单列表功能 需求 在left.jsp页面添加五个节点 AdminOrderServlet服务器中的findAllByState方法 service层的findAllB ...
- Shop项目--12. 显示用户订单列表order_list.jsp
分析: 显示用户订单列表在order_list.jsp页面,要一个功能servlet,把数据传递给前台页面显示.同时要先判断用户是否已经登陆.关键在于数据需要怎么封装,这里涉及多表查询. 1.根据ui ...
- 从项目中学习Django 天天生鲜---------订单
订单 效果图 收货地址 去结算 立即购买 我的订单 项目步骤 逻辑分析 建模 代码实现 添加地址和修改默认地址 立即购买 逻辑分析 代码实现 去结算 逻辑分析 代码实现 我的订单 效果图 收货地址 去 ...
- 软件项目管理系统-采购商品管理-采购订单一览
软件项目管理系统-采购商品管理-采购订单一览
- Vue电商项目—订单管理—订单列表模块-10
Vue电商项目-订单管理-订单列表模块-10 1.1 订单管理概述 订单管理模块用于维护商品的订单信息, 可以查看订单的商品信息.物流信息, 并且可以根据实际的运营情况对订单做适当的调整. 1.2 订 ...
- web day25 web day24 小项目练习图书商城, 购物车模块,订单模块,支付(易宝支付)
购物车模块 购物车存储: 保存在session中(本次使用的) 保存在cookie中 保存在数据库中 购物车相关类 购物车结构 CartItem:包含图书和数量,小计 Cart:包含一个Map< ...
- 电商平台后台管理系统--->系统详细设计(订单管理模块)
5.3 订单管理 订单管理包括创建订单.查询订单.删除订单和查看订单明细等功能 5.3.1 订单列表显示 1.前端页面 (1)效果图 图5.11 订单列表显示页面 (2)前面页面主要技术介绍及主要功能 ...
- 基于PHP后台请求亚马逊订单列表listOrder接口
参阅:(接口调试工具) https://mws.amazonservices.com/scratchpad/index.html 参阅2:(API文档) http://docs.developer.a ...
最新文章
- 效率思维模式与Zombie Scrum
- tengine 调用php,nginx 或tengine 访问日志分割处理
- 文本处理相关资料整理
- Python处理字符串和列表元组的小技巧
- Python内置数据结构--列表
- ElasticSearch重启策略
- 思科路由器IKEV2 L2L***预共享密码认证最简化配置
- adc采集出来一段波形 如何求周期与频率_DMA+ADC快速采集直流无刷电机电流
- java常用的正则表达式
- jupyter一直*_不用下载安装,你的机器人可以直接在浏览器里跳舞丨Jupyter-ROS
- spring 事务源码(三)如何保证被@Transactional标记方法中的所有sql都在一个事务内
- 秒懂!何凯明Resnet
- android -------- ConstraintLayout 宽高比和偏移量比(三)
- 工具应用——Chrome浏览器 F12控制台中文改成英文
- 概率破玄机,统计解迷离
- [组图教程]:8大方法!解决CPU资源占用100%[ZT]
- Excel表格中第一个输入的零不显示怎么办?
- PR是什么?怎么查询网站的谷歌PR权重?
- 笔记本电脑无论插、拔耳机后都没有声音,解决方法
- Python告诉你:股神巴菲特有坑我们吗?