文本，前后端数据交互，简单请求,如何去给data数据赋值，在mounted()里赋值,利用axios发送的请求，res就是数据集，就是后端的数据，this.users = res.data.data-阿里云开发者社区

文本，前后端数据交互，简单请求,如何去给data数据赋值，在mounted()里赋值,利用axios发送的请求，res就是数据集，就是后端的数据，this.users = res.data.data

2024-07-04 12

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 文本，前后端数据交互，简单请求,如何去给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
    })
  }