JavaWeb程序设计之JSP实现购物车功能全过程

目录

• 一、结合之前所学的相关技术，编写代码实现以下购物车功能

• 1. 我实现的功能运行截图如下

• （1）商品列表页面home.jsp

• （2）登录账号页面/未登录点击结账页面

• （3）重新登录页面（记住上次登录的用户名和密码）

• （4）点击任意商品加入购物车之后查看购物车

• （5）增加或减少商品

• （6）商品数量减为0时移除

• （7）点击去结算，展示总金额

• 2. 数据库test存放的表格

• （1）user表

• （2）product表

• 3. 实体类

• （1）User

• （2）Product.java

• （3）ProductVo

• 4. CartController.java

• 5. JSP页面

• （1）展现商品列表（home.jsp）

• （2）登陆页面(login.jsp)

• （3）登录后台处理页面（loginAction.jsp）

• （4）结账页面（checkout.jsp）

• （5）购物车页面（cart.jsp）

• 总结

一、结合之前所学的相关技术，编写代码实现以下购物车功能

1. 编写一个页面，展现商品列表（静态页面），页面右上方有登陆、结账和查看购物车三个按钮，下方展示网站历史访问的人数

2. 用户点击商品后，可以将商品加入购物车

3. 用户点击登陆，跳转到登陆页面

4. 用户点击结账，若已登陆跳转至结账页面，否则跳转到登陆页面登陆后再跳转到结账页。

5. 用户点击查看购物车按钮，跳转至购物车页面，可查看购物车列表、增加商品数量或者删除商品

1. 我实现的功能运行截图如下

（1）商品列表页面home.jsp

（2）登录账号页面/未登录点击结账页面

（3）重新登录页面（记住上次登录的用户名和密码）

（4）点击任意商品加入购物车之后查看购物车

（5）增加或减少商品

（6）商品数量减为0时移除

（7）点击去结算，展示总金额

2. 数据库test存放的表格

（1）user表

（2）product表

导入jar包

3. 实体类

（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; //统计数量

    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 {
//    连接数据库
    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;
//        如果在主页点击加入购物车超链接，不跳转
        if (whereCome.equals("http://l*ocalh*os*t:8080/sy7/home.jsp")) {
            redirectPath = request.getContextPath() + "/sy7/home.jsp";
        } else {
//            如果在购物车页面增加或删除商品也不跳转
            redirectPath = request.getContextPath() + "/sy7/cart.jsp";
        }
        HttpSession session = request.getSession();
        MapInteger, ProductVo cart = (MapInteger, 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);
//                    防止出现负数
                    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）展现商品列表（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" 结算/a/div
div align="right" style="width: 90%"a href="cart.jsp" rel="external nofollow" 查看购物车/a/div
br

table align="center"
    %---------------------- 获取商品数据 -----------------------------%
    %
        Connection conn = null;
        PreparedStatement stmt = null;
        ResultSet rs = null;
        try {
            //连接数据库
            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"); //价格
                String description = rs.getString("description"); //描述
                String imagePath = rs.getString("image_path"); // 图片路径
                //五个商品即换行
                if (count % 5 == 0) {
                    out.println("tr");
                }
    %
    tdbr
        %--------------------------图片-----------------------%
        div align="center"img src="%=request.getContextPath()+imagePath%" width="180px" height="240px"/div
        %--------------------------商品描述-----------------------%
        div %=name%%=description% /div
        %--------------------------价格-----------------------%
        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
    %
                //闭合标签
                if (count % 5 == 4) {
                    out.println("/tr");
                }
                count++;
            }
            //最后不足五个，自动闭合
            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
%
//    初始化历史访问人数
    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历史访问人数：%= 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
            tdinput type="text" value="%= savedUsername==null?"":savedUsername%" id="username" name="username" required/td
        /tr
        tr
            tdlabel for="password"密码：/label/td
            tdinput type="password" value="%= savedPassword==null?"":savedPassword%" id="password" name="password" required/td
            td align="right"input type="submit" value="登录"/td
        /tr
        tr
            td/td
           tdinput 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
  判断输入的用户信息是否存在数据库
--%
%@ page contentType="text/html;charset=UTF-8" language="java" %

%!
    public boolean validateUser(String username, String password) {
        // 使用JDBC连接数据库
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;

        String driver = "com.mysql.cj.jdbc.Driver";
        String url = "jdbc:mysql://localhost:3306/test";  //数据库
        String user = "root"; //账户
        String psword = "abc1234"; //密码

        try {
            try {
                try {
                    Class.forName(driver);
                } catch (ClassNotFoundException e) {
                    throw new RuntimeException(e);
                }
                // 获取数据库连接
                connection = DriverManager.getConnection(url, user, psword);
            } catch (SQLException e) {
                e.printStackTrace();
            }

            try {
                // 构造查询语句
                String query = "SELECT * FROM test.user WHERE username =  ? ";

                // 创建PreparedStatement对象，并设置参数
                statement = connection.prepareStatement(query);
                statement.setString(1, username);

                // 执行查询
                resultSet = statement.executeQuery();
                // 验证用户名和密码
                if (resultSet.next()) {
                    String storedPassword = resultSet.getString("password");
                    if (storedPassword.equals(password)) {
                        return true;
                    }
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }

        } finally {
            // 关闭连接和释放资源
            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);
    //验证成功
    if (isValidUser) {
        // 创建形 Builder 构造者模式，链式编程
        User user = User.builder()
                    .username(username)
                    .password(password)
                    .build();

        String remember = request.getParameter("remember");

        if (remember != null  remember.equals("member")) {
            // 创建存储用户名和密码的Cookie对象
            Cookie usernameCookie = new Cookie("username", username);
            Cookie passwordCookie = new Cookie("password", password);

            // 设置Cookie的有效期（设置为7天）
            usernameCookie.setMaxAge(7 * 24 * 60 * 60); // 7天
            passwordCookie.setMaxAge(7 * 24 * 60 * 60); // 7天

            // 将Cookie添加到响应中
            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); // 设置有效期为0，即立即删除
                        response.addCookie(cookie);
                    }
                }
            }
        }

        session.setAttribute("user", user);
        //跳转到其他页面
        response.sendRedirect("home.jsp");
    } else {
        //验证失败，提示出错
        response.sendRedirect("login.jsp?msg=failed");
    }
 %

