欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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）登錄賬號頁面/未登錄點(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"); //商品編號
                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è)，自動閉合
            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 = "賬號或密碼有誤，請重新輸入！";
%>
<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">登錄賬號</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）登錄后臺處理頁面（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對象，并設(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)建存儲用戶名和密碼的Cookie對象
            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)證失敗，提示出錯
        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>
<%--------------------判斷用戶是否登錄-----------------------%>
<%
    //存儲變量
    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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論