一、要用到的 js 和 css 文件

css文件：bootstrap.min.css 或 bootstrap.css

js文件：bootstrap.js

二、数据库表+实体类+Dao类

1、数据库表

2、实体类

商品类（Goods）
gid	商品编号
gname	商品名称
gprice	商品单价
ginfo	商品描述
gface	商品图片

小订单（OrderItem）
Goods 类型（对象)	商品对象
gnumber	商品数量
gnumprice	商品总价

3、Dao类方法(GoodsDao)

查询所有商品方法：在页面显示所有商品

	/*** 查询所有商品* @return 返回商品集合*/public ArrayList<Goods> getAll(){ArrayList<Goods> glist=new ArrayList<>();Connection con=null;PreparedStatement ps=null;ResultSet rs=null;try {con=DBHelper.getCon();String sql="select * from Goods";ps=con.prepareStatement(sql);rs=ps.executeQuery();while(rs.next()) {glist.add(new Goods(rs.getInt(1), rs.getString(2), rs.getDouble(3), rs.getString(4), rs.getString(5)));}} catch (Exception e) {e.printStackTrace();} finally {DBHelper.closeDb(con, ps, rs);}return glist;}

查询单个商品：根据编号查询到商品所有信息

	/*** 查询单个* @param gid* @return*/public Goods getById(int gid){Goods g=null;Connection con=null;PreparedStatement ps=null;ResultSet rs=null;try {con=DBHelper.getCon();String sql="select * from Goods where gid="+gid;ps=con.prepareStatement(sql);rs=ps.executeQuery();if(rs.next()) {g=new Goods(rs.getInt(1), rs.getString(2), rs.getDouble(3), rs.getString(4), rs.getString(5));}} catch (Exception e) {e.printStackTrace();} finally {DBHelper.closeDb(con, ps, rs);}return g;}

四、商品主页面（index.jsp）

1、代码分析

调用Dao类查询所有的方法，遍历集合，给页面绑定数据

		<%GoodsDao gd=new GoodsDao();ArrayList<Goods> glist=gd.getAll();for(Goods g:glist){%><tr><td><%=g.getGid() %></td><td><%=g.getGname() %></td><td><%=g.getGprice() %></td><td><%=g.getGinfo() %></td><td><img alt="" src="<%=g.getGface()%>"></td><td><button onclick="gm(<%=g.getGid()%>)" class="btn btn-info">加入购物车</button></td></tr><%} %>

2、完整代码

index.jsp

<%@page import="entity.Goods"%>
<%@page import="java.util.ArrayList"%>
<%@page import="dao.GoodsDao"%>
<%@ 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>商品主页</title>
<!-- 引用jQuery库 -->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript">function gm(gid) {//跳转到do页面 顺便传个编号location.href="dogwc.jsp?gid="+gid;}
</script>
</head>
<body><table class="table table-hover"><tr><td>商品编号</td><td>商品名称</td><td>商品单价</td><td>商品介绍</td><td>商品图片</td><td>操作</td></tr><%GoodsDao gd=new GoodsDao();ArrayList<Goods> glist=gd.getAll();for(Goods g:glist){%><tr><td><%=g.getGid() %></td><td><%=g.getGname() %></td><td><%=g.getGprice() %></td><td><%=g.getGinfo() %></td><td><img alt="" src="<%=g.getGface()%>"></td><td><button onclick="gm(<%=g.getGid()%>)" class="btn btn-info">加入购物车</button></td></tr><%} %></table></body>
</html>

五、购物车页面（spcar.jsp）

1、代码分析

