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

简易购物车项目

第一步：新建一个servlet项目

第二步：概念模型

第三步：思路

第四步：效果展示

第五步：代码

第六步：图片一览

第一步：新建一个servlet项目

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

第二步：概念模型

第三步：思路

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

第四步：效果展示

登录界面（login.html）

商品界面(index.html)

购物界面（car.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{@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);
}

第六步：图片一览

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

2、Ubuntu介绍加环境搭建详细教程
一.简介 1.1嵌入式: 嵌入式主要学习的就是一个系统,如何使用系统,如果把软件嵌入到硬件设备物联网:万物互联,学习物联网就是学习如何将多个设备之间连接蓝牙.wifi.NBIOT.ZIGBEE.5 ...
Thinkpad T460p替换机械硬盘、加装内存条详细教程
说明:本篇文章主要是笔记本t460p的固件升级的操作文章,t470p的网友可以参考,但不建议全盘运用,些许还是有点差别的. 适用:需要自助动手的小伙伴,动手能力差或者第一次的建议去门店安装,避免失误. ...
12种淘宝收藏加购方法如何提高淘宝收藏加购？
提高淘宝的加购收藏就等于隐性提高了淘宝的销售,今天开淘网就为大家带来了淘宝收藏加购12种方法,卖家朋友们想不想了解淘宝收藏加购12种方法呢?开淘网知道大家一定非常的想了解和学习淘宝收藏加购12种方法, ...
弘辽科技：如何提高淘宝收藏加购率？有哪些方法？
原标题<弘辽科技:如何提高淘宝收藏加购率?有哪些方法?> 为了提高淘宝收藏加购率,所有的淘宝卖家都会去设置一些相关的活动,那么作为卖家,知道淘宝收藏加购率怎么查看吗?接下来就告诉大家查看的 ...
弘辽科技：淘宝收藏加购在哪里看？如何提升收藏加购数量？
如果店铺的商品收藏加购数量很多,那么说明这款商品是非常受到消费者欢迎的,并且很有可能成为爆款商品.店铺商品的收藏加购数量是可以查到的,那么淘宝收藏加购在哪里看呢? 淘宝收藏加购在哪里看?如何提升收藏加 ...
淘宝用户行为分析（一）：点击—加购—收藏—购买
前面研究的都是用户下单后的行为,是基于已经生成的订单数据,接下来几篇文章将把重点放在下单之前的用户行为分析. 数据来源于 Season 1 of Ali Mobile Recommendation A ...
刷相关搜索软件_【亚马逊排名算法】搜索加购为什么能提升关键词排名？
有搜索框的地方就有排名,有排名就要研究其排名机制.笼统的说,搜索的目的就是根据用户输入的关键词展现出符合用户需求的结果,也就是说优先展示与用户搜索词相关的产品或结果.这句话很重要,任何搜索都是这个原理 ...
什么是收藏加购？收藏加购本质？卖家与买家如何看待？收藏加购的作用是什么？
众所周知,在淘宝平台中,收藏加购可是很重要的一个点,但往往也是很多老板忽视的一个.做好淘宝的收藏加购无异于隐性的提高了淘宝的销售.增加宝贝人气权重.增强搜索排序等等,所以我们一定要明白为何做收藏加购, ...
收藏加购本质？卖家与买家如何看待？收藏加购的作用是什么？
众所周知,在淘宝平台中,收藏加购可是很重要的一个点,但往往也是很多老板忽视的一个.做好淘宝的收藏加购无异于隐性的提高了淘宝的销售.增加宝贝人气权重.增强搜索排序等等,所以我们一定要明白为何做收藏加购, ...

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

简易购物车项目

第一步：新建一个servlet项目

第二步：概念模型

第三步：思路

第四步：效果展示

第五步：代码

第六步：图片一览

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

最新文章

热门文章