目录
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()
}
})
}
![[FGPA基础学习]分秒计数器的制作](https://i-blog.csdnimg.cn/img_convert/de3dc7b012c4ac8d6c72b4ee8c3924f6.png)
