java 修改商品如何实现的_Javaweb-案例练习-5-商品数量修改和合计金额实现

本文介绍了在JavaWeb中如何实现购物车页面的商品数量修改及小计金额的动态更新。通过在商品数量的增减按钮上添加onclick事件,调用JavaScript方法并传递商品ID和数量到Servlet进行处理。Servlet根据接收到的参数更新商品数量,并检查边界条件,如数量不能为负数和超过库存。同时,通过商品数量乘以固定价格计算小计金额,展示在页面上。此外,文章还涵盖了删除商品的实现以及合计金额的计算方法。
摘要由CSDN通过智能技术生成

商品数量和小计修改实现

前面一篇完成了添加购物的功能,这篇来完善购物车页面上,修改商品数量和小计这两处地方的代码。

需求

我们的需求如下图

910be02e6388c63b4d274aac90b1e456.png

购物车页面,每一个商品数量这列的- + 可以点击,然后小计这列金额跟随变化。

需求简单分析

下面来简单看看这个修改思路:

1. 在-+上写onclick事件,调用一个js方法,例如changeNum(id,num)

2. 跳转到一个servlet去处理这个减一还是加一

3. 把金额回显到小计这一列。

在servlet方法中,其中一个参数肯定是Book.id, 第二个参数是购买数量num,这个num也需要从session中拿到。

修改cart.jsp

在数量这个 +控件,添加一个onclick事件,调用js方法changeNum(id),在方法中changeNum(),跳转到一个servlet去处理。

新建一个servlet

先创建一个ChangeNumServlet.java, 完整代码如下

部署测试

接下来进行部署到tomcat,重启服务,点击- +看看能不能修改数量

05ef9d82383c339c980586164e6539c0.png

9875a04c731aeadee44f3da2e9bacf0c.png

到这里,说明修改数量-+这两个控件代码没问题,接下来写小计中代码。

小计金额代码实现

小计金额需要根据数量和价格进行变动,这里价格是固定的,数量是变化的。很简单就是数量乘价格就是小计的金额。

53fca4caddd8879aeba47954d303bfa4.png

保存,刷新购物车页面

706c2ecc9b05f4cdafe8fb3fb346b0c6.png

这样看起来没问题,但是有边界问题,我们没有考虑到。

第一个问题,数量当前可以是负数

b21070b306fd3fe368a0e7b797b2054b.png

第二个边界,数量可以大于库存

解决商品数量边界问题

在cart.jsp中的changeNum(), 我们还需要把库存这个变量作为参数传入,然后写两个if判断,分别判断商品数量小于1和商品数量大于库存的情况。

在Servlet中需要处理num=0的情况,也就是从cart中移除这个商品。这个代码,也会在后面点击X这个从购物车删除商品控件上会用到。

部署看看,点击商品数量为1的时候,再点击减号,看看会不会弹出提示。

点击OK,看看会不会从购物车页面删除这本书。

3d982e0de3082cb690265b7f655b7e09.png

删除商品控件代码实现

页面上还有这个红色X,点击可以删除商品。这个很简单,就是我地址传过去,让num=0,这样后台servlet就会处理,和上面逻辑一样。

377057968026a8c28e52fdab6bf60ed2.png

在cart.jsp中找到这个红色X,大概在93行位置跳转地址改成这样。

style="color:#FF0000; font-weight:bold">X

保存代码,可以测试以下,点击就直接删除,最好JS代码提示以下是否确认删除。

解决合计金额

每个商品的小计计算出来了,现在我们来解决以下合计金额。

重点看以下三部分代码

第一部分,定义一个sum变量,在foreach之前定义,初始化值为0

第二部分,在foreach结束前,统计sum的值

第三部分,合计这块直接引用${sum},得到购物车全部商品合计金额。

合计:  ${sum}元

这个文件完整代码如下

测试一下,看看合计效果

ba5b58920ac39d3789350b1292f8c1c5.png

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java EE 项目的目录结构可以根据具体的需求进行灵活设计,但一般情况下,推荐使用以下的标准目录结构: ``` project ├── src │ ├── main │ │ ├── java │ │ │ └── com │ │ │ └── example │ │ │ ├── controller │ │ │ ├── dao │ │ │ ├── entity │ │ │ ├── service │ │ │ └── util │ │ ├── resources │ │ │ ├── mapper │ │ │ └── db.properties │ │ └── webapp │ │ ├── WEB-INF │ │ │ ├── classes │ │ │ ├── lib │ │ │ └── web.xml │ │ ├── css │ │ ├── js │ │ ├── images │ │ └── index.jsp │ └── test │ ├── java │ └── resources ├── target ├── pom.xml └── README.md ``` 其中,各个目录的作用如下: - `src/main/java`:存放项目的 Java 源代码,按照包名分层,一般包括 `controller`、`dao`、`entity`、`service` 和 `util` 等包; - `src/main/resources`:存放项目的配置文件和资源文件,一般包括数据库连接配置文件 `db.properties`、MyBatis 的 mapper 文件等; - `src/main/webapp`:存放 Web 应用的 Web 资源,包括 JSP 页面、CSS 样式表、JavaScript 脚本等; - `src/test/java`:存放项目的测试代码; - `src/test/resources`:存放测试代码所需要的资源文件; - `target`:存放编译后的 .class 文件、打包后的 .war 文件等; - `pom.xml`:Maven 项目管理工具的配置文件; - `README.md`:项目说明文件。 以上是一种常见的 Java EE 项目目录结构,但并不是唯一的标准。在实际开发中,可以根据项目的具体需求进行合理的调整和修改
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值