商城项目购物车的实现
@
首先是springboot和thymeleaf整合的demo项目,然后使用session实现购物车
一,新建购物车的实体类Cart
public class Cart implements java.io.Serializable{
private Shangpin shangpin;//存放商品实体类的
private Integer number;//商品数量
//setter和getter方法省略
二,在选择商品类型页面进行页面跳转
//购物车,把id参数传到后台controller
function shoppingCar() {
var id=$("#baga").val();
var color=$("#hiddenColor").val();
var size=$("#hiddenSize").val();
location.href="/demo/shoppingCart?id="+id+"&color="+color+"&size="+size;
}
三,在controller进行添加商品对象并记入session
/**
* 添加到购物车
*/
@RequestMapping("/shoppingCart")
public String shoppingCart(Integer id,HttpSession session,String color,String size){
Integer ids=Integer.valueOf(id);
//根据id获取商品对象
List<Map> list=selectService.spMessage(ids);
System.err.println("商品列表:"+list);
Shangpin shangpin=new Shangpin();
shangpin.setPicpath((String) list.get(0).get("picpath"));
shangpin.setColor(color);
shangpin.setSize(size);
shangpin.setName((String)list.get(0).get("name"));
shangpin.setPrice((Double) list.get(0).get("price"));
shangpin.setId((Integer) list.get(0).get("id"));
//获取购物车
Map<Integer, Cart> cartMap=(Map<Integer, Cart>)session.getAttribute("cartMap");
//第一次添加商品到购物车
if(cartMap==null){
cartMap=new HashMap<Integer, Cart>();//实例化map对象
//实例化购物车对象
Cart cart=new Cart();
cart.setShangpin(shangpin);
cart.setNumber(1);
//保存商品对象到map集合中
cartMap.put(id,cart);
}else{//第一次以后的操作
Cart cart=cartMap.get("id");//根据商品id,获取购物车实体类
if(cart!=null){//存在相同的商品
cart.setNumber(cart.getNumber()+1);
}else{
cart=new Cart();
cart.setShangpin(shangpin);
cart.setNumber(1);
cartMap.put(id,cart);
}
}
//然后保存到session中
session.setAttribute("cartMap",cartMap);
return "forward:getShoppingCar";
}
/**
* 从session中取出购物车信息,并转发到购物车页面展示商品信息
*/
@RequestMapping("getShoppingCar")
public String getShoppingCar(HttpSession session,Model model){
Map<Integer,Cart> cartMap =(Map<Integer,Cart>)session.getAttribute("cartMap");
model.addAttribute("carList",cartMap);
return "udai_shopcart";
}
四,购物车页面接收购物车信息并展示
<table class="table table-bordered">
<thead>
<tr>
<th width="150">
<label class="checked-label"><input type="checkbox" class="check-all"><i></i> 全选</label>
</th>
<th width="300">商品信息</th>
<th width="150">单价</th>
<th width="200">数量</th>
<th width="200">现价</th>
<th width="80">操作</th>
</tr>
</thead>
<tbody>
<tr th:each="list:${carList}">
<th scope="row">
<label class="checked-label"><input type="checkbox"><i></i>
<div class="img">![在这里插入图片描述]()</div>
</label>
</th>
<td>
<div class="name ep3" th:text="${list.value.shangpin.name}"></div>
颜色分类:<div th:text="${list.value.shangpin.color}"></div>尺码:<div th:text="${list.value.shangpin.size}"></div>
</td>
<td th:text="${list.value.shangpin.price}">¥20.0</td>
<td>
<div class="cart-num__box">
<input type="button" class="sub" value="-">
<input type="text" class="val" value="1" maxlength="2">
<input type="button" class="add" value="+">
</div>
</td>
<td th:text="${list.value.shangpin.price}"></td>
//这里删除按钮可获得对应的id,具体删除就是删除对应session中的键值对就可以了。
<td><a th:onclick="caonima([[${list.value.shangpin.id}]])">删除</a></td>
</tr>
</tbody>
</table>
五,补充说明
因为购物车信息存储的是键值对,并且值是以对象的形式存储的,所以,使用thymeleaf遍历数组取数据的时候需要这样才能取出对应的数据。
<div class="name ep3" th:text="${list.value.shangpin.name}"></div>
如果使用的是jsp和c标签的话,只需要如下即可。
<td>${list.value.shangpin.name}</td>
效果如图
上面是购物车的基本操作,有问题欢迎留言!
作者:樊同学
-------------------------------------------
个性签名:独学而无友,则孤陋而寡闻。做一个灵魂有趣的人!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!
万水千山总是情,打赏一分行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主,哈哈哈(っ•̀ω•́)っ✎⁾⁾!