Day-18-购物车模块的实现，商品的加购和删除，登录以后才可以查看购物车，订
单等
购物车模块的实现
1-编辑POJO对象
@TableName("tb_cart")
@Data
@Accessors(chain =true)
public class Cart extends BasePojo{
@TableId(type = IdType.AUTO)
private Long id;
private Long userId;
private Long itemId;
private String itemTitle;
private String itemImage;
private Long itemPrice;
private Integer num;
}
2-创建购物车项⽬
2.2.1 添加继承/依赖/插件
<dependencies>
<dependency>网页购物车代码
<groupId>com.jt</groupId>
<artifactId>jt-common</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
</dependencies>
<!--添加插件有main⽅法时需要添加插件-->
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
2.2.2 业务结构
2.3 展现购物车列表
2.3.1 业务说明
2.3.2 编辑CartController
package ller;
import com.fig.annotation.Reference;
import com.jt.pojo.Cart;
import com.jt.service.DubboCartService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping; import java.util.List;
@Controller
@RequestMapping("/cart")
public class CartController {
@Reference(check =false)
private DubboCartService cartService;
/**
* 展现购物车列表信息根据userId查询购物车记录
* url: www.jt/cart/show.html
* 参数: 根据userId查询购物车数据信息
* 返回值: 购物车展现页⾯
* 页⾯取值⽅式: ${cartList}
*/
@RequestMapping("/show")
public String show(Model model){
long userId =7L;//暂时写死后期维护
List<Cart> cartList = cartService.findCartListByUserId(userId);
//利⽤model对象将数据保存到request对象中
model.addAttribute("cartList",cartList);
return"cart";
}
}
2.3.2 编辑CartService
package com.jt.service;
import com.fig.annotation.Service;
import ditions.query.QueryWrapper;
import com.jt.mapper.CartMapper;
import com.jt.pojo.Cart;
import org.springframework.beans.factory.annotation.Autowired;
import java.util.List;
@Service(timeout =3000)
public class DubboCartServiceImpl implements DubboCartService{
@Autowired
private CartMapper cartMapper;
@Override
public List<Cart>findCartListByUserId(long userId){
QueryWrapper queryWrapper =new QueryWrapper();
queryWrapper.eq("user_id", userId);
return cartMapper.selectList(queryWrapper);
}
}
2.4 购物车新增操作,
⽤户如果重复加购? 只做数量的更新
2.4.1 页⾯分析
1.页⾯结构分析
2.加⼊购物车按钮
<a class="btn-append " id="InitCartUrl" onclick="addCart();" clstag="shangpin|keycount|product|initcarturl">加⼊购物车<b></b></a>
3.点击事件
//利⽤post传值
function addCart(){
var url ="www.jt/cart/add/${item.id}.html";
document.forms[0].action = url;//js设置提交链接
document.forms[0].submit();//js表单提交
}
4.form表单分析
<form id="cartForm" method="post">
<input class="text" id="buy-num" name="num" value="1" onkeyup="dify('#buy-num');"/> <input type="hidden"class="text" name="itemTitle" value="${item.title }"/>
<input type="hidden"class="text" name="itemImage" value="${item.images[0]}"/>
<input type="hidden"class="text" name="itemPrice" value="${item.price}"/>
</form>
2.4.2 编辑CartController
/**
* 业务说明: 实现⽤户购物车数据新增
* url: www.jt/cart/add/1474391990.html
* 参数: 购物车表单提交 Cart对象
* 返回值: 重定向到跳转到购物车展现页⾯
*
* 扩展内容: 如果restFul的参数，与对象的属性名称⼀致，则可以直接赋值
*/
@RequestMapping("/add/{itemId}")
public String addCart(Cart cart){
long userId =7;
cart.setUserId(userId);
cartService.addCart(cart);
return"redirect:/cart/show.html";
}
2.4.3 编辑CartService
/**
* 难点: ⽤户如果重复加购? 只做数量的更新
* 业务操作:
* 1.根据userId/itemId查询数据库检查是否加购.
* 有值: 已经加购则只更新数量
* 没有值: 第⼀次加购则直接⼊库即可.
* @param cart
*/
@Override
public void addCart(Cart cart){
QueryWrapper<Cart> queryWrapper =new QueryWrapper<>();
queryWrapper.eq("user_id", UserId());
queryWrapper.eq("item_id", ItemId());
Cart cartDB = cartMapper.selectOne(queryWrapper);
if(cartDB == null){//说明⽤户第⼀次加购
cartMapper.insert(cart);
}else{
//说明⽤户之间添加过该商品数量的更新
int num = Num()+ Num();
Cart temp =new Cart();
temp.setNum(num).Id());
//根据id 更新对象中不为null的数据...
cartMapper.updateById(temp);
}
}
3. 如果是已加购的，只做数量更新操作
3.1页⾯分析
1).页⾯URL分析
2).页⾯html分析
<div class="quantity-form" data-bind="">
<a href="javascript:void(0);"class="decrement" clstag="clickcart|keycount|xincart|diminish1" id="decrement">-</a>
<input type="text"class="quantity-text" itemPrice="${cart.itemPrice}" itemId="${cart.itemId}" value="${cart.num }" id="changeQuantity-11345721-1-1-0"> <a href="javascript:void(0);"class="incre
ment" clstag="clickcart|keycount|xincart|add1" id="increment">+</a>
</div>
3).页⾯JS
$(".increment").click(function(){//＋
var _thisInput = $(this).siblings("input");
_thisInput.val(eval(_thisInput.val())+1);
$.post("/cart/update/num/"+_thisInput.attr("itemId")+"/"+_thisInput.val(),function(data){
});
});
3.2 编辑CartController
/
**
* 购物车数量更新操作
* URL地址: www.jt/cart/update/num/1474391990/16
* 参数: itemId,num
* 返回值: 没有 void
*/
@RequestMapping("/update/num/{itemId}/{num}")
@ResponseBody//将返回值转化为json 代表ajax程序结束
public void updateNum(Cart cart){
long userId =7;
cart.setUserId(userId);
cartService.updateNum(cart);
}
3.3 编辑CartService
//sql: update tb_cart set num=#{num},updated=#{updated} where user_id=#{userId} and
// item_id = #{itemId}
@Override
public void updateNum(Cart cart){
Cart temp =new Cart();
temp.Num());
QueryWrapper queryWrapper =new QueryWrapper();
queryWrapper.eq("user_id", UserId());
queryWrapper.eq("item_id", ItemId());
cartMapper.update(temp,queryWrapper);
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论