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

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)这个注解即可搞定!非常简单!

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


http://www.kler.cn/a/588892.html

相关文章:

  • 三角函数:从宇宙法则到AI革命的数学密钥
  • 《灵珠觉醒:从零到算法金仙的C++修炼》卷三·天劫试炼(51)混沌钟定排列 - 全排列(回溯与剪枝)
  • 安全测试数据的分析、报告及业务应用
  • Java EE 进阶:Spring Boot 日志
  • 获取pytdx行情服务器ip和port
  • Golang倒腾一款简配的具有请求排队功能的并发受限服务器
  • 如何在Linux中切换用户?
  • 从零到精通文本指令:打造个人AI助理的完整指令库(Prompt 指令实操)
  • HTML 列表:构建清晰结构的网页内容
  • 如何通过数据分析提升美容院顾客复购率
  • 设计模式之组合模式:原理、实现与应用
  • 构建智能汽车地图标准体系:自动驾驶技术的基石
  • 51单片机的工作过程
  • 有多少小于当前数字的数字 力扣1365
  • Kotlin语言基础笔记
  • coding ability 展开第三幕(滑动指针——基础篇)超详细!!!!
  • 【干货】Docker 在自动化测试和性能测试中的应用
  • Vue.js 中 class 和 style 绑定的全面解析
  • JVM的各种细节
  • visual studio code C++开发基础配置