获取到session中的订单集合，遍历集合获取到集合内的值，绑定到页面

	<%//获取到session中的订单集合ArrayList<OrderItem> olist=(ArrayList<OrderItem>)session.getAttribute("olist");//把订单绑定到页面for(int i=0;i<olist.size();i++){%><tr><td><img alt="" src="<%=olist.get(i).getGoods().getGface() %>"></td><td><%=olist.get(i).getGoods().getGname() %></td><td><%=olist.get(i).getGoods().getGprice() %></td><td><%=olist.get(i).getGoods().getGinfo() %></td><td><button class="btn" onclick="j('-',<%=olist.get(i).getGoods().getGid()%>)">-</button><input id="<%=olist.get(i).getGoods().getGid()%>" onblur="xg(this,<%=olist.get(i).getGoods().getGid() %>)" style="width:40px;text-align:center;" type="text" value="<%=olist.get(i).getGnumber() %>"><button class="btn" onclick="j('+',<%=olist.get(i).getGoods().getGid()%>)">+</button></td><td><%=olist.get(i).getSumPrice() %></td><td><a href="dodelete.jsp?gid=<%=olist.get(i).getGoods().getGid()%>"><span class="glyphicon glyphicon-trash"></span></a></td></tr><%} %></table>

文本框修改商品数量

跳转到dogwc.jsp对商品的数量，小订单总价，所有订单总价进行修改
	function xg(obj,gid) {var gnumber = obj.value;location.href="dogwc.jsp?gid="+gid+"&gnum="+gnumber;}
在input标签中给方法传值（onblur焦点消失事件，焦点消失后，商品的总价随数量加减）
<input id="<%=olist.get(i).getGoods().getGid()%>" onblur="xg(this,<%=olist.get(i).getGoods().getGid() %>)" style="width:40px;text-align:center;" type="text" value="<%=olist.get(i).getGnumber() %>">

点击加“+” 减“-” 对商品的数量进行加减

判断值：减到小于1的值，直接复制等于1

判断完后，跳转到dogwc.jsp对商品的数量，小订单总价，所有订单总价进行修改
 	function $(id){return document.getElementById(id);} function j(j,gid){var gnumber=$(gid).value;if(j=="-"){gnumber--;if(gnumber<1){gnumber=1;/* location.href="dodelete.jsp?gid="+gid+"&gnum="+gnumber; */}location.href="dogwc.jsp?gid="+gid+"&gnum="+gnumber;}else if(j=="+"){gnumber++;location.href="dogwc.jsp?gid="+gid+"&gnum="+gnumber;}}
给按钮添加点击事件onclick，并传值
<button class="btn" onclick="j('-',<%=olist.get(i).getGoods().getGid()%>)">-</button><button class="btn" onclick="j('+',<%=olist.get(i).getGoods().getGid()%>)">+</button>

在dogwc.jsp对订单总价的计算用session传值

session.getAttribute("sumPrice")

<button class="btn btn-success">总价：<%=session.getAttribute("sumPrice")%></button>

	double sumPrice = 0;for(OrderItem oit:olist){sumPrice+=oit.getSumPrice();}	//把集合放到session中session.setAttribute("olist", olist);session.setAttribute("sumPrice", sumPrice);

2、完整代码

购物车页面（spcar.jsp）

