黑马瑞吉外卖之购物车功能开发（添加购物车和购物车数据展示）

前端界面分析

当我们点击选择规格的时候，数据参数item会传入按钮绑定的方法中

我们点击到这个按钮的时候，那么就会绑定到这个方法。这个方法会将数据给这个窗体中的数据项赋值。这个diaglogFlavor其实就是定义初始化在vue的data里面。其实是可以看作一个列表。

这里会将show这个字段设置为true,那么据一定是一个标志的了，于是我们定位到上面的需要它的地方。到这里的时候就还会非常清楚了，这里的flag为true，这个这里就会执行这样的一个展示。具体的展示就是divCart,然后其实就是一个大的div。

这里就是具体的数据展示了。具体的呢，就是这样的一些数据，如下。

然后下面的数据包是怎么样展示出来的呢？

这里其实就是对口味规格进行了遍历。这样就展示出来了这样的数据。

当我们点击选择的时候，那么就会绑定到一个按钮。这里就会传入数据。

当我们点击flavorClick按钮的时候就会跳到这个方法。

那么选中的口味数据就会被赋值上。然后整个框的下面应该就是加入购物车的选择。当我们点击机器如购物车的时候就应该是一个按钮绑定方法，这个方法一定会向后端提交数据请求。那么就是走到这里的这个方法。

然乎我们定位到加入购物车的这个按钮所绑定给的方法。下面这里就是进行了一些数据的·遍历赋值，当然如果我们美誉选择口味数据的时候就点击加入购物车，这里就会提示让你请选择数据。

flag已经在上面设置为了true.r然后这里按照循环下面的走下来就是。

那么其实就是走到了这里。addCart。

然后呢，我们点位到这个addCart（）这个方法。这个方法的逻辑就写在了这里。

其实这里还有一个调用的提交的请求接口。
那么我们就需要定位到这个addCartApi这个方法。

最终我们就来到了实际的js里面缩写的据具体的发送请求数据的接口。

然后就是这样啦！前端后面当然会接收数据，然后根据后端返回的数据做出响应即可。

后台购物车功能逻辑实现

这里同样按照原来的需要数据库表的设计，以及实体类。这是最为初步的操作。
这些字段都是十分好理解的。

id当然就是购物车的主键id,name当然就是所选的菜品或者套餐，然后image就是其实作为图片路径，将来要展示具体的图片的时候，我们就会需要这个字段的属性，然后就是user_id，这是比较重要的一个部分，因为这个购物车表中会添加很多的数据，我们需要按照片不同的用户来区分不同的用户的购物车，当然没非常重要的就是，如果用户登录到前台页面，所展示也就是他的id下面所关联到的购物车数据。dish_id和setmeal_id就自然很清楚，如果你的购物车有加入这些关系的数据那么这些字段下面就会有值，否则就没有。下面的不说了。

然后需要根据这样的表设计我们的实体类。还有mybatisplus框架搭建好就可以。
那么后台我们需要做的是什么，首先需要做的就是一个添加，因为我们刚刚做的就是一个添加的功能。点击按钮然后添加。就是这样，所以那么我们据先完成这样的功能。

后台逻辑如下

  @Autowired
    private ShoppingCartService shoppingCartService;
//    添加购物车
    @PostMapping("/add")
    public R_<ShoppingCart> add(@RequestBody ShoppingCart shoppingCart, HttpSession session)
    {
        log.info("购物车数据{}",shoppingCart);
        //这只用户id指定是哪个用户的购物车数据
//        查询当前用户的菜品或者套餐是否在购物车上
//        如果已经存在就在原来的数量的基础上进行加一
//        如果不存在，则添加到购物车，数量默认是一
//        获得当前用户的id
       Long userId = (Long) session.getAttribute("user");

//        将这个id设置到购物车当中去
        shoppingCart.setUserId(userId);
//        查询当前菜品或者套餐是否在购物车当中、
//        还需要判断当前添加的是套餐还是菜品
        Long dishId = shoppingCart.getDishId();
        LambdaQueryWrapper<ShoppingCart> shoppingCartLambdaQueryWrapper = new LambdaQueryWrapper<>();
//        添加用户条件
        shoppingCartLambdaQueryWrapper.eq(ShoppingCart::getUserId,userId);
        if(dishId!=null)
        {
//            添加的是菜品
            shoppingCartLambdaQueryWrapper.eq(ShoppingCart::getDishId,dishId);

        }else {
//            添加的是套餐
            shoppingCartLambdaQueryWrapper.eq(ShoppingCart::getSetmealId,shoppingCart.getSetmealId());
        }
//        查询当前菜品或者套餐是否在购物车当中，如果能够查出来，说明已经存在
        ShoppingCart one = shoppingCartService.getOne(shoppingCartLambdaQueryWrapper);
       if(one!=null)
       {
//           如果已经存在，那么就在原先的数量上加一
           Integer number = one.getNumber();
           one.setNumber(number+1);
           shoppingCartService.updateById(one);
       }else {
           shoppingCart.setNumber(1);
           shoppingCart.setCreateTime(LocalDateTime.now());
           shoppingCartService.save(shoppingCart);
           one = shoppingCart;

       }
      return R_.success(one);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

这样我们就完整了具体的功能。为什么还需要返回，当然了，因为数据添加成功以后就可以将这个购车的数据返回出去，因为我们取到成功的状态和数据。

当然这个展示查询的话一定是需要我们后台给的购物车的查询接口的。

那么controller就是这样去写了

   查看购物车
    @GetMapping("/list")
    public R_<List<ShoppingCart>> list(HttpSession session)
    {
        log.info("查看购物车:{}");
        LambdaQueryWrapper<ShoppingCart> shoppingCartLambdaQueryWrapper = new LambdaQueryWrapper<>();

        shoppingCartLambdaQueryWrapper.eq(ShoppingCart::getUserId,(Long)session.getAttribute("user"));

        shoppingCartLambdaQueryWrapper.orderByAsc(ShoppingCart::getCreateTime);
        List<ShoppingCart> list = shoppingCartService.list(shoppingCartLambdaQueryWrapper);


       return R_.success(list);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这个是查看购物车，效果就是这个样子

这是整体界面最后添加的结果，下面是套餐添加后的界面，

按照这个瑞吉外卖的前端设计的话，点菜需要选择口味这些规格，套餐的话则不需要去选择规格了。认为是固定的。效果就是这个样子

懒惰今天更一篇。文章全部包含前后端的逻辑分析。