JavaWEB快速入门之EL+JSTL实现购物车

最新推荐文章于 2022-05-14 19:39:44 发布

ning_ning_03

最新推荐文章于 2022-05-14 19:39:44 发布

阅读量774

点赞数

文章标签： eclipse java web tomcat

本文链接：https://blog.csdn.net/m0_67768699/article/details/124160056

版权

一、利用EL+JSTL实现购物车主页商品的显示

（1）编写带模糊查询的显示条数的方法和显示所有的方法

@Override
	public List<Goods> queryGoodsAll(int pageIndex, int pageSize, String strName) {
		int start = (pageIndex - 1) * pageSize + 1;
		int end = pageIndex * pageSize;
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		String sql = "";
		List<Goods> list = new ArrayList<Goods>();
		Goods goods = null;
		try {
			conn = DBHelper.getConn();
			sql ="select b.* from(select a.*,rownum as rid from( select * from goods where gname like '%"+strName+"%')a)b where b.rid between "+start+" and "+end+"";
			ps = conn.prepareStatement(sql);
			rs = ps.executeQuery();
			while(rs.next()) {
				goods = new Goods(rs.getInt(1), rs.getString(2), rs.getFloat(3), rs.getString(4), rs.getString(5));
				list.add(goods);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			DBHelper.myClose(conn, ps, rs);
			
		}
		return list;
	}
		
	
	@Override
	public int getGoodsCount(String strName) {
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		int count = 0;// 保存表的总记录数
		try {
			conn = DBHelper.getConn();
			String sql = "select count(*) from goods where gname like '%"+strName+"%'";
			ps = conn.prepareStatement(sql);
			rs = ps.executeQuery();
			if (rs.next()) {
				count = rs.getInt(1);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.myClose(conn, ps, rs);
		}
		return count;
	}

（2）引入JSTL

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

（3）利用JSTL中的if标签判断主界面是否含有数据

    <c:if test="${empty listGoods }">
		<jsp:forward page="doindex.jsp"></jsp:forward>
	</c:if>

（4）当主界面不含有数据的时候跳转至do处理界面，在do处理界面中实现java代码的查询、模糊查询以及分页

                 IGoodsBiz igb = new GoodsBizImpl();
				//定义变量存储页码以及每一夜显示的数据
			    int pageIndex = 1;
				int pageSize = 4;
				int pageMax = 0;//存储最大页码
				//当点击分页区域的下一页超链接时，获取这个参数
				String pIndex = request.getParameter("pageIndex");
				//判断，只有你点击了下一页  才将pIndex赋值给pageIndex
				if (null != pIndex) {
					pageIndex = Integer.valueOf(pIndex);
				}
				String strName = request.getParameter("strName");
				if (strName == null) {
					strName = "";
				}
				//根据dao求出总记录数
				int count = igb.getGoodsCount(strName);
				pageMax = count % pageSize == 0 ? count / pageSize : count / pageSize + 1;
				 List<Goods> listGoods = igb.queryGoodsAll(pageIndex, pageSize, strName);

（5）将do处理界面中的数据利用request域对象保存并传递给主界面

        request.setAttribute("listGoods",listGoods);
		request.setAttribute("pageIndex",pageIndex);
		request.setAttribute("pageSize",pageSize);
		request.setAttribute("pageMax",pageMax);
		request.setAttribute("strName",strName);
		request.getRequestDispatcher("index.jsp").forward(request, response);

（6）在主界面通过JSTL标签的foreach遍历结果并用EL表达式显示数据

	<c:forEach items="${listGoods }" var="goods">
			<tr>
				<td>${goods.gid }</td>
				<td>${goods.gname }</td>
				<td>${goods.gprice}</td>
				<td>${goods.ginfo }</td>
				<td><img style="width: 80px; height: 50px;"
					src="${goods.gpath }" /></td>
				<td>
					<button class="btn btn-default" onclick="addCart(${goods.gid})">加入购物车</button>
				</td>
			</tr>
		</c:forEach>

完整的do处理界面代码：

<%@page import="java.util.List"%>
<%@page import="com.zking.cart.entity.Goods"%>
<%@page import="com.zking.cart.biz.impl.GoodsBizImpl"%>
<%@page import="com.zking.cart.biz.IGoodsBiz"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
				//实例化
		  IGoodsBiz igb = new GoodsBizImpl();
			//定义变量存储页码以及每一夜显示的数据
			int pageIndex = 1;
			int pageSize = 4;
			int pageMax = 0;//存储最大页码
		//当点击分页区域的下一页超链接时，获取这个参数
			String pIndex = request.getParameter("pageIndex");
			//判断，只有你点击了下一页  才将pIndex赋值给pageIndex
			if (null != pIndex) {
				pageIndex = Integer.valueOf(pIndex);
			}
			String strName = request.getParameter("strName");
			if (strName == null) {
				strName = "";
			}
			//根据dao求出总记录数
			int count = igb.getGoodsCount(strName);
			pageMax = count % pageSize == 0 ? count / pageSize : count / pageSize + 1;
		    List<Goods> listGoods = igb.queryGoodsAll(pageIndex, pageSize, strName);
				        
     		request.setAttribute("listGoods",listGoods);
			request.setAttribute("pageIndex",pageIndex);
			request.setAttribute("pageSize",pageSize);
			request.setAttribute("pageMax",pageMax);
			request.setAttribute("strName",strName);
			request.getRequestDispatcher("index.jsp").forward(request, response);
					
	%>

完整的主页代码：

<%@page import="com.zking.cart.entity.Goods"%>
<%@page import="java.util.List"%>
<%@page import="com.zking.cart.biz.impl.GoodsBizImpl"%>
<%@page import="com.zking.cart.biz.IGoodsBiz"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
	
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- bootstrap.css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<!-- jQuery -->
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<!-- bootstrap.js -->
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<style type="text/css">
			table tr {
				text-align: center;
			}

			table tr td {
				vertical-align: middle !important;
			}
			.seach{width:50%;margin: 0 auto;padding-top: 5px;padding-bottom: 5px;}
		</style>
</head>
<body>
	<h1 style="text-align: center">糯米团子的购物商城</h1>
	<c:if test="${empty listGoods }">
		<jsp:forward page="doindex.jsp"></jsp:forward>
	</c:if>
<hr>
    <div style="text-align: center">
    <form action="doindex.jsp">
          名称：<input type="text" name="strName" >
          <input type="submit" value="搜索">
    </form>
    </div>
    
	<table class="table table-bordered table-responsive" border="1" width="100%" cellpadding="0" cellspacing="0">
		<tr class="list-group-item-danger">
			<th>商品编号</th>
			<th>商品名称</th>
			<th>商品价格</th>
			<th>商品描述</th>
			<th>商品图片</th>
			<th>商品操作</th>
		</tr>
		<!-- 调用dao遍历即可 -->

		<c:forEach items="${listGoods }" var="goods">
			<tr>
				<td>${goods.gid }</td>
				<td>${goods.gname }</td>
				<td>${goods.gprice}</td>
				<td>${goods.ginfo }</td>
				<td><img style="width: 80px; height: 50px;"
					src="${goods.gpath }" /></td>
				<td>
					<button class="btn btn-default" onclick="addCart(${goods.gid})">加入购物车</button>
				</td>
			</tr>
		</c:forEach>

	</table>
	
	<p align="right" style="font-size: 15px; font-weight: bold">
	
						当前页数:[${pageIndex }/${pageMax }]&nbsp; 
						<a href="doindex.jsp?pageIndex=1">首页</a>  
						<a href="doindex.jsp?pageIndex=${pageIndex - 1 < 0 ? 1 : pageIndex - 1 }&strName=${strName}">上一页</a>
						<a href="doindex.jsp?pageIndex=${pageIndex + 1 > pageMax ? pageMax : pageIndex + 1 }&strName=${strName}">下一页</a>
						<a href="doindex.jsp?pageIndex=${pageMax }">末页</a>
						</p>

	<script type="text/javascript">
		function addCart(gid) {
			location.href = "doShopping.jsp?gid="+gid;
		}
		</script>
</body>
</html>

二、利用EL+JSTL实现购物车后台商品的修改操作

（1）利用前台商品显示的操作实现后台的商品显示

① 后台商品的do处理界面

<%@page import="com.zking.cart.entity.Goods"%>
<%@page import="java.util.List"%>
<%@page import="com.zking.cart.biz.impl.GoodsBizImpl"%>
<%@page import="com.zking.cart.biz.IGoodsBiz"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
		<!-- 调用dao遍历即可 -->
			<%
				//实例化
		 IGoodsBiz igb = new GoodsBizImpl();
			//定义变量存储页码以及每一夜显示的数据
			int pageIndex = 1;
	    	int pageSize = 4;
			int pageMax = 0;//存储最大页码
			//当点击分页区域的下一页超链接时，获取这个参数
			String pIndex = request.getParameter("pageIndex");
			//判断，只有你点击了下一页  才将pIndex赋值给pageIndex
			if (null != pIndex) {
				pageIndex = Integer.valueOf(pIndex);
			}
			//根据dao求出总记录数
			int count = igb.getGoodsCount();
			pageMax = count % pageSize == 0 ? count / pageSize : count / pageSize + 1;
	        List<Goods> listGoods = igb.queryGoodsAll(pageIndex, pageSize);
	        request.setAttribute("listGoods", listGoods);
	        request.setAttribute("pageIndex",pageIndex);
			request.setAttribute("pageSize",pageSize);
			request.setAttribute("pageMax",pageMax);
			request.getRequestDispatcher("goodsList.jsp").forward(request, response);
						
			%>

② 后台商品显示

<%@page import="com.zking.cart.biz.impl.GoodsBizImpl"%>
<%@page import="com.zking.cart.biz.IGoodsBiz"%>
<%@page import="com.zking.cart.entity.Goods"%>
<%@page import="java.util.List"%>
<%@page import="com.zking.cart.dao.impl.GoodsDaoImpl"%>
<%@page import="com.zking.cart.dao.IGoodsDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<!-- bootstrap.css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<!-- jQuery -->
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<!-- bootstrap.js -->
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<style type="text/css">
			table tr {
				text-align: center;
			}

			table tr td {
				vertical-align: middle !important;
			}
			.seach{width:50%;margin: 0 auto;padding-top: 5px;padding-bottom: 5px;}
		</style>
</head>
<body>
	<c:if test="${empty listGoods }">
		<jsp:forward page="doGoodsList.jsp"></jsp:forward>
	</c:if>
	<table class="table table-bordered table-responsive" border="1" width="100%" cellpadding="0" cellspacing="0">
		<tr class="list-group-item-danger">
			<th>商品编号</th>
			<th>商品名称</th>
			<th>商品价格</th>
			<th>商品描述</th>
			<th>商品图片</th>
			<th>商品操作</th>
		</tr>

		<c:forEach items="${listGoods }" var="goods">
			<tr>
				<td>${goods.gid }</td>
				<td>${goods.gname }</td>
				<td>${goods.gprice}</td>
				<td>${goods.ginfo }</td>
				<td><img style="width: 80px; height: 50px;"
					src="${goods.gpath }" /></td>
				<td>
					<button class="btn btn-success" onclick="delgoods(${goods.gid})">删除</button>
					<button class="btn btn-primary" onclick="editgoods(${goods.gid})">修改</button>
				</td>
			</tr>
		</c:forEach>
		<hr>
		<p align="right" style="font-size: 15px; font-weight: bold">
			当前页数:[${pageIndex }/${pageMax }]&nbsp; 
			<a href="goodsList.jsp?pageIndex=1">首页</a> <a
				href="goodsList.jsp?pageIndex=${pageIndex - 1 < 0 ? 1 : pageIndex - 1 }">上一页</a>
			<a
				href="goodsList.jsp?pageIndex=${pageIndex + 1 > pageMax ? pageMax : pageIndex + 1 }">下一页</a>
			<a href="goodsList.jsp?pageIndex=${pageMax }">末页</a>
	</table>\
	
	<script type="text/javascript">
	      function delgoods(gid) {
			
		}
	      function editgoods(gid) {
	    	  var flag = window.confirm("你确定要修改该商品信息吗？");
	    	  if(flag){
	    		  location.href = "dofindGoods.jsp?gid="+gid;
	    	  }
		}
	</script>
</body>
</html>

（2）利用修改按钮的点击事件携带参数gid进入dofindgoods界面寻找点击修改的商品的所有信息

<%@page import="com.zking.cart.entity.Goods"%>
<%@page import="com.zking.cart.biz.impl.GoodsBizImpl"%>
<%@page import="com.zking.cart.biz.IGoodsBiz"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	request.setCharacterEncoding("utf-8");
    
    int gid = 0;
    String id = request.getParameter("gid");
    if(null!=id){
    	gid = Integer.valueOf(id);
    }
    
    IGoodsBiz igb=new GoodsBizImpl();    
    Goods goods = igb.getGoodsByGid(gid);
    request.setAttribute("goods", goods);
    request.getRequestDispatcher("editGoods.jsp").forward(request, response);
    
%>

（3）在获取了要修改商品的所有信息后，将其保存于修改界面表单中

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
<h2 style="text-align: center">修改商品信息</h2>
<hr>
<form action="doeditGoods.jsp" method="post" style="text-align: center">
     <input type="hidden" name="gid" value="${goods.gid }">
       商品编号：<input type="text" value="${goods.gid }" disabled="disabled">
           <br> <br>
       商品名称：<input type="text" name="gname" value="${goods.gname }">
           <br>  <br> 
       商品价格：<input type="text" name="gprice" value="${goods.gprice }">
           <br>  <br>
       商品描述：<input type="text" name="ginfo" value="${goods.ginfo }">
           <br> <br> 
       商品图片：<input type="text" name="gpath" value="${goods.gpath }">
           <br>  <br>  
          <input type="submit" value="确认修改">
</form>
</div>
</body>
</html>

（4）在修改界面进行修改点击提交进入修改的do处理界面，修改成功返回主界面，修改失败则继续修改

<%@page import="com.zking.cart.entity.Goods"%>
<%@page import="com.zking.cart.biz.IGoodsBiz"%>
<%@page import="com.zking.cart.biz.impl.GoodsBizImpl"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	request.setCharacterEncoding("utf-8");
    
    int gid = 0;
    String id = request.getParameter("gid");
    if(null!=id){
    	gid = Integer.valueOf(id);
    }
    String gname = request.getParameter("gname");
    String price = request.getParameter("gprice");
    float gprice = 0;
    if(null!=price){
    	gprice = Float.valueOf(price);
    }
    String ginfo = request.getParameter("ginfo");
    String gpath = request.getParameter("gpath");
    
    IGoodsBiz igb=new GoodsBizImpl();   
    Goods goods = new Goods(gname,gprice,ginfo,gpath);
    int n =igb.editGoodsByGid(gid, goods);
    if(n>0){
    	out.println("<script>alert('修改成功');location.href='goodsList.jsp'</script>");
    }else{
    	out.println("<script>alert('修改失败');location.href='editGoods.jsp'</script>");
    }
%>