用cookie简易实现购物车加购过程（详细教程）

最新推荐文章于 2022-10-05 23:55:16 发布
最新推荐文章于 2022-10-05 23:55:16 发布
阅读量2.4k 收藏 18
点赞数 1
分类专栏： java项目 文章标签： eclipse java cookie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51309915/article/details/122909532
版权

简易购物车项目

目录

简易购物车项目

第一步：新建一个servlet项目

第二步：概念模型

第三步：思路

第四步：效果展示

第五步：代码

第六步：图片一览

第一步：新建一个servlet项目

如何创建一个servlet项目 超详细教程（Eclipse）_我是老伯的博客-CSDN博客

第二步：概念模型

第三步：思路

一个用户登录界面---->跳转到另一个html界面----->设置商品信息，下面会带有加入购物车--->点击加入购物车--->跳转第三个界面（商品信息界面）

第四步：效果展示

登录界面（login.html）

商品界面(index.html)

购物界面 （car.html）

第五步：代码

login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 <link rel="stylesheet" href="sources/css/index2.css">
</head>
<body>
	<div class="box">
        <h2>Please Enter Your Info</h2>
        <form action="#">
            <h3>Your Account</h3>
            <input type="text">
            <h3>Your Password</h3>
            <input type="text">
            <h3>Your Password</h3>
            <input type="text">
            <input type="submit" value="登录" type="button" onclick="get()">
        </form>
    </div>
     <script>
        //加载时垂直居中
        var box_height = $(".box").height();
        var w_height = $(window).height();
        $(".box").css({
                "margin-top": (w_height - box_height) / 2 + "px"
            })
            // json格式的css,随着窗口大小实时保证垂直居中
        $(window).on("resize", function() {
            var box_height = $(".box").height();
            var w_height = $(window).height();
            $(".box").css({
                "margin-top": (w_height - box_height) / 2 + "px"
            })
        })
    </script>
		
	
</body>
<script>
function get(){
	var username = $("username").val();
	var password = $("#password").val();
	$.ajax({
		url:"http://localhost:8080/CarServices/login",  // url拼接正确
		type:"get",
		data:{"username":username,"password":password},  
		success:function(data){
			if(data.message = 'success'){
				window.location.href = "http://localhost:8080/CarServices/index.html";
			}
		}
	});
}
</script>
</html>

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="sources/css/index.css">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>
<form action="/CarServices/index" method="get"> 
		
	</form>
    <div class="shop">
        <div class="shContent">
            <div class="warp">
            	<img src="sources/image/11.jpg" alt="1" width="20px">
                <input type="button" value="查看购物车"   onclick="get7()" />
                
            </div>
            <ul>
                <li>
                    <a href="">
                        <img src="sources/image/7.jpg" alt="1">
                    </a>
                    <input type="button" value="商品1" id="1"  onclick='get1()' />
                </li>
                <li>
                    <a href="">
                        <img src="sources/image/8.jpg" alt="1">
                    </a>
                    <input type="button" value="商品2" id="2"  onclick="get2()" />
                </li>
                <li>
                    <a href="">
                        <img src="sources/image/9.jpg" alt="1">
                    </a>
                    <input type="button" value="商品3" id="3"  onclick="get3()" />
                </li>
                <li>
                    <a href="">
                        <img src="sources/image/0.jpg" alt="1">
                    </a>
                    <input type="button" value="商品4" id="4"  onclick="get4()" />
                </li>
            </ul>
        </div>
    </div>
</body>
<script>
	function get1(){
		console.log("---")
		$.ajax({
			url:"http://localhost:8080/CarServices/index",  // url拼接正确
			type:"get",
			data:{"name":1},  
			success:function(value){
				
			}
		});
	}
	
	function get2(){
		$.ajax({
			url:"http://localhost:8080/CarServices/index",  // url拼接正确
			type:"get",
			data:{"name":2},  
			success:function(value){
				
			}
		});
	}
	
	function get3(){
		$.ajax({
			url:"http://localhost:8080/CarServices/index",  // url拼接正确
			type:"get",
			data:{"name":3},  
			success:function(value){
				
			}
		});
	}

	function get4(){
		$.ajax({
			url:"http://localhost:8080/CarServices/index",  // url拼接正确
			type:"get",
			data:{"name":4},  
			success:function(value){
				
			}
		});
	}

	
	function get7(){
		window.location.href = "http://localhost:8080/CarServices/car.html";
	}
</script>
</html>

car.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>Insert title here</title>
</head>
<body onload="get()">
	<div id="name"> </div>
	<div id="name1"> </div>
	<div id="name2"> </div>
	<div id="name3"> </div>
	<div id="name4"> </div>
	
	
</body>
<script>
function get(){
	// 读取存在于本地的cookie信息 ，然后进行显示
	var name = getCookie("user");
	var div1 = getCookie("name1");
	var div2 = getCookie("name2");
	var div3 = getCookie("name3");
	var div4 = getCookie("name4");
	
	
	if(name !=''){
		$("#name").empty().append(name);
	}
	
	if(div1 !=''){
		$("#name1").empty().append(div1);
	}
	
	if(div2 !=''){
		$("#name2").empty().append(div2);
	}
	if(div3 !=''){
		$("#name3").empty().append(div3);
	}
	if(div4 !=''){
		$("#name4").empty().append(div4);
	}
	
	
}

