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

29_项目

article 2026/2/18 9:38:06

http.js

1、先注册账号 register.html

2、再登录 login.html

3、首页 index.html

4 详情 details.html

cart.html

css

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

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 &…...

编程日记 2026/2/13 14:05:00

排序算法1--插入排序

目录 1.常见排序算法 2.排序算法的预定函数 2.1交换函数 2.2测试算法运行时间的函数 3.插入排序 3.1直接插入排序 3.2希尔排序 3.3插入排序的时间复杂度分析 4.总结 1.常见排序算法我将分别讲解五种排序算法，但是不代表只有五种固定的代码，之后…...

编程日记 2026/2/17 0:09:49

PolarDB数据库表恢复实战指南：通过控制台恢复表的完整操作流程

在数据库运维过程中，表数据恢复是一项常见且关键的操作。本文将详细介绍如何通过阿里云PolarDB控制台从备份中恢复特定表，并通过表重命名操作确保业务平稳过渡。一、背景介绍在日常数据库运维中，我们可能会遇到以下场景需要从备份中恢复表：表数据被误删或损坏需要获取历…...

编程日记 2026/2/15 9:28:27

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

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

编程日记 2026/2/12 18:26:45

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

原始代码： plt.xlabel(训练轮次（Epochs）, fontsize14, fontweightbold, fontpropertieschinese_font) # 设置中文字体、加大、加粗 plt.ylabel(R值, fontsize14, fontweightbold, fontpropertieschinese_font) # 设置中文字体、加大、加粗…...

编程日记 2026/2/17 8:08:55

【云原生】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…...

编程日记 2026/2/14 21:14:18

解决 Gradle 构建错误：Could not get unknown property ‘withoutJclOverSlf4J’

解决 Gradle 构建错误：Could not get unknown property ‘withoutJclOverSlf4J’ 在构建 Spring 源码或其他基于 Gradle 的项目时，可能会遇到如下错误： Could not get unknown property withoutJclOverSlf4J for object of type org.gradle…...

编程日记 2026/2/12 19:44:02

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

2025年3月26日，OpenAI正式推出GPT-4o原生图像生成功能，这一更新不仅标志着多模态AI技术的重大突破，更引发了全球AI厂商的激烈竞争。从免费用户到企业开发者，从创意设计到科学可视化，GPT-4o正在重塑图像生成的边界。本文…...

编程日记 2026/2/15 2:05:38

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

先看一下部署后的界面和生成的图片。在jetson orin nano super上部署stable diffusion比较简单，有现成的docker image和代码可用。 docker image拉取使用的docker image是dustynv/stable-diffusion-webui，对于jetson orin nano super的jetpack6.2来说…...

编程日记 2026/2/6 10:22:28

深入理解：阻塞IO、非阻塞IO、水平触发与边缘触发

深入理解：阻塞IO、非阻塞IO、水平触发与边缘触发在网络编程和并发处理中，理解不同的 I/O 模型和事件通知机制至关重要。本文将深入探讨阻塞IO（Blocking IO）、非阻塞IO（Non-Blocking IO）、水平触发&#x…...

编程日记 2026/2/15 16:46:21

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

WebRTC的ICE之TURN协议的交互流程和中继转发Relay媒体数据的turnserver的测试 WebRTC的ICE之TURN协议的交互流程中继转发Relay媒体数据的turnserver的测试 WebRTC的ICE之TURN协议的交互流程和中继转发Relay媒体数据的turnserver的测试前言一、TURN协议1、连接Turn Server 流程①…...

编程日记 2026/2/14 1:00:22

HTTP---基础知识

天天开心！！！ 文章目录一、HTTP基本概念1. 什么是HTTP，又有什么用？2. 一次HTTP请求的过程3.HTTP的协议头4.POST和GET的区别5. HTTP状态码6.HTTP的优缺点二、HTTP的版本演进1.各个版本的应用场景2、注意要点三、HTTP与…...

编程日记 2026/2/13 17:17:16

Redis6数据结构之List类型

redis的List类型底层结构是双向链表，插入删除时间复杂度O(1)快,查找为O(n)慢。应用场景：简单队列、最新评论列表、非实时排行榜（定时计算榜单，如笔记本日销榜单）。常用命令： lpush将一个或多个值从左边…...

