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

柔情只为你懂 2023-10-06 21:47 2阅读 0赞

### 简易购物车项目 ###

**目录**

简易购物车项目

第一步：新建一个servlet项目

第二步：概念模型

第三步：思路

第四步：效果展示

第五步：代码

第六步：图片一览

--------------------

#### 第一步：新建一个servlet项目 ####

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

#### 第二步：概念模型 ####

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16][]

#### 第三步：思路 ####

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

#### **第四步：效果展示** ####

**登录界面（login.html）**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

**商品界面(index.html)**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

**购物界面 （car.html）**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

#### 第五步：代码 ####

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_10_color_FFFFFF_t_70_g_se_x_16][]

<!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);
    	}
    
    
    }

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_10_color_FFFFFF_t_70_g_se_x_16 1][]

**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);
    }

#### **第六步：图片一览**  ####

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_8_color_FFFFFF_t_70_g_se_x_16][]![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

[servlet_ _Eclipse_-CSDN]: https://blog.csdn.net/weixin_51309915/article/details/122846438?spm=1001.2014.3001.5501
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/80f7f4fed0354cd1815086365fb6544e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y-r5oiR6ICB5Lyv,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/3e0c328ff32347da91c0346e8a3309c6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y-r5oiR6ICB5Lyv,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/099e5f92d45f4e3fbe4cb7d47aad7852.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y-r5oiR6ICB5Lyv,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/d0fdad87e2cd4866a312343a2d929437.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y-r5oiR6ICB5Lyv,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/bd2931ec0193449c829a55e3e481b5fd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y-r5oiR6ICB5Lyv,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/de9e55818f1245efbf287b8f2613a8d4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y-r5oiR6ICB5Lyv,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_10_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/92993c89b2c54ed5a725200a9ae60a88.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y-r5oiR6ICB5Lyv,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_8_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/74a515ff04614ebf8a34bfde3418bfb4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y-r5oiR6ICB5Lyv,size_8,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/04209355c4a64a7886589cd078b2d9ee.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y-r5oiR6ICB5Lyv,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/42543f31f9fe4ce0aea3828eabeda9f1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y-r5oiR6ICB5Lyv,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/2c9e3839df5e4dcaabd62076f0e3450a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y-r5oiR6ICB5Lyv,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y-r5oiR6ICB5Lyv_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/7862edda5c8d4fd5940dcc3218a9cc34.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y-r5oiR6ICB5Lyv,size_20,color_FFFFFF,t_70,g_se,x_16