function getCookie(cname){
	    var name = cname + "=";
	    var ca = document.cookie.split(';');
	    for(var i=0; i<ca.length; i++) {
	        var c = ca[i].trim();
	        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
	    }
	    return "";
	}
</script>
</html>

IndexServlet.java

package com.qcby.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

@WebServlet("/index")
public class IndexServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String name = req.getParameter("name");
		System.out.println(name+"---");
		if (name.equals("1")) {
			Cookie cookie = new Cookie("name1", "1");
			cookie.setMaxAge(60*60);
			resp.addCookie(cookie);
		}
		
		if (name.equals("2")) {
			Cookie cookie = new Cookie("name2", "2");
			cookie.setMaxAge(60*60);
			resp.addCookie(cookie);
		}
		
		if (name.equals("3")) {
			Cookie cookie = new Cookie("name3", "3");
			cookie.setMaxAge(60*60);
			resp.addCookie(cookie);
		}
		
		if (name.equals("4")) {
			Cookie cookie = new Cookie("name4", "4");
			cookie.setMaxAge(60*60);
			resp.addCookie(cookie);
		}
		
	}
}

LoginServlet.java

package com.qcby.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
@WebServlet("/login")
public class LoginServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String username = req.getParameter("username");
		String password = req.getParameter("password");
		System.out.println(username +" " +password);
		// 登录逻辑
		
		//登录的cookie信息
		Cookie cookie = new Cookie("user", "qcby");
		cookie.setMaxAge(60*60);
		resp.addCookie(cookie);
		
		resp.setCharacterEncoding("UTF-8");
		resp.setHeader("content-type", "text/html;charset=UTF-8");
		//返回登录成功的信息
		String json = "{\"code\":\"200\",\"message\":\"success\"}";
		resp.getWriter().append(json);
	}


}

index.css 

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
  
}

.shop {
    background-color: rgb(245, 245, 245);
    padding: 20px 0;
}

