Java大联盟

  致力于最高效的Java学习

关注

Spring Boot + Vue 前后端分离最核心的操作就是通过异步请求完成数据同步，这其中又可以分为很多种不同的情况，比如是 GET 请求还是 POST 请求？参数是普通变量还是 JSON？基于 RESTful 架构如何操作等等，今天楠哥就把这些不同的请求方式做了一个汇总，一次性写清楚，以后需要用的时候直接来查这篇文章即可。前后端分离异步请求共包含以下 12 种情况：1、GET 请求 + 普遍变量传参2、GET 请求 + JSON 传参3、PSOT 请求 + 普遍变量传参4、POST 请求 + JSON 传参5、基于 RESTful 的 GET 请求 + 普遍变量传参6、基于 RESTful 的 GET 请求 + JSON 传参7、基于 RESTful 的 PSOT 请求 + 普遍变量传参8、基于 RESTful 的 POST 请求 + JSON 传参9、基于 RESTful 的 PUT 请求 + 普遍变量传参10、基于 RESTful 的 PUT 请求 + JSON 传参11、基于 RESTful 的 DELETE 请求 + 普遍变量传参12、基于 RESTful 的 DELETE 请求 + JSON 传参Vue 中异步请求使用 axios 组件来完成，axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，可以用在浏览器和 node.js 中。Vue 工程中使用 axios，首先要安装 axios，命令如下所示。

npm install axios

然后创建 Vue 工程，手动导入 axios 组件，命令如下所示。

vue add axios

Vue 环境搭建好之后，创建 Spring Boot 工程，之后就可以分别完成前后端代码的开发。1、GET 请求 + 普遍变量传参axios 异步 GET 请求的方法为 axios.get(url,params).then()url：请求的 URL。params：参数，格式为 {params:{name:value,name:value}}then()：请求成功的回调函数。Vue 代码如下所示。

<template>    <div>        <button type="button" @click="getData()">getDatabutton><br/>    div>template><script>    export default {        methods: {            getData(){                const _this = this                axios.get('http://localhost:8181/getData',{params:{id:1,name:'张三'}}).then(function (resp) {                    console.log(resp.data)                })            }        }    }script>

Spring Boot 代码如下所示。

@RestControllerpublic class DataHandler {    @GetMapping("/getData")    public String getData(Integer id,String name){        System.out.println(id);        System.out.println(name);        return id+name;    }}

分别启动 Vue 和 Spring Boot，点击 getData按钮，结果如下图所示。

这是前后端分离开发最常见的错误：跨域。当请求不在同一域名下的资源文件时，浏览器限制了此类请求，导致报错，这就是跨域问题，如何解决呢？可以在前端应用中处理，也可以在后端应用中进行处理，这里我们选择在 Spring Boot 中处理，方法非常简单，只需要添加一个 Configuration 即可，具体代码如下所示。

