前后端分离数据交互

/***
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";
    }

效果展示：
后端接受的数据

返回到前端的数据