.shop .shContent {
    width: 80%;
    margin: 0 auto;
}
.shop .shContent .warp {
	width: 8%;
	display: flex;
	padding: 10px;
	 margin: 10px;
	 justify-content: space-between;
}
.shop .shContent .warp input{
	background:yellow;
}
.shop .shContent ul {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.shop .shContent ul li {
    list-style: none;
    width: 24%;
    background-color: #fff;
    position: relative;
}

.shop .shContent ul li a img {
    width: 100%;
    height: 100%;
}

.shop .shContent ul li input {
    display: block;
    width: 150px;
    height: 36px;
    background-color: #fd6a01;
    border-radius: 10px;
    margin: 0px auto;
    text-decoration: none;
    color: #fff;
    line-height: 36px;
}

index2.css

* {
    margin: 0;
    padding: 0;
    transition: all .5s ease;
}


/* 一定要有这句话，不然会有莫名的空白 */

body {
    background-image: url("../image/login_bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

.box {
    width: 30%;
    background: rgb(171, 171, 170);
    margin: 200px auto;
    opacity: 0.8;
    min-width: 200px;
    padding-bottom: 10px;
}

.box h2 {
    background: linear-gradient(to right, rgb(188, 160, 125), rgb(78, 88, 103));
    text-align: center;
    padding: 10px 0;
    color: white;
    font-size: 20px;
}

.box form {
    margin: 20px;
}

.box form h3 {
    color: rgb(68, 79, 99);
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    margin-top: 20px;
}

.box form input[type="text"] {
    /* 除了按钮 */
    width: 80%;
    display: block;
    margin: 0 auto;
    padding: 6px 0;
    text-indent: 8px;
    /* 内容缩进 */
    border: 1px solid rgb(81, 89, 103);
    border-radius: 3px;
    /* 圆角 */
    outline: none;
}

.box form input[type="text"]:hover {
    box-shadow: 2px 3px 5px rgb(222, 207, 196);
}

.box form input[type="text"]:focus {
    background: rgb(243, 232, 225);
    color: rgb(65, 69, 81);
}

.box form input[type="submit"] {
    width: 80%;
    margin: 30px auto 0;
    display: block;
    padding: 8px 0;
    background: linear-gradient(to left, rgb(188, 160, 125), rgb(78, 88, 103));
    color: white;
    border: none;
}

.box form input[type="submit"]:hover {
    box-shadow: 2px 3px 5px rgb(222, 207, 196);
    transform: scale(1.1, 1.1);
}

第六步：图片一览

 

 

 

叫我老伯
关注
  • 1
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
cookie购物车cookie购物车cookie购物车
02-23
cookie购物车cookie购物车cookie购物车cookie购物车cookie购物车cookie购物车cookie购物车cookie购物车cookie购物车cookie购物车cookie购物车cookie购物车
C#基于cookie实现的购物车功能
09-03
在本文中，我们将深入探讨如何使用C#语言通过Cookie实现一个简单的购物车功能。购物车功能是电子商务网站的核心部分，它允许用户选择商品并暂存，以便于后续结算。在C#中，我们可以利用ASP.NET的HttpCookie类来管理...
Cookie做购物车
weixin_60934893的博客
10-05 314
【代码】Cookie做购物车。
用Cookie实现的购物车
SailingAptech的专栏
07-02 230
Cusorderitem.java 封装了相关的商品购买信息 [code="java"]package com.yahaitt.model; import java.io.Serializable; import com.yahaitt.util.PageProperty; /** * Cusorderitem generated by jwgen * ...
cookie 购物车
qq_43101321的博客
09-16 516
数据应该是后台传来，在这我是用数组模拟的，根据数组长度生成对应的数据，代码会用到封装好的cookie，我把cookie上传到资源里了，需要的可以下 商品页代码：（这些代码是写在script标签内的） //数组中存储的数据，图片路径根据自己的修改即可 var data = [{ &quot;id&quot;:10001, &quot;title&quot;:&quot;蒙牛&quot
通过Cookie实现购物车
qq_43001609的博客
10-29 225
通过Cookie实现购物车 加一句闲话，我的个人博客雷园的个人博客，我的文章都会在个人博客同步更新 闲话就不说了直接上代码了 导包： import com.ambow.springboot.vo.CartVo; import org.springframework.web.bind.annotation.Pa...
asp.net购物车(cookie、session两种实现方式)
08-03
本教程将探讨两种常见的实现方式：Cookie和Session。 1. **Cookie实现** Cookie是一种在客户端存储数据的技术，ASP.NET购物车使用Cookie时，通常会为每个商品创建一个唯一的标识，并在用户浏览商品时将这些标识...
JAVAEE中用Session简单实现购物车功能示例代码
08-31
总结一下，这个简单的购物车实现使用了Java EE中的Session技术，通过在Session中存储用户的购物选择，确保了跨请求的数据持久性。不过，实际的电商系统中，购物车功能可能会更复杂，涉及到库存检查、价格计算、促销...
session技术实现网上商城购物车
05-14
**Session技术实现网上商城购物车** 在Web开发中，实现用户购物车功能是电商系统不可或缺的一部分。购物车允许用户在不立即购买商品的情况下，选择多个商品并存储它们以供后续结账。在这个小例子中，我们将探讨如何...
Cookie实现购物车
YMM_007的博客
05-15 572
@Controller public class TzController { /* * GLW * */ @Autowired private ShopService shopService; private ObjectMapper mapper=new ObjectMapper(); private Cookie cookie=new Cookie("Cart",""); @GetMapping("/login") pub...
购物车cookie的实现
09-07
使用目前大部分购物网站都是用的cookie技术，实现了购物车从cookie中的详细实现，此购物车的最主要的功能是，用户每次在本地登录时会创建一个cookie文件，此文件保存了用户名和编号，作为下次登陆的凭证，另外还有一个购物车cookie，次文件中存放的是用户上次购物没有提交订单的商品信息！数据库实现采用的是jndi，大大减少了数据库连接资源的浪费啊
cookie实现的购物车
01-06
cookie实现的购物车<br>帮助你认识COOKIE的强大
cookie实现购物车
07-12
将商品添加到购物车Cookie中 创建要显示数据的Table 根据商品ID获取商品信息 将购物车中商品展示到GridView中 计算购物中商品总数量 计算购物车总金额
原生JS 购物车及购物页面的cookie使用
axbrt02862的专栏
02-09 196
////////////////////////////////////购物页面 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物页面</title> <style> ul{list-style:none;pa...
用Cookie实现购物车
dongfangbubai1的专栏
01-20 7171
用cookie实现购物车
【java】Cookie购物车实现
diyl17837的博客
05-15 339
前言 一个基于Cookie的购物车实现 话不多说，直接上代码 导包 import java.net.URLDecoder; import java.util.ArrayList; import java.util.List; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServletRequest; i...
Cookie实现 购物车
qq_35748567的博客
03-16 315
版权声明：本文为博主原创文章，未经博主允许不得转载。 购物流程图： 采用Cookie实现购物车，由于cookie的存储空降最大只有4KB,所尽量不要存太多的数据，存一下商品编号、数量就可以啦！ ListInfo.aspx向购物车的添加商品的方法： [csharp] view plain copy private void GouWu(
cookie购物车
xiao_b_a_i的博客
10-05 211
cookie购物车为例（使用serlvet） 首先建立数据库连接： DBSource 接口 package com.dao; import java.sql.Connection; public interface DBSource { public Connection getConn(); public void closeConn(Connection conn) ; ...
基于c#的cookie实现简易购物车
最新发布
05-17
好的，我可以给你提供一个基于C#的简易购物车实现的代码示例，使用cookie来存储购物车信息。以下是示例代码： ```csharp // 添加商品到购物车 protected void AddToCart_Click(object sender, EventArgs e) { ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叫我老伯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值