门户网站建设 总结系统软件开发公司

我们首先在前端安装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）这个注解即可搞定！非常简单！

这样我们就请求成功了，我们就可以拿数据渲染回前端了！很简单，我们成功了