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

简易购物车项目

目录

简易购物车项目

第一步：新建一个servlet项目

第二步：概念模型

第三步：思路

第四步：效果展示

第五步：代码

第六步：图片一览

---

第一步：新建一个servlet项目

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

第二步：概念模型

第三步：思路

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

第四步：效果展示

登录界面（login.html）

商品界面(index.html)

购物界面 （car.html）

第五步：代码

login.html

Please Enter Your Info

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{@Overrideprotected 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{@Overrideprotected 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);}

第六步：图片一览