29_项目

news2025/4/1 15:20:18

目录

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.coloradmin.cn/o/2324547.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

排序算法1--插入排序

排序算法1--插入排序

目录 1.常见排序算法 2.排序算法的预定函数 2.1交换函数 2.2测试算法运行时间的函数 3.插入排序 3.1直接插入排序 3.2希尔排序 3.3插入排序的时间复杂度分析 4.总结 1.常见排序算法 我将分别讲解五种排序算法&#xff0c;但是不代表只有五种固定的代码&#xff0c;之后…
阅读更多...
业之峰与宏图智能战略携手，开启家装数字化新篇章

业之峰与宏图智能战略携手，开启家装数字化新篇章

3月8日&#xff0c;业之峰装饰集团董事长张钧携高管团队与宏图智能董事长庭治宏及核心团队&#xff0c;在业之峰总部隆重举行了战略合作签约仪式&#xff0c;标志着双方将携手探索业之峰的数字化转型之路&#xff0c;共同推动家装行业的变革与发展。 近年来&#xff0c;家装行业…
阅读更多...
matplotlib标题比x,y轴字体大，明明标题字体更大？

matplotlib标题比x,y轴字体大，明明标题字体更大？

原始代码&#xff1a; plt.xlabel(训练轮次&#xff08;Epochs&#xff09;, fontsize14, fontweightbold, fontpropertieschinese_font) # 设置中文字体、加大、加粗 plt.ylabel(R值, fontsize14, fontweightbold, fontpropertieschinese_font) # 设置中文字体、加大、加粗…
阅读更多...
【云原生】docker 搭建单机PostgreSQL操作详解

【云原生】docker 搭建单机PostgreSQL操作详解

目录 一、前言 二、前置准备 2.1 服务器环境 2.2 docker环境 三、docker安装PostgreSQL过程 3.1 获取PostgreSQL镜像 3.2 启动容器 3.2.1 创建数据卷目录 3.2.2 启动pg容器 3.3 客户端测试连接数据库 四、创建数据库与授权 4.1 进入PG容器 4.2 PG常用操作命令 4.2…
阅读更多...
免费使用！OpenAI 全量开放 GPT-4o 图像生成能力！

免费使用！OpenAI 全量开放 GPT-4o 图像生成能力！

2025年3月26日&#xff0c;OpenAI正式推出GPT-4o原生图像生成功能&#xff0c;这一更新不仅标志着多模态AI技术的重大突破&#xff0c;更引发了全球AI厂商的激烈竞争。从免费用户到企业开发者&#xff0c;从创意设计到科学可视化&#xff0c;GPT-4o正在重塑图像生成的边界。本文…
阅读更多...
jetson orin nano super AI模型部署之路（三）stable diffusion部署

jetson orin nano super AI模型部署之路（三）stable diffusion部署

先看一下部署后的界面和生成的图片。 在jetson orin nano super上部署stable diffusion比较简单&#xff0c;有现成的docker image和代码可用。 docker image拉取 使用的docker image是dustynv/stable-diffusion-webui&#xff0c;对于jetson orin nano super的jetpack6.2来说…
阅读更多...
WebRTC的ICE之TURN协议的交互流程中继转发Relay媒体数据的turnserver的测试

WebRTC的ICE之TURN协议的交互流程中继转发Relay媒体数据的turnserver的测试

WebRTC的ICE之TURN协议的交互流程和中继转发Relay媒体数据的turnserver的测试 WebRTC的ICE之TURN协议的交互流程中继转发Relay媒体数据的turnserver的测试 WebRTC的ICE之TURN协议的交互流程和中继转发Relay媒体数据的turnserver的测试前言一、TURN协议1、连接Turn Server 流程①…
阅读更多...
HTTP---基础知识

HTTP---基础知识

天天开心&#xff01;&#xff01;&#xff01; 文章目录 一、HTTP基本概念1. 什么是HTTP&#xff0c;又有什么用&#xff1f;2. 一次HTTP请求的过程3.HTTP的协议头4.POST和GET的区别5. HTTP状态码6.HTTP的优缺点 二、HTTP的版本演进1.各个版本的应用场景2、注意要点 三、HTTP与…
阅读更多...
DeepSeek接入飞书多维表格，效率起飞！

DeepSeek接入飞书多维表格，效率起飞！

今天教大家把DeepSeek接入飞书表格使用。 准备工作&#xff1a;安装并登录飞书&#xff1b;可以准备一些要处理的数据&#xff0c;确保数据格式正确&#xff0c;如 Excel、CSV 等&#xff0c;也可直接存储到飞书多维表格。 创建飞书多维表格&#xff1a;打开飞书&#xff0c;点…
阅读更多...
[FGPA基础学习]分秒计数器的制作