@Configurationpublic class CorsConfig implements WebMvcConfigurer {    @Override    public void addCorsMappings(CorsRegistry registry) {        registry.addMapping("/**")                .allowedOrigins("*")                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")                .allowCredentials(true)                .maxAge(3600)                .allowedHeaders("*");    }}

再次启动 Spring Boot，点击 getData按钮，结果如下图所示。

点击 getData按钮之后，客户端输出了后端服务返回的数据，axios 请求调用成功。2、GET 请求 + JSON 传参Vue 代码如下所示。

<template>    <div>        <button type="button" @click="getJSON()">getJSONbutton><br/>    div>template><script>    export default {        methods: {            getJSON(){                const _this = this                var user = {                    id:1,                    name:'张三'                }                axios.get('http://localhost:8181/getJSON',{params:user}).then(function (resp) {                    console.log(resp.data)                })            }        }    }script>

Spring Boot 代码如下所示。

@Datapublic class User {    private Integer id;    private String name;}

@GetMapping("/getJSON")public User getJSON(User user){    System.out.println(user);    return user;}

分别启动 Vue 和 Spring Boot，点击 getJSON按钮，结果如下图所示。

3、PSOT 请求 + 普遍变量传参axios 异步 POST 请求的方法为 axios.post(url,params).then()url：请求的 URLparams：参数，POST 请求中，参数格式不再是  {params:{name:value,name:value}} ，而需要将参数封装到URLSearchParams 对象中。then()：请求成功的回调函数。Vue 代码如下所示。

<template>    <div>        <button type="button" @click="postData()">postDatabutton><br/>    div>template><script>    export default {        methods: {            postData(){                const _this = this                var params = new URLSearchParams()                params.append('id', '1')                params.append('name', '张三')                axios.post('http://localhost:8181/postData',params).then(function (resp) {                    console.log(resp.data)                })            }        }    }script>

Spring Boot 代码如下所示。

@PostMapping("/postData")public User postData(Integer id,String name){    System.out.println(id);    System.out.println(name);    return new User(id,name);}

‍分别启动 Vue 和 Spring Boot，点击 postData按钮，结果如下图所示。

4、PSOT 请求 + JSON 传参params 同样需要将 JSON 对象封装到 URLSearchParams 中，Vue 代码如下所示。

<template>    <div>        <button type="button" @click="postJSON()">postJSONbutton><br/>    div>template><script>    export default {        methods: {            postJSON(){                const _this = this                var params = new URLSearchParams()                params.append('id', '1')                params.append('name', '张三')                axios.post('http://localhost:8181/postJSON',params).then(function (resp) {                    console.log(resp.data)                })            }        }    }script>

Spring Boot 代码如下所示。

@PostMapping("/postJSON")public User postJSON(User user){    System.out.println(user);    return new User(1,"张三");}

分别启动 Vue 和 Spring Boot，点击 postJSON按钮，结果如下图所示。

5、基于 RESTful GET 请求 + 普遍变量传参基于 RESTful 的 axios 异步 GET 请求的方法为 axios.gett(url).then()url：请求的 URL，直接追加参数。then()：请求成功的回调函数。Vue 代码如下所示。

<template>    <div>        <button type="button" @click="restGetData()">restGetDatabutton><br/>    div>template><script>    export default {        methods: {            restGetData(){                const _this = this                axios.get('http://localhost:8181/restGetData/1').then(function (resp) {                    console.log(resp.data)                })            }        }    }script>

Spring Boot 代码如下所示。

@GetMapping("/restGetData/{id}")public User restGetData(@PathVariable("id") Integer id){    System.out.println(id);    return new User(1,"张三");}

分别启动 Vue 和 Spring Boot，点击 restGetData按钮，结果如下图所示。

6、基于 RESTful GET 请求 + JSON 传参基于 RESTful 的 axios 异步 GET 请求的方法为 axios.get(url,params).then()url：请求的 URL。params：参数，格式为  {params:{name:value,name:value}} 。then()：请求成功的回调函数。Vue 代码如下所示。

<template>    <div>        <button type="button" @click="restGetJSON()">restGetJSONbutton><br/>    div>template><script>    export default {        methods: {            restGetJSON(){                const _this = this                axios.get('http://localhost:8181/restGetJSON',{params:{id:1,name:'张三'}}).then(function (resp) {                    console.log(resp.data)                })            }        }    }script>

‍Spring Boot 代码如下所示。

@GetMapping("/restGetJSON")public User restGetJSON(User user){    System.out.println(user);    return new User(1,"张三");}

分别启动 Vue 和 Spring Boot，点击 restGetJSON按钮，结果如下图所示。

‍以上就是 axios 异步请求数据的 6 种形式，你都学会了吗？ 

推荐阅读

1、快速上手Spring Boot+Vue前后端分离

2、Vue+Element UI搭建后台管理系统界面

3、一文搞懂前后端分离

4、徒手撸一个Spring MVC框架