29_项目

目录

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.mzph.cn/diannao/76013.shtml

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

相关文章

Next.js 项目生产构建优化

Next.js 项目生产构建优化

Next.js 项目生产构建优化的完整教程&#xff0c;涵盖配置、工具链和性能调优技巧&#xff0c;助你显著加速 npm run build&#xff1a; 注&#xff1a;学习阶段请先测试环境使用&#xff01; 文章目录 [toc]一、基础优化1. 确保使用最新版本2. 清理无用依赖和代码3. 配置 nex…
阅读更多...
【嵌入式学习3】多任务编程

【嵌入式学习3】多任务编程

目录 1、多任务 并发&#xff1a;在一段时间内交替去执行任务 并行&#xff1a; 2、线程 进程与线程 守护线程 1、多任务 在同一时间内执行多个任务&#xff0c;多任务分为并发和并行两种形式 并发&#xff1a;在一段时间内交替去执行任务 软件1执行0.01秒&#xff0c;切…
阅读更多...
链路聚合（Link Aggregation）

链路聚合（Link Aggregation）

目录 一. 链路聚合概述 1. 基本概念 2. 实现条件 3. 成员接口和成员链路 二. 链路聚合模式 1. 手工模式 2. LACP模式 三. 负载分担 1. 基于数据包的负载分担 2. 基于数据流的负载分担 一. 链路聚合概述 1. 基本概念 链路聚合&#xff08;Link Aggregation&#xff…
阅读更多...
QT图片轮播器(QT实操学习2)

QT图片轮播器(QT实操学习2)

1.项目架构 1.UI界面 2.widget.h​ #ifndef WIDGET_H #define WIDGET_H#include <QWidget>#define TIMEOUT 1 * 1000 QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent n…
阅读更多...
【HTML5】02-列表 + 表格 + 表单

【HTML5】02-列表 + 表格 + 表单

本文介绍 列表、表格、表单的具体使用。 目录 1. 列表 1.1 无序列表 1.2 有序列表 1.3 定义列表 2. 表格 2.1 基本使用 2.2 表格结构标签 2.3 合并单元格 3. 表单 3.1 input标签 3.2 input 标签占位文本 3.3 单选框 3.4 上传文件 3.5 多选框 3.6 下拉菜单 3.7…
阅读更多...
【数据结构】导航

【数据结构】导航

【数据结构】-CSDN博客 【数据结构】next数组、nextval数组-CSDN博客
阅读更多...
开源项目里的 autogen.sh 是做什么？

开源项目里的 autogen.sh 是做什么？

./autogen.sh 是一个在基于 Autotools 构建系统的开源项目中常见的脚本。它的主要作用是准备构建环境&#xff0c;生成后续编译所需的关键文件。 更具体地说&#xff0c;./autogen.sh 通常会执行以下操作&#xff1a; 检查构建工具: 它会检查系统中是否安装了构建项目所需的工…
阅读更多...
RabbitMQ高级特性--发送方确认

RabbitMQ高级特性--发送方确认

目录 1. confirm确认模式 1.配置RabbitMQ 2.设置确认回调逻辑并发送消息 2.Return退回模式 1.配置RabbitMQ 2.设置返回回调逻辑并发送消息 在使用RabbitMQ的时候, 可以通过消息持久化来解决因为服务器的异常崩溃而导致的消息丢失, 但是还有⼀个问题, 当消息的生产者将消息发送出…
阅读更多...
Python的ASGI Web 服务器之uvicorn

Python的ASGI Web 服务器之uvicorn

文章目录 什么是uvicornUvicorn 和 uWSGI 对比区别安装 Uvicorn使用示例 什么是uvicorn 官网https://www.uvicorn.org/ Uvicorn 是一个用于 Python 的 ASGI Web 服务器实现。 Until recently Python has lacked a minimal low-level server/application interface for async…
阅读更多...
MongoDB 创建数据库

MongoDB 创建数据库

MongoDB 创建数据库 引言 MongoDB 是一款高性能、可扩展的 NoSQL 数据库&#xff0c;广泛应用于大数据领域。在 MongoDB 中&#xff0c;创建数据库是进行数据存储的第一步。本文将详细介绍 MongoDB 数据库的创建方法&#xff0c;包括手动创建和自动创建两种方式。 MongoDB 数…
阅读更多...
并发编程之最小化共享

并发编程之最小化共享

