Jsp 购物车（oracle数据库）之初级版

友友们又见面了，购物车是日常中常见的，今天来了解一下它的基本框架：完成一个初级版的购物车：

一、思维导图：

首先了解需要用到的

表：	用户表	商品表	订单表	购物车表（可无）
浏览页面：	用户登录页面	商品浏览页面	购物车页面
操作页面：	登录操作页面	购物车操作页面	购物车删除页面

下图是浏览页面间的基本关系与它们的作用：

二、步骤（今天只了解商品表【连接数据库】与订单表【用页面缓存】）

在此之前下了解一下，自己写页面可能会不怎么美观。所以可以用别人写好的CSS样式，JS样式来美化：

现将美化包导入项目，然后在页面导包如下：

<!-- 引用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"/>

再来了解每个页面：

注意哦：这里给的是有效果后的完整代码，里面的一些小难点在最后在分区详细讲解

1.商品页面 index.jsp：

a.首先创建商品表（goods），它的实体类以及dao类（当然包括帮助类），

b.然后创建表格，实例化商品对象调用dao类查询商品信息赋值给表格。

c.跳转页面到购物车操作页面，并且传递商品编号（bid）

代码如下：

<html>
<head>
<meta charset="UTF-8">
<!-- 引用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 gm(bid) {//跳转页面，传递编号location.href="do_spcar.jsp?bid="+bid;}
</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.getBid() %></td><td><%=g.getBname() %></td><td><%=g.getBprice() %></td><td><%=g.getBinfo() %></td><td><img alt="" src="<%=g.getBface()%>"></td><td><button onclick="gm(<%=g.getBid() %>)" class="btn btn-success">添加购物车        </button></td></tr><%} %></table>
</body>
</html>

2.购物车操作页面（连接商品页面与购物车页面）do_spcar.jsp:

新创建一个订单表（OrderItem）

接收商品数据，将单项商品对象当成一个字段放入订单表，

订单表放入ArrayList集合，然后将集合放入session对象中

代码如下：

<%//获取商品编号//获取商品订单数量String number=request.getParameter("gnumber");int count=1;if(number!=null){count=Integer.valueOf(number);}//接收商品idString id=request.getParameter("bid");int bid=Integer.valueOf(id);//构造订单对象OrderItem oi=new OrderItem();//给属性赋值oi.setGoods(new GoodsDao().getById(bid));//订单中的商品数量oi.setGnumber(1);//订单总价oi.setSumprice();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(bid==olist.get(i).getGoods().getBid()){//判断number是否为null，及是从index页面是null，从sp_car过来不是；if(number==null){//index页面//修改数量：+1olist.get(i).setGnumber(olist.get(i).getGnumber()+1);//修改总价olist.get(i).setSumprice();}else{//sp_car//修改数量;原来数量修改为count;olist.get(i).setGnumber(count);//修改总价olist.get(i).setSumprice();}//有相同b=false;}    }if(b){//把订单放到ArrayList 集合中 olist.add(oi);}double sumprice=0;//把集合放到session中session.setAttribute("olist", olist);response.sendRedirect("sp_car.jsp");
%>

3.购物车页面 sp_car.jsp：

创建表格

获取session对象，用for循环遍历获取订单对象，在表格中浏览

对订单中商品数量可更改，单类订单总额随之更改，修改的数据传回购物车操作页面，

