VUEel-select下拉框填充后台数据前端模块
VUE 之视图定义：
1 <el-form-item label="卡Sid" prop="cardData" >
2          <el-select v-model="consume.cardSid" >
3            <el-option
4                v-for="item in cardData"
5                :key="item.sid"
6                :label="item.sid"
7                :value="item.sid">
8            </el-option>
9        </el-select>
10        </el-form-item>
11        <el-form-item label="设备终端Sid" prop="deviceData" >
12          <el-select v-model="inalSid" >
13            <el-option
14                v-for="item in deviceData"
15                :key="item.sid"
16                :label="item.name"
17                :value="item.sid">
18            </el-option>
19        </el-select>
20        </el-form-item>
Vue 之模型定义：
Vue 之数据初始化
VUE ⽅法定义：请求后台数据接⼝加载相关数据
method属性中，添加以下两个⽅法:
1 asyncCardData(){
2            this.$('/card/find').then(res => {
3              console.log(res)
4              console.log(res.data.data.list)
5
6              res.data.data.list.forEach(element => {
7                this.cardData.push({sid:element.sid});
8            })}).catch(function (error) {
9                  console.log(error)
10              })
11        },
12        asyncdeviceData(){
13            this.$('/terminal/find').then(res => {
14              console.log(res)
15              console.log(res.data.data.list)
16
17              res.data.data.list.forEach(element => {
18                this.deviceData.push({sid:element.sid,name:element.name});
19            })}).catch(function (error) {
20                  console.log(error)
21              })
22        },
VUE 声明周期函数定义：调⽤VUE的⽅法定义，完成数据初始化过程.
在VUE声明周期函数create()中，调⽤asyncCardData()和asyncdeviceData()，完成数据初始化过程。
1  created() {
2    this.asyncCardData();
3    this.asyncdeviceData();
4 },
SpringBoot 模块
实体定义：
tity;
2
3import java.math.BigDecimal;
4import java.util.Date;
5
6import org.springframework.format.annotation.DateTimeFormat;
7
8import com.fasterxml.jackson.annotation.JsonFormat;
BaseModel;
10
11public class TCard extends BaseModel {
12    /**
13  *
14  */
15 private static final long serialVersionUID = 1035674221133528445L;
16
17 private Integer sid;
18
19    private String password;
20
21    private String state;
22
23    private BigDecimal money;
24
25    @DateTimeFormat(pattern="yyyy-MM-dd")
26    @JsonFormat(pattern="yyyy-MM-dd",timezone="GMT+8")
26    @JsonFormat(pattern="yyyy-MM-dd",timezone="GMT+8")
27    private Date starTime;
28
29    @DateTimeFormat(pattern="yyyy-MM-dd")
30    @JsonFormat(pattern="yyyy-MM-dd",timezone="GMT+8")
31    private Date endTime;
32
33    private Integer studentSid;
34
35    public Integer getSid() {
36        return sid;
37    }
38
39    public void setSid(Integer sid) {
40        this.sid = sid;
41    }
42
43    public String getPassword() {
44        return password;
45    }
46
47    public void setPassword(String password) {
48        this.password = password == null ? null : im();
49    }
50
51    public String getState() {
52        return state;
53    }
54
55    public void setState(String state) {
56        this.state = state == null ? null : im();
57    }
58
59    public BigDecimal getMoney() {
60        return money;
61    }
62
63    public void setMoney(BigDecimal money) {
64        = money;
65    }
66
67    public Date getStarTime() {
68        return starTime;
69    }
70
71    public void setStarTime(Date starTime) {
72        this.starTime = starTime;
73    }
74
75    public Date getEndTime() {
76        return endTime;
77    }
78
79    public void setEndTime(Date endTime) {
80        dTime = endTime;vue element admin
81    }
82
83    public Integer getStudentSid() {
84        return studentSid;
85    }
86
87    public void setStudentSid(Integer studentSid) {
88        this.studentSid = studentSid;
89    }
90}
tity;
2
BaseModel;
4
5public class TTerminal extends BaseModel {
6    /**
7  *
8  */
9 private static final long serialVersionUID = -8248914524801004030L; 10
11 private Integer sid;
12
13    private String name;
14
15    private Integer adminSid;
16
17    public Integer getSid() {
18        return sid;
19    }
20
21    public void setSid(Integer sid) {
22        this.sid = sid;
23    }
24
25    public String getName() {
26        return name;
27    }
28
29    public void setName(String name) {
30        this.name = name == null ? null : im();
31    }
32
33    public Integer getAdminSid() {
34        return adminSid;
35    }
36
37    public void setAdminSid(Integer adminSid) {
38        this.adminSid = adminSid;
39    }
40}
mapper 定义：
apper;
2
3import java.util.List;
4import java.util.Map;
5
tity.TCard;
7
8public interface TCardMapper {
9 int deleteByPrimaryKey(Integer sid);
10
11 int insert(TCard record);
12
13 int insertSelective(TCard record);
14
15 TCard selectByPrimaryKey(Integer sid);
16
17 int updateByPrimaryKeySelective(TCard record); 18
19 int updateByPrimaryKey(TCard record);
20
21 /**
22  * ⽅法拓展
23  */
24 List<TCard> select(Map<String, Object> parame); 25
26 Integer count(Map<String, Object> parame);
27
28 void batchInsert(List<TCard> list);
29
30 void batchUpdate(List<TCard> list);
31}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。