学习笔记——书城项目第五阶段之购物车数量的修改、精度问题的处理
2023-03-31 10:40:15 时间
2023-01-06
一、修改购物车数量
(1)找到文本框的位置,“cart.html”中的第60行,在文本框上添加一个事件,添加一个“change”事件。
<input class="count-num" type="text" v-model="cartItem.count" @change="changeCount" :name="cartItem.book.bookId"/>
(2)在Vue中的“methods”添加一个函数
changeCount:function(){ //需要将当前购物项的图书id取到,还需要将用户修改后的数量取到 var id=event.target.name; var newCount=event.target.value; axios({ method:"post", url:"cart", params:{ flag:changeCount, id:id, newCount:newCount } }) },
(3)在“Cart.java”中创建一个方法
/** * 对购物项的数量进行修改的操作 * @param id */ public void changeCount(Integer id,Integer newCount){ CartItem item = map.get(id); item.setCount(newCount); }
(4)在“CartServlet.java”中创建一个“changeCount”方法
protected void changeCount(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.获得请求参数 String id = request.getParameter("id"); String newCount = request.getParameter("newCount"); //2.获得购物车对象 HttpSession session = request.getSession(); Cart cart = (Cart)session.getAttribute("cart"); //3.调用cart对象中的方法,对购物项的数量进行修改操作 cart.changeCount(Integer.parseInt(id),Integer.parseInt(newCount)); //4.后台的数据已经刷新完毕,前台的数据还未刷新,通过调用showCart把前台的数据刷新 showCart(request,response); }
(5)完善“Cart.html”中Vue中“methods”中的函数
changeCount:function () { //需要将当前购物项的图书id取到,还需要将用户修改后的数量取到 var id=event.target.name; var newCount=event.target.value;//做一个正则验证:必须是大于0的整数 //alert(id+" "+newCount); axios({ method:"post", url:"cart", params:{ flag:"changeCount", id:id, newCount:newCount } }).then(response=>{ if(response.data.flag){ //alert(response.data.resultData[0]); //需要将后台传过来的数据,展示在网页上(vue的方式) this.cartItems=response.data.resultData[0]; this.totalCount=response.data.resultData[1]; this.totalAmount=response.data.resultData[2]; } }) } },
(6)结果:刷新服务器,在弹出的页面中,将一些图书添加到购物车中。点击“购物车”图标,之后修改购物项中的数量,在失去焦点后,该购物项的金额、商品数量、总金额会发生变化,此时代码OK。此时未设置正则验证,可能会出现非法字符的情况。
二、精度问题的处理
点击购物车图标后,当改变某些图书的数量后,主要修改购物项金额的精度和总金额的精度。
1、购物项的金额
(1)在“CartItem.java”中修改“amount”的计算,分别在“setCount”、“CartItem”、“setBook”中进行修改
public void setBook(Book book) { this.book = book; //设置图书的时候,计算金额 BigDecimal price=new BigDecimal(this.book.getPrice()+"");//使用字符串的构造器 BigDecimal count = new BigDecimal(this.count+""); this.amount=price.multiply(count).doubleValue(); } public void setCount(Integer count) { this.count = count; //设置数量,将amount算出来 BigDecimal price=new BigDecimal(this.book.getPrice()+"");//使用字符串的构造器 BigDecimal count1 = new BigDecimal(this.count+""); this.amount=price.multiply(count1).doubleValue(); } public CartItem(Book book, Integer count) { this.book = book; this.count = count; //有参构造器,计算amount BigDecimal price=new BigDecimal(this.book.getPrice()+"");//使用字符串的构造器 BigDecimal count1 = new BigDecimal(this.count+""); this.amount=price.multiply(count1).doubleValue(); }
2、购物车的总金额
在“Cart.java"中修改“计算中金额”
1 /** 2 * 功能:计算总金额 3 * @return 4 */ 5 public Double getTotalAmount(){ 6 Collection<CartItem> values = map.values();//得到的是CartItem对象的集合 7 BigDecimal total = new BigDecimal("0"); 8 for (CartItem value : values) { 9 BigDecimal amount = new BigDecimal(value.getAmount()+""); 10 //将amount累加到total上 11 total=total.add(amount); 12 } 13 this.totalAmount=total.doubleValue(); 14 return totalAmount; 15 }
注意:在“getTotalAmount()”函数的第9行中一定是要使用BigDecimal的字符串构造器后面要加上 +“”。如果忘记加这个,刷新服务器后,将购物车中的购物项数量增加,总金额的精度仍然保持不到小数点后两位。加上之后,精度就会保持在小数点后两位。
相关文章
- 看似「叫好」的苹果 WWDC,隐藏的是科技行业的焦虑和迷茫
- 华为公布“十大发明”评选成果,分享知识产权和创新进展
- 超全深度学习笔记本入门教程推荐
- 学习gatsby,从这里开始!
- 四足机器人学会“双腿站立下楼梯”!效率比腿式系统高83%
- GPT-3杀入漫威宇宙!二次元小伙用它生成蜘蛛侠续集
- 中科院深圳先进院:全新知识增强图神经网络实现可解释性推荐
- RTO缩短60%以上!平安银行容灾切换平台建设实践
- Meta二号人物桑德伯格将离职:谁会是扎克伯格的接班人?
- 北大本科生凭芯片研究获全球竞赛第一!一作发8篇EDA领域顶会论文
- 文本生成图像这么火,你需要了解这些技术的演变
- 中国移动携手华为等产业伙伴联合发布5G-Advanced产业创新成果
- 计图:五秒训好NeRF!已开源
- MIT计算机先驱乔尔·摩西逝世!50年前教会计算机算微积分
- 机器学习在自动驾驶中落地,核心不是模型,是管道
- 大模型精准反哺小模型,知识蒸馏助力提高 AI 算法性能
- 如何证明一个问题是VNP问题?计算机科学家找到了一种简单方法
- 推理加速GPT-3超越英伟达方案50%!大模型推理系统Energon-AI开源
- 哈佛教授:为什么一定要参与Web3 ?
- 那些年,Elon Musk最荒谬的7个预测