文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
简介:
文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
重点是在表单中绑定数据 :data="users,之后要在Vue中写好一个data数据,
<el-main>
<div style="display: flex;">
<el-card style="width: 50%; margin-right: 10px;">
<template #header>
<div class="card-header">
<span>Card name</span>
</div>
</template>
<p v-for="o in 4" :key="o" class="text item">
{{ "List item " + o }}
</p>
</el-card>
<el-card style="width:50%;">
<template #header>
<div class="card-header">
<span>Card name</span>
</div>
</template>
<div>
<el-table :data="users">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</el-card>
</div>
</el-main>
利用mounted页面加载完成后触发
mounted(){
axios.get('http://localhost:9090/user/selectAll').then(res => {
console.log(res)
})
}
之后在data里有一些数据
绑定好一个data数据
export default {
name: "HomeView",
data() {
return {
isCollapse: false,
asideWidth: "200px",
flag: true,
users: []
};
}}
这样data就返回了一些数据了
后台有3个数据 code msg data
利用好res获取好data数据,最终呈现效果,利用res获取data数据
mounted(){
axios.get('http://localhost:9090/user/selectAll').then(res => {
this.users = res.data.data
})
}