css+js+ajax+html实现京东项目
项目开始老样子先上效果图 ：
登录页面
注册页面
首页
商品详情页面
购物车页面
接下来我们开始上代码
HTML登录页面代码块
```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">
<title>Document</title>
<link rel="stylesheet" href="../size/font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="../css/denlu.css">
</head>
<body>
<header>
<div class="logo"><img src="../img/logo.png" alt=""><span>欢迎注册</span></div>
<div class="login"><i class="fa fa-commenting-o" aria-hidden="true"></i> <a href="">登录页面调查问卷</a></div>
</header>
<div class="tip">
<p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</p>
</div>
<section>
<div class="box">
<h4>京东不会以任何理由要求您转账汇款，谨防诈骗</h4>
<div class="loginway"><span class="saoma">扫码登录</span><span>账户登录</span></div>
<form action="" id="logForm">
<div class="user"><span><i class="fa fa-user" aria-hidden="true"></i></span><input type="text" placeholder="邮箱/用户名/登录手机" id="usename"></div>
<div class="pass"><span><i class="fa fa-lock" aria-hidden="true"></i></span><input type="password" placeholder="密码" id="pwdword">
</div>
<div class="forget"><a href="">忘记密码</a></div>
<input type="button" value="登录" id="login" onclick="lo()">
</form>
<div class="foot">
<span class="qq"><i class="fa fa-qq" aria-hidden="true"></i></span>
<a href="">QQ</a>
<span>|</span>
<span class="wechat"><i class="fa fa-weixin" aria-hidden="true"></i> </span>
<a>微信</a>
<span class="right"><i class="fa fa-angle-right" aria-hidden="true"></i> </span>
<a href="../html/zhuce.html" class="li">立即注册</a>
</div>
</div>
</section>
<script src="../js/denlu.js"></script>
</body>
</html>
css登录页面代码块
*{
margin: 0;
padding: 0;
}
header span{
font-size: 20px;
font-weight: 700;
}
header{
display: flex;
justify-content: space-between;
padding: 0 30px;
margin: 0 auto;
vertical-align: middle;
width: 1000px;
height: 80px;
line-height: 80px;
}
header div:last-child{
color: red;
}
header a{
text-decoration: none;
color: black;
}
.tip{
width: 100%;
height: 40px;
background-color: #FFF8F0;
}
p{
width: 1000px;
height: 40px;
margin: 0 auto;
font-size: 14px;
line-height: 40px;
}
section{
width: 1300px;
height: 600px;
margin: 0 auto;
background-image: url(../img/loginBg.png);
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.box{
width: 400px;
height: 500px;
position: absolute;
background-color: white;
top: 30px;
right: 200px;
}
h4{
background-color: blanchedalmond;
font-size: 15px;
text-align: center;
height: 30px;
line-height: 30px;
}
.loginway{
height: 80px;
font-size: 20px;
color: red;
line-height: 80px;
border-bottom: 1px solid #ccc;
margin-bottom: 50px;
}
.saoma{
color: black;
margin-left: 40px;
margin-right: 150px;
}
.user,.pass,#login{
width: 360px;
height: 40px;
margin: 0 auto;
border: 1px solid #ccc;
margin-top: 20px;
}
.user span,.pass span{
float: left;
font-size: 20px;
text-align: center;
height: 40px;
width: 40px;
line-height: 40px;
border: none;
background-color: #ccc;
}
.user input,.pass input{
float: left;
height: 39px;
border: none;
width: 320px;
}
a{
text-decoration: none;
color: black;
font-size: 12px;
}
.forget{
width: 360px;
height: 40px;
line-height: 40px;
margin: 0 auto;
margin-top: 20px;
text-align: right;
}
#login{
margin-left: 20px;
background-color: red;
color: white;
font-weight: 700;
font-size: 20px;
}
.foot{
position: absolute;
bottom: 0;
width: 400px;
height: 50px;
line-height: 50px;
background-color: #F4F4F4;
}
.qq,.wechat,.right{
display: inline-block;
text-align: center;
height: 24px;
width: 24px;
line-height: 24px;
border-radius: 50%;
color: white;
font-size: 12px;
}
.qq{
background-color: #10A8FF;
margin-left: 30px;
}
.wechat{
background-color: green;
}
.right{
background-color: red;
font-size: 20px;
margin-left: 150px;
}
.li{
font-size: 16px;
}
js登录页面代码块
function cre() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return new ActiveXObject('Microsoft.XMLHTTP');
}
}
var xhr;
function lo() {
var form = document.getElementById('logForm');
var usename = document.getElementById('usename').value;
var password = document.getElementById('pwdword').value;
if (usename !== '' && password !== '') {
xhr = cre();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var lo =JSON.parse(xhr.responseText);
console.log(lo);
console.log(lo.data.username,typeof lo.code);
if(lo.code === 2){
localStorage.setItem('user',xhr.responseText);
window.location = "http://127.0.0.1:5501/html/shouye.html";
}
}
}
}
xhr.open('post', 'http://192.168.0.254:3000/login');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send("username=" + usename + "&password=" + password);
}
}
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">
<title>Document</title>
<link rel="stylesheet" href="../css/zhuce.css">
</head>
<body>
<header>
<div class="logo"><img src="../img/logo.png" alt=""><span>欢迎注册</span></div>
<div class="login">已有账号<a href="../html/denlu.html"> 请登录</a></div>
</header>
<section>
<form id="for">
<input type="text" placeholder="手机号或者邮箱" onchange="user(this)" id="acc"><span></span><br>
<input type="password" placeholder="8-10位数字和英文字母组成的密码" onchange="pwd(this)" id="pass"><span></span><br>
<input type="password" placeholder="重复密码" onchange="repeatPwd(this)" id="repass"><span></span><br>
<input type="button" value="提交注册" onclick="sub()">
</form>
</section>
<footer>
<ul>
<li><a href="">关于我们</a></li>
<li>|</li>
<li><a href="">联系我们</a></li>
<li>|</li>
<li><a href="">人才招聘</a></li>
<li>|</li>
<li><a href="">商家入驻</a></li>
<li>|</li>
<li><a href=""></a></li>
<li>|</li>
<li><a href="">广告服务</a></li>
<li>|</li>
<li><a href="">手机京东</a></li>
<li>|</li>
<li><a href="">友情链接</a></li>
<li>|</li>
<li><a href="">销售联盟</a></li>
<li>|</li>
<li><a href="">京东社区</a></li>
<li>|</li>
<li><a href="">京东公益</a></li>
<li>|</li>
<li><a href="">English Site</a></li>
</ul>
<p>Copyright©2004-2020京东JD.com版权所有</p>
</footer>
<script src="../js/zhuce.js"></script>
</body>
</html>
css注册页面代码块
*{
margin: 0;
padding: 0;
}
header span{
font-size: 20px;
font-weight: 700;
}
header{
display: flex;
justify-content: space-between;
padding: 0 30px;
margin: 0 auto;
vertical-align: middle;
width: 1500px;
height: 80px;
line-height: 80px;
border-bottom: 1px solid #ccc;
}
header a{
text-decoration: none;
color: red;
}
section{
width: 500px;
margin: 0 auto;
}
section input{
margin-top: 20px;
width: 300px;
height: 40px;
}
section input:last-child{
background-color: red;
width: 304px;
color: white;
border: none;
}
footer{
width: 1000px;
margin: 0 auto;
margin-top: 10px;
}
ul{
list-style: none;
}
li{
float: left;
color: #B3A6C4;
margin-left: 5px;
}
li a{
color: #B3A6C4;
text-decoration: none;
}
p{
clear: both;
margin-left: 250px;
color: #B3A6C4;
}
js注册页面代码块
function crea() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return new ActiveXObject('Microsoft.XMLHTTP');
}
}
var xhr;
function user(us){
var reg1 = /^1[3578]\d{9}$/;
var reg2 = /^\w{2,8}@[0-9a-zA-Z]{3,6}(.com)$/;
if(reg1.test(us.value) || reg2.test(us.value)){
us.nextElementSibling.innerHTML = '√';
us.nextElementSibling.style.color = 'green';
return true;
}else{
us.nextElementSibling.innerHTML = '请输入正确的用户'
us.nextElementSibling.style.color = 'red';
return false;
}
}
function pwd(pas){
var flag
var reg3 = /^([a-z]|\d|[A-Z]){8,10}$/;
if(reg3.test(pas.value)){
pas.nextElementSibling.innerHTML = '√';
pas.nextElementSibling.style.color = 'green';
flag = true;
}else{
pas.nextElementSibling.innerHTML = '请输入正确的密码'
pas.nextElementSibling.style.color = 'red';
flag = false;
}
var repass = document.getElementById('repass');
if(repass.value){
repeatPwd(repass);
}
return flag;
}
function repeatPwd(rep){
var pass= document.getElementById('pass');
if(rep.value == ''){
rep.nextElementSibling.innerHTML = '密码不能空';
rep.nextElementSibling.style.color = 'red';
return false;
}else if(pass.value == rep.value){
rep.nextElementSibling.innerHTML = '√';
rep.nextElementSibling.style.color = 'green';
return true;
}else{
rep.nextElementSibling.innerHTML = '与上面密码不一致'
rep.nextElementSibling.style.color = 'red';
return false;
}
}
function sub(){
var form =document.getElementById('for');
var userFlag = user(form.acc);
var pwdFlag = pwd(form.pass);
var repFlag = repeatPwd(form.repass);
if(userFlag && pwdFlag && repFlag){
xhr = crea();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
if(xhr.responseText ==='注册成功'){
window.location = "../html/shouye.html";
}else{
alert('注册失败,请重新注册');
}
}
}
}
xhr.open('post', 'http://192.168.0.254:3000/regsterUser');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send("username=" + form.acc.value + "&password=" + form.pass.value);
}
}
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">
<title>Document</title>
<link rel="stylesheet" href="../css/shouye.css">
<link rel="stylesheet" href="../size/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
<header>
<div class="nav">
<div class="location">
<span><i class="fa fa-home" aria-hidden="true"></i></span><a href="./shouye.html">京东首页</a>
<span><i class="fa fa-map-marker" aria-hidden="true"></i></span><a href="">杭州</a>
</div>
<div class="infor">
<ul id="userName">
<li><a href="../html/denlu.html">你好，请登录</a></li>
<li><a href="../html/zhuce.html" class="zhuce">免费注册</a></li>
<li><a href="">我的订单</a></li>
<li><a href="../html/gouwuche.html"><i class="fa fa-shopping-cart" aria-hidden="true"></i>我的购物车</a></li>
<li><a href="">客户服务</a></li>
</ul>
</div>
</div>
</header>
<div class="search">
<img src="../img/logo.png" alt="">
<div class="input">
<input type="text">
<button>搜索</button>
</div>
</div>
<section>
<div></div>
<div></div>
<div class="lunbo">
<div class="point">
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
<img src="" alt="" id="picture">
</div>
<div></div>
<div></div>
</section>
<div class="main">
<aside>
<h3>商品精选<span>广告</span></h3>
</aside>
<div class="center">
<div class="center2" id="cen">
</div>
</div>
</div>
<footer>
<ul class="foot">
<li>品类齐全，轻松购物</li>
<li>多仓直发，极速配送</li>
<li>正品行货，精致服务</li>
<li>天天低价，畅选无忧</li>
</ul>
</footer>
<script src="../js/shouye.js"></script>
</body>
</html>
css首页代码块
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #9F9A97;
}
li{
list-style-type: none;
}
header{
width: 100%;
height: 40px;
line-height: 40px;
background-color: #CCCCCC;
margin: 0 auto;
}
.nav,.search{
width: 1700px;
margin: 0 auto;
}
.location{
float: left;
}
.infor{
float: right;
}
.infor ul li{
margin-left: 20px;
float: left;
}
.infor ul li a:hover{
color: red;
}
.zhuce{
color: red;
}
/* 以上页眉 */
.search{
margin-top: 40px;
height: 60px;
}
.search img{
float: left;
}
.search .input{
float: right;
}
.search .input input,.search .input button{
border: 1px solid black;
height: 30px;
float: left;
}
.search .input input{
width: 300px;
}
.search .input button{
background-color: #715A52;
color: white;
height: 32px;
width: 50px;
border: none;;
}
/* 以上搜索框 */
section{
margin-top: 15px;
background-color: #E5292F;
height: 450px;
width: 100%;
display: grid;
grid-template-columns: 105px 350px 1000px 350px auto;
}
section div{
border-right: 1px solid white;
}
#picture{
width: 999px;
height: 450px;
border: none;
}
.lunbo{
position: relative;
}
.point{
border: none;
width: 300px;
height: 40px;
bottom: 0;
left: 390px;
position: absolute;
}
.point a{
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #999999;
float: left;
margin-left: 10px;
opacity: 0.7;
}
/* 以上轮播图 */
.main{
width: 1700px;
height: 4000px;
border: 1px solid #ccc;
margin: 0 auto;
margin-top: 20px;
}
aside{
width: 300px;
height: 4000px;
border: 1px solid #ccc;
border-top: none;
border-left: none;
float: left;
}
h3{
padding-left: 20px;
border-bottom: 1px solid #ccc;
height: 40px;
line-height: 40px;
}
h3 span{
margin-left: 150px;
font-size: 17px;
color: #B5B5B5;
}
.leftBook{
width: 250px;
margin: 10px auto;
}
.leftPicture{
width: 250px;
height: 250px;
}
.leftPrice{
color: red;
font-size: 30px;
}
.leftIntroduce{
margin-top: 10px;
}
.center{
margin-top: 30px;
width: 1397px;
float: left;
}
.center2{
width: 1300px;
height: 4000px;
margin: auto;
display: grid;
grid-template-columns: repeat(4,318px);
grid-template-rows: repeat(8,470px);
gap: 10px;
}
.center div{
border: none;
}
.center2{
margin: 0 auto;
}
.center2 img{
width: 280px;
}
.center3{
padding-left: 15px;
margin: 0 auto;
border: 1px solid transparent;
}
.center2 a button{
width: 180px;
height: 30px;
text-align: center;
margin-top: 5px;
color: red;
font-size: 18px;
font-weight: 800;
background-color: white;
border: 1px solid #ccc;
}
h4{
color: red;
font-size: 35px;
margin-bottom: 10px;
}
.active{
margin-top: 5px;
border: none;
}
.zi{
display: inline-block;
width: 40px;
height: 30px;
line-height: 30px;
padding-left: 5px;
background-color: red;
font-weight: 800;
color: white;
border: none;
border-radius: 5px;
}
.fang{
display: inline-block;
width: 60px;
height: 30px;
line-height: 30px;
padding-left: 5px;
border: 1px solid blue;
color: blue;
margin-left: 2px;
border-radius: 5px;
font-weight: 800;
}
.miao{
display: inline-block;
width: 40px;
height: 30px;
line-height: 30px;
padding-left: 5px;
font-weight: 800;
border: 1px solid red;
color: red;
margin-left: 2px;
border-radius: 5px;
}
.center3:hover{
transform: translateY(-10px);
border: 1px solid #ccc;
box-shadow: 0 0 5px 5px #ccc;
}
/* 以上是中间部分 */
footer{
margin-top: 20px;
width: 100%;
height: 120px;
background-color: #ccc;
padding-top: 35px;
}
.foot{
width: 1700px;
height: 42px;
margin: 0 auto;
line-height: 42px;
display: flex;
justify-content: space-between;
font-size: 20px;
font-weight: 700;
}
.foot li{
padding-left: 60px;
}
.foot li:nth-child(1){
background-image: url(../img/ico_service.png);
background-repeat: no-repeat;
background-position:9px 0px;
}
.foot li:nth-child(2){
background-image: url(../img/ico_service.png);
background-repeat: no-repeat;
background-position:9px -42px;
}
.foot li:nth-child(3){
background-image: url(../img/ico_service.png);
background-repeat: no-repeat;
background-position:9px -85px;
}
.foot li:nth-child(4){
background-image: url(../img/ico_service.png);
background-repeat: no-repeat;
background-position:9px -128px;
}
js首页代码块
function createRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return new ActiveXObject('Microsoft.XMLHTTP');
}
}
var ip = 'http://192.168.0.254:3000/';
window.onload = function () {
var list = document.getElementById('userName');
var user = localStorage.getItem('user')
var username = JSON.parse(user);
if (username !== null) {
var li = document.createElement('li');
var a = document.createElement('a');
a.innerHTML = 'welcome' + username.data.username;
li.appendChild(a);
list.appendChild(li);
}
var xhr = createRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var allPicture = JSON.parse(xhr.responseText);
console.log(allPicture[0].img)
var picture = document.getElementById('picture');
var point = document.getElementsByClassName('point');
var a = point[0].children;
var timer;
var index = 0;
function backg() {
for (var i = 0; i < a.length; i++) {
a[i].style.backgroundColor = '#999999';
}
}
timer = setInterval(function () {
index %= allPicture.length;
picture.src = ip + allPicture[index].img
backg();
a[index].style.backgroundColor = '#FFFFFF'
index++;
}, 1000)
for (var j = 0; j < a.length; j++) {
a[j].num = j;
a[j].onmouseover = function () {
clearInterval(timer);
picture.src = ip + allPicture[this.num].img
backg();
a[this.num].style.backgroundColor = '#FFFFFF'
}
a[j].onmouseout = function () {
timer = setInterval(function () {
index %= allPicture.length;
picture.src = ip + allPicture[index].img
backg();
a[index].style.backgroundColor = '#FFFFFF'
index++;
}, 1000);
}
}
}
}
}
xhr.open('get', 'http://192.168.0.254:3000/showImages')
xhr.send();
}
var arrr = [];
function left() {
var xhr = createRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var books1 = JSON.parse(xhr.responseText);
books1.map(function (item) {
var asid = document.getElementsByTagName('aside');
var div = document.createElement('div');
div.className = 'leftBook';
var a = document.createElement('a');
var h2 = document.createElement('h2');
h2.className = 'leftPrice';
var p = document.createElement('p');
p.className = 'leftIntroduce';
div.appendChild(a);
div.appendChild(h2);
div.appendChild(p);
asid[0].appendChild(div);
p.innerHTML = item.name;
h2.innerHTML = '¥' + item.price;
console.log(item);
a.innerHTML = '<img src="' + ip + item.img + '" οnclick="go(\'' + item.skuId + '\',\'' + item.img + '\',\'' + item.name + '\',\'' + item.price + '\')">';
})
}
}
}
xhr.open('get', 'http://192.168.0.254:3000/showADBooks')
xhr.send();
}
left();
function center() {
var xhr = createRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var book2 = JSON.parse(xhr.responseText);
book2.map(function (item) {
var cen = document.getElementById('cen');
var div0 = document.createElement('div');
var div2 = document.createElement('div');
var a2 = document.createElement('a');
var a3 = document.createElement('a');
var h4 = document.createElement('h4');
var p = document.createElement('p');
var span1 = document.createElement('span');
var span2 = document.createElement('span');
var span3 = document.createElement('span');
div0.className = 'center3';
div0.appendChild(a2);
div0.appendChild(h4);
div0.appendChild(p);
div0.appendChild(div2);
div2.appendChild(span1);
div2.appendChild(span2);
div2.appendChild(span3);
div0.appendChild(a3);
div2.className = 'active';
span1.className = 'zi';
span2.className = 'fang';
span3.className = 'miao'
cen.appendChild(div0);
a2.innerHTML = '<img src="' + ip + item.img + '" οnclick="information(\'' + item.skuId + '\',\'' + item.img + '\',\'' + item.name + '\',\'' + item.price + '\')">';
a3.innerHTML = '<button οnclick="goCart(\'' + item.skuId + '\',\'' + item.img + '\',\'' + item.name + '\',\'' + item.price + '\')"><i class="fa fa-shopping-cart" aria-hidden="true"></i>加入购物车</button>'
h4.innerHTML = '¥' + item.price;
p.innerHTML = item.name;
span1.innerHTML = '自营';
span2.innerHTML = '放心购';
span3.innerHTML = '秒杀';
})
}
}
}
xhr.open('get', 'http://192.168.0.254:3000/getBooks')
xhr.send();
}
center();
function go(id,img,na,pr) {
var bookin = {
book_id:id,
book_img:img,
book_name:na,
book_price:pr,
book_number:1
};
localStorage.setItem('bookIformation', JSON.stringify(bookin));
console.log(bookin);
window.location = "/html/xiangqin.html";
}
function information(id,img,na,pr) {
var bookin = {
book_id:id,
book_img:img,
book_name:na,
book_price:pr,
book_number:1
};
localStorage.setItem('bookIformation', JSON.stringify(bookin));
console.log(bookin);
window.location = "/html/xiangqin.html";
}
var allBooksArray = [];
function goCart(id,img,name,price) {
var cartBook = {
book__id: id,
book__img: img,
book__name: name,
book__price: price,
book__number: 1
}
var user = localStorage.getItem('user')
var username = JSON.parse(user);
if (username != null) {
var allBooks_json = localStorage.getItem('allBooks');
console.log(allBooks_json);
if (allBooks_json != null) {
allBooksArray = JSON.parse(allBooks_json);
}
var cartNumber = true;
for (var i = 0; i < allBooksArray.length; i++) {
if (allBooksArray[i].book__id === id) {
allBooksArray[i].book__number++;
cartNumber = false;
break;
}
}
if (cartNumber) {
allBooksArray.push(cartBook);
}
localStorage.setItem('allBooks', JSON.stringify(allBooksArray));
} else {
alert('请登录后再操作');
window.location = "/html/denglu.html";
}
}
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">
<title>Document</title>
<link rel="stylesheet" href="../css/xiangqin.css">
<link rel="stylesheet" href="../字体/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
<header>
<div class="nav">
<div class="location">
<span><i class="fa fa-home" aria-hidden="true"></i></span><a href="./shouye.html">京东首页</a>
<span><i class="fa fa-map-marker" aria-hidden="true"></i></span><a href="">杭州</a>
</div>
<div class="infor">
<ul id="userName">
<li><a href="../html/denlu.html">你好，请登录</a></li>
<li><a href="../html/zhuce.html" class="zhuce">免费注册</a></li>
<li><a href="">我的订单</a></li>
<li><a href="../html/gouwuche.html"><i class="fa fa-shopping-cart" aria-hidden="true"></i>我的购物车</a></li>
<li><a href="">客户服务</a></li>
</ul>
</div>
</div>
</header>
<div class="search">
<img src="../img/logo.png" alt="">
<div class="input">
<input type="text">
<button>搜索</button>
</div>
</div>
<section>
<aside><img src="" alt="" id="tu"></aside>
<div class="box">
<h3 id="wor"></h3>
<div class="active">
<div class="price">
<span class="jingdongjia">京东价</span>
<span id="price">¥36.10</span>
<span>[9.5折]</span>
<span class="ding">[定价<span class="mon" id="money1">8</span>]</span>
<span>(<span class="jiangjia">降价通知</span>)</span>
<div class="pingjia">
<span class="pingjia2">累计评价</span><br>
<span class="mount">45万+</span>
</div>
</div>
<div class="information">
<span class="jingdongjia">促销信息</span>
<span class="manjian">满减</span>
<span>每满100元，可减50元现金</span>
<span>详情>></span><br>
<span class="jiagou">加购价</span>
<span class="man">满10元另加26,90元，或满12元另加16.90元，或满15元另加9.90元 <br>
<span class="ji">即可在购物车换购热销商品 详情>></span>
</span><br>
<span class="sel"><span class="cir"><i class="fa fa-circle-thin" aria-hidden="true"></i></span>
以上促销商品可在购物车任选其一</span>
</div>
</div>
<div class="zeng">
<span class="zeng2">增值业务</span>
<span class="xun"><i class="fa fa-refresh" aria-hidden="true"></i></span>
<span>高价回收，极速到账</span>
<span class="lipin"><i class="fa fa-gift" aria-hidden="true"></i> </span>
<span>礼品包装</span>
</div>
<div class="send">
<span>排名</span>
<span>自营</span>
<span class="tongshu">童书销量榜</span>
<span>第<span class="eig">8</span>位</span><br><br>
<span>配送至</span>
<span class="adre">浙江省杭州市萧山区戴村镇<i class="fa fa-angle-down" aria-hidden="true"></i></span>有货<br><br>
由<span
class="jd">京东</span>发货并提供售后服务，23:00前下单，预计<span class="dat">明天(01月06日)</span>送达<br><br>
重 量 0.1kg <br><br>
服务支持 <span class="shopp"><i class="fa fa-diamond" aria-hidden="true"></i>放心购</span> 闪电退款 | 上门换新 |
破损包退换<br><br>
211限时达 自提 49元免息基础运费
</div>
<div class="gocar">
<div>
<span class="mount" id="num"></span>
<span class="change">
<span id="ad" onclick="add()">+</span>
<span id="red" onclick="reduce()">-</span>
</span>
</div>
<input type="button" value="加入购物车" onclick="inCart()">
</div>
</div>
</section>
<footer>
<ul class="foot">
<li>品类齐全，轻松购物</li>
<li>多仓直发，极速配送</li>
<li>正品行货，精致服务</li>
<li>天天低价，畅选无忧</li>
</ul>
</footer>
<!-- <script src="../js/gouwuche.js"></script> -->
<script src="../js/xiangqin.js"></script>
</body>
</html>
css商品详情页面代码块
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #9F9A97;
}
li{
list-style-type: none;
}
header{
width: 100%;
height: 40px;
line-height: 40px;
background-color: #CCCCCC;
margin: 0 auto;
}
.nav,.search{
width: 1700px;
margin: 0 auto;
}
.location{
float: left;
}
.infor{
float: right;
}
.infor ul li{
margin-left: 20px;
float: left;
}
.infor ul li a:hover{
color: red;
}
.zhuce{
color: red;
}
/* 以上页眉 */
.search{
margin-top: 40px;
height: 60px;
}
.search img{
float: left;
}
.search .input{
float: right;
}
.search .input input,.search .input button{
border: 1px solid black;
height: 30px;
float: left;
}
.search .input input{
width: 300px;
}
.search .input button{
background-color: #715A52;
color: white;
height: 32px;
width: 50px;
border: none;;
}
section{
width: 1700px;
height: 1000px;
margin: 0 auto;
margin-top: 30px;
}
aside{
float: left;
width: 500px;
height: 1000px;
border: 1px solid #ccc;
}
aside img{
width: 500px;
}
.box{
float: left;
width: 1100px;
height: 1000px;
border: 1px solid #ccc;
margin-left: 95px;
}
.active{
width: 850px;
height: 250px;
background-color: #F3F3F3;
font-size: 18px;
}
h3{
width: 850px;
height: 80px;
}
.jingdongjia{
font-size: 20px;
color: #BCB4AE;
}
.price{
height: 60px;
padding-top: 10px;
padding-left: 20px;
}
#price{
color: red;
font-size: 25px;
margin-left: 5px;
}
.ding{
margin-left: 5px;
color: #BCB4AE;
}
.mon{
text-decoration: line-through;
margin-left: 5px;
}
.jiangjia{
color: blue;
}
.pingjia{
float: right;
}
.pingjia2{
font-size: 20px;
}
.mount{
color: blue;
font-weight: 600;
}
.manjian{
width: 40px;
text-align: center;
display: inline-block;
border: 2px solid red;
color: red;
}
.information{
padding-top: 10px;
padding-left: 20px;
}
.jiagou{
display: inline-block;
margin-left: 83px;
border: 2px solid red;
margin-top: 15px;
color: red;
}
.man{
color: #75747E;
}
.ji{
display: inline-block;
margin-left: 83px;
margin-top: 15px;
}
.sel{
display: inline-block;
margin-top: 15px;
margin-left: 83px;
font-size: 20px;
}
.cir{
color: yellow;
font-weight: 800;
font-size: 20px;
}
.zeng{
margin-top: 30px;
margin-left: 50px;
height: 50px;
font-size: 20px;
color: red;
}
.zeng2{
color: #75747E;
}
.xun,.lipin{
display: inline-block;
text-align: center;
width: 25px;
height: 25px;
border: 2px solid red;
border-radius: 50%;
margin-left: 10px;
}
.send{
margin-left: 50px;
color: #75747E;
border-bottom: 1px solid #ccc;
width: 800px;
height: 270px;
}
.tongshu{
color: blue;
}
.eig{
color: red;
margin: 0 10px;
}
.adre{
border: 1px solid #ccc;
font-size: 20px;
}
.jd{
color: red;
}
.dat{
color: black;
font-weight: 600;
}
.shopp{
color: red;
font-size: 30px;
font-weight: 700;
}
footer{
margin-top: 20px;
width: 100%;
height: 120px;
background-color: #ccc;
padding-top: 35px;
}
.foot{
width: 1700px;
height: 42px;
margin: 0 auto;
line-height: 42px;
display: flex;
justify-content: space-between;
font-size: 20px;
font-weight: 700;
}
.foot li{
padding-left: 60px;
}
.foot li:nth-child(1){
background-image: url(../img/ico_service.png);
background-repeat: no-repeat;
background-position:9px 0px;
}
.foot li:nth-child(2){
background-image: url(../img/ico_service.png);
background-repeat: no-repeat;
background-position:9px -42px;
}
.foot li:nth-child(3){
background-image: url(../img/ico_service.png);
background-repeat: no-repeat;
background-position:9px -85px;
}
.foot li:nth-child(4){
background-image: url(../img/ico_service.png);
background-repeat: no-repeat;
background-position:9px -128px;
}
.gocar{
margin-top: 20px;
}
.gocar > div,.gocar input{
width: 120px;
float: left;
height: 50px;
background-color: red;
border: none;
margin-left: 10px;
color: white;
font-size: 20px;
}
.gocar > div{
width: 80px;
background-color: white;
}
.mount{
float: left;
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
border: 1px solid #ccc;
}
.change{
float: left;
width: 22px;
height: 50px;
border-left: 1px solid #ccc;
text-align: center;
}
#ad{
border-bottom: 1px solid black;
background-color: #ccc;
display: inline-block;
width: 30px;
cursor: pointer;
}
#red{
display: inline-block;
width: 30px;
height: 23px;
background-color: #ccc;
cursor: pointer;
}
js商品详情页面代码块
window.onload = function(){
var list = document.getElementById('userName');
var user = localStorage.getItem('user')
var username = JSON.parse(user);
if (username !== null) {
var li = document.createElement('li');
var a = document.createElement('a');
a.innerHTML = 'welcome' + username.data.username;
li.appendChild(a);
list.appendChild(li);
}
}
var bookString = localStorage.getItem('bookIformation');
var bookArr = JSON.parse(bookString);
var pic = document.getElementById('tu');
var font = document.getElementById('wor');
var money1 =document.getElementById('money1');
money1.innerHTML = bookArr.book_price;
pic.src = 'http://192.168.0.254:3000/'+ bookArr.book_img;
font.innerHTML = bookArr.book_name;
document.getElementById("num").innerHTML = 1;
function add(){
document.getElementById('num').innerHTML++;
bookArr.book_number++;
localStorage.setItem('bookIformation',JSON.stringify(bookArr));
}
function reduce(){
if(document.getElementById('num').innerHTML == 1){
document.getElementById('num').innerHTML = 1;
bookArr.book_number =1;
localStorage.setItem('bookIformation',JSON.stringify(bookArr));
}else{
document.getElementById('num').innerHTML--;
bookArr.book_number--;
localStorage.setItem('bookIformation',JSON.stringify(bookArr));
}
}
localStorage.setItem('bookIformation',JSON.stringify(bookArr));
var mount = document.getElementById('num');
function inCart(){
}
var allBooksArray = [];
function inCart() {
var bookString = localStorage.getItem('bookIformation');
var bookArr = JSON.parse(bookString);
var cartBook = {
book__id: bookArr.book_id,
book__img:bookArr.book_img,
book__name: bookArr.book_name,
book__price: bookArr.book_price,
book__number:bookArr.book_number
}
var user = localStorage.getItem('user')
var username = JSON.parse(user);
if (username != null) {
var allBooks_json = localStorage.getItem('allBooks');
console.log(allBooks_json);
if (allBooks_json != null) {
allBooksArray = JSON.parse(allBooks_json);
}
var cartNumber = true;
for (var i = 0; i < allBooksArray.length; i++) {
if (allBooksArray[i].book__id === bookArr.book_id) {
allBooksArray[i].book__number += bookArr.book_number;
cartNumber = false;
break;
}
}
if (cartNumber) {
allBooksArray.push(cartBook);
}
localStorage.setItem('allBooks', JSON.stringify(allBooksArray));
} else {
alert('请登录后再操作');
window.location = "http://127.0.0.1/html/denlu.html";
}
}
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">
<title>Document</title>
<link rel="stylesheet" href="../css/gouwuche.css">
<link rel="stylesheet" href="../size/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
<header>
<div class="nav">
<div class="location">
<span><i class="fa fa-home" aria-hidden="true"></i></span><a href="./shouye.html">京东首页</a>
<span><i class="fa fa-map-marker" aria-hidden="true"></i></span><a href="">杭州</a>
</div>
<div class="infor">
<ul id="userName">
<li><a href="../html/denlu.html">你好，请登录</a></li>
<li><a href="../html/zhuce.html" class="zhuce">免费注册</a></li>
<li><a href="">我的订单</a></li>
<li><a href=""><i class="fa fa-shopping-cart" aria-hidden="true"></i>我的购物车</a></li>
<li><a href="">客户服务</a></li>
</ul>
</div>
</div>
</header>
<div class="search">
<img src="../img/logo.png" alt="">
<div class="input">
<input type="text">
<button>搜索</button>
</div>
</div>
<p>全部商品<span id="number"></span></p>
<div class="check">
<input type="checkbox" id="allChecked" onclick="checkAll(this)"> 全选
<span>商品</span>
<span>单价</span>
<span>数量</span>
<span>小计</span>
<span>操作</span>
</div>
<div class="jd">
<span class="ziying">京东自营</span>
</div>
<div class="manjian">
<span>满减</span>活动商品购满¥600.00，即可享受满减 > <span>去凑单</span>
</div>
<div class="item">
</div>
<div class="foo">
<div class="leftcho">
全选 删除选中商品 移到关注 清理购物车
</div>
<div class="rightjiesuan">
<div>已选择<span id="cartNumber">0</span>件商品</div>
<div>
总价：<span id="mon"></span><br>
<span>促销：-¥0.00</span>
</div>
<div id="pay" class="pay" onclick="pay()">
去结算
</div>
</div>
</div>
<footer>
<ul class="foot">
<li>品类齐全，轻松购物</li>
<li>多仓直发，极速配送</li>
<li>正品行货，精致服务</li>
<li>天天低价，畅选无忧</li>
</ul>
</footer>
<script src="../js/gouwuche.js"></script>
</body>
</html>
css购物车页面代码块
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #9F9A97;
}
li{
list-style-type: none;
}
header{
width: 100%;
height: 40px;
line-height: 40px;
background-color: #CCCCCC;
margin: 0 auto;
}
.nav,.search{
width: 1700px;
margin: 0 auto;
}
.location{
float: left;
}
.infor{
float: right;
}
.infor ul li{
margin-left: 20px;
float: left;
}
.infor ul li a:hover{
color: red;
}
.zhuce{
color: red;
}
/* 以上页眉 */
.search{
margin-top: 40px;
height: 60px;
}
.search img{
float: left;
}
.search .input{
float: right;
}
.search .input input,.search .input button{
border: 1px solid black;
height: 30px;
float: left;
}
.search .input input{
width: 300px;
}
.search .input button{
background-color: #715A52;
color: white;
height: 32px;
width: 50px;
border: none;;
}
p{
width: 90px;
height: 50px;
line-height: 50px;
margin-left: 300px;
font-weight: 700;
font-size: 20px;
border-bottom: 2px solid red;
color: red;
}
.check{
width: 1500px;
height: 60px;
line-height: 60px;
background-color: #F3F3F3;
margin-left: 300px;
color: #687065;
}
.jd{
width: 1500px;
height: 60px;
line-height: 60px;
margin-left: 300px;
border-bottom: 2px solid #ccc;
}
.ziying{
background-color: red;
color: white;
padding: 5px;
}
.manjian{
color: #ADADA1;
width: 1500px;
height: 60px;
line-height: 60px;
margin-left: 300px;
}
.manjian span:first-child{
border: 1px solid red;
color: red;
padding: 5px;
margin-left: 5px;
margin-right: 10px;
}
.item{
width: 1450px;
margin-left: 350px;
}
.item2{
width: 1450px;
position: relative;
border: 1px solid #ccc;
height: 150px;
padding-top: 20px;
}
.check span:nth-of-type(1){
margin-left: 100px;
}
.check span:nth-of-type(2){
margin-left: 700px;
}
.check span:nth-of-type(3){
margin-left: 80px;
}
.check span:nth-of-type(4){
margin-left: 180px;
}
.check span:nth-of-type(5){
margin-left: 150px;
}
.pic{
float: left;
width: 90px;
height: 130px;
}
.pic img{
width: 100px;
}
.info{
/* float: left; */
width: 700px;
height: 130px;
position: relative;
}
.choose{
position: absolute;
bottom: 60px;
left: 250px;
}
.money1,.jiajian,.allmoney,.del{
margin-top: 40px;
position: absolute;
margin-left: 50px;
}
.pic{
position: absolute;
left: 100px;
}
.money1{
left: 800px;
}
.jiajian{
left: 900px;
}
.allmoney{
left: 1000px;
}
.del{
right: 40px;
}
.cuxiao{
display: inline-block;
color: red;
border: 1px solid red;
margin-top: 10px;
}
.mounts{
width: 50px;
height: 20px;
border: 1px solid #ccc;
float: left;
text-align: center;
}
.jian,.jia{
width: 15px;
height: 20px;
line-height: 15px;
border: 1px solid #ccc;
float: left;
}
.jian input,.jia input{
width: 15px;
height: 20px;
border: none;
}
h5{
position: absolute;
left: 230px;
}
.huo{
display: inline-block;
margin-top: 10px;
}
.allmoney{
margin-left: 160px;
font-weight: 700;
}
.del{
margin-left: 160px;
}
/* 以下结算 */
.foo{
width: 1450px;
height: 90px;
border: 1px solid #ccc;
margin-left: 350px;
margin-top: 20px;
}
.rightjiesuan{
float: right;
}
.rightjiesuan div{
float: left;
margin-left: 20px;
}
.leftcho{
width: 400px;
float: left;
margin-top: 30px;
color: #626A7A;
}
.select{
position: absolute;
left: 50px;
top: 50px;
}
.pay{
width: 80px;
height: 90px;
background-color: red;
line-height: 90px;
text-align: center;
color: white;
font-size: 20px;
font-weight: 700;
}
#mon{
color: red;
font-size: 20px;
}
#cartNumber{
color: red;
font-size: 20px;
margin: 5px;
}
footer{
margin-top: 20px;
width: 100%;
height: 120px;
background-color: #ccc;
padding-top: 35px;
}
.foot{
width: 1700px;
height: 42px;
margin: 0 auto;
line-height: 42px;
display: flex;
justify-content: space-between;
font-size: 20px;
font-weight: 700;
}
.foot li{
padding-left: 60px;
}
.foot li:nth-child(1){
background-image: url(../img/ico_service.png);
background-repeat: no-repeat;
background-position:9px 0px;
}
.foot li:nth-child(2){
background-image: url(../img/ico_service.png);
background-repeat: no-repeat;
background-position:9px -42px;
}
.foot li:nth-child(3){
background-image: url(../img/ico_service.png);
background-repeat: no-repeat;
background-position:9px -85px;
}
.foot li:nth-child(4){
background-image: url(../img/ico_service.png);
background-repeat: no-repeat;
background-position:9px -128px;
}
js购物车页面代码块
var list = document.getElementById('userName');
var user = localStorage.getItem('user')
var username = JSON.parse(user);
if (username !== null) {
var li = document.createElement('li');
var a = document.createElement('a');
a.innerHTML = 'welcome' + username.data.username;
li.appendChild(a);
list.appendChild(li);
}
var bookString = localStorage.getItem('allBooks');
var allBookss = JSON.parse(bookString);
var ip = 'http://192.168.0.254:3000/';
for (var i = 0; i < allBookss.length; i++) {
var item = document.getElementsByClassName('item')[0];
var div = document.createElement('div');
div.className = 'item2';
var div1 = document.createElement('div');
div1.className = 'pic';
div1.innerHTML = '<img src="' + ip + allBookss[i].book__img + '">';
var div2 = document.createElement('div');
div2.className = 'infor';
var h5 = document.createElement('h5');
h5.innerHTML = allBookss[i].book__name;
var span1 = document.createElement('span');
span1.className = 'choose';
span1.innerHTML = '选服务';
div2.appendChild(h5);
div2.appendChild(span1);
var div3 = document.createElement('div');
div3.className = 'money1';
var span2 = document.createElement('span');
span2.className = 'money';
span2.innerHTML = '¥' + allBookss[i].book__price + '<br>';
var span3 = document.createElement('span');
span3.className = 'cuxiao';
span3.innerHTML = '促销<i class="fa fa-angle-down" aria-hidden="true"></i>';
div3.appendChild(span2);
div3.appendChild(span3);
var div4 = document.createElement('div');
div4.className = 'jiajian';
var span4 = document.createElement('span');
span4.className = 'jian';
span4.innerHTML = '<input type="button" value="-" οnclick="jian(this)">'
var span5 = document.createElement('span');
span5.className = 'mounts';
span5.innerHTML = allBookss[i].book__number;
var span6 = document.createElement('span');
span6.className = 'jia';
span6.innerHTML = '<input type="button" value="+" οnclick="jia(this)">';
var span7 = document.createElement('span');
span7.innerHTML = '<br> '
var span8 = document.createElement('span');
span8.innerHTML = '有货';
span8.className = 'huo';
div4.appendChild(span4);
div4.appendChild(span5);
div4.appendChild(span6);
div4.appendChild(span7);
div4.appendChild(span8);
var div5 = document.createElement('div');
div5.className = 'allmoney';
div5.innerHTML = Number(allBookss[i].book__number) * Number(allBookss[i].book__price);
var div6 = document.createElement('div');
div6.className = 'del';
div6.innerHTML = '<input type="button" οnclick="dele(this)" value="删除">';
var sel = document.createElement('div');
sel.className = 'select'
sel.innerHTML = '<input type="checkbox" οnclick="selectBook(this)" name="chec">'
item.appendChild(div);
div.appendChild(sel);
div.appendChild(div1)
div.appendChild(div2);
div.appendChild(div3);
div.appendChild(div4);
div.appendChild(div5);
div.appendChild(div6);
}
var allChecked = document.getElementById('allChecked');
var selec = document.getElementsByName('chec');
var cartNumber = document.getElementById('cartNumber');
var moneyboth = document.getElementById('mon');
var item = document.getElementsByClassName('item')[0];
function dele(ite) {
for (var i = allBookss.length-1; i >=0 ; i--) {
if (ite.parentNode.parentNode.children[2].children[0].innerHTML === allBookss[i].book__name) {
allBookss.splice(i, 1);
item.removeChild(item.children[i]);
}
}
if(ite.parentNode.parentNode.children[0].children[0].checked){
cartNumber.innerHTML = Number(cartNumber.innerHTML)-1;
moneyboth.innerHTML = Number(moneyboth.innerHTML)-Number(ite.parentNode.previousElementSibling.innerHTML);
}
localStorage.setItem('allBooks', JSON.stringify(allBookss));
}
function jia(btn) {
for (var i = 0; i < allBookss.length; i++) {
if (btn.parentNode.parentNode.parentNode.children[2].children[0].innerHTML === allBookss[i].book__name) {
btn.parentNode.previousElementSibling.innerHTML = Number(allBookss[i].book__number) + 1;
allBookss[i].book__number++;
btn.parentNode.parentNode.nextElementSibling.innerHTML = Number(allBookss[i].book__number) * Number(allBookss[i].book__price);
}
}
alll();
localStorage.setItem('allBooks', JSON.stringify(allBookss));
}
function jian(btn) {
for (var i = 0; i < allBookss.length; i++) {
if (btn.parentNode.parentNode.parentNode.children[2].children[0].innerHTML === allBookss[i].book__name) {
if (allBookss[i].book__number === 1) {
btn.parentNode.nextElementSibling.innerHTML = 1;
allBookss[i].book__number = 1;
btn.parentNode.parentNode.nextElementSibling.innerHTML = '¥' + Number(allBookss[i].book__number) * Number(allBookss[i].book__price);
} else {
btn.parentNode.nextElementSibling.innerHTML = Number(allBookss[i].book__number) - 1;
allBookss[i].book__number--;
console.log(Number(allBookss[i].book__number) - 1);
btn.parentNode.parentNode.nextElementSibling.innerHTML = '¥' + Number(allBookss[i].book__number) * Number(allBookss[i].book__price);
}
}
}
alll();
localStorage.setItem('allBooks', JSON.stringify(allBookss));
}
function selectBook() {
var flag = true;
for (var i = 0; i < selec.length; i++) {
if (!selec[i].checked) {
flag = false;
break;
}
}
alll();
allChecked.checked = flag;
}
function checkAll(btn) {
for (var i = 0; i < selec.length; i++) {
selec[i].checked = allChecked.checked;
}
if (btn.checked) {
cartNumber.innerHTML = selec.length;
var aaa = 0;
for (var i = 0; i < selec.length; i++) {
aaa += Number(allBookss[i].book__number) * Number(allBookss[i].book__price);
}
moneyboth.innerHTML = aaa;
} else {
cartNumber.innerHTML = 0;
moneyboth.innerHTML = 0;
}
}
if (selec.length == 0) {
allChecked.checked = false;
}
function alll() {
var a = 0;
var b = 0;
for (var i = 0; i < selec.length; i++) {
if (selec[i].checked) {
a = Number(a) + Number(allBookss[i].book__number) * Number(allBookss[i].book__price);
b = Number(b)+1;
}
}
moneyboth.innerHTML = a;
cartNumber.innerHTML = b;
}
function pay() {
for (var i = selec.length-1; i >=0; i--) {
if (selec[i].checked) {
allBookss.splice(i, 1);
item.removeChild(item.children[i]);
cartNumber.innerHTML--
}
}
moneyboth.innerHTML = 0;
localStorage.setItem('allBooks', JSON.stringify(allBookss));
}
sql文件：
/*
Navicat MySQL Data Transfer
Source Server : mysql
Source Server Version : 50096
Source Host : localhost:3306
Source Database : jd
Target Server Type : MYSQL
Target Server Version : 50096
File Encoding : 65001
Date: 2021-07-15 17:25:20
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for book
-- ----------------------------
DROP TABLE IF EXISTS `book`;
CREATE TABLE `book` (
`skuId` char(5) NOT NULL,
`name` varchar(50) NOT NULL,
`price` int(10) default NULL,
`img` varchar(50) default NULL,
PRIMARY KEY (`skuId`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of book
-- ----------------------------
INSERT INTO `book` VALUES ('10001', '3-6岁行为习惯养成绘本：一起来了解下我们的文化吧', '885', 'images/book11.jpg');
INSERT INTO `book` VALUES ('10002', '3-6岁行为习惯养成绘本：一起来寻宝啊少年人', '127', 'images/book15.jpg');
INSERT INTO `book` VALUES ('10003', '3-6岁行为习惯养成绘本：专注力你的宝宝具备吗？', '21', 'images/book3.jpg');
INSERT INTO `book` VALUES ('10004', '3-6岁行为习惯养成绘本：做个独立的小宝宝贝吧，加油！', '33', 'images/book2.jpg');
INSERT INTO `book` VALUES ('10005', '3-6岁行为习惯养成绘本：喜欢这本书吗？请收下吧', '55', 'images/book5.jpg');
INSERT INTO `book` VALUES ('10006', '3-6岁行为习惯养成绘本：宝宝打个招呼吧', '630', 'images/book1.jpg');
INSERT INTO `book` VALUES ('10007', '3-6岁行为习惯养成绘本：我会爱自己6', '127', 'images/book6.jpg');
INSERT INTO `book` VALUES ('10008', '3-6岁行为习惯养成绘本：我会爱自己7', '69', 'images/book7.jpg');
INSERT INTO `book` VALUES ('10009', '3-6岁行为习惯养成绘本：我会爱自己8', '87', 'images/book8.jpg');
INSERT INTO `book` VALUES ('10010', '3-6岁行为习惯养成绘本：我会爱自己9', '25', 'images/book9.jpg');
INSERT INTO `book` VALUES ('10011', '3-6岁行为习惯养成绘本：我是个快乐的宝宝', '34', 'images/book10.jpg');
INSERT INTO `book` VALUES ('10012', '3-6岁行为习惯养成绘本：让宝宝爱说话，激发语言天赋吧', '66', 'images/book4.jpg');
INSERT INTO `book` VALUES ('10013', '全套30册 儿童绘本0-3-6岁 幼儿早教书 宝宝睡前故事书 幼儿启蒙培养好习惯小熊绘本书籍 ', '27', 'images/book23.jpg');
INSERT INTO `book` VALUES ('10014', '养成好习惯：从小就做个会理财的宝贝吧', '27', 'images/book2.jpg');
INSERT INTO `book` VALUES ('11001', '东野圭吾写给孩子的推理书：为孩子量身打造的', '129', 'images/book1.jpg');
INSERT INTO `book` VALUES ('12001', '亲子情商教育系列：培养孩子强大内心（套装全6册 恐龙小Q） ', '58', 'images/book16.jpg');
INSERT INTO `book` VALUES ('13001', '你是独一无二的：一只特立独行的猫咪', '98', 'images/book13.jpg');
INSERT INTO `book` VALUES ('13002', '保持好的状态：归来时你还能做你自己吗？', '199', 'images/book14.jpg');
INSERT INTO `book` VALUES ('14001', '原声触摸发声书：听，什么声音（套装全6册）', '326', 'images/book21.jpg');
INSERT INTO `book` VALUES ('14002', '培养好习惯，做最好的自己 ', '65', 'images/book24.jpg');
INSERT INTO `book` VALUES ('14003', '小婴孩0-2岁宝宝会说话 看图说话+快乐听读+亲子讲读+语言游戏（套装共4册）', '52', 'images/book27.jpg');
INSERT INTO `book` VALUES ('14004', '小婴孩0-2岁宝宝学说话 婴幼儿早教专家推荐：呀呀学语+快乐学词+字词游戏', '38', 'images/book18.jpg');
INSERT INTO `book` VALUES ('14005', '小猪佩奇双语故事纸板书（原版引进套装共4册）双语读物，讲述家庭成员的故事，帮孩子构筑安全）', '79', 'images/book22.jpg');
INSERT INTO `book` VALUES ('14006', '童立方·猜猜我是谁系列套装：宝宝的第一本躲猫猫洞洞纸板游戏书', '109', 'images/book25.jpg');
INSERT INTO `book` VALUES ('15001', '幼儿学前专注力训练100图（套装共4册） 经典畅销书100图玩出专注力，全面提升', '81', 'images/book17.jpg');
INSERT INTO `book` VALUES ('15002', '幼儿小百科全书（套装共12册） 暖萌科学绘本。绘本式趣味情景小百科', '158', 'images/book20.jpg');
INSERT INTO `book` VALUES ('15003', '逻辑狗2-3-4岁（幼儿园小班）儿童图书男女孩宝宝 早教益智玩具 网络版一阶段 思维训练教具', '138', 'images/book28.jpg');
INSERT INTO `book` VALUES ('15004', '邦臣小红花·宝宝的第一套拼图游戏·礼盒装【 可爱动物 交通工具 海底世界 昆虫】', '58', 'images/book19.jpg');
INSERT INTO `book` VALUES ('15005', '邦臣小红花·幼儿小手工（第1辑 套装共6册）', '37', 'images/book26.jpg');
INSERT INTO `book` VALUES ('15006', '邦臣小红花·阶梯数学（3-4岁 套装共2册）', '18', 'images/book29.jpg');
INSERT INTO `book` VALUES ('16001', '理财推荐书籍：看漫画学习经济学知识', '336', 'images/book12.jpg');
INSERT INTO `book` VALUES ('16002', '神奇的鸟类：发现令人震撼的鸟类智慧 展现丰富多彩的鸟类生活 英国皇家御用插画师马特。休厄尔作品', '128', 'images/book32.jpg');
-- ----------------------------
-- Table structure for car
-- ----------------------------
DROP TABLE IF EXISTS `car`;
CREATE TABLE `car` (
`id` int(11) NOT NULL auto_increment,
`username` varchar(50) default NULL,
`price` int(10) default NULL,
`img` varchar(50) default NULL,
`buynumber` int(50) default NULL,
`createDate` varchar(50) default NULL,
`status` int(2) default NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of car
-- ----------------------------
-- ----------------------------
-- Table structure for showimg
-- ----------------------------
DROP TABLE IF EXISTS `showimg`;
CREATE TABLE `showimg` (
`img` varchar(50) default NULL,
`id` int(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of showimg
-- ----------------------------
INSERT INTO `showimg` VALUES ('images/0.webp', '0');
INSERT INTO `showimg` VALUES ('images/1.webp', '1');
INSERT INTO `showimg` VALUES ('images/2.webp', '2');
INSERT INTO `showimg` VALUES ('images/3.webp', '3');
INSERT INTO `showimg` VALUES ('images/4.webp', '4');
-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`username` varchar(50) NOT NULL default '',
`password` varchar(50) default NULL,
PRIMARY KEY (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('12@qqq.com', '12345678');
INSERT INTO `user` VALUES ('13112345678', '123456789');
INSERT INTO `user` VALUES ('13113113113', '12345678');
INSERT INTO `user` VALUES ('13333333312', 'qqqqqqqq');
INSERT INTO `user` VALUES ('13333333317', 'qqqqqqqq');
INSERT INTO `user` VALUES ('13333333330', 'aaaaaaaa');
INSERT INTO `user` VALUES ('13333333331', 'qqqqqqqq');
INSERT INTO `user` VALUES ('13333333332', 'qqqqqqqq');
INSERT INTO `user` VALUES ('13333333333', 'qqqqqqqq');
INSERT INTO `user` VALUES ('13333333345', 'qqqqqqqq');
INSERT INTO `user` VALUES ('13475842885', '123456abc');
INSERT INTO `user` VALUES ('13513513513', '12345678');
INSERT INTO `user` VALUES ('13555555555', 'yzh102356');
INSERT INTO `user` VALUES ('13555555556', 'yzh1023567');
INSERT INTO `user` VALUES ('13566666666', 'qqqqqqqqq');
INSERT INTO `user` VALUES ('13666666666', '1234567a');
INSERT INTO `user` VALUES ('13738556846', '123456789');
INSERT INTO `user` VALUES ('13777777777', '1234567a');
INSERT INTO `user` VALUES ('15115115115', '12345678');
INSERT INTO `user` VALUES ('15515515515', '12345678');
INSERT INTO `user` VALUES ('15711110000', '12345678');
INSERT INTO `user` VALUES ('15711111111', '12345678');
INSERT INTO `user` VALUES ('15711112222', '12345678');
INSERT INTO `user` VALUES ('15722222222', '22222222');
INSERT INTO `user` VALUES ('15788888888', '88888888');
INSERT INTO `user` VALUES ('17370836830', '12345678');
INSERT INTO `user` VALUES ('17386246888', '123456789');
INSERT INTO `user` VALUES ('17767218902', 'aaaaaaaa');
INSERT INTO `user` VALUES ('18341123422', '12341234');
INSERT INTO `user` VALUES ('18458879724', '12341234');
INSERT INTO `user` VALUES ('18833333333', '33333333');
INSERT INTO `user` VALUES ('18888888888', 'qqqqqqqq');
INSERT INTO `user` VALUES ('asdghsth@dsfrh.com', '12345678');
INSERT INTO `user` VALUES ('asdghth@dsfrh.com', '12345678');
INSERT INTO `user` VALUES ('asdgth@dsfrh.com', '12345678');
代码块中的代码需要修改，一些小图表自己找并修改代码块中的链接！！！
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
