springboot+vue如何前后端联调,手搓前后端分离项目
我们首先在前端安装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=>{})这样的一个结构直接写出来。我们测试一下!
结果报错了!为什么呢?
就是跨域问题!我们后端是9090!而我们的前端是7000!我们现在就是要解决跨域问题!最简单的解决方案就是直接在类上加一个注解!(@CrossOrigin)这个注解即可搞定!非常简单!
这样我们就请求成功了,我们就可以拿数据渲染回前端了!很简单,我们成功了