JavaWeb - 小米商城：商品添加到购物车
JavaWeb - 小米商城：商品添加到购物车
1.功能描述
接上篇 JavaWeb - 仿小米商城（5）：商品详情展示 本篇博客将分析和实现小米商城商品添加到购物车 和展示。如以下H5页面所示：
2.功能分析
2.1 功能逻辑抽象
商品购物车功能在逻辑上并不复杂：在商品界面每当点击商品 <img>标签或商品名称时，都会向后端提 交一个 GET 请求来将本商品数据内容添加到Session。后端在收到请求后查询数据库并以Map形式储存 内容到session。
商品购物车是面向数据库中的 tb_cart表，在购物车列表页面点击结算将数据添加到数据表。在开发时基 于三层架构体系建立对应的 CartServlet 类、CartService 接口和实现类、CartDao 接口和实现类。
备注: vo , dto , domain , entity , pojo 的含义
POJO（Plain Ordinary Java Object）简单的Java对象，实际就是普通JavaBeans(规范),pojo是业务称呼.
entity:实体类,一个类,属性严格对应一个表格的行数据
domain:封装数据库的javabean对象,一个对象可以封装多个表格数据.（domain的范围大于entity）
DTO:专门负责接收前端表格数据的对应结构的javabean.
vo:view object,视图对象,ajax要什么,就封装什么
POJO与JavaBean的比较：
pojo:用于数据的临时传递，它只能装载数据，作为数据存储的载体，不具有业务逻辑的处理能力。
javaBean:与pojo相比，它里面可以有其他方法。
JavaBean是可重用组件，需要符合以下条件：这个类必须有一个公共的缺省构造函数
这个类的属性使用getter和setter来访问设置数据，其他方法遵从标准命名规范
这个类可以序列化
3.代码实现
3.1前端
3.1.1 修改商品详情a链接地址
3.1.2编写cart.html
前端在加载html内容时便向后端提交异步请求, 在购物车详情页面查询CartServlet里的showCart方法数据
<script type="text/javascript">//加1function pNum(pid, p, no) {var nums = $("#num_count" + no).val();if (Number(nums) >= 5) {alert("每个商品每人限购5件")} else {//购买的数量不能超过总库存nums = parseInt(nums) + 1;}$.ajax({url: "cart.do?action=updateCartNum&pid=" + pid + "&num=" + nums + "&price=" + p,method: "get",success: function () {location.href = "cart.html";},error: function () {alert("服务器异常");}})}//减1function mNum(pid, p, no) {var nums = $("#num_count" + no).val();nums = parseInt(nums) - 1;if (Number(nums) <= 1) {nums = 1;alert("最少不能少于1件!")}$.ajax({url: "cart.do?action=updateCartNum&pid=" + pid + "&num=" + nums + "&price=" + p,method: "get",success: function () {location.href = "cart.html";},error: function () {alert("服务器异常");}})}//删除本条目function deleteCart(pid) {if (confirm("确认要删除吗")) {location.href = "cart.do?action=updateCartNum&pid=" + pid + "&num=0";}}function clearCart(pid) {if (confirm("确认要删除吗")) {location.href = "cart.do?action=clearCart";}}$(document).ready(function () {//获取session数据显示到页面$.get("cart.do?action=showCart", "", function (result) {if (result.flag === true) {var sum = 0;//计算总金额变量var index = 1;for (var i in result.data) {var temp = '<tr>' +'<th>' + index + '</th>' +'<th>' + result.data[i].goodsName + '</th>' +'<th>' + result.data[i].price + '</th>' +'<th width="100px">' +'<div class="input-group">' +'<span class="input-group-btn">' +'<button class="btn btn-default" type="button" οnclick="mNum(' + result.data[i].goodsId + ',' + result.data[i].price + ',' + index + ')">-</button>' +'</span>' +'<input type="text" class="form-control" id="num_count' + index + '" value="' + result.data[i].quantity + '" readonly="readonly" style="width:40px">' +'<span class="input-group-btn">' +'<button class="btn btn-default" type="button" οnclick="pNum(' + result.data[i].goodsId + ',' + result.data[i].price + ',' + index + ')">+</button>' +'</span>' +'</div>' +'</th>' +'<th>¥ ' + result.data[i].subtotal + '</th>' +'<th>' +'<button type="button" class="btn btn-default" οnclick="deleteCart(' + result.data[i].goodsId + ')">删除</button>' +' </th>' +'</tr>';index++;sum += result.data[i].subtotal;$("#cartBody").append(temp);}//显示总计$("#total").html("<b>￥ " + sum + "</b>");}});});
</script>
3.2后端
3.2.1 Servlet
在 CartServlet 类中定义查询所有商品分类内容的主体逻辑
/*** 购物车Servlet*/
@WebServlet("/cart.do")
public class CartServlet extends BaseServlet {private ResultData resultData = new ResultData();/*** 添加商品到购物车** @param req* @param resp* @return*/public String addCart(HttpServletRequest req, HttpServletResponse resp) {//接收GET传递过来的参数String goodsId = req.getParameter("goodsId");String goodsName = req.getParameter("goodsName");String price = req.getParameter("price");//封装数据到map集合Map<String, CartItem> cartItemMap = null;//先从session中取出cartItemMap = (Map<String, CartItem>) req.getSession().getAttribute(Constants.CART);if (cartItemMap == null) {cartItemMap = new HashMap<>();}//之前有相同商品if (cartItemMap.containsKey(goodsId)) {CartItem cartItem = cartItemMap.get(goodsId);//将原有的数量加1int num = cartItem.getQuantity() + 1;cartItem.setQuantity(num);//数量加1Double total = cartItem.getQuantity() * cartItem.getPrice();cartItem.setSubtotal(total);//重新计算小计金额} else {//没有相同商品Double gPrice = Double.parseDouble(price);//TODO 金额转换失败 跳转到错误页CartItem newItem = new CartItem(goodsId, goodsName, gPrice, 1, gPrice);cartItemMap.put(goodsId, newItem);}System.err.println(cartItemMap);System.out.println(goodsId);System.out.println(cartItemMap.get(goodsId));//将map数据存储到sessionreq.getSession().setAttribute(Constants.CART, cartItemMap);return Constants.REDIRECT + "/cartSuccess.html";}/*** 修改购物商品数量** @param req* @param resp* @return*/public String updateCartNum(HttpServletRequest req, HttpServletResponse resp) {//接收GET传递过来的参数String goodsId = req.getParameter("pid");String numStr = req.getParameter("num");//通过对比分析session中的购物数据 , 对购物的数量进行操作Map<String, CartItem> cartItemMap = (Map<String, CartItem>) req.getSession().getAttribute(Constants.CART);if (cartItemMap != null) {System.out.println(cartItemMap);System.out.println(cartItemMap.get(goodsId));System.out.println("key:"+cartItemMap.containsKey(goodsId));if (cartItemMap.containsKey(goodsId)) {CartItem cartItem = cartItemMap.get(goodsId);//修改数量int num = Integer.parseInt(numStr);if (num==0){//剔除该条目cartItemMap.remove(goodsId);}else {cartItem.setQuantity(num);//数量加1Double total = cartItem.getQuantity() * cartItem.getPrice();cartItem.setSubtotal(total);//重新计算小计金额resultData.setFlag(true);}} else {resultData.setFlag(false);}} else {resultData.setFlag(false);}return Constants.REDIRECT + "/cart.html";}/*** 显示商品购物车数据到html页面** @param req* @param resp* @return*/public String showCart(HttpServletRequest req, HttpServletResponse resp) {//通过从session中提取数据 转换为jsonMap<String, CartItem> cartItemMap = (Map<String, CartItem>) req.getSession().getAttribute(Constants.CART);if (cartItemMap != null) {resultData.setFlag(true);resultData.setData(cartItemMap);} else {resultData.setFlag(false);resultData.setErrorMsg("购物车没有数据!!");}String json = JSON.toJSONString(resultData);System.out.println(json);//在响应中声明返回的是json格式字符resp.setContentType("application/json;charset=utf-8");return json;}/*** 清除购物车数据** @param req* @param resp* @return*/public String clearCart(HttpServletRequest req, HttpServletResponse resp) {//清空sessionreq.getSession().removeAttribute(Constants.CART);return Constants.REDIRECT + "/index.html";}
}
后端程序执行顺利的话，返回的响应结果可以使用 Chrome 浏览器的自动 json 解析功能观察到以下效 果。
JavaWeb - 小米商城：商品添加到购物车相关推荐
- Vue商品添加到购物车
用Vue实现把商品添加到购物车然后计算购物车里商品总金额. 功能分析: 1.商品添加到购物车 2.购物车显示商品的名称数量价格 3.计算购物车商品的总金额 4.删除购物车商品 效果演示 原始样式 添加 ...
- 根据上面的products列表写一个循环，不断询问用户想买什么，用户选择一个商品编号，就把对应的商品添加到购物车里，终用户输入q退出时，打印购买的商品列表。
一.问题: 现有商品列表如下: 1.products = [["iphone",6888],["MacPro",14800],["小米6", ...
- Android把商品添加到购物车的动画效果（贝塞尔曲线）
当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,具体代码如下: 实现效果如图: 思路: 确定动画的起终点 在起终点之间使用二次贝塞尔曲线填充起终点之间的点的 ...
- 写一个循环，不断的问用户想买什么，用户选择一个商品编号，就把对应的商品添加到购物车里，最终用户输入q退出时，打印购物车里的商品列表
写一个循环,不断的问用户想买什么,用户选择一个商品编号,就把对应的商品添加到购物车里,最终用户输入q退出时,打印购物车里的商品列表 写一个循环,不断的问用户想买什么,用户选择一个商品编号,就把对应的商 ...
- 列表用法：格式化商品列表、商品添加到购物车
一. 循环names列表,打印每个元素的索引值和元素,当索引值为偶数时,把对应的元素改成-1. 思路: 可以用enumerate() # 枚举 names = ['old_driver', 'ra ...
- 把商品添加到购物车的方法
因为抢华为荣耀的缘故,研究了下京东添加商品到购物车的方法,具体步骤如下 一:打开商品页面,找到商品的id 例如这个商品的id就是1056970 二:把链接里面的http://gate.jd.com/I ...
- 自动化实现登陆淘宝将商品添加到购物车
1.要根据你定位到的xpath或者css或者id去实现,这边在跑自动化的时候,不能使用账号登录的模式去实现,需要去用扫码登录的去实现(淘宝有反扒机制) from selenium import web ...
- 案例：实现在购物车中添加商品和删除购物车中指定商品的功能
一.向购物车中添加商品 1.1.创建AddCartServlet public class AddCartServlet extends HttpServlet {public void doGet( ...
- SpringBoot-项目4-购物车(添加入购物车，购物车列表，购物车商品数量加减操作)
64. 购物车-创建数据表 # 注意:没有添加相应的not null约束 CREATE TABLE t_cart (cid INT AUTO_INCREMENT COMMENT '购物车数据id',u ...
最新文章
- c++list支持索引吗_还在为不懂Python切片操作及原理而苦恼吗？漫画帮你立马理解掌握...
- linux yum install 与 yum groupinstall 区别
- 从Java多线程可见性谈Happens-Before原则
- 技术盘点：2022年云原生架构趋势解读
- html5标签详解,HTML5中figcaption标签用法详解
- php优先级,PHP运算优先级——神一般的设定
- QPW 公告表（tf_notice）
- 史上最简单的玻尔兹曼机模型讲解
- C/C++：Windows编程—代码获取本地所有网卡信息（网卡描述，IP地址，子网掩码，MAC地址）
- IT群侠传第一回内外兼修
- Oracle表名、列名、约束名的长度限制
- 条码软件如何设置十六进制并跳号打印
- 诺兰模型（百度百科）
- linux修改mac地址_如何（以及为什么）在Windows，Linux和Mac上更改您的MAC地址
- 使用Java实现身份证真假校验
- 设计一个自然数类，该类的对象能表示一个自然数
- 漫画：PHP女程序员自救的技巧
- CDN缓存原理和介绍
- 民间高手炒股心得（1，2，3，4，5，6，7）_飞天山人_新浪博客
- DNS的DDOS攻击