Javaweb 实验7 JSP内置对象II实现购物车

实验七 JSP内置对象II

目的：

  1. 掌握JSP内置对象的使用。
  2. 理解JSP的作用域
  3. 掌握session，application对象的使用

实验要求：

  1. 完成实验题目
  2. 要求提交实验报告，将代码和实验结果页面截图放入报告中

实验过程：

一、结合之前所学的相关技术，编写代码实现以下购物车功能：

  1. 编写一个页面，展现商品列表（静态页面），页面右上方有登陆、结账和查看购物车三个按钮，下方展示网站历史访问的人数
  2. 用户点击商品后，可以将商品加入购物车
  3. 用户点击登陆，跳转到登陆页面
  4. 用户点击结账，若已登陆跳转至结账页面，否则跳转到登陆页面登陆后再跳转到结账页。
  5. 用户点击查看购物车按钮，跳转至购物车页面，可查看购物车列表、增加商品数量或者删除商品

【参考代码】

登录页面Login.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录</title>
</head>
<body>
<h2>登录</h2>
<form onsubmit="handleLogin(event)"><div><label for="username">用户名:</label><input type="text" id="username" required></div><div><label for="password">密码:</label><input type="password" id="password" required></div><button type="submit">登录</button>
</form><script>function handleLogin(event) {event.preventDefault();let username = document.getElementById("username").value;let password = document.getElementById("password").value;// 假设简单验证用户if (username === "111" && password === "111") {localStorage.setItem('loggedIn', true);alert('登录成功!');window.location.href = 'index.html';} else {alert('用户名或密码错误!');}}
</script>
</body>
</html>

商品页面index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>商品列表</title><style>/* 页面样式 */body {font-family: Arial, sans-serif;}nav {display: flex;justify-content: flex-end;padding: 10px;background-color: #f8f8f8;}nav button {margin-left: 10px;}.products {display: flex;gap: 20px;padding: 20px;}.product {border: 1px solid #ccc;padding: 10px;text-align: center;}footer {text-align: center;margin-top: 20px;}</style>
</head>
<body>
<nav><button onclick="navigateTo('login')">登录</button><button onclick="navigateTo('checkout')">结账</button><button onclick="navigateTo('cart')">查看购物车</button>
</nav><div class="products"><div class="product" onclick="addToCart('商品1')"><h3>商品1 10元</h3><p>点击添加到购物车</p></div><div class="product" onclick="addToCart('商品2')"><h3>商品2 20元</h3><p>点击添加到购物车</p></div><div class="product" onclick="addToCart('商品3')"><h3>商品3 30元</h3><p>点击添加到购物车</p></div>
</div><footer>本网站历史访问人数：123</span>
</footer><script>function navigateTo(page) {if (page === 'login') {window.location.href = 'login.html';} else if (page === 'checkout') {if (localStorage.getItem('loggedIn')) {window.location.href = 'checkout.html';} else {window.location.href = 'login.html';}} else if (page === 'cart') {window.location.href = 'cart.html';}}function addToCart(product) {let price;if (product === '商品1') {price = 10;} else if (product === '商品2') {price = 20;} else if (product === '商品3') {price = 30; // 新商品}let cart = JSON.parse(localStorage.getItem('cart')) || [];let item = cart.find(p => p.name === product);if (item) {item.quantity += 1;} else {cart.push({ name: product, quantity: 1, price: price }); // 存储价格}localStorage.setItem('cart', JSON.stringify(cart));alert(product + ' 已添加到购物车!');}
</script>
</body>
</html>

购物车页面cart.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>购物车</title>
</head>
<body>
<h2>购物车内容</h2>
<ul id="cartItems"><!-- 购物车商品列表 -->
</ul>
<button onclick="checkout()">结账</button><script>function loadCart() {let cart = JSON.parse(localStorage.getItem('cart')) || [];const cartItems = document.getElementById('cartItems');cartItems.innerHTML = '';if (cart.length === 0) {cartItems.innerHTML = '<li>购物车为空</li>';return;
}cart.forEach((item, index) => {const li = document.createElement('li');li.textContent = `${item.name} - 单价: ${item.price}元, 数量: ${item.quantity}`;const increaseBtn = document.createElement('button');increaseBtn.textContent = '+';increaseBtn.onclick = () => changeQuantity(index, 1);const decreaseBtn = document.createElement('button');decreaseBtn.textContent = '-';decreaseBtn.onclick = () => changeQuantity(index, -1);const removeBtn = document.createElement('button');removeBtn.textContent = '删除';removeBtn.onclick = () => removeItem(index);li.appendChild(increaseBtn);li.appendChild(decreaseBtn);li.appendChild(removeBtn);cartItems.appendChild(li);});}function changeQuantity(index, amount) {let cart = JSON.parse(localStorage.getItem('cart')) || [];cart[index].quantity += amount;if (cart[index].quantity <= 0) {cart.splice(index, 1);}localStorage.setItem('cart', JSON.stringify(cart));loadCart();}function removeItem(index) {let cart = JSON.parse(localStorage.getItem('cart')) || [];cart.splice(index, 1);localStorage.setItem('cart', JSON.stringify(cart));loadCart();}function checkout() {if (localStorage.getItem('loggedIn')) {alert('正在跳转至结账页面...');window.location.href = 'checkout.html';} else {alert('请先登录');window.location.href = 'login.html';}}//初始化购物车内容loadCart();
</script>
</body>
</html>

结账页面Checkout.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>结账</title><script>function checkLoginStatus() {if (!localStorage.getItem('loggedIn')) {// 如果未登录，跳转到登录页面window.location.href = 'login.html';}}function loadCart() {let cart = JSON.parse(localStorage.getItem('cart')) || [];const cartItems = document.getElementById('cartItems');cartItems.innerHTML = '';let total = 0; // 用于计算总价if (cart.length === 0) {cartItems.innerHTML = '<li>购物车为空</li>';return;}cart.forEach(item => {const li = document.createElement('li');li.textContent = `${item.name} - 单价: ${item.price}元, 数量: ${item.quantity}`;cartItems.appendChild(li);total += item.price * item.quantity; // 累加总价});// 显示总价const totalLi = document.createElement('li');totalLi.textContent = `总价: ${total}元`;cartItems.appendChild(totalLi);}function completeCheckout() {alert('结账成功！感谢您的购买。');// 清空购物车localStorage.removeItem('cart');window.location.href = 'index.html'; // 返回到商品列表页面}function goBack() {window.location.href = 'cart.html';}// 页面加载时检查登录状态window.onload = function() {checkLoginStatus();loadCart();}</script>
</head>
<body>
<h2>结账</h2>
<h3>购物车内容</h3>
<ul id="cartItems"><!-- 购物车商品列表 -->
</ul>
<button onclick="completeCheckout()">完成结账</button>
<button onclick="goBack()">返回购物车</button>
</body>
</html>

【运行结果】

点击“查看购物车”

点击“完成结账”，清空购物车

商品未添加到购物车：

二、实验心得。

使用了其他的技术来实现的购物车功能，写法类似，只是使用的对象不同

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/884063.shtml

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

相关文章

Linux随记（十二）

Linux随记（十二）

一、redhat6.9 &#xff0c;sftp连接后出现2个connect close 问题描述&#xff1a; 操作系统&#xff1a;redhat 6.9 客户反馈&#xff0c;他们机器sftp连接jxx192.168.1.100后出现connection closed排查过程&#xff1a; 登录192.168.1.100 &#xff08;最开始使用普通用户…
阅读更多...
强大的文本编辑器Notepad++8.4.6 最新版

强大的文本编辑器Notepad++8.4.6 最新版

Notepad最新版是一款多功能的代码编辑工具。Notepad官方版支持27种编程语言&#xff0c;涵盖C、C 、Java 、C#,、XML、 HTML,、PHP、python等等&#xff0c;能够帮助程序员提高编辑效率。Notepad软件支持python与sql代码高亮功能&#xff0c;并且免费开源&#xff0c;能够完美地…
阅读更多...
【测试平台】打包 子节点android环境配置

【测试平台】打包 子节点android环境配置

背景 本文记录不是安卓Gradle打包&#xff0c;因为我们google play提审&#xff0c;为了规避跟下架包的相似度避免马甲包封号&#xff0c;使用混淆逻辑。 打包环境部署 申请对应虚拟机会有两个账号root和admin&#xff0c;主要避免root账号权限过高造成脚本误操作。这里面问题…
阅读更多...
免杀对抗—DLL劫持白加黑隐写分离EDRSyscall-hook

免杀对抗—DLL劫持白加黑隐写分离EDRSyscall-hook

前言 今天讲点比较高端的东西—DLL反射注入&#xff0c;首先什么是DLL文件&#xff0c;简答来说就是程序为了实现某个功能而调用的文件。举个例子&#xff0c;某个代码想要实现某个功能是不是会调用一些封装好的函数&#xff0c;exe同样如此&#xff0c;想要实现某个功能就会调…
阅读更多...
uniapp推送配置流程

uniapp推送配置流程

Dcloud Dcloud注册账号 个推 了解即可 注册个推账号 ios配置流程 需配置含有推送的描述文件以及p8证书 配置推送证书 ios证书配置报技术错误&#xff08;参数错误&#xff09; TeamID-苹果开发者账号唯一的ID 安卓需配置多厂商 小米手机需要配置小米厂商 华为手机则需…
阅读更多...
zookeeper全系列学习之分布式锁实现

zookeeper全系列学习之分布式锁实现

文章目录 前言一、分布式锁的通用实现思路二、ZK实现分布式锁的思路三、ZK实现分布式锁的编码实现1、核心工具类实现2、测试代码编写线程安全问题复现使用上面封装的ZkLockHelper实现的分布式锁 优点缺点 总结 前言 就像上篇文章zookeeper全系列学习之统一配置获取说的&#x…
阅读更多...
Uni-App-02

Uni-App-02

条件编译 条件编译概念 不同的运行平台终归有些专有的特性&#xff0c;无法实现跨平台完全兼容&#xff0c;例如&#xff1a;微信小程序导航栏右上角的关闭图标。 uni-app提供了一种“条件编译”机制&#xff0c;可以针对特定的平台编译执行特定的代码&#xff0c;否则不执行。…
阅读更多...
【ArcGISPro】制作简单的ArcGISPro-AI助手

【ArcGISPro】制作简单的ArcGISPro-AI助手

【python】AI Navigator的使用及搭建本机大模型_anaconda ai navigator-CSDN博客 【Python】AI Navigator对话流式输出_ai大模型流式输出效果(打字效果) python-CSDN博客 【C#】调用本机AI大模型流式返回_怎么实现调用本地大模型时实现流式输出-CSDN博客 【ArcGISPro】宣布推…
阅读更多...
springboot 修复 Spring Framework 特定条件下目录遍历漏洞（CVE-2024-38819）

springboot 修复 Spring Framework 特定条件下目录遍历漏洞（CVE-2024-38819）

刚解决Spring Framework 特定条件下目录遍历漏洞&#xff08;CVE-2024-38816&#xff09;没几天&#xff0c;又来一个新的&#xff0c;真是哭笑不得啊。 springboot 修复 Spring Framework 特定条件下目录遍历漏洞&#xff08;CVE-2024-38816&#xff09;https://blog.csdn.ne…
阅读更多...
可编辑97页PPT | 制造企业数字化转型战略咨询及IT总体规划方案

可编辑97页PPT | 制造企业数字化转型战略咨询及IT总体规划方案

荐言分享&#xff1a;制造企业数字化转型是当前市场环境下的必然趋势&#xff0c;旨在通过引入先进的信息技术&#xff0c;优化业务流程&#xff0c;提升运营效率&#xff0c;增强客户体验&#xff0c;实现可持续发展。这一转型过程涉及多个方面&#xff0c;需要综合考虑企业战…
阅读更多...
计算机视觉中的点算子：从零开始构建

计算机视觉中的点算子：从零开始构建

Hey小伙伴们&#xff01;今天我们要聊的是一个非常基础但极其重要的计算机视觉技术——点算子&#xff08;Point Operators&#xff09;。点算子主要用于对图像的每个像素进行独立的处理&#xff0c;比如亮度调整、对比度增强、灰度化等。通过这些简单的操作&#xff0c;我们可…
阅读更多...
001-Kotlin界面开发之Jetpack Compose Desktop学习路径

001-Kotlin界面开发之Jetpack Compose Desktop学习路径

Compose Desktop学习之路 学习过程 理解Kotlin的基本语法 Compose Desktop采用Kotlin构建&#xff0c;因此对Kotlin的基本语法有很好的理解是必不可少的。你可以从官方的Kotlin文档开始。 用一句话概括&#xff0c;Kotlin是一种现代的、静态类型的编程语言&#xff0c;它结合…
阅读更多...
小金标认证的头戴式蓝牙，QCY H3 Pro耳机，平价高音质的新选择

小金标认证的头戴式蓝牙，QCY H3 Pro耳机，平价高音质的新选择

我发现如今市面上百元级的头戴式无线耳机都有非常出色的音质表现了&#xff0c;这其中国产品牌的表现尤为亮眼&#xff0c;与入耳式耳机相比&#xff0c;头戴式耳机拥有更大的发音单元和更包裹耳朵的耳罩设计&#xff0c;提供了更舒适稳固的佩戴体验&#xff0c;在音质和降噪效…
阅读更多...
方法+数组

方法+数组

1. 方法 1. 什么是方法 方法定义&#xff1a; // []表示可写可不写[public] [static] type name ( [type formal , type formal , ...]){方法体&#xff1b;[return value ;] }[修饰符] 返回值类型 方法名称([参数类型 形参 , 参数类型 形参 ...]){方法体代码;[return 返回值…
阅读更多...
大语言模型（LLM）入门级选手初学教程 II

大语言模型（LLM）入门级选手初学教程 II

模型架构 5.1 输入编码&#xff1a; i. 词元序列编码 Input Embedding Module ii. 位置编码&#xff08;Position Embedding, PE)&#xff0c;Transformer 的编码器结构本身无法识别序列中元素的顺序。 &#x1d499;&#x1d461; &#x1d497;&#x1d461; &#x1d491…
阅读更多...
【深度学习】实验 — 动手实现 GPT【二】：注意力机制、注意力掩码、多头注意力机制

【深度学习】实验 — 动手实现 GPT【二】：注意力机制、注意力掩码、多头注意力机制

【深度学习】实验 — 动手实现 GPT【二】&#xff1a;注意力机制、多头注意力机制 注意力机制简单示例&#xff1a;单个元素的情况简单示例&#xff1a;计算所有输入词元的注意力权重推广到所有输入序列词元&#xff1a; 注意力掩码代码实现多头注意力测试 注意力机制 简单示例…
阅读更多...
数据库(31)——事务

数据库(31)——事务

事务 数据库事务&#xff08;Database Transaction&#xff09;是数据库管理系统&#xff08;DBMS&#xff09;中执行的一组逻辑操作单元&#xff0c;这些操作要么全部成功执行&#xff0c;要么全部不执行&#xff0c;以保持数据的一致性和完整性。事务是确保数据可靠性的重要机…
阅读更多...
Android 获取OAID

Android 获取OAID

获取OAID 老规矩&#xff0c;直接上&#xff1a; implementation com.huawei.hms:opendevice:6.11.0.300 // 要获取华为vaid 和aaid&#xff0c;还需添加opendevice 依赖implementation(name: oaid_sdk_2.5.0, ext: aar) import android.content.Context; import android.util.…
阅读更多...
每日互动基于 Apache DolphinScheduler 从容应对ClickHouse 大数据入库瓶颈

每日互动基于 Apache DolphinScheduler 从容应对ClickHouse 大数据入库瓶颈

引言 大家好&#xff0c;我叫张琦&#xff0c;来自每日互动&#xff0c;担任大数据平台架构师。今天我将分享我们团队在基于Apache DolphinScheduler实现ClickHouse零压入库过程中的实践经验。 这个实践项目涉及到两个关键组件&#xff1a;Apache DolphinScheduler和ClickHous…
阅读更多...
[vulnhub] Brainpan1

[vulnhub] Brainpan1

https://www.vulnhub.com/entry/brainpan-1,51/ 主机发现端口扫描 使用nmap扫描网段类存活主机 因为靶机是我最后添加的&#xff0c;所以靶机IP是166 nmap -sP 192.168.75.0/24 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023