项目文件：
实体类和数据库操作类代码不再列出，理解其中原理即可；
商品类封装的是商品属性；
购物车类将商品作为其属性封装在其中；
利用map将商品名作为key，将购物车类作为value存入session对象中
index.jsp
<%@ page import="com.lanqiao.model.CdDisc" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.List" %>
<%@ page import="com.lanqiao.dao.CdDiscDao" %><%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/6/6
Time: 11:00
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>我听我购</title>
<!-- Bootstrap -->
<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Sweet Alert -->
<link href="inspinia/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="js/jquery-2.2.4.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script !src="">
$(function (){
//订购按钮
$('.addtocart').on('click',function (){
var attr = $(this).attr('disc-no');
console.log(attr);
$.getJSON('addToCart.jsp',{'discNo': attr}, function (resp) {
console.log(resp);
if (resp.status === 'success') {
console.log("sdfghjrdsfhtfdbhj")
swal({
title: "购物车",
text: `添加成功，购物车中有\${resp.count }件商品。`,
type: "success"
})
}
})
})
})
</script>
</head>
<%
List<CdDisc> list = new CdDiscDao().selectList();
//将列表保存到request(作用域对象之一)
request.setAttribute("cdList", list);
%>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-1 column">
</div>
<div class="col-md-10 column">
<div class="carousel slide" id="carousel-545653">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-545653">
</li>
<li data-slide-to="1" data-target="#carousel-545653">
</li>
<li data-slide-to="2" data-target="#carousel-545653">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="" src="img/wyy1.jpg" />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img alt="" src="img/wyy2.jpg" />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img alt="" src="img/wyy3.jpg" />
<div class="carousel-caption">
</div>
</div>
</div> <a class="left carousel-control" href="#carousel-545653" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-545653" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<div class="col-md-1 column">
</div>
</div>
<div class="row clearfix">
<div class="col-md-1 column">
</div>
<div class="col-md-10 column">
<a href="CartView.jsp" class="btn btn-info btn-sm pull-right">购物车</a>
<!-- jstl标准标签库：for,if choose,out etc... -->
<!-- el表达式只能取到保入作用域（pageContext, request,session,application）对象中的数据 -->
<c:forEach var="cdDisc" items="${cdList}">
<div class="row clearfix">
<div class="col-md-4 column">
<img alt="140x140" class="img-circle" src="img/${cdDisc.img}" />
</div>
<div class="col-md-8 column">
<h3 class="text-center">${cdDisc.title}</h3>
<p>${cdDisc.description}</p>
<p class="text-center"><button type="button" class="btn btn-primary addtocart" disc-no="${cdDisc.discNo}">订购</button></p>
</div>
</div>
</c:forEach>
</div>
<div class="col-md-1 column">
</div>
</div>
</div>
<!-- Sweet alert -->
<script src="inspinia/js/plugins/sweetalert/sweetalert.min.js"></script>
</body>
</html>
addToCart.jsp
<%@ page import="com.lanqiao.dao.CdDiscDao" %>
<%@ page import="com.lanqiao.model.CdDisc" %>
<%@ page import="com.lanqiao.model.CartItem" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.LinkedHashMap" %><%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/6/6
Time: 17:33
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String discNo = request.getParameter("discNo");
CdDisc byNo = new CdDiscDao().findByNo(discNo);
Map<String, CartItem> cart = (Map<String, CartItem>)session.getAttribute("cart");
if (cart == null) {
cart = new LinkedHashMap<>();
CartItem cartItem = new CartItem(byNo,1);
cart.put(discNo,cartItem);
} else {
if (cart.containsKey(discNo)) {
CartItem cartItem = cart.get(discNo);
cartItem.setQuantity(cartItem.getQuantity()+1);
} else {
CartItem cartItem = new CartItem(byNo,1);
cart.put(discNo,cartItem);
}
}
session.setAttribute("cart", cart);
out.write("{\"status\": \"success\", \"msg\": \"商品成功加入购物车\", \"count\": " + cart.size() + "}");
%>
CartView.jsp
<%@ page import="com.lanqiao.model.CdDisc" %>
<%@ page import="com.lanqiao.dao.CdDiscDao" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.List" %><%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/6/6
Time: 17:53
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>购物车</title>
<!-- Bootstrap -->
<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Sweet Alert -->
<link href="inspinia/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-2.2.4.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script>
$(function (){
})
</script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-10 column col-md-offset-1">
<img src="img/header.jpg" />
</div>
<div class="col-md-1 column">
</div>
</div>
<br>
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>编号</th>
<th>唱片描述</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<c:forEach var="cartitem" items="${sessionScope.cart.values()}">
<tr>
<td>${cartitem.cdDisc.discNo}</td>
<td>${cartitem.cdDisc.description}</td>
<td>${cartitem.cdDisc.price}</td>
<td>${cartitem.quantity}</td>
<td>${cartitem.quantity}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
<!-- Sweet alert -->
<script src="inspinia/js/plugins/sweetalert/sweetalert.min.js"></script>
</body>
</html>