简易购物车项目
目录
第一步：新建一个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);
}第六步：图片一览
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/115392.html
