当前位置： 首页 > article >正文

29_项目

article 2025/4/1 3:26:45

目录

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

http://www.kler.cn/a/614321.html

相关文章：

  • QML中使用Image显示图片和使用QQuickItem显示图片
  • 【C#】关键字 volatile
  • JVM - 垃圾回收器常见问题
  • 下一代数据工程：实时智能数据网格（Real-Time Data Mesh）
  • 【有外界干扰的BFS】经典题P2895Meteor Shower S
  • AI大模型、机器学习以及AI Agent开源社区和博客
  • [代码随想录] KMP 算法 28. 找出字符串中第一个匹配项的下标 459. 重复的子字符串
  • mac安装mongoDB的正确姿势
  • 智网安全：守护未来数字文明的基石
  • Vue3 配合 fullPage.js 打造高效全屏滚动网页
  • spring security认证流程分析
  • 对内核fork进程中写时复制的理解记录
  • 【Linux笔记】进程间通信——匿名管道||进程池
  • 智能仪表板DevExpress Dashboard v24.2新版亮点：支持.NET 9
  • 管理Visual Studio配置文件（使用Azure DevOps开发，免费GIT托管）
  • OpenAI API - 快速入门开发
  • 使用Python的pytesseract进行网站模拟登录的脚本，主要针对古诗文网（gushiwen.cn）的登录功能。
  • 图论问题集合
  • 加载MiniLM-L12-v2模型及知识库，调用Deepseek进行问答
  • 【Hysteria】部署+测试