自学实践前后端项目4 MMall商城 4

一。实现商品详情展示

1.测试获取后台当个商品的信息

 2.实现通过点击商品名称和商品图片进入商品详情页面

1）查找出商品信息

 2）在前端进行映射

 

 

 

 

 3）设置库存选择限制

 

 判断逻辑

$(function(){
    //给type绑定点击事件
    $(".type").click(function () {
        var index = $(".type").index(this);
        var obj = $(".type").eq(index);
        $(".type").removeClass("checked");
        obj.addClass("checked");
    });
    //给color绑定点击事件
    $(".color").click(function () {
        var index = $(".color").index(this);
        var obj = $(".color").eq(index);
        $(".color").removeClass("checked");
        obj.addClass("checked");
    });
});

//商品数量++
function increase() {
    var value = $("#quantity").val();
    var stock = $("#stock").text();
    value++;
    if(value > stock){
        value = stock;
    }
    $("#quantity").val(value);
}

//商品数量--
function reduce() {
    var value = $("#quantity").val();
    value--;
    if(value == 0){
        value = 1;
    }
    $("#quantity").val(value);
}
二.接下里处理加入购物车的功能

1.商品选择以后创建相对应信息将数据存入数据库

需要将数据库以及product实体类里面的cost改为浮点型便于后面计算

private Float cost;

1)编写CartController

@Controller
@RequestMapping("/cart")
public class CartController {

    @Autowired
    private CartService cartService;

    @GetMapping("/add/{productId}/{price}/{quantity}")
    public Model