海上捞火锅

海上捞火锅


显示购物车信息

[TOC]

简要描述
  • 显示购物车信息
前端页面和服务端交互过程
  • 点击购物车图标,页面发送ajax请求,请求服务端查询购物车中的菜品和套餐
触发事件
<div :class="{imgCartActive: cartData && cartData.length > 0, imgCart:!cartData || cartData.length<1}"
     @click="openCart"></div>
接口调用
async getCartData(){
    const res = await cartListApi({})
    if(res.code === 1){
        this.cartData = res.data
    }else{
        this.$notify({ type:'warning', message:res.msg});
    }
},
请求URL
  • [context-path]/shoppingCart/list
请求方式
  • GET
接口API
function cartListApi(data) {
    return $axios({
        'url': '/shoppingCart/list',
        // 'url': '/front/cartData.json',
        'method': 'get',
        params:{...data}
    })
}
返回示例
code: 1
data: [{id: "1397844263642378242", type: 1, name: "锅底", sort: 1, createTime: "2021-05-27 09:16:58",…},…]
map: {}
msg: null
返回参数说明
参数名 类型 说明
code int 返回码,1:成功;0或其他:失败
msg string 错误信息
data object 返回数据
map map 动态数据
备注
  • data有两种返回值
public static <T> R<T> success(T object) {
    R<T> r = new R<T>();
    r.data = object;
    r.code = 1;
    return r;
}

public static <T> R<T> error(String msg) {
    R r = new R();
    r.msg = msg;
    r.code = 0;
    return r;
}
后端代码
@GetMapping("/list")
public R<List<ShoppingCart>> list(){
    LambdaQueryWrapper<ShoppingCart> queryWrapper = new LambdaQueryWrapper<>();
    queryWrapper.eq(ShoppingCart::getUserId,BaseContext.getCurrentId());
    queryWrapper.orderByDesc(ShoppingCart::getCreateTime);
    List<ShoppingCart> list = shoppingCartService.list(queryWrapper);
    return R.success(list);
}

页面列表

ITEM_HTML