前后端分离数据交互

本文展示了如何在Vue.js和SpringBoot项目中使用axios进行前后端数据交互。前端通过axios.get方法向后端发送请求,传递参数id和name,后端接收到数据并打印,然后返回'sucess'。整个过程演示了基本的HTTP GET请求在实际项目中的应用。
摘要由CSDN通过智能技术生成

/***
vue+springboot前后端分离项目实现数据交互。我使用的是axios,
前端使用的编译器是vscode,后端使用的编译器是idea
**/

安装axios
在控制台输入下面命令然后回车安装

npm install axios --save

在vue中引入axios
在这里插入图片描述
第一种请求方式:通过axios.get请求数据

前端代码:

<script>
import axios from 'axios'
    export default {
        name:'Updata',
        data() {
            return {
                sdata:[]
            }
        },
        mounted(){
            this.getInfo()
        },
        methods:{
            getInfo(){
            //这里的地址是后端的地址,数据通过key:value的形式发送给后端
                axios.get("http://localhost:8081/book/test",{params:{
                    id:1,
                    name:'张三'
                }}).then(
                    Response=>{

                        console.log(Response.data)
                    },
                    Error=>{
                        console.log(Error)
                    }
                )
            }
        },
      
    }
</script>

后端代码

//这里的请求方式和前端的请求方式要保持一直,接收前端的数据。(最外层还有一个/book) 此时的return的sucess会返回给前端
 @GetMapping("/test")
    public String test(int id,String name){
        System.out.println(id+name);
        return "sucess";
    }

效果展示:
后端接受的数据
在这里插入图片描述
返回到前端的数据

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值