Vue+Spring Boot外卖APP全栈开发(四) 商品列表

微信ID: Van1sh1ngAct
具体实现 Github

首先在created回调中向后端请求商品列表(生命周期)

this.$http.get(api.getProducts).then((response) => {
  if (response.ok) {
    this.goods = response.body.data
    // 确保DOM已经渲染完毕
    this.$nextTick(() => {
      this._initScroll()
      this._calculateHeight()
    })
  }
})

拿到的数据样例为

{
    "code": 0,
    "message": "成功",
    "data": [
        {
            "name": "测试",
            "type": 1,
            "foods": [
                {
                    "id": 1,
                    "name": "皮蛋瘦肉粥",
                    "price": 1,
                    "description": "咸粥",
                    "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750",
                    "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750",
                    "sellCount": 241,
                    "rating": 100
                }]
        },
        {
            "name": "单人精彩套餐",
            "type": 2,
            "foods": [
                {
                    "id": 335,
                    "name": "红枣山药粥套餐",
                    "price": 1.3,
                    "oldPrice": 13,
                    "description": "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注",
                    "icon": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750",
                    "image": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750",
                    "sellCount": 18,
                    "rating": 100
                }
            ]
        }
    ]
}