前后端分离数据交互

最新推荐文章于 2024-08-01 14:29:43 发布

夹娃萌新

最新推荐文章于 2024-08-01 14:29:43 发布

阅读量4.9k

点赞数 3

文章标签：交互 vue.js 前端 spring boot

本文链接：https://blog.csdn.net/weixin_53420085/article/details/123100425

版权

本文展示了如何在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";
    }