how2j.cn


工具版本兼容问题
从开发者的角度来看,购买行为 就是创建一条一条的订单项
而显示购物车,也就是把这些订单项显示在页面上。

在这个阶段,订单项都会保存在session中,直到最后生成订单的时候,才会把这些订单项保存在数据库中。

步骤 1 : SQL   
步骤 2 : OrderItem   
步骤 3 : ProductDAO   
步骤 4 : 购买商品   
步骤 5 : 显示购物车内容   
步骤 6 : 购买相同商品   
步骤 7 : 配置web.xml   
步骤 8 : 测试   
步骤 9 : 练习-删除订单项   
步骤 10 : 答案-删除订单项   
步骤 11 : 练习-加入购物车   
步骤 12 : 答案-加入购物车   

步骤 1 :

SQL

暂时不需要为OrderItem创建表,因为在这个环节OrderItem还是保存在Session中的
步骤 2 :

OrderItem

OrderItem使用属性Product类型的product,而非int类型的pid,因为在后续显示购物车的时候,可以很简单的通过el表达式就显示商品名称和价格了
${oi.product.name}
package bean; public class OrderItem { private int id; private Product product; private int num; public int getId() { return id; } public void setId(int id) { this.id = id; } public Product getProduct() { return product; } public void setProduct(Product product) { this.product = product; } public int getNum() { return num; } public void setNum(int num) { this.num = num; } }
步骤 3 :

ProductDAO

因为购买的时候,提交到服务器的是pid, 而OrderItem类的product属性是一个Product类型

所以ProductDAO需要根据id获取Product对象
package dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import bean.Product; public class ProductDAO { public static void main(String[] args) { System.out.println(new ProductDAO().getProduct(1).getName()); } public Product getProduct(int id) { Product result = null; try { Class.forName("com.mysql.jdbc.Driver"); Connection c = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/cart?characterEncoding=UTF-8", "root", "admin"); String sql = "select * from product where id = ?"; PreparedStatement ps = c.prepareStatement(sql); ps.setInt(1, id); ResultSet rs = ps.executeQuery(); if (rs.next()) { result = new Product(); result.setId(id); String name = rs.getString(2); float price = rs.getFloat(3); result.setName(name); result.setPrice(price); } ps.close(); c.close(); } catch (ClassNotFoundException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } return result; } public List<Product> ListProduct() { List<Product> products = new ArrayList<Product>(); try { Class.forName("com.mysql.jdbc.Driver"); Connection c = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/cart?characterEncoding=UTF-8", "root", "admin"); String sql = "select * from product order by id desc"; PreparedStatement ps = c.prepareStatement(sql); ResultSet rs = ps.executeQuery(); while (rs.next()) { Product product = new Product(); int id = rs.getInt(1); String name = rs.getString(2); float price = rs.getFloat(3); product.setId(id); product.setName(name); product.setPrice(price); products.add(product); } ps.close(); c.close(); } catch (ClassNotFoundException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } return products; } }
步骤 4 :

购买商品

购买行为本身就是创建一个OrderItem对象
在负责购买商品的OrderItemAddServlet 中,进行如下流程
1. 获取购买数量
2. 获取购买商品的id
3. 根据id获取商品对象
4. 创建一个新的OrderItem对象
5. 从session中取出一个List , 这个List里面存放陆续购买的商品。
如果是第一次从session中获取该List,那么它会是空的,需要创建一个ArrayList
6. 把新创建的OrderItem对象放入该List 中
7. 跳转到显示购物车的listOrderItem
package servlet; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import bean.OrderItem; import bean.Product; import dao.ProductDAO; public class OrderItemAddServlet extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { int num = Integer.parseInt(request.getParameter("num")); int pid = Integer.parseInt(request.getParameter("pid")); Product p = new ProductDAO().getProduct(pid); OrderItem oi = new OrderItem(); oi.setNum(num); oi.setProduct(p); List<OrderItem> ois = (List<OrderItem>) request.getSession().getAttribute("ois"); if (null == ois) { ois = new ArrayList<OrderItem>(); request.getSession().setAttribute("ois", ois); } ois.add(oi); response.sendRedirect("/listOrderItem"); } }
步骤 5 :

