概述

Vue.js要获取对象的值，不能像普通值那样设置，对象的每个字段都需要在data(){return{}}中进行设置，然后我们才可以获取到对象的值，对象的对象的值也可以获取到

实现过程

实体类

秒杀商品实体类内有一个组合：商品实体类，也就是说，查询秒杀商品时也同时查询到对应的商品

商品实体类

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
package com.ledao.entity;

import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.io.Serializable;

/**
 * 商品实体类
 *
 * @author LeDao
 * @company
 * @create 2022-04-01 17:59
 */
@Data
@TableName("t_goods")
public class Goods implements Serializable {

    /**
     * 编号
     */
    @TableId
    private Integer id;
    /**
     * 名称
     */
    private String name;
    /**
     * 价格
     */
    private Double price;
    /**
     * 图片
     */
    private String image;
    /**
     * 库存
     */
    private Integer stock;
    /**
     * 详情
     */
    private String detail;

    private static final long serialVersionUID = 1L;
}

秒杀商品实体类

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
49
50
51
52
53
54
55
56
57
package com.ledao.entity;

import java.io.Serializable;
import java.util.Date;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

/**
 * 秒杀商品实体类
 *
 * @author LeDao
 * @company
 * @create 2022-04-01 18:31
 */
@Data
@TableName("t_miaosha_goods")
public class MiaoShaGoods implements Serializable {

    /**
     * 编号
     */
    @TableId
    private Integer id;
    /**
     * 真实商品id
     */
    @TableField(value = "goodsId")
    private Integer goodsId;
    /**
     * 商品实体,获取对应商品的信息
     */
    @TableField(exist = false)
    private Goods goods;
    /**
     * 秒杀的价格
     */
    private Double price;
    /**
     * 秒杀的数量
     */
    private Integer stock;
    /**
     * 开始时间
     */
    @TableField(value = "startTime")
    private Date startTime;
    /**
     * 结束时间
     */
    @TableField(value = "endTime")
    private Date endTime;

    private static final long serialVersionUID = 1L;
}

Vue代码

数据绑定模板如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
data() {
  return {
    miaoShaGoods: {
      id: 0,
      goodsId: 0,
      price: 0,
      stock: 0,
      startTime: '',
      endTime: '',
      goods: {
        id: 0,
        name: '',
        price: 0,
        image: '',
        stock: 0,
        detail: ''
      }
    }
  }
}

下面的代码请求了后端，并把请求到的数据绑定到Vue，然后可以通过{{miaoShaGoods.goods.id}}查到秒杀商品对应的商品id了

1
2
3
4
5
6
7
8
9
10
11
12
openMiaoShaDialog: function (id) {
  let _this = this;
  let url = getServerUrl("miaoShaGoods/findById?id=" + id);
  axios
    .get(url)
    .then(function (response) {
      _this.miaoShaGoods = response.data;
    })
    .catch(function (error) {
      console.log(error);
    });
}