JavaWeb购物车项目二
🛑此篇文章是根据上篇购物车一进行的完善 上期回顾链接如下:
JavaWeb购物车项目一https://blog.csdn.net/weixin_62270300/article/details/124159838
主要实现功能
一、购物车商品显示
将选中的添加到购物车的商品显示在购物车页面中
首先从首页点击图标🛒(a标签)进入购物车界面,代码如下
<a class="btn btn-primary" href="car.jsp">🛒</a>
购物车页面如下:
购物车代码如下:
-
<%@page import="com.zking.vo.CarItem"%>
-
<%@page import="java.util.List"%>
-
<%@page import="com.zking.pojo.User"%>
-
<%@ page language="java" contentType="text/html; charset=UTF-8"
-
pageEncoding="UTF-8"%>
-
-
<html lang="zh">
-
-
<head>
-
<meta charset="UTF-8">
-
<title>Document</title>
-
<meta name="viewport" content="width=device-width, initial-scale=1">
-
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
-
<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
-
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
-
<style>
-
td:nth-child(4)::before, small {
-
content: "$";
-
}
-
-
* {
-
outline: none ;
-
}
-
-
td, th {
-
text-align: center;
-
}
-
-
input {
-
text-align: center;
-
}
-
</style>
-
</head>
-
<%
-
Object obj = session.getAttribute("user");
-
if (obj == null) {
-
response.sendRedirect("login.jsp");
-
return;
-
}
-
%>
-
<body>
-
<div class="jumbotron">
-
<div class="container">
-
<h1>欢迎光临购物车🛒</h1>
-
<p>尊贵的<%=((User) obj).getAccount()%></p>
-
<p>
-
<a href="doExit.jsp" class="btn btn-warning">退出登录</a>
-
</p>
-
</div>
-
</div>
-
-
<table class="table">
-
<tr>
-
<th>商品序号</th>
-
<th>商品名称</th>
-
<th>商品个数</th>
-
<th>商品总价</th>
-
<th>操作</th>
-
</tr>
-
<%
-
int sum=0;
-
List<CarItem>car=(List<CarItem>)session.getAttribute("car");
-
for(CarItem carItem:car){
-
//每个购物条目都有自己的价格
-
sum =carItem.getSum();
-
%>
-
<tr>
-
<td style="line-height: 30.5px;"><%=carItem.getGoods().getId() %></td>
-
<td style="line-height: 30.5px;"><%=carItem.getGoods().getName() %></td>
-
<td>
-
<div class="input-group" style="width: 120px; margin: auto;">
-
<span class="input-group-btn">
-
<a href="doUpdCar.jsp?id=<%=carItem.getGoods().getId() %>&type=0" class="btn btn-default" type="button">-</a>
-
</span> <input type="number" onblur="location.href='https://blog.csdn.net/weixin_62270300/article/details/doUpdCar.jsp?id=<%=carItem.getGoods().getId() %>&count=' this.value" value="<%=carItem.getCount() %>" class="form-control"> <span
-
class="input-group-btn">
-
<a href="doUpdCar.jsp?id=<%=carItem.getGoods().getId() %>&type=1" class="btn btn-default" type="button"> </a>
-
</span>
-
</div>
-
</td>
-
<td style="line-height: 30.5px;"><%=carItem.getSum()%></td>
-
<td style="line-height: 30.5px;">
-
<a href="doDelCar.jsp?id=<%=carItem.getGoods().getId() %>" class="btn btn-primary">删除</a>
-
</td>
-
</tr>
-
<%
-
}
-
%>
-
-
</table>
-
-
<h1 class="alert alert-info">
-
当前购物车总价 <small><%=sum %></small>
-
<a href="doClear.jsp" class="btn btn-danger">点我结算</a>
-
</h1>
-
</body>
-
</html>
二、商品的加减
当点击两旁的➕、➖按钮时 数量进行变化的同时价格也要跟着变化
doUpdCar.jsp(处理修改购物车的页面)
-
<%import="com.zking.vo.CarItem"%>
-
<%import="java.util.List"%>
-
<%@ page language="java" contentType="text/html; charset=UTF-8"
-
pageEncoding="UTF-8"%>
-
<%
-
//拿到购物车
-
List<CarItem>car=(List<CarItem>)session.getAttribute("car");
-
//商品id
-
Integer id=Integer.parseInt(request.getParameter("id"));
-
//拿类型
-
String type=request.getParameter("type");
-
-
CarItem i=null;
-
for(CarItem item:car){
-
if(item.getGoods().getId()==id){
-
i=item;
-
break;
-
}
-
}
-
-
if(type!=null){
-
//去修改购物车中对应的选项
-
i.setCount(i.getCount() (type.equals("0")?-1:1));
-
}else{
-
i.setCount((int)Double.parseDouble(request.getParameter("count")==null?"1":request.getParameter("count")));
-
}
-
i.setCount(i.getCount()>0?i.getCount():1);
-
i.setSum(i.getCount()*i.getGoods().getPrice());
-
-
//更新购物车
-
session.setAttribute("car", car);
-
//跳回购物车
-
response.sendRedirect("car.jsp");
-
%>
type对应car.jsp(购物车页面)中给➕、➖定义的type=“1”、type=“0”,界面重要代码如下:
-
<a href="doUpdCar.jsp?id=<%=carItem.getGoods().getId() %>&type=0" class="btn btn-default" type="button">-</a>
-
-
<input type="number" onblur="location.href='https://blog.csdn.net/weixin_62270300/article/details/doUpdCar.jsp?id=<%=carItem.getGoods().getId() %>&count=' this.value" value="<%=carItem.getCount() %>" class="form-control"> <span
-
class="input-group-btn">
-
-
<a href="doUpdCar.jsp?id=<%=carItem.getGoods().getId() %>&type=1" class="btn btn-default" type="button"> </a>
效果如下:
三、输入框数字改变
将输入框的type改为number ,如果失去焦点的时候跳doUpdCar.jsp界面(注意带上id和输入框的值)
重要代码如下:
-
<input type="number" onblur="location.href='https://blog.csdn.net/weixin_62270300/article/details/doUpdCar.jsp?id=<%=carItem.getGoods().getId() %>&count=' this.value" value="<%=carItem.getCount() %>" class="form-control"> <span
-
class="input-group-btn">
效果如下:
四、商品删除
当选中删除时 移除商品
与实现的功能一做比较删除了第五行的商品
界面如下:
处理删除的代码如下:
-
<%import="com.zking.vo.CarItem"%>
-
<%import="java.util.List"%>
-
<%@ page language="java" contentType="text/html; charset=UTF-8"
-
pageEncoding="UTF-8"%>
-
<%
-
List<CarItem>car=(List<CarItem>)session.getAttribute("car");
-
//商品的id
-
Integer id=Integer.parseInt(request.getParameter("id"));
-
//去删除购物车中对应的选项
-
for(CarItem item:car){
-
if(item.getGoods().getId()==id){
-
car.remove(item);
-
break;
-
}
-
}
-
-
/**
-
for(int i=0;i<car.size();i ){
-
if(car.get(i).getGoods().getId()==id){
-
car.remove(car.get(i));
-
break;
-
}
-
}
-
**/
-
//更新购物车
-
session.setAttribute("car", car);
-
//跳回购物车
-
response.sendRedirect("car.jsp");
-
%>
注意:在写foreach循环的时候有可能会报错 记得加上break。用for循环就不会报错
五、清空购物车
点击下方的点击结算清空购物车
界面效果如下:
处理清空购物车的代码如下:
-
<%import="java.util.List"%>
-
<%import="com.zking.vo.CarItem"%>
-
<%import="java.util.ArrayList"%>
-
<%@ page language="java" contentType="text/html; charset=UTF-8"
-
pageEncoding="UTF-8"%>
-
<%
-
//session.setAttribute("car", new ArrayList<CarItem>());
-
List<CarItem>car=(List<CarItem>)session.getAttribute("car");
-
car.clear();
-
-
//更新购物车
-
session.setAttribute("car", car);
-
//跳回购物车
-
response.sendRedirect("car.jsp");
-
-
%>
六、退出登录
点击退出登录跳转到登录界面
处理退出的代码如下:
-
<%@ page language="java" contentType="text/html; charset=UTF-8"
-
pageEncoding="UTF-8"%>
-
<%
-
session.invalidate();//让session失效
-
response.sendRedirect("login.jsp");
-
%>
今天的分享就到这里结束啦!!✌
期待下次再见!!😊
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhhacihj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13