目錄
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()}})}
)