文章目录 **什么是「最小化共享」&#xff1f;****为什么要最小化共享&#xff1f;****如何实现最小化共享&#xff1f;****1. 线程局部存储&#xff08;Thread-Local Storage&#xff09;****2. 消息传递&#xff08;Message Passing&#xff09;****3. 不可变数据&#xff08…
阅读更多...
通信之光纤耦合器

通信之光纤耦合器

以下是关于光纤耦合器的详细介绍&#xff1a; 定义与原理 - 定义&#xff1a;光纤耦合器是一种能使传输中的光信号在特殊结构的耦合区发生耦合&#xff0c;并进行再分配的器件&#xff0c;也叫分歧器、连接器、适配器、光纤法兰盘。 - 原理&#xff1a;利用不同光纤面紧邻光纤芯…
阅读更多...
自然语言模型的演变与未来趋势：从规则到多模态智能的跨越

自然语言模型的演变与未来趋势：从规则到多模态智能的跨越

自然语言模型的演变与未来趋势&#xff1a;从规则到多模态智能的跨越 自然语言处理(NLP)作为人工智能领域最具挑战性的分支之一&#xff0c;在过去几十年经历了翻天覆地的变化。从最初基于规则的系统到如今拥有万亿参数的大型语言模型(LLMs)&#xff0c;这一技术革新不仅彻底改…
阅读更多...
笔记本电脑更换主板后出现2203:System configuration is invalid，以及2201、2202系统错误的解决

笔记本电脑更换主板后出现2203:System configuration is invalid，以及2201、2202系统错误的解决

笔记本电脑更换主板后启动出现2203:System configuration is invalid，以及2201、2202系统错误的解决 自用的一台ThinkpadT490笔记本电脑 ，由于主板故障，不得不更换主板，通过某宝购置主板后进行了更换。 具体拆卸笔记本可搜索网络视频教程。 注意： 在更换主板时，注意先拍…
阅读更多...
JavaScript中的观察者模式

JavaScript中的观察者模式

以下是关于 观察者模式（Observer Pattern） 的全面梳理，涵盖核心概念、实现方式、应用场景及注意事项，帮助我们掌握这一解耦事件通知与处理的经典设计模式： 一、观察者模式基础 1. 核心概念 定义：定义对象间 一对多 的依赖关系，当被观察对象（Subject）状态变化时，自动…
阅读更多...
生物化学笔记：医学免疫学原理09 白细胞分化抗原+黏附分子

生物化学笔记：医学免疫学原理09 白细胞分化抗原+黏附分子

白细胞分化抗原 黏附分子
阅读更多...
RAG基建之PDF解析的“流水线”魔法之旅

RAG基建之PDF解析的“流水线”魔法之旅

将PDF文件和扫描图像等非结构化文档转换为结构化或半结构化格式是人工智能的关键部分。然而，由于PDF的复杂性和PDF解析任务的复杂性，这一过程显得神秘莫测。 在RAG（Retrieval-Augmented Generation）基建之PDF解析的“魔法”与“陷阱”中，我们介绍了PDF解析的主要任务，对现…
阅读更多...
【Linux】GDB调试指南

【Linux】GDB调试指南

一、GDB基础 1. 启动调试 gdb ./your_program # 启动调试 gdb --args ./prog arg1 # 带参数启动 gdb -p <pid> # 附加到正在运行的进程 2. 断点管理 b main # 在main函数设断点 b file.c:20 # 在file.c第20行设断点 b *0x4005a…
阅读更多...
Android面试总结之Glide源码级理解

Android面试总结之Glide源码级理解

当你的图片列表在低端机上白屏3秒、高端机因内存浪费导致FPS腰斩时&#xff0c;根源往往藏在Glide的内存分配僵化、磁盘混存、网络加载无优先级三大致命缺陷中。 本文从阿里P8级缓存改造方案出发&#xff0c;结合Glide源码实现动态内存扩容、磁盘冷热分区、智能预加载等黑科技&…
阅读更多...
驱动开发系列49 - 搭建 Vulkan 驱动调试环境（编译 mesa 3D）- Ubuntu24.04

驱动开发系列49 - 搭建 Vulkan 驱动调试环境（编译 mesa 3D）- Ubuntu24.04

一：搭建Vulkan运行环境 安装vulkan依赖包： 1. sudo apt install vulkan-tools 2. sudo apt install libvulkan-dev 3. sudo apt install vulkan-utility-libraries-dev spirv-tools 4. sudo apt install libglfw3-dev libglm-dev 5. sudo apt install libxxf86vm-dev libxi-…
阅读更多...
最新文章

Copyright @ 2022~2023