当前位置：首页 > article >正文

springboot+vue如何前后端联调，手搓前后端分离项目

article 2025/3/17 21:50:28

我们首先在前端安装axios，这个npm就可以！下载完成后。我们用我们之前的页面，然后写一个card，在一个card里面渲染我们的用户数据，我们先写一个查询所有用户信息的一个效果！

 <el-card class="box-card" style="width: 50%;">
              <div slot="header" class="clearfix">
                <span style="font-weight: 600;font-size: 26px;">渲染用户信息</span>
              </div>
              <div>
                <el-table :data="users" style="width: 100%">
                  <el-table-column prop="date" 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>

目前就是前端差不多都写完了，然后我们现在要加一个钩子函数mounted（）这个函数的作用就是等我们的页面加载好之后，再去请求数据。如何请求数据呢？第一步导入，第二部在mounted()函数里面写axios.get(url).then(res=>{})这样的一个结构直接写出来。我们测试一下！