JavaWeb程序設(shè)計(jì)之JSP實(shí)現(xiàn)購物車功能全過程
更新時(shí)間：2025年01月04日 10:04:36 作者：布丁椰奶凍
這篇文章主要介紹了如何使用Java和相關(guān)技術(shù)實(shí)現(xiàn)一個(gè)基本的購物車功能,包括商品列表展示、用戶登錄、結(jié)賬和查看購物車等功能,通過編寫代碼和設(shè)計(jì)JSP頁面,實(shí)現(xiàn)了用戶交互和數(shù)據(jù)管理,需要的朋友可以參考下
一、結(jié)合之前所學(xué)的相關(guān)技術(shù)，編寫代碼實(shí)現(xiàn)以下購物車功能
1. 編寫一個(gè)頁面，展現(xiàn)商品列表（靜態(tài)頁面），頁面右上方有登陸、結(jié)賬和查看購物車三個(gè)按鈕，下方展示網(wǎng)站歷史訪問的人數(shù)
2. 用戶點(diǎn)擊商品后，可以將商品加入購物車
3. 用戶點(diǎn)擊登陸，跳轉(zhuǎn)到登陸頁面
4. 用戶點(diǎn)擊結(jié)賬，若已登陸跳轉(zhuǎn)至結(jié)賬頁面，否則跳轉(zhuǎn)到登陸頁面登陸后再跳轉(zhuǎn)到結(jié)賬頁。
5. 用戶點(diǎn)擊查看購物車按鈕，跳轉(zhuǎn)至購物車頁面，可查看購物車列表、增加商品數(shù)量或者刪除商品
1. 我實(shí)現(xiàn)的功能運(yùn)行截圖如下
（1）商品列表頁面home.jsp
（2）登錄賬號(hào)頁面/未登錄點(diǎn)擊結(jié)賬頁面
（3）重新登錄頁面（記住上次登錄的用戶名和密碼）
（4）點(diǎn)擊任意商品加入購物車之后查看購物車
（5）增加或減少商品
（6）商品數(shù)量減為0時(shí)移除
（7）點(diǎn)擊去結(jié)算，展示總金額
2. 數(shù)據(jù)庫test存放的表格
（1）user表
（2）product表
導(dǎo)入jar包
3. 實(shí)體類
（1）User
package com.ryx.web.sy7;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
@NoArgsConstructor
@AllArgsConstructor
@Data
@Builder
public class User {
private String username;
private String password;
}（2）Product.java
package com.ryx.web.sy7;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.math.BigDecimal;
@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class Product {
Integer id;
String name;
String imagePath;
BigDecimal price;
String description;
}（3）ProductVo
package com.ryx.web.sy7;
import lombok.Getter;
import lombok.Setter;
import java.math.BigDecimal;
public class ProductVo extends Product {
@Getter
@Setter
Integer count; //統(tǒng)計(jì)數(shù)量
public ProductVo(Integer id, Integer count, String name, double price, String imagePath) {
super();
this.id = id;
this.count = count;
this.name = name;
this.price = BigDecimal.valueOf(price);
this.imagePath=imagePath;
}
}4. CartController.java
package com.ryx.web.sy7;
import lombok.SneakyThrows;
import org.springframework.util.ObjectUtils;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.sql.*;
import java.util.HashMap;
import java.util.Map;
@WebServlet(name = "shoppingCart", value = "/shoppingCart")
public class CartController extends HttpServlet {
// 連接數(shù)據(jù)庫
private static final String DB_URL = "jdbc:mysql://localhost:3306/test";
private static final String DB_USERNAME = "root";
private static final String DB_PASSWORD = "abc1234";
@SneakyThrows
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Integer id = Integer.valueOf(request.getParameter("id"));
String op = request.getParameter("op");
String whereCome = request.getHeader("Referer");
String redirectPath = null;
// 如果在主頁點(diǎn)擊加入購物車超鏈接，不跳轉(zhuǎn)
if (whereCome.equals("http://localhost:8080/sy7/home.jsp")) {
redirectPath = request.getContextPath() + "/sy7/home.jsp";
} else {
// 如果在購物車頁面增加或刪除商品也不跳轉(zhuǎn)
redirectPath = request.getContextPath() + "/sy7/cart.jsp";
}
HttpSession session = request.getSession();
Map<Integer, ProductVo> cart = (Map<Integer, ProductVo>) session.getAttribute("cart");
if (ObjectUtils.isEmpty(cart)) {
cart = new HashMap();
}
switch (op) {
// 添加商品
case "add":
if (!ObjectUtils.isEmpty(cart.get(id))) {
ProductVo productVo = cart.get(id);
productVo.setCount(productVo.getCount() + 1);
cart.put(id, productVo);
} else {
Class.forName("com.mysql.jdbc.Driver");
try (Connection conn = DriverManager.getConnection(DB_URL, DB_USERNAME, DB_PASSWORD)) {
String query = "SELECT * FROM product WHERE id = ?";
try (PreparedStatement stmt = conn.prepareStatement(query)) {
stmt.setInt(1, id);
try (ResultSet rs = stmt.executeQuery()) {
if (rs.next()) {
String name = rs.getString("name");
double price = rs.getDouble("price");
String imagePath = rs.getString("image_path");
Integer iid = rs.getInt("id");
ProductVo productVo = new ProductVo(iid, 1, name, price, imagePath);
cart.put(id, productVo);
}
}
}
} catch (SQLException e) {
e.printStackTrace();
}
}
break;
// 減少商品
case "sub":
if (!ObjectUtils.isEmpty(cart.get(id))) {
ProductVo productVo = cart.get(id);
// 防止出現(xiàn)負(fù)數(shù)
if (productVo.getCount() > 1) {
productVo.setCount(productVo.getCount() - 1);
cart.put(id, productVo);
} else {
// 如果小于1則移除商品
cart.remove(id);
}
}
break;
}
session.setAttribute("cart", cart);
response.sendRedirect(redirectPath);
}
}5. JSP頁面
（1）展現(xiàn)商品列表（home.jsp）
CSS
table {
border-collapse: collapse;
width: 86%;
}
table, th, td {
border: 1px solid gainsboro;
}
td {
width: 200px;
}
.redText {
color: #FF0000;
}
.pinkTest {
color: lightpink;
}
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.DriverManager" %>
<%--
Created by IntelliJ IDEA.
User: 86189
Date: 2023/10/23
主頁面展示商品
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小煊的美妝鋪</title>
</head>
<body>
<h1 align="center" class="pinkTest">歡迎來到小煊的美妝鋪~</h1>
<div align="right" style="width: 90%"><a href="login.jsp" rel="external nofollow" >登錄</a></div>
<div align="right" style="width: 90%"><a href="checkout.jsp" rel="external nofollow" rel="external nofollow" >結(jié)算</a></div>
<div align="right" style="width: 90%"><a href="cart.jsp" rel="external nofollow" >查看購物車</a></div>
<br>
<table align="center">
<%---------------------- 獲取商品數(shù)據(jù) -----------------------------%>
<%
Connection conn = null;
PreparedStatement stmt = null;
ResultSet rs = null;
try {
//連接數(shù)據(jù)庫
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "abc1234");
String query = "SELECT * FROM product";
stmt = conn.prepareStatement(query);
rs = stmt.executeQuery();
int count = 0;
while (rs.next()) {
int id = rs.getInt("id"); //商品編號(hào)
String name = rs.getString("name"); //商品名
double price = rs.getDouble("price"); //價(jià)格
String description = rs.getString("description"); //描述
String imagePath = rs.getString("image_path"); // 圖片路徑
//五個(gè)商品即換行
if (count % 5 == 0) {
out.println("<tr>");
}
%>
<td><br>
<%--------------------------圖片-----------------------%>
<div align="center"><img src="<%=request.getContextPath()+imagePath%>" width="180px" height="240px"></div>
<%--------------------------商品描述-----------------------%>
<div> <%=name%><%=description%> </div>
<%--------------------------價(jià)格-----------------------%>
<div class="redText" align="left"> ￥：<%=price%> </div>
<%--------------------------加購-----------------------%>
<div align="right">
<form action="home.jsp" method="post">
<button onclick="void(0)"><a style="text-decoration: none"
href="<%=request.getContextPath()+" rel="external nofollow" /shoppingCart?id="+id+"&op=add"%>"/>加入購物車
</button>
</form>
</div>
</td>
<%
//閉合標(biāo)簽
if (count % 5 == 4) {
out.println("</tr>");
}
count++;
}
//最后不足五個(gè)，自動(dòng)閉合
if (count % 5 != 0) {
out.println("</tr>");
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
rs.close();
} catch (Exception e) {
}
try {
stmt.close();
} catch (Exception e) {
}
try {
conn.close();
} catch (Exception e) {
}
}
%>
</table>
<br>
<%
// 初始化歷史訪問人數(shù)
Integer accessCount = (Integer) session.getAttribute("accessCount");
if (accessCount == null) {
accessCount = new Integer(0);
} else {
accessCount = new Integer(accessCount.intValue() + 1);
}
session.setAttribute("accessCount", accessCount);
%>
<div>歷史訪問人數(shù)：<%= accessCount %> </div>
</body>
</html>（2）登陸頁面(login.jsp)
JSP程序段＋JS代碼
<%-----------------------JSP程序段---------------------------%>
<%
request.setCharacterEncoding("UTF-8");
//一次性登錄
String msg = request.getParameter("msg");
%>
<%
if (msg != null) {
String errorMessage = "賬號(hào)或密碼有誤，請(qǐng)重新輸入！";
%>
<script>
var error = '<%= errorMessage %>';
alert(error);
</script>
<%
}
%>
<%-- 讀取Cookie --%>
<%
Cookie[] cookies = request.getCookies();
String savedUsername = null;
String savedPassword = null;
if (cookies != null) {
for (Cookie cookie : cookies) {
if (cookie.getName().equals("username")) {
savedUsername = cookie.getValue();
} else if (cookie.getName().equals("password")) {
savedPassword = cookie.getValue();
}
}
}
%>HTML
<%--
Created by IntelliJ IDEA.
User: 86189
Date: 2023/10/13
登錄頁面
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
padding-top: 40px;
}
.titlecolor{
color: lightpink;
}
</style>
<title>登錄頁面</title>
</head>
<body>
<%-----------------------登錄表單--------------------------%>
<form action="loginAction.jsp" method="post">
<h1 align="center" class="titlecolor">登錄賬號(hào)</h1>
<br>
<table width="300px">
<tr>
<td>
<laber for="username">用戶名：</laber>
</td>
<td><input type="text" value="<%= savedUsername==null?"":savedUsername%>" id="username" name="username" required></td>
</tr>
<tr>
<td><label for="password">密碼：</label></td>
<td><input type="password" value="<%= savedPassword==null?"":savedPassword%>" id="password" name="password" required></td>
<td align="right"><input type="submit" value="登錄"></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name="remember" value="member">記住密碼</td>
</tr>
</table>
</form>
</body>
</html>（3）登錄后臺(tái)處理頁面（loginAction.jsp）
<%@ page import="com.ryx.web.sy7.User" %>
<%@ page import="java.sql.*" %>
<%--
Created by IntelliJ IDEA.
User: 86189
Date: 2023/10/13
判斷輸入的用戶信息是否存在數(shù)據(jù)庫
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%!
public boolean validateUser(String username, String password) {
// 使用JDBC連接數(shù)據(jù)庫
Connection connection = null;
PreparedStatement statement = null;
ResultSet resultSet = null;
String driver = "com.mysql.cj.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/test"; //數(shù)據(jù)庫
String user = "root"; //賬戶
String psword = "abc1234"; //密碼
try {
try {
try {
Class.forName(driver);
} catch (ClassNotFoundException e) {
throw new RuntimeException(e);
}
// 獲取數(shù)據(jù)庫連接
connection = DriverManager.getConnection(url, user, psword);
} catch (SQLException e) {
e.printStackTrace();
}
try {
// 構(gòu)造查詢語句
String query = "SELECT * FROM test.user WHERE username = ? ";
// 創(chuàng)建PreparedStatement對(duì)象，并設(shè)置參數(shù)
statement = connection.prepareStatement(query);
statement.setString(1, username);
// 執(zhí)行查詢
resultSet = statement.executeQuery();
// 驗(yàn)證用戶名和密碼
if (resultSet.next()) {
String storedPassword = resultSet.getString("password");
if (storedPassword.equals(password)) {
return true;
}
}
} catch (SQLException e) {
e.printStackTrace();
}
} finally {
// 關(guān)閉連接和釋放資源
try {
if (resultSet != null) {
resultSet.close();
}
if (statement != null) {
statement.close();
}
if (connection != null) {
connection.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
return false;
}
%>
<%
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
boolean isValidUser = validateUser(username, password);
//驗(yàn)證成功
if (isValidUser) {
// 創(chuàng)建形 Builder 構(gòu)造者模式，鏈?zhǔn)骄幊?
User user = User.builder()
.username(username)
.password(password)
.build();
String remember = request.getParameter("remember");
if (remember != null && remember.equals("member")) {
// 創(chuàng)建存儲(chǔ)用戶名和密碼的Cookie對(duì)象
Cookie usernameCookie = new Cookie("username", username);
Cookie passwordCookie = new Cookie("password", password);
// 設(shè)置Cookie的有效期（設(shè)置為7天）
usernameCookie.setMaxAge(7 * 24 * 60 * 60); // 7天
passwordCookie.setMaxAge(7 * 24 * 60 * 60); // 7天
// 將Cookie添加到響應(yīng)中
response.addCookie(usernameCookie);
response.addCookie(passwordCookie);
} else {
// 刪除之前保存的Cookie
Cookie[] cookies = request.getCookies();
if (cookies != null) {
for (Cookie cookie : cookies) {
if (cookie.getName().equals("username") || cookie.getName().equals("password")) {
cookie.setMaxAge(0); // 設(shè)置有效期為0，即立即刪除
response.addCookie(cookie);
}
}
}
}
session.setAttribute("user", user);
//跳轉(zhuǎn)到其他頁面
response.sendRedirect("home.jsp");
} else {
//驗(yàn)證失敗，提示出錯(cuò)
response.sendRedirect("login.jsp?msg=failed");
}
%>（4）結(jié)賬頁面（checkout.jsp）
HTML+JSP+JSTL
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.ryx.web.sy7.User" %>
<%@ page import="java.util.Map" %>
<%--
Created by IntelliJ IDEA.
User: 86189
Date: 2023/10/21
結(jié)算頁面
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<%--------------------判斷用戶是否登錄-----------------------%>
<%
//存儲(chǔ)變量
User user = (User) session.getAttribute("user");
// 未登錄用戶跳轉(zhuǎn)到登錄頁面
if (user == null) {
response.sendRedirect("login.jsp");
}
%>
<head>
<meta charset="UTF-8">
<title>結(jié)算</title>
</head>
<body>
<%----------------- 獲取購物車中的商品 ------------------------%>
<h1 align="center" style="color: lightpink">訂單信息</h1>
<%
session = request.getSession();
Map<Integer, Integer> cart = (Map<Integer, Integer>) session.getAttribute("cart");
if (cart == null) {
out.println("購物車為空");
return;
}
%>
<%--計(jì)算總價(jià)錢--%>
<c:set var="totalAmount" value="0"/>
<c:forEach var="entry" items="${cart.entrySet()}">
<c:set var="product" value="${entry.value}"/>
<%--單個(gè)商品的總額--%>
<c:set var="amount" value="${product.price * product.count}"/>
<%--所有商品的總額--%>
<c:set var="totalAmount" value="${totalAmount + amount}"/>
</c:forEach>
<div align="center">
<h2>您應(yīng)支付:￥${totalAmount}</h2>
<form action="checkout.jsp" method="POST">
<input type="submit" value="確認(rèn)訂單">
</form>
</div>
</body>
</html>（5）購物車頁面（cart.jsp）
CSS
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid gainsboro;
}
.titleTest {
color: lightpink;
}
td {
width: 20%;
}
a {
text-decoration: none;
}
HTML
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%--
Created by IntelliJ IDEA.
User: 86189
Date: 2023/10/21
購物車頁面
--%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>購物車</title>
</head>
<body>
<h1 align="center" class="titleTest">我的購物車</h1>
<c:if test="${cart!=null && cart.size()>0}">
<table style="width: 1000px" align="center">
<tr>
<th>商品信息</th>
<th>單價(jià)</th>
<th>數(shù)量</th>
<th>金額</th>
</tr>
<c:forEach var="entry" items="${cart.entrySet()}">
<tr>
<c:set var="product" value="${entry.value}"/>
<%----------------------商品信息--------------------%>
<td><img src="${request.contextPath}${product.imagePath}" width="60px" height="80px">${product.name}</td>
<%----------------------單價(jià)--------------------%>
<td align="center">￥：${product.price}</td>
<%----------------------數(shù)量-/+--------------------%>
<td align="center">
<button onclick="void(0)"><a href="
<%=request.getContextPath()+"/shoppingCart?op=sub&id="%>${product.id}
"/>-
</button>
${product.count}
<button onclick="void(0)"><a href="
<%=request.getContextPath()+"/shoppingCart?op=add&id="%>${product.id}
"/>+
</button>
</td>
<%----------------------金額--------------------%>
<td align="center">￥：${product.count*product.price}</td>
</tr>
</c:forEach>
</table>
</c:if>
<br><br>
<div style="width: 90%" align="right">
<a href="home.jsp" rel="external nofollow" >繼續(xù)購物</a>
<a href="checkout.jsp" rel="external nofollow" rel="external nofollow" >去結(jié)算</a>
</div>
</body>
</html>總結(jié)
到此這篇關(guān)于JavaWeb程序設(shè)計(jì)之JSP實(shí)現(xiàn)購物車功能的文章就介紹到這了,更多相關(guān)JSP實(shí)現(xiàn)購物車功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
也談?dòng)肑SP實(shí)現(xiàn)新郎、sohu新聞系統(tǒng)的技術(shù)。
也談?dòng)肑SP實(shí)現(xiàn)新郎、sohu新聞系統(tǒng)的技術(shù)。...2006-10-10
JBuilder2005實(shí)戰(zhàn)JSP之切換控制 圖文步驟
由于在login.jsp的表單中通過action屬性指定switch.jsp為響應(yīng)的JSP文件，當(dāng)用戶在login.jsp中選定登錄用戶，輸入密碼提交表單后，客戶端將向服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求，服務(wù)器即調(diào)用switch.jsp來響應(yīng)這個(gè)請(qǐng)求2012-08-08
Java數(shù)據(jù)庫編程中的技巧...2006-10-10
IBM HTTP Server 遠(yuǎn)程溢出漏洞...2006-10-10
JSP 2.1和JSF 1.2規(guī)范發(fā)布預(yù)覽版本
JSP 2.1和JSF 1.2規(guī)范發(fā)布預(yù)覽版本...2006-10-10
下面小編就為大家?guī)硪黄猨sp實(shí)現(xiàn)ie中的后退方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
JSP動(dòng)態(tài)實(shí)現(xiàn)web網(wǎng)頁登陸和注冊(cè)功能
這篇文章主要介紹是動(dòng)態(tài)實(shí)現(xiàn)web網(wǎng)頁登陸和注冊(cè)功能的示例代碼，文中代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JSP有一定的幫助，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2021-12-12
JSP實(shí)現(xiàn)計(jì)算器功能(網(wǎng)頁版)
這篇文章講述了JSP實(shí)現(xiàn)計(jì)算器功能的詳細(xì)代碼，網(wǎng)頁版的計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-12-12
JSP 動(dòng)態(tài)樹的實(shí)現(xiàn)
在實(shí)際的項(xiàng)目開發(fā)中有很多是有用到動(dòng)態(tài)樹，所謂的動(dòng)態(tài)樹就是可以支持無限級(jí)子節(jié)點(diǎn)。今天我就去給大家實(shí)際演示一下動(dòng)態(tài)樹如何實(shí)現(xiàn)。2009-04-04
java解析出url請(qǐng)求的路徑和參數(shù)鍵值對(duì)類(解析出url請(qǐng)求的路徑，包括頁面)
解析url,本想用正則表達(dá)式處理，但正則表達(dá)式速度較慢。用split處理一下就可以了2012-06-06