计算商品总价钱

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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,bid) {var gnumber=obj.value;//alert("商品数量："+gnumber);//alert("商品编号："+bid);location.href="do_spcar.jsp?bid="+bid+"&gnumber="+gnumber;}//加function zj(gnumber,bid) {gnumber=gnumber+1;location.href="do_spcar.jsp?bid="+bid+"&gnumber="+gnumber;}//减function  js(gnumber,bid) {if(gnumber>1){gnumber=gnumber-1;location.href="do_spcar.jsp?bid="+bid+"&gnumber="+gnumber;}else{alert("商品数量不能小于1");}}//删除function sc(bid) {location.href="del_car.jsp?bid="+bid;}//跳转回商品浏览页面function go() {//跳转页面，传递编号location.href="index.jsp";}//文本框规范 function zz() {var n = $("num").value;   if(n.length==0){alert("用户名不能为空");return false;} }
</script>
</head>
<body><table class="table table-hover"><tr><td>商品图片</td><td>商品名称</td><td>商品单价</td><td>商品介绍</td><td>商品数量</td><td>订单总价</td><td>操作 <button onclick="go()" class="btn btn-success">返回</button></td></tr><%//获取session中的原订单集合；ArrayList<OrderItem> olist=(ArrayList<OrderItem>)session.getAttribute("olist");//获取session中的新订单集合ArrayList<OrderItem> olist2=(ArrayList<OrderItem>)session.getAttribute("olist2");//判断是否删除过if(olist2!=null){//有删除olist=olist2;}//订单绑定到页面：for(OrderItem oi:olist){%><tr><td><img alt="" src="<%=oi.getGoods().getBface()%>"></td><td><%=oi.getGoods().getBname() %></td><td><%=oi.getGoods().getBprice() %></td><td><%=oi.getGoods().getBinfo() %></td><td><button class="btn" onclick="js(<%=oi.getGnumber() %>,<%=oi.getGoods().getBid() %>)">-</button><input id="1" readonly="readonly" name="num" onblur="xg(this,<%=oi.getGoods().getBid() %>)" style="width:40px; text-align: center;" type="text" value="<%=oi.getGnumber() %>"><button class="btn" onclick="zj(<%=oi.getGnumber() %>,<%=oi.getGoods().getBid() %>)">+</button></td><td><%=oi.getSumprice() %></td><td><button class="btn" onclick="sc(<%=oi.getSumprice() %>,<%=oi.getGoods().getBid() %>)">删除</button></td></tr><% }%><%int sum=0;for(int i=0;i<olist.size();i++){sum+=olist.get(i).getSumprice();}%></table><span align="right" style="margin-right: 50px" class="btn btn-success">支付：<%=sum %></span></body>
</html>

4.删除订单

<%String id=request.getParameter("bid");int bid=Integer.valueOf(id);ArrayList<OrderItem> olist2=(ArrayList<OrderItem>)session.getAttribute("olist");for(int i=0;i<olist2.size();i++){if(bid==olist2.get(i).getGoods().getBid()){olist2.remove(i);break;}}session.setAttribute("olist2", olist2);response.sendRedirect("sp_car.jsp");%>

三、重点与难点

1.在购物车页面订单不重复：

定义ArrayList集合，

再定义一个boolean值为true

ArrayList<OrderItem> olist= (ArrayList<OrderItem>)session.getAttribute("olist");if(olist==null){//创建订单集合olist = new ArrayList<OrderItem>();}
boolean b=true;//默认没有相同订单

在将订单放入ArrayList集合时，判断新加订单的商品bid 与集合中订单中的商品bid 是否相同，

如果相同，则不新加订单，在原订单的商品数+1.

for(int i=0;i<olist.size();i++){if(bid==olist.get(i).getGoods().getBid()){//修改数量：+1olist.get(i).setGnumber(olist.get(i).getGnumber()+1);//修改总价olist.get(i).setSumprice();}//有相同b=false;}if(b){//把订单放到ArrayList 集合中 olist.add(oi);}

注意：实体类给订单总价set方法改为：

public void setSumprice() {this.sumprice =goods.getBprice()*gnumber;}

2.对订单中商品数量可更改，单类订单总额随之更改，修改的数据传回购物车操作页面，

首先接收更改的值，左减右加，再定义函数将修改后的值传给 购物车操作页面do_spcar.jsp：

<button class="btn" onclick="js(<%=oi.getGnumber() %>,<%=oi.getGoods().getBid() %>)">-</button><input id="1" readonly="readonly" name="num" onblur="xg(this,<%=oi.getGoods().getBid() %>)" style="width:40px; text-align: center;" type="text" value="<%=oi.getGnumber() %>"><button class="btn" onclick="zj(<%=oi.getGnumber() %>,<%=oi.getGoods().getBid() %>)">+</button>

函数代码如下：

function xg(obj,bid) {var gnumber=obj.value;//alert("商品数量："+gnumber);//alert("商品编号："+bid);location.href="do_spcar.jsp?bid="+bid+"&gnumber="+gnumber;}//加function zj(gnumber,bid) {gnumber=gnumber+1;location.href="do_spcar.jsp?bid="+bid+"&gnumber="+gnumber;}//减function  js(gnumber,bid) {if(gnumber>1){gnumber=gnumber-1;location.href="do_spcar.jsp?bid="+bid+"&gnumber="+gnumber;}else{alert("商品数量不能小于1");}}

到达购物车操作页面do_spcar.jsp 后修改商品数量赋值和订单总价

获取值

//获取商品订单数量String number=request.getParameter("gnumber");int count=1;if(number!=null){count=Integer.valueOf(number);}

根据情况修改源代码（是否修改）

boolean b=true;//默认没有相同订单//遍历集合判断是否有相同订单for(int i=0;i<olist.size();i++){if(bid==olist.get(i).getGoods().getBid()){//判断number是否为null，及是从index页面是null，从sp_car过来不是；if(number==null){//index页面//修改数量：+1olist.get(i).setGnumber(olist.get(i).getGnumber()+1);//修改总价olist.get(i).setSumprice();}else{//sp_car//修改数量;原来数量修改为count;olist.get(i).setGnumber(count);//修改总价olist.get(i).setSumprice();}//有相同b=false;}}if(b){//把订单放到ArrayList 集合中  olist.add(oi);}

3.删除订单

删除添加按钮，

<button class="btn" onclick="sc(<%=oi.getSumprice() %>,<%=oi.getGoods().getBid() %>)">删除</button>

添加点击事件——获取bid值传给删除页面：

 //删除function sc(bsumprice,bid) {location.href="del_car.jsp?bid="+bid+"&gsumprice="+bsumprice;}

到达删除页面后：

获取bid值，获取订单集合（起新名字），

 String id=request.getParameter("bid");int bid=Integer.valueOf(id);ArrayList<OrderItem> olist2=(ArrayList<OrderItem>)session.getAttribute("olist");

遍历集合如果有订单的商品bid 与其相同，则调用remove(i) 删除

将修改后的值放入session

for(int i=0;i<olist2.size();i++){if(bid==olist2.get(i).getGoods().getBid()){olist2.remove(i);break;}}session.setAttribute("olist2", olist2);response.sendRedirect("sp_car.jsp");

然后返回购物车页面：

新建ArrayList集合，判断是否有删除过

如果有删除，则新集合替代旧集合

//获取session中的原订单集合；ArrayList<OrderItem> olist=(ArrayList<OrderItem>)session.getAttribute("olist");//获取session中的新订单集合ArrayList<OrderItem> olist2=(ArrayList<OrderItem>)session.getAttribute("olist2");//判断是否删除过if(olist2!=null){//有删除olist=olist2;}

效果图：

商品浏览：

购物车：

代码不算多，主要是思路噢！

拜拜┏(＾0＾)┛