（4）结账页面（checkout.jsp）

HTML+JSP+JSTL

%@ taglib prefix="c" uri="http://java.**s*un.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
  结算页面
--%
%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %
!DOCTYPE html
html
%--------------------判断用户是否登录-----------------------%
%
    //存储变量
    User user = (User) session.getAttribute("user");
    //    未登录用户跳转到登录页面
    if (user == null) {
        response.sendRedirect("login.jsp");
    }
%
head
    meta charset="UTF-8"
    title结算/title
/head
body
%----------------- 获取购物车中的商品 ------------------------%
h1 align="center" style="color: lightpink"订单信息/h1
%
    session = request.getSession();
    MapInteger, Integer cart = (MapInteger, Integer) session.getAttribute("cart");
    if (cart == null) {
        out.println("购物车为空");
        return;
    }
%
%--计算总价钱--%
c:set var="totalAmount" value="0"/
c:forEach var="entry" items="${cart.entrySet()}"
    c:set var="product" value="${entry.value}"/
    %--单个商品的总额--%
    c:set var="amount" value="${product.price * product.count}"/
    %--所有商品的总额--%
    c:set var="totalAmount" value="${totalAmount + amount}"/
/c:forEach
div align="center"
    h2您应支付:￥${totalAmount}/h2
    form action="checkout.jsp" method="POST"
        input type="submit" value="确认订单"
    /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.**s*un.com/jsp/jstl/core" %
%@ taglib prefix="fn" uri="http://java.*s**un.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单价/th
            th数量/th
            th金额/th
        /tr
        c:forEach var="entry" items="${cart.entrySet()}"
            tr
                c:set var="product" value="${entry.value}"/
                %----------------------商品信息--------------------%
                tdimg src="${request.contextPath}${product.imagePath}" width="60px" height="80px"${product.name}/td
                %----------------------单价--------------------%
                td align="center"￥：${product.price}/td
                %----------------------数量-/+--------------------%
                td align="center"
                    button onclick="void(0)"a href="
                %=request.getContextPath()+"/shoppingCart?op=subid="%${product.id}
               "/-
                    /button
                        ${product.count}
                    button onclick="void(0)"a href="
                %=request.getContextPath()+"/shoppingCart?op=addid="%${product.id}
               "/+
                    /button
                /td
                %----------------------金额--------------------%
                td align="center"￥：${product.count*product.price}/td

            /tr

        /c:forEach
    /table
/c:if

brbr
div style="width: 90%" align="right"
    a href="home.jsp" rel="external nofollow" 继续购物/a
    a href="checkout.jsp" rel="external nofollow"  rel="external nofollow" 去结算/a

/div
/body
/html

总结

到此这篇关于JavaWeb程序设计之JSP实现购物车功能的文章就介绍到这了,更多相关JSP实现购物车功能内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

您可能感兴趣的文章:

• JavaWeb-WebSocket浏览器服务器双向通信方式

• JavaWeb项目中DLL文件动态加载方法

• 将JavaWeb项目部署到云服务器的详细步骤

• 解决JavaWeb-file.isDirectory()遇到的坑问题