显示购物车内容

显示购物车的OrderItemListServlet 其实什么也没做,因为数据已经在session准备好了,直接服务端跳转到listOrderItem.jsp

在listOrderItem.jsp中,从session中遍历出所有的OrderItem。 因为保存在OrderItem 上的是一个Product对象,所以很容易就可以通过EL表达式遍历出商品的名称和价格。
${oi.product.name}
${oi.product.price}
显示购物车内容
package servlet; import java.io.IOException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import bean.Product; import dao.ProductDAO; public class OrderItemListServlet extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.getRequestDispatcher("listOrderItem.jsp").forward(request, response); } }
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*" isELIgnored="false"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <h1 align="center" >购物车</h1> <table align='center' border='1' cellspacing='0'> <tr> <td>商品名称</td> <td>单价</td> <td>数量</td> <td>小计</td> </tr> <c:forEach items="${ois}" var="oi" varStatus="st"> <tr> <td>${oi.product.name}</td> <td>${oi.product.price}</td> <td>${oi.num}</td> <td>${oi.product.price*oi.num}</td> </tr> </c:forEach> </table>
步骤 6 :

购买相同商品

遍历session中所有的OrderItem

如果找到对应的product.id一样的条目,就调整其数量
如果没有找到,就新增加一条
package servlet; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import bean.OrderItem; import bean.Product; import dao.ProductDAO; public class OrderItemAddServlet extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { int num = Integer.parseInt(request.getParameter("num")); int pid = Integer.parseInt(request.getParameter("pid")); Product p = new ProductDAO().getProduct(pid); OrderItem oi = new OrderItem(); oi.setNum(num); oi.setProduct(p); List<OrderItem> ois = (List<OrderItem>) request.getSession().getAttribute("ois"); if (null == ois) { ois = new ArrayList<OrderItem>(); request.getSession().setAttribute("ois", ois); } boolean found = false; for (OrderItem orderItem : ois) { if (orderItem.getProduct().getId() == oi.getProduct().getId()) { orderItem.setNum(orderItem.getNum() + oi.getNum()); found = true; break; } } if (!found) ois.add(oi); response.sendRedirect("/listOrderItem"); } }
步骤 7 :

配置web.xml

<?xml version="1.0" encoding="UTF-8"?> <web-app> <servlet> <servlet-name>ProductListServlet</servlet-name> <servlet-class>servlet.ProductListServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ProductListServlet</servlet-name> <url-pattern>/listProduct</url-pattern> </servlet-mapping> <servlet> <servlet-name>UserLoginServlet</servlet-name> <servlet-class>servlet.UserLoginServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>UserLoginServlet</servlet-name> <url-pattern>/login</url-pattern> </servlet-mapping> <servlet> <servlet-name>OrderItemAddServlet</servlet-name> <servlet-class>servlet.OrderItemAddServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>OrderItemAddServlet</servlet-name> <url-pattern>/addOrderItem</url-pattern> </servlet-mapping> <servlet> <servlet-name>OrderItemListServlet</servlet-name> <servlet-class>servlet.OrderItemListServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>OrderItemListServlet</servlet-name> <url-pattern>/listOrderItem</url-pattern> </servlet-mapping> </web-app>
步骤 8 :

测试

从登陆页面开始,登陆后到产品显示页面,然后修改购买数量,最后点击购买

http://127.0.0.1/login.jsp
步骤 9 :

练习-删除订单项

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
在订单项后面增加一个删除按钮,表示可以删除这个订单项
步骤 10 :

答案-删除订单项

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
答案在右上角的:cart_practise_delete.rar
步骤 11 :

练习-加入购物车

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
目前是购买,并且跳转到购物车页面。

修改为"加入购物车“,点击之后,"加入购物车“几个字变灰,不可点。 当前页面也不跳转。 通过ajax把这个数据提交到后台,加入购物车。

要准备一个显示购物车连接。
步骤 12 :

答案-加入购物车

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
答案在右上角的:cart_practise_add_cart.rar


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-09-27 练习加入购物车始终不能成功
DEMO4250



练习加入购物车始终不能成功,前面的一切顺利!Tomcat输出有信息。请大神帮助。
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.*" isELIgnored="false"%>
 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<script src="/js/jquery.min.js"></script>

