目录
http.js
1、先注册账号 register.html
2、再登录 login.html
3、首页 index.html
4 详情 details.html
cart.html
css
index.css
register.css
details.css
演示
进阶
http.js
let baseURL = "http://localhost:8888";
let resgiterApi = baseURL + "/users/register";
let loginApi = baseURL + "/users/login";
let goodslistApi = baseURL +"/goods/list";
let detailsApi = baseURL +"/goods/item";
let cartaddApi = baseURL +"/cart/add";// axios 设置请求头 属于网络请求的
axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";// 需要把token设置到请求头中
let token = localStorage.getItem("token") || null;
if(token){axios.defaults.headers["authorization"] = token
}
1、先注册账号 register.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/register.css"><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.js"></script><script src="./js/http.js"></script>
</head>
<body><div class="box"><input type="text" placeholder="用户名"> <br><input type="password" placeholder="密码"> <br><input type="password" placeholder="确认密码"> <br><input type="text" placeholder="昵称"> <br><button>注册</button></div><script>let ipt = document.querySelectorAll("input");let btn = document.querySelector("button");btn.onclick=function(){let data = {username:ipt[0].value,password:ipt[1].value,rpassword:ipt[2].value,nickname:ipt[3].value,}axios.post(resgiterApi,data).then(res=>{// console.log(res);if(res.data.code == 1){alert(res.data.message);// 跳转到登录setTimeout(()=>{location.href = "./login.html"},1000)}else{alert(res.data.message)}})}</script>
</body>
</html>2、再登录 login.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/register.css"><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.js"></script><script src="./js/http.js"></script></head>
<body><div class="box"><input type="text" placeholder="用户名"> <br><input type="password" placeholder="密码"> <br><button>登录</button></div><script>let ipt = document.querySelectorAll("input");let btn = document.querySelector("button");btn.onclick = function(){// 登录axios.post(loginApi,{username:ipt[0].value,password:ipt[1].value}).then(res=>{// console.log(res.data.token);// console.log(res.data.user);if(res.data.code==1){alert(res.data.message);localStorage.setItem("token",res.data.token);localStorage.setItem("userinfo",JSON.stringify(res.data.user));// 跳转到index页面location.href = "./index.html"}else{alert(res.data.message)}})}</script>
</body>
</html>3、首页 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"><title>Document</title><link rel="stylesheet" href="./css/index.css"><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.js"></script><script src="./js/http.js"></script>
</head><body><div class="top">用户名：<span></span></div><button>下一页</button><ul class="list"></ul><script>let userinfo = localStorage.getItem("userinfo");userinfo = JSON.parse(userinfo)document.querySelector("span").innerHTML = userinfo.username;let current = 1;let totalPage;function loadlist() {axios.get(goodslistApi, {params: {current,pagesize:10}}).then(res => {totalPage = res.data.total;let str = ""// console.log(res.data.list);res.data.list.forEach(item => {// console.log(item);str += `<li><a href="./details.html?id=${item.goods_id}"><img src="${item.img_big_logo}" alt=""><h5>${item.title}</h5><p>${item.price}</p></a></li>`});document.querySelector(".list").innerHTML = str})}loadlist()let btn = document.querySelector("button")btn.onclick = function () {current+=1;if(current>totalPage){alert("没有啦");return}loadlist()}</script>
</body></html>4 详情 details.html
5 添加购物车
<!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><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.js"></script><script src="./js/http.js"></script><link rel="stylesheet" href="./css/details.css">
</head><body><div class="details"></div><script>// 取出传来的参数// window.location.search 获取带地址栏?后的参数// 获取到参数对象let obj = new URLSearchParams(location.search);let id = obj.get("id");axios.get(detailsApi + "/" + id,).then(res => {// console.log(res);if (res.data.code == 1) {// console.log(res.data.info);let info = res.data.info;let str = `<button style="display:block" onclick="addcart(${info.goods_id})">添加到购物车</button> <img src="${info.img_big_logo}" alt="商品图片"><p>商品标题：${info.title}</p><p>当前价格：${info.current_price}</p><del>原价：${info.price}</del><p>已售：${info.sale_type}</p><div>${info.goods_introduce}</div>`document.querySelector(".details").innerHTML = str} else {}})// 添加到购物车function addcart(goodsid){let data = {goodsId:goodsid,id:JSON.parse(localStorage.getItem("userinfo")).id}axios.post(cartaddApi,data).then(res=>{console.log(res);if(res.data.code==1){alert(res.data.message);setTimeout(()=>{location.href = "./cart.html"},1000)}else{alert(res.data.message);setTimeout(()=>{location.href = "./login.html"},1000)}})}</script>
</body></html>cart.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>
</head>
<body><h1>购物车列表页面</h1>
</body>
</html>css
index.css
*{padding: 0;margin: 0;list-style: none;
}
.top{height: 40px;background-color: rgb(94, 94, 230);text-align: right;padding-right: 30px;line-height: 40px;color: #fff;
}
.list{width: 90%;border: 2px solid red;margin: 40px auto;overflow: hidden;background-color: #ccc;
}
.list li{width:18%;height: 300px;background-color: #fff;border: 1px solid yellow;box-sizing: border-box;float: left;margin-right: 2%;margin-bottom: 20px;
}
.list li img{width: 100%;
}
register.css
*{padding: 0;margin: 0;list-style: none;
}
body{height: 100vh;background-color: #1d02e9;display: flex;justify-content: center;align-items: center;
}
.box{width: 500px;height: 400px;/* border: 1px solid red; */text-align: center;padding-top: 80px;
}
.box input{width: 80%;height: 40px;border: 1px solid #ccc;border-radius: 5px;margin-bottom: 20px;outline: none;
}
.box button{width: 80%;height: 40px;background-color: #ccc;outline: none;border: none;
}details.css
*{padding: 0;margin: 0;list-style: none;
}
演示
开启服务器
注册账号
跳转到登录页面
下一页
加入购物车
进阶
6 展示购物车列表
注意：分成两种情况
有无数据的判断
axios.get(cartlistApi,{params:{id:JSON.parse(localStorage.getItem("userinfo")).id}}).then(res=>{if(res.data.code==1){// 获取成功！！！console.log(res.data.cart);// res.data.cart 一定有数据吗？？// 登录的用户购物车如果有就展示列表// 登录的用户购物车如果没有购物车数据 显示您太懒了！！！if(res.data.cart.length>0){// 渲染列表let str = "";res.data.cart.forEach(item => {str+=`<li><input type="checkbox" checked><img src="${item.img_small_logo}" alt=""><h4>${item.title}</h4><p>价格:${item.current_price}</p><div><span>+</span><span>${item.cart_number}</span><span>-</span></div></li>`});document.querySelector("ul").innerHTML = str}else{// 没有数据 给出提示document.querySelector(".empty").innerHTML = "您太懒了！！购物车是空的"}}else{alert(res.data.message)}})7、删除购物车中一条商品
function loadlist() {axios.get(cartlistApi, {params: {id: JSON.parse(localStorage.getItem("userinfo")).id}}).then(res => {if (res.data.code == 1) {// 获取成功！！！console.log(res.data.cart);// res.data.cart 一定有数据吗？？// 登录的用户购物车如果有就展示列表// 登录的用户购物车如果没有购物车数据 显示您太懒了！！！if (res.data.cart.length > 0) {// 渲染列表let str = "";res.data.cart.forEach(item => {str += `<li><input type="checkbox" checked><img src="${item.img_small_logo}" alt=""><h4>${item.title}</h4><p>价格:${item.current_price}</p><div><span>+</span><span>${item.cart_number}</span><span>-</span></div><button onclick="del(${item.goods_id})">删除</button></li>`});document.querySelector("ul").innerHTML = str} else {// 没有数据 给出提示document.querySelector(".empty").innerHTML = "您太懒了！！购物车是空的"}} else {alert(res.data.message)}})}loadlist()async function del(e,goodsid) {try {let res = await axios.get(cartremoveApi, {params: {id: JSON.parse(localStorage.getItem("userinfo")).id,goodsId: goodsid}})console.log(res);if(res.data.code==1){// 重新加载新的列表loadlist();}} catch (error) {alert("网络问题！！！")}}8、删除所有已选中商品
9、清空购物车
10、修改一条商品选中状态
function checkOneStatus(goodsid){axios.post(cartselectApi,{id:JSON.parse(localStorage.getItem("userinfo")).id,goodsId:goodsid})}11、修改全部商品选中状态
// 全选按钮function checkAllStatus(that){// console.log(that.checked);let type = that.checked?1:0;// type 1 true 都选中// type 0 false 都取消axios.post(cartselectAllApi,{id:JSON.parse(localStorage.getItem("userinfo")).id,type}).then(res=>{// console.log(res);if(res.data.code==1){// 马上更新!!!loadlist();}})}12、修改购买数量
// 修改数量function asc(goodid,num,kc){console.log(goodid,num);num+=1// 和库存做判断if(num>kc){alert("库存不够了，请联系客服！！")return}axios.post(cartNumApi,{id:JSON.parse(localStorage.getItem("userinfo")).id,goodsId:goodid,number:num}).then(res=>{console.log(res);if(res.data.code==1){loadlist()}})}function desc(goodid,num){num-=1;if(num<1){alert("不能再少啦")return}axios.post(cartNumApi,{id:JSON.parse(localStorage.getItem("userinfo")).id,goodsId:goodid,number:num}).then(res=>{console.log(res);if(res.data.code==1){loadlist()}})}
