当前位置: 首页> 房产> 建筑 > saas建站cms_湖北网站建设哪家有_免费域名 网站_写软文怎么接单子

saas建站cms_湖北网站建设哪家有_免费域名 网站_写软文怎么接单子

时间:2025/7/11 1:16:48来源:https://blog.csdn.net/m0_65655109/article/details/146717974 浏览次数:1次
saas建站cms_湖北网站建设哪家有_免费域名 网站_写软文怎么接单子

目录

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()}})}
关键字:saas建站cms_湖北网站建设哪家有_免费域名 网站_写软文怎么接单子

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: