java post 请求_Spring Boot+Vueaxios异步请求数据的12种操作（下篇）

  Java大联盟

  致力于最高效的Java学习

关注

上一篇 axios 教程中，我已经为大家详细讲解了 axios 异步请求数据的前 6 种操作方式：Spring Boot+Vue｜axios异步请求数据的12种操作(上篇) 今天我们继续讲解其余 的 6 种操作。 7、基于 RESTful  POST 请求 + 普通变量传参 基于 RESTful 的 axios 异步 POST 请求的方法为  axios.post(url).then() url ：请求的 URL，直接追加参数。 then() ：请求成功的回调函数。 Vue 代码如下所示。

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

Spring Boot 代码如下所示。

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

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

8、基于 RESTful  POST 请求 + JSON 传参 基于 RESTful 的 axios 异步 POST 请求的方法为  axios.post(url ,params).then() url ：请求的 URL。 params ：参数， 需要将 参数封装到  URLSearchParams  对象中。 then() ：请求成功的回调函数。 Vue 代码如下所示。

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

Spring Boot 代码如下所示。

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

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

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

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

Spring Boot 代码如下所示。

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

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

10、基于 RESTful  PUT 请求 + JSON 传参 基于 RESTful 的 axios 异步 POST 请求的方法为  axios.put(url ,params).then() url ：请求的 URL。 params：参数，需要将参数封装到 URLSearchParams 对象中。 then() ：请求成功的回调函数。 Vue 代码如下所示。

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

Spring Boot 代码如下所示。

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

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

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

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

Spring Boot 代码如下所示。

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

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

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

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

Spring Boot 代码如下所示。

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

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

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

推荐阅读

1、axios异步请求数据的12种操作(上篇)

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

3、一文搞懂前后端分离

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