编程日记 2026/2/14 13:06:35

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

今天教大家把DeepSeek接入飞书表格使用。准备工作：安装并登录飞书；可以准备一些要处理的数据，确保数据格式正确，如 Excel、CSV 等，也可直接存储到飞书多维表格。创建飞书多维表格：打开飞书，点…...

编程日记 2026/2/13 15:08:46

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

分秒计数器设计本次实验内容为：DE2-115板子上用 Verilog编程实现一个分秒计数器，并具备按键暂停、按键消抖功能一、系统架构设计顶层模块划分顶层模块（top） ├── 按键消抖模块（key_debounce） ├…...

编程日记 2026/2/12 18:48:22

【Spring Boot 与 Spring Cloud 深度 Mape 之十】体系整合、部署运维与进阶展望

【Spring Boot 与 Spring Cloud 深度 Mape 之十】体系整合、部署运维与进阶展望 #微服务实战 #Docker #Kubernetes #SpringSecurity #OAuth2 #分布式事务 #Seata #ServiceMesh #总结 #SpringCloud #SpringBoot 系列终章：经过前九篇 [【深度 Mape 系列】] 的系统学习…...

编程日记 2026/2/17 4:29:37

【商城实战(97)】ELK日志管理系统的全面应用

【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配，乃至运营推广策略，102 章内容层层递进。无论是想…...

编程日记 2026/2/14 9:07:34

高并发系统下的订单号生成服务设计与实现

目录引言订单号设计的关键考量因素基础需求分析唯一性保障数据量预估可读性设计系统架构考量分库分表兼容可扩展性设计技术选型与比较性能优化高可用性保障实践案例：高并发系统订单号结构设计结构详解业务类型标识(2位) 唯一标识部分…...

编程日记 2026/2/15 0:11:48

每日算法-250329

记录今天学习的三道算法题：两道滑动窗口和一道栈的应用。 2904. 最短且字典序最小的美丽子字符串题目描述思路滑动窗口解题过程题目要求找到包含 k 个 ‘1’ 的子字符串，并且需要满足两个条件： 最短长度：在所有包含 k 个 …...

编程日记 2026/2/16 0:36:32

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

关于向量的基础概念，可以参考：向量数据库学习笔记（1） —— 基础概念-CSDN博客一、 pgvector简介 pgvector 是一款开源的、基于pg的、向量相似性搜索插件，将您的向量数据与其他数据统一存储在pg中。支持功能包括&…...

编程日记 2026/2/8 17:34:51

蓝桥杯之二分

文章目录习题肖恩的n次根分巧克力2.卡牌二分是十分重要的一个算法，常常用于求解一定范围内，找到满足条件的边界值的情况主要分为浮点数二分和整数二分二分问题，最主要是写出这个check函数，这个check函数最主要就是使用模拟的方法…...

编程日记 2026/2/15 11:38:17

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

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

编程日记 2026/2/15 4:20:44

sqlalchemy:将mysql切换到OpenGauss

说明之前python的项目使用的mysql，近期要切换到国产数据库OpenGauss。之前的方案是fastapisqlalchemy，测试下来发现不用改代码，只要改下配置即可。切换方案安装openGauss-connector-python-psycopg2 其代码工程在：https:…...

编程日记 2026/2/15 10:09:39

memtest86检测内存

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

编程日记 2026/2/14 14:09:34

OpenCV图像拼接（10）用于实现图像拼接过程中的时间流逝（timelapse）效果的一个类cv::detail::Timelapser

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 cv::detail::Timelapser 是 OpenCV 库中用于实现图像拼接过程中的时间流逝（timelapse）效果的一个类。它通常用于将一系列…...

编程日记 2026/2/14 4:06:02

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

一、软件需求在同时运行一个或多个一味消耗 CPU 时间执行处理的进程时，采集以下统计信息。・在某一时间点运行在逻辑 CPU 上的进程是哪一个・每个进程的运行进度通过分析这些信息，来确认本章开头对调度器的描述是否正确。实验程序的…...

编程日记 2026/2/13 1:26:34

【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…...

编程日记 2026/2/4 5:55:17

http.js

1、先注册账号 register.html

2、再登录 login.html

3、首页 index.html

4 详情 details.html

cart.html

css

index.css

register.css

details.css

演示

进阶

相关文章：