<script>
$(function(){

$("input.addCartButton").removeAttr("disabled");
$("input.addCartButton").click(function(){
	$(this).attr("disabled","disabled");
	var button = $(this);
	var pid = $(this).attr("pid");
	var number = $("input.number[pid="+pid+"]").val();
	var page = "addOrderItem";
       $.get(
           page,
           {"num":number,"pid":pid},
           function(result){
        	   $("#addCartSuccessMessage").fadeIn(1200);
        	   $("#addCartSuccessMessage").fadeOut(1200,function(){
        		   button.removeAttr("disabled") ;   
        	   });
        	   
        	   
           }
       );
	
});

$("#addCartSuccessMessage").hide();

});
</script>
 
<c:if test="${!empty user}">
  <div align="center">
    当前用户: ${user.name}
  </div>
</c:if>
 
 
<div  align="center" style="height:20px;margin:20px;" >
	<span style="color:Chartreuse" id="addCartSuccessMessage">加入购物车成功</span> 
</div>

<table align='center' border='1' cellspacing='0'>
    <tr>
        <td>id</td>
        <td>名称</td>
        <td>价格</td>
        <td>购买</td>
    </tr>
    <c:forEach items="${products}" var="product" varStatus="st">
        <tr>
            <td>${product.id}</td>
            <td>${product.name}</td>
            <td>${product.price}</td>
            <td>
             
			            数量<input pid="${product.id}" class="number" type="text" value="1" name="num">
	            <input class="addCartButton" pid="${product.id}" type="submit" value="加入购物车">
              
        </tr>
    </c:forEach>
    	<tr>
    		<td colspan="4"><a href="/listOrderItem">查看购物车</a></td>
    	
    	</tr>
</table>

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-09-14 购物车功能中,点击加入购物车没反应!
七哥哥



点击加入购物车没反应。
$(function(){

$("input.addCartButton").removeAttr("disabled");
$("input.addCartButton").click(function(){
	//$(this).attr("disabled","disabled");
	var button = $(this);
	var pid = $(this).attr("pid");
	var number = $("input.number[pid="+pid+"]").val();
	var page = "/addOrderItem";
       $.get(
           page,
           {"num":number,"pid":pid},
           function(result){
        	   $("#addCartSuccessMessage").fadeIn(1200);
        	   $("#addCartSuccessMessage").fadeOut(1200,function(){
        		   button.removeAttr("disabled") ;   
        	   });
        	           	   
           }
       );
	
});

// 	$("#addCartSuccessMessage").hide();
 
});
</script>

							


1 个答案

七哥哥 答案时间:2018-09-14
<tr> <td>${product.id}</td> <td>${product.name}</td> <td>${product.price}</td> <td> 数量<input pid="${product.id}" class="number" type="text" value="1" name="num"> <input class="addCartButton" pid="${product.id}" type="submit" value="加入购物车"> </td> </tr>
代码块




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-08-11 删除功能 用remove 和removeAll有什么区别?为什么我用remove会出错
2018-08-03 关于加入购物车的一点小疑问
2018-06-24 怎么可以再次登录,购物车里的东西还在啊
2018-06-21 技术交流
2018-04-19 点击加入购物车的按钮,没有任何反应
2018-04-08 购买相同商品调整数量的问题
2018-03-19 NULLPOINTEREXCEPTION
2018-03-01 步骤 9 : 练习-删除订单项---一点小问题?
2018-01-20 pid问题
2017-12-28 大神帮忙解释一下下边这行代码的意思
2017-12-27 request.getSession().getAttribute("ois");这一行代码,
2017-12-09 问题:从购物车页面后退商品页面,再次购买商品无效
2017-12-01 步骤10的删除
2017-10-29 请问步骤四为什么不直接请求转发到jsp页面
2017-10-24 蜡烛的价格为什么这样?
2017-10-19 购买相同商品
2017-07-23 NullPointerException
2017-04-23 步骤5的小疑问
2017-03-18 OrderItemAddServlet中
2017-01-08 好像出了点问题




提问之前请登陆
关于 J2EE-购物车-购物车模块 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图