[FGPA基础学习]分秒计数器的制作

分秒计数器设计 ​ 本次实验内容为&#xff1a;DE2-115板子上用 Verilog编程实现一个 分秒计数器&#xff0c;并具备按键暂停、按键消抖功能 一、系统架构设计 顶层模块划分 顶层模块&#xff08;top&#xff09; ├── 按键消抖模块&#xff08;key_debounce&#xff09; ├…
阅读更多...
每日算法-250329

每日算法-250329

记录今天学习的三道算法题&#xff1a;两道滑动窗口和一道栈的应用。 2904. 最短且字典序最小的美丽子字符串 题目描述 思路 滑动窗口 解题过程 题目要求找到包含 k 个 ‘1’ 的子字符串&#xff0c;并且需要满足两个条件&#xff1a; 最短长度&#xff1a;在所有包含 k 个 …
阅读更多...
向量数据库学习笔记（2） —— pgvector 用法 与 最佳实践

向量数据库学习笔记（2） —— pgvector 用法 与 最佳实践

关于向量的基础概念&#xff0c;可以参考&#xff1a;向量数据库学习笔记&#xff08;1&#xff09; —— 基础概念-CSDN博客 一、 pgvector简介 pgvector 是一款开源的、基于pg的、向量相似性搜索 插件&#xff0c;将您的向量数据与其他数据统一存储在pg中。支持功能包括&…
阅读更多...
蓝桥杯 之 二分

蓝桥杯 之 二分

文章目录 习题肖恩的n次根分巧克力2.卡牌 二分是十分重要的一个算法&#xff0c;常常用于求解一定范围内&#xff0c;找到满足条件的边界值的情况主要分为浮点数二分和整数二分二分问题&#xff0c;最主要是写出这个check函数&#xff0c;这个check函数最主要就是使用模拟的方法…
阅读更多...
从零开始研发GPS接收机连载——18、北斗B1的捕获和跟踪

从零开始研发GPS接收机连载——18、北斗B1的捕获和跟踪

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 从零开始研发GPS接收机连载——18、北斗B1的捕获和跟踪 B1信号的捕获B1信号的跟踪 前面已经验证了射频能够接收到B1的信号&#xff0c;通过FPGA采集了IQ信号之后能够通过matl…
阅读更多...
memtest86检测内存

memtest86检测内存

上次在R730安装万兆网卡的时候&#xff0c;使用过memtest64进行测试。这个操作肯定是有用的&#xff0c;我就用这个方法查出有问题的内存条&#xff0c;及时找商家进行了更换。 但是该方案有个问题&#xff0c;只能锁定部分内存&#xff0c;如下图&#xff0c;只测试到了23G左…
阅读更多...
验证linux多进程时间片切换的程序

验证linux多进程时间片切换的程序

一、软件需求 在同时运行一个或多个一味消耗 CPU 时间执行处理的进程时&#xff0c;采集以下统计信息。 ・在某一时间点运行在逻辑 CPU 上的进程是哪一个 ・每个进程的运行进度 通过分析这些信息&#xff0c;来确认本章开头对调度器的描述是否正确。实验程序的…
阅读更多...
【Basys3】外设-灯和数码管

【Basys3】外设-灯和数码管

灯 约束文件 set_property PACKAGE_PIN W5 [get_ports CLK] set_property PACKAGE_PIN U18 [get_ports rst] set_property PACKAGE_PIN U16 [get_ports {led[0]}] set_property PACKAGE_PIN E19 [get_ports {led[1]}] set_property PACKAGE_PIN U19 [get_ports {led[2]}] set…
阅读更多...
axios文件下载使用后端传递的名称

axios文件下载使用后端传递的名称

java后端通过HttpServletResponse 返回文件流 在Content-Disposition中插入文件名 一定要设置Access-Control-Expose-Headers&#xff0c;代表跨域该Content-Disposition返回Header可读&#xff0c;如果没有&#xff0c;前端是取不到Content-Disposition的&#xff0c;可以在统…
阅读更多...
从零开始搭建Anaconda环境

从零开始搭建Anaconda环境

Anaconda是一个流行的Python数据科学平台&#xff0c;包含conda包管理器、Python解释器和大量预装的数据科学工具包。以下是详细的安装和配置步骤&#xff1a; 1. 下载Anaconda 访问Anaconda官方网站 根据你的操作系统(Windows/macOS/Linux)选择相应版本 推荐下载Python 3.x版…
阅读更多...
基于ssm的课程辅助教学平台(全套)

基于ssm的课程辅助教学平台(全套)

互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对《离散结构》课程教学信息管理混乱&#xff0c;出错率高&#xff0c;信息安…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023