• 简单的购物车

    事实证明，放假久了真的会让人变懒，我写个购物车，写了两天，无语死了。写一会，玩一会。

    一、大致模块：

    1. 商品pojo类。
    2. 添加商品到购物车页面。
    3. 添加商品到购物车Servlet。
    4. 显示购物车页面。
    5. 显示购物车Servlet。

    二，实现思路：

    首先建立pojp，然后进行一定的特殊化重写方法。

    添加商品页面使用js判断是否勾选添加的类容。

    添加商品Servlet进行一些基本的判断，处理，将本次的添加商品放入session中。

    而显示购物车就是和第一个页面差距不大，多了一个js的 求和。

    显示购物车Servlet则进行取出session。

     三、代码：

    pojo代码：

    1. package Pojo;
    2.  
    3. public class Shopping {
    4. 	private int on;// 编号
    5. 	private String name;// 名称
    6. 	private double price;// 价格
    7. 	private String date;// 出厂日期
    8. 	private String type;// 类型
    9.  
    10. 	public Shopping() {
    11.  
    12. 	}
    13.  
    14. 	@Override
    15. 	public boolean equals(Object obj) {
    16. 		if (this == obj) {// 完全相同的对象
    17. 			return true;
    18. 		}
    19. 		if (obj instanceof Shopping) {
    20. 			Shopping shopping = (Shopping) obj;
    21. 			if (this.getOn() == shopping.getOn()) {// 编号相同
    22. 				return true;
    23. 			}
    24. 		}
    25. 		return false;
    26. 	}
    27.  
    28. 	@Override
    29. 	public int hashCode() {
    30. 		Integer t = this.getOn();
    31. 		return t.hashCode();
    32. 	}
    33.  
    34. 	@Override
    35. 	public String toString() {
    36. 		return "Shopping [on=" + on + ", name=" + name + ", price=" + price + ", date=" + date + ", type=" + type + "]";
    37. 	}
    38.  
    39. 	public Shopping(int on, String name, double price, String date, String type) {
    40. 		super();
    41. 		this.on = on;
    42. 		this.name = name;
    43. 		this.price = price;
    44. 		this.date = date;
    45. 		this.type = type;
    46. 	}
    47.  
    48. 	public int getOn() {
    49. 		return on;
    50. 	}
    51.  
    52. 	public void setOn(int on) {
    53. 		this.on = on;
    54. 	}
    55.  
    56. 	public String getName() {
    57. 		return name;
    58. 	}
    59.  
    60. 	public void setName(String name) {
    61. 		this.name = name;
    62. 	}
    63.  
    64. 	public double getPrice() {
    65. 		return price;
    66. 	}
    67.  
    68. 	public void setPrice(double price) {
    69. 		this.price = price;
    70. 	}
    71.  
    72. 	public String getDate() {
    73. 		return date;
    74. 	}
    75.  
    76. 	public void setDate(String date) {
    77. 		this.date = date;
    78. 	}
    79.  
    80. 	public String getType() {
    81. 		return type;
    82. 	}
    83.  
    84. 	public void setType(String type) {
    85. 		this.type = type;
    86. 	}
    87. }

    基本的物品信息，值得注意的是，重写了equals,用于判断这俩商品是否为同一个，判断条件是on编号。后面使用hashset去重是将会调用这个hashCode方法，所以它也要重写为以on编号进行比较是否相同。

    显示商品信息页面：

    1. <%@page import="Pojo.Shopping"%>
    2. <%@page import="java.util.ArrayList"%>
    3. <%@ page language="java" contentType="text/html; charset=UTF-8"
    4. 	pageEncoding="UTF-8"%>
    5. html>
    6. <html>
    7. <head>
    8. <meta charset="UTF-8">
    9. <title>商品信息添加title>
    10. <style>
    11. #table1 {
    12. 	margin: 0px auto;
    13. }
    14.  
    15. #tr>td {
    16. 	width: 200px;
    17. }
    18.  
    19. * {
    20. 	margin: 0px;
    21. 	padding: 0px;
    22. }
    23.  
    24. body {
    25. 	width: 60%;
    26. 	margin: 0px auto;
    27. }
    28. style>
    29. head>
    30. <body>
    31. 	<%
    32. 	ArrayList<Shopping> list = (ArrayList<Shopping>) request.getAttribute("scl");
    33. 	String msg = (String) (request.getAttribute("msg"));
    34. 	%>
    35.  
    36. 	<div style="margin-top: 5%;">
    37. 		<p>商品信息添加p>
    38. 		<form action="add" method="POST">
    39. 			<div>
    40. 				<input type="submit" value="加入购物车" style="float: left;"
    41. 					onclick="return addF()">
    42. 					 <input type="button" value="查看购物车"
    43. 					style="float: right;" onclick="location.href='ShowShoppingServlet'">
    44. 			div>
    45. 			<table border=1px style="clear: both;" id="table1">
    46. 				<tr id="tr">
    47. 					<td align="center">序号td>
    48. 					<td align="center">选择td>
    49. 					<td align="center">商品编号td>
    50. 					<td align="center">商品名称td>
    51. 					<td align="center">商品价格td>
    52. 					<td align="center">出厂日期td>
    53. 					<td align="center">商品类型td>
    54. 				tr>
    55. 				<%
    56. 				for (int i = 0; i < list.size(); i++) {
    57. 					Shopping sp = list.get(i);
    58. 				%>
    59. 				<tr>
    60. 					<td align="center"><%=i + 1%>td>
    61. 					<td align="center"><input type="checkbox" name="yes"
    62. 						value="<%=sp.getOn() + ":" + sp.getName() + ":" + sp.getPrice() + ":" + sp.getDate() + ":" + sp.getType()%>">td>
    63. 					<td align="center"><%=sp.getOn()%>td>
    64. 					<td align="center"><%=sp.getName()%>td>
    65. 					<td align="center"><%=sp.getPrice()%>td>
    66. 					<td align="center"><%=sp.getDate()%>td>
    67. 					<td align="center"><%=sp.getType()%>td>
    68. 				tr>
    69. 				<%
    70. 				}
    71. 				%>
    72. 			table>
    73. 			<%
    74. 			if (msg != null) {
    75. 			%>
    76. 			<p style="color: red"><%=msg%>p>
    77. 			<%
    78. 			}
    79. 			%>
    80. 			<a href="tuichu">退出账号a>
    81.  
    82.  
    83. 		form>
    84. 	div>
    85. 	<script>
    86. 		function addF() {
    87. 			var t = false;
    88. 			var anNiu = document.getElementsByName('yes');
    89. 			for (var i = 0; i < anNiu.length; i++) {
    90. 				if (anNiu[i].checked) {
    91. 					t = true;
    92. 					break;
    93. 				}
    94. 			}
    95. 			if (t) {
    96. 				return true;
    97. 			} else {
    98. 				alert("您未选着信息！");
    99. 				return false;
    100. 				s
    101. 			}
    102. 		}
    103. 	script>
    104. body>
    105. html>

    有一个简单的js判断是否勾选：

    和一个后端是否传回提示语句：

        <%
                if (msg != null) {
                %>
                

    <%=msg%>


                <%
                }
                %>

    msg的获取在上面

     显示商品信息页面Servlet代码：

    1. package Servlet;
    2.  
    3. import java.io.IOException;
    4. import java.net.URLDecoder;
    5. import java.util.ArrayList;
    6.  
    7. import Pojo.Shopping;
    8. import jakarta.servlet.ServletException;
    9. import jakarta.servlet.annotation.WebServlet;
    10. import jakarta.servlet.http.HttpServlet;
    11. import jakarta.servlet.http.HttpServletRequest;
    12. import jakarta.servlet.http.HttpServletResponse;
    13.  
    14. /**
    15.  * Servlet implementation class ShoppingServlet
    16.  */
    17. public class ShoppingServlet extends HttpServlet {
    18. 	private static ArrayList shoppingList = new ArrayList();
    19. 	private static final long serialVersionUID = 1L;
    20.  
    21. 	/**
    22. 	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
    23. 	 *      response)
    24. 	 */
    25. 	@Override
    26. 	public void init() throws ServletException {
    27. 		Shopping shopping1 = new Shopping(1, "椰汁", 10, "2021-5-6", "海南XX制造厂");
    28. 		Shopping shopping2 = new Shopping(2, "酸奶", 20, "2022-6-7", "湖南长沙XX制造厂");
    29. 		Shopping shopping3 = new Shopping(3, "雪碧", 30, "2021-11-4", "湖北武汉XX制造厂");
    30. 		shoppingList.add(shopping1);
    31. 		shoppingList.add(shopping2);
    32. 		shoppingList.add(shopping3);
    33. 	}
    34.  
    35. 	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    36. 			throws ServletException, IOException {
    37. 		doPost(request, response);
    38.  
    39. 	}
    40.  
    41. 	/**
    42. 	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
    43. 	 *      response)
    44. 	 */
    45. 	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    46. 			throws ServletException, IOException {
    47. 		request.setAttribute("scl", shoppingList);
    48. 		String msg = request.getParameter("msg");
    49. 		if (msg != null) {
    50. 			msg = URLDecoder.decode(msg, "utf-8");
    51. 			request.setAttribute("msg", msg);
    52. 		}
    53. 		request.getRequestDispatcher("showList.jsp").forward(request, response);
    54. 	}
    55.  
    56. }

    将数据通过转发的方法传回前端：

    request.getRequestDispatcher("showList.jsp").forward(request, response);

     将数据添加到购物车Servicelet:

    1. package Servlet;
    2.  
    3. import java.io.IOException;
    4. import java.net.URLEncoder;
    5. import java.util.ArrayList;
    6.  
    7. import Pojo.Shopping;
    8. import jakarta.servlet.ServletException;
    9. import jakarta.servlet.annotation.WebServlet;
    10. import jakarta.servlet.http.HttpServlet;
    11. import jakarta.servlet.http.HttpServletRequest;
    12. import jakarta.servlet.http.HttpServletResponse;
    13. import jakarta.servlet.http.HttpSession;
    14.  
    15. /**
    16.  * Servlet implementation class AddShoppingServlet
    17.  */
    18. @WebServlet("/add")
    19. public class AddShoppingServlet extends HttpServlet {
    20. 	private static final long serialVersionUID = 1L;
    21.  
    22. 	/**
    23. 	 * Default constructor.
    24. 	 */
    25. 	public AddShoppingServlet() {
    26. 		// TODO Auto-generated constructor stub
    27. 	}
    28.  
    29. 	/**
    30. 	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
    31. 	 *      response)
    32. 	 */
    33. 	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    34. 			throws ServletException, IOException {
    35. 		doPost(request, response);
    36. 	}
    37.  
    38. 	/**
    39. 	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
    40. 	 *      response)
    41. 	 */
    42. 	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    43. 			throws ServletException, IOException {
    44. 		HttpSession session = request.getSession();
    45. 		ArrayList list = (ArrayList) session.getAttribute("catList");
    46. 		if (list == null) {
    47. 			list = new ArrayList();
    48. 		}
    49. 		String[] arrs = request.getParameterValues("yes");
    50. 		for (int i = 0; i < arrs.length; i++) {
    51. 			String[] split = arrs[i].split(":");
    52. 			Shopping shopping = new Shopping();
    53. 			shopping.setOn(Integer.parseInt(split[0]));
    54. 			shopping.setName(split[1]);
    55. 			shopping.setPrice(Double.parseDouble(split[2]));
    56. 			shopping.setDate(split[3]);
    57. 			shopping.setType(split[4]);
    58. 			list.add(shopping);
    59. 		}
    60. 		session.setAttribute("catList", list);
    61. //		System.out.println(list.size());//ok
    62. 		request.setAttribute("msg", "添加成功");
    63. 		request.getRequestDispatcher("shoppingServlet").forward(request, response);
    64. 	}
    65.  
    66. }

    后端通过多选框的value传回的String数据，切割存储进list中，在存入特定的session。

    显示购物车：

    1. <%@page import="java.util.HashSet"%>
    2. <%@page import="java.util.Set"%>
    3. <%@page import="Pojo.Shopping"%>
    4. <%@page import="java.util.ArrayList"%>
    5. <%@ page language="java" contentType="text/html; charset=UTF-8"
    6. 	pageEncoding="UTF-8"%>
    7. html>
    8. <html>
    9. <head>
    10. <meta charset="UTF-8">
    11. <title>我的购物车title>
    12. <style>
    13. #table1 {
    14. 	margin: 0px auto;
    15. }
    16.  
    17. #tr>td {
    18. 	width: 200px;
    19. }
    20.  
    21. * {
    22. 	margin: 0px;
    23. 	padding: 0px;
    24. }
    25.  
    26. body {
    27. 	width: 60%;
    28. 	margin: 0px auto;
    29. }
    30. style>
    31. head>
    32. <body>
    33. 	<%
    34. 	HashSet<Shopping> set = (HashSet<Shopping>) session.getAttribute("setCat");
    35. 	ArrayList<Integer> list = (ArrayList<Integer>) session.getAttribute("nums");
    36. 	%>
    37.  
    38. 	<div style="margin-top: 5%;">
    39. 		<p>我的购物车p>
    40. 		<form action="add" method="POST">
    41. 			<table border=1px style="clear: both;" id="table1">
    42. 				<tr id="tr">
    43. 					<td align="center">数量td>
    44. 					<td align="center">商品编号td>
    45. 					<td align="center">商品名称td>
    46. 					<td align="center">商品价格td>
    47. 					<td align="center">出厂日期td>
    48. 					<td align="center">商品类型td>
    49. 				tr>
    50.  
    51. 				<%
    52. 				int cont = 0;
    53. 				for (Shopping shopping : set) {
    54. 					Shopping sp = shopping;
    55. 				%>
    56. 				<tr>
    57. 					<td name="num" align="center"><%=list.get(cont++)%>td>
    58. 					<td align="center"><%=sp.getOn()%>td>
    59. 					<td align="center"><%=sp.getName()%>td>
    60. 					<td name="qian" align="center"><%=sp.getPrice()%>td>
    61. 					<td align="center"><%=sp.getDate()%>td>
    62. 					<td align="center"><%=sp.getType()%>td>
    63. 				tr>
    64. 				<%
    65. 				}
    66. 				%>
    67. 				
    68. 			table>
    69. 		form>
    70. 		<p id="sumqian">p>
    71. 		<a href="shoppingServlet">返回商品信息a>
    72. 		<script>
    73. 			var a=document.getElementsByName("num");
    74. 			var m=document.getElementsByName("qian");
    75. 			var sum=0;
    76. 			for(var i=0;ilength;i++){
    77. 				sum+=parseInt(a[i].innerHTML)*parseFloat(m[i].innerHTML);
    78. 			}
    79. 			document.getElementById("sumqian").innerHTML="总价格:"+sum+"元。";
    80. 		script>
    81. 	div>
    82. body>
    83. html>

    set用于获取购物车的信息

    list用于获取个数

    这两个都在后端判断并储存好了，传回前端了。

    下方有一个js用于求和购物车的钱。

    查看购物车Servlet：

     

    1. package Servlet;
    2.  
    3. import java.io.IOException;
    4. import java.util.ArrayList;
    5. import java.util.Collections;
    6. import java.util.HashSet;
    7. import java.util.Set;
    8.  
    9. import Pojo.Shopping;
    10. import jakarta.servlet.ServletException;
    11. import jakarta.servlet.annotation.WebServlet;
    12. import jakarta.servlet.http.HttpServlet;
    13. import jakarta.servlet.http.HttpServletRequest;
    14. import jakarta.servlet.http.HttpServletResponse;
    15. import jakarta.servlet.http.HttpSession;
    16.  
    17. /**
    18.  * Servlet implementation class ShowShoppingServlet
    19.  */
    20. @WebServlet("/ShowShoppingServlet")
    21. public class ShowShoppingServlet extends HttpServlet {
    22. 	private static final long serialVersionUID = 1L;
    23.  
    24. 	/**
    25. 	 * Default constructor.
    26. 	 */
    27. 	public ShowShoppingServlet() {
    28. 		// TODO Auto-generated constructor stub
    29. 	}
    30.  
    31. 	/**
    32. 	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
    33. 	 *      response)
    34. 	 */
    35. 	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    36. 			throws ServletException, IOException {
    37. 		doPost(request, response);
    38. 	}
    39.  
    40. 	/**
    41. 	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
    42. 	 *      response)
    43. 	 */
    44. 	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    45. 			throws ServletException, IOException {
    46. 		HttpSession session = request.getSession();
    47. 		ArrayList list = (ArrayList) session.getAttribute("catList");
    48. 		if (list == null) {
    49. 			request.setAttribute("msg", "购物车为空");
    50. 			request.getRequestDispatcher("shoppingServlet").forward(request, response);
    51. 		} else {
    52. 			HashSet set = new HashSet(list);
    53. 			ArrayList nums = new ArrayList();
    54. 			for (Shopping s : set) {
    55. 				int cont = Collections.frequency(list, s);
    56. 				nums.add(cont);
    57. 			}
    58. 			session.setAttribute("setCat", set);
    59. 			session.setAttribute("nums", nums);
    60. 			request.getRequestDispatcher("ShowCat.jsp").forward(request, response);
    61. 		}
    62. 	}
    63.  
    64. }

    查出每个数据出现的个数:

    Collections.frequency(list, s);存入list集合中。

    再通过set特性存储去重，

    把这两个数据传回前端，就有个购物的具体数据。

    退出账号servlet：

    1. package Servlet;
    2.  
    3. import java.io.IOException;
    4. import jakarta.servlet.ServletException;
    5. import jakarta.servlet.annotation.WebServlet;
    6. import jakarta.servlet.http.HttpServlet;
    7. import jakarta.servlet.http.HttpServletRequest;
    8. import jakarta.servlet.http.HttpServletResponse;
    9. import jakarta.servlet.http.HttpSession;
    10.  
    11. /**
    12.  * Servlet implementation class tuiChuServlet
    13.  */
    14. public class tuiChuServlet extends HttpServlet {
    15. 	private static final long serialVersionUID = 1L;
    16.  
    17. 	/**
    18. 	 * Default constructor.
    19. 	 */
    20. 	public tuiChuServlet() {
    21. 		// TODO Auto-generated constructor stub
    22. 	}
    23.  
    24. 	/**
    25. 	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
    26. 	 *      response)
    27. 	 */
    28. 	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    29. 			throws ServletException, IOException {
    30. 		doPost(request, response);
    31. 	}
    32.  
    33. 	/**
    34. 	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
    35. 	 *      response)
    36. 	 */
    37. 	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    38. 			throws ServletException, IOException {
    39. 		HttpSession session = request.getSession();
    40. 		request.getSession().removeAttribute("scl");
    41. 		request.getSession().removeAttribute("setCat");
    42. 		request.getSession().removeAttribute("nums");
    43. 		request.getSession().removeAttribute("catList");
    44. 		response.sendRedirect("Index.jsp");
    45. 	}
    46.  
    47. }

     退出账号就比较简单，清除指定的session，然后跳转页面。

    以上便是一个简单的购物车程序，也许大佬们看着bug百出，不过作为初学者的我们，一步一个脚印，慢慢来。加油~~~ 

  • 相关阅读:
    HTML实现移动端布局与页面自适应
    Vue + Nodejs + socket.io 实现聊天
    前端开发技术栈（工具篇）：2023深入了解webpack的安装和使用以及核心概念和启动流程（详细） 63.3k stars
    Linux 环境搭建
    Matlab转C++代码入门————附带详细代码和示例
    Webpack 如何安装依赖，-D 和 -S的区别?
    x265源码分析-estimateCUCost
    Linux 搭建Owncloud 私有云
    【设计模式】过滤器模式（Filter Pattern）
    python毕业设计项目源码选题（19）篮球、足球、羽毛球等运动场地预约系统毕业设计毕设作品开题报告开题答辩PPT
  • 原文地址：https://blog.csdn.net/qx020814/article/details/126270774