<%@page import="entity.OrderItem"%>
<%@page import="java.util.ArrayList"%>
<%@ 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>购物车主页</title>
<!-- 引用jQuery库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript">function xg(obj,gid) {var gnumber = obj.value;location.href="dogwc.jsp?gid="+gid+"&gnum="+gnumber;}function $(id){return document.getElementById(id);} function j(j,gid){var gnumber=$(gid).value;if(j=="-"){gnumber--;if(gnumber<1){gnumber=1;/* location.href="dodelete.jsp?gid="+gid+"&gnum="+gnumber; */}location.href="dogwc.jsp?gid="+gid+"&gnum="+gnumber;}else if(j=="+"){gnumber++;location.href="dogwc.jsp?gid="+gid+"&gnum="+gnumber;}}
</script>
</head>
<body><h1 align="center"><a href="index.jsp"><span class="glyphicon glyphicon-home"></span></a></h1><table class="table table-hover"><tr><td>商品图片</td><td>商品名称</td><td>商品单价</td><td>商品介绍</td><td>商品数量</td><td>订单总价</td><td><span class="glyphicon glyphicon-cog"></span></td></tr><%//获取到session中的订单集合ArrayList<OrderItem> olist=(ArrayList<OrderItem>)session.getAttribute("olist");//把订单绑定到页面for(int i=0;i<olist.size();i++){%><tr><td><img alt="" src="<%=olist.get(i).getGoods().getGface() %>"></td><td><%=olist.get(i).getGoods().getGname() %></td><td><%=olist.get(i).getGoods().getGprice() %></td><td><%=olist.get(i).getGoods().getGinfo() %></td><td><button class="btn" onclick="j('-',<%=olist.get(i).getGoods().getGid()%>)">-</button><input id="<%=olist.get(i).getGoods().getGid()%>" onblur="xg(this,<%=olist.get(i).getGoods().getGid() %>)" style="width:40px;text-align:center;" type="text" value="<%=olist.get(i).getGnumber() %>"><button class="btn" onclick="j('+',<%=olist.get(i).getGoods().getGid()%>)">+</button></td><td><%=olist.get(i).getSumPrice() %></td><td><a href="dodelete.jsp?gid=<%=olist.get(i).getGoods().getGid()%>"><span class="glyphicon glyphicon-trash"></span></a></td></tr><%} %></table><p align="right" style="margin-right:40px"><button class="btn btn-success">总价：<%=session.getAttribute("sumPrice") %></button></p>
</body>
</html>

dogwc.jsp

<%@page import="dao.GoodsDao"%>
<%@page import="entity.OrderItem"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%//获取商品订单的数量String number = request.getParameter("gnum");int count = 1;if(number!=null){count= Integer.valueOf(number);}//接收商品的编号String id = request.getParameter("gid");int gid = Integer.valueOf(id);//构造小订单对象OrderItem oi = new OrderItem();//给属性赋值oi.setGoods(new GoodsDao().getById(gid));//订单中的商品数量oi.setGnumber(1);//订单总价oi.setSumPrice();//获取session中的订单集合ArrayList<OrderItem> olist = (ArrayList<OrderItem>)session.getAttribute("olist");if(olist==null){//创建订单集合olist = new ArrayList<OrderItem>();}boolean b = true;//表示默认 没有相同的订单//遍历订单集合，判断是否已存在相同商品订单for(int i=0;i<olist.size();i++){if(gid==olist.get(i).getGoods().getGid()){//number为空说明是从index页面过来的if(number==null){//修改数量：原来的数量+1olist.get(i).setGnumber(olist.get(i).getGnumber()+1);//修改总价olist.get(i).setSumPrice();}else{//number不为空 说明是 从spcar页面过来的//修改数量：原来的数量修改为countolist.get(i).setGnumber(count);//修改总价olist.get(i).setSumPrice();}//表示有相同订单b = false;}}if(b){//把订单放到ArrayList集合中olist.add(oi);}//遍历订单集合double sumPrice = 0;for(OrderItem oit:olist){sumPrice+=oit.getSumPrice();}	//把集合放到session中session.setAttribute("olist", olist);session.setAttribute("sumPrice", sumPrice);//跳转页面response.sendRedirect("spcar.jsp");//request.getRequestDispatcher("spcar.jsp").forward(request, response);%>

3、删除方法（dodelete.jsp）

这里最好是用for循环

<%@page import="dao.GoodsDao"%>
<%@page import="entity.OrderItem"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%//接收商品的编号String id = request.getParameter("gid");int gid = Integer.valueOf(id);//获取session中的集合ArrayList<OrderItem> olist = (ArrayList<OrderItem>)session.getAttribute("olist");for(OrderItem oi:olist){if(oi.getGoods().getGid()==gid){//根据id找商品olist.remove(oi);break;}}response.sendRedirect("spcar.jsp");%>