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

简易购物车项目

目录

简易购物车项目

第一步：新建一个servlet项目

第二步：概念模型

第三步：思路

第四步：效果展示

第五步：代码

第六步：图片一览

---

第一步：新建一个servlet项目

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

第二步：概念模型

第三步：思路

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

第四步：效果展示

登录界面（login.html）

商品界面(index.html)

购物界面 （car.html）

第五步：代码

login.html

 


	
        Please Enter Your Info
        

            Your Account
            
            Your Password
            
            Your Password
            
            
        
    
     
		
	

index.html

car.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);
}

第六步：图片一览