json请求 post vue_Spring Boot+Vueaxios异步请求数据的12种操作(上篇)
致力于最高效的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 即可,具体代码如下所示。
@Configuration
public 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框架
json请求 post vue_Spring Boot+Vueaxios异步请求数据的12种操作(上篇)相关推荐
- php原生的异步请求,原生JavaScript实现Ajax异步请求
ajax现在是一种非常流行的技术,现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能,但是明白其原理也是非常重要的,下面是来使用纯javascript实现获 ...
- AJAX怎么实现同步请求?Ajax同步和异步请求有什么区别以及使用场景有哪些?
一.AJAX怎么实现同步请求? ajax请求我们分为同步请求和异步请求,但是默认的都是异步请求,那么,当我们想用ajax同步请求时,我们该如何去实现这个同步请求呢?接下来的这篇文章就来给大家介绍一下关 ...
- ajax请求return,细说JavaScript ajax异步请求return undefined
在制作注册表单验证时我们需要通过ajax请求数据,例如我们需要请求数据库中的用户名判断是否存在,这时我们就需要return,再者我们很多时候需要使用数据库中的数据,这时我们也需要将数据返回出去. 我们 ...
- http请求与响应,同步异步请求以及异步请求axios的配置
文章目录 http http简介,协议 http请求 http响应 接收请求行请求头数据 同步异步请求 异步请求axios的配置 配置文件 http http简介,协议 http是超文本传输协议 (H ...
- node 创建静态web服务器(下)(处理异步获取数据的两种方式)
接上一章. 上一章我们说创建的静态web服务器只能识别html,css,js文件,功能较为单一,且图片格式为text/html,这是不合理的. 本章,我们将解决该问题. 这里,我们先准备好一个json ...
- java里不支持post请求_java – Spring Boot – 不支持请求方法’POST’
我的Spring Boot应用程序中不支持异常PageNotFound:Request方法'POST'. 这是我的控制器: @RestController public class LoginCont ...
- 手机备份/恢复分区(boot/system/userdata)、数据的几种方法
前 提: 有root权限 备份恢复boot/system分区为例 先查看分区信息: 方法一 : 命令:ls -l /dev/block/platform/mtk-msdc.0/by-name/ roo ...
- Spring Boot 异步请求和异步调用
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 一.Spring Boot中异步请求的使用 1.异步请求与同步请求 ...
- Spring Boot 异步请求和异步调用,一文搞定!
一.Spring Boot中异步请求的使用 1.异步请求与同步请求 特点: 可以先释放容器分配给请求的线程与相关资源,减轻系统负担,释放了容器所分配线程的请求,其响应将被延后,可以在耗时处理完成(例如 ...
最新文章
- 未来几年自动驾驶预测(上)
- CentOS 7 中 Systemd详解
- Qt利用avilib实现录屏功能_利用 dogtail 快速进行 GUI 自动化测试
- LeetCode 49字母异位词分组50pow(x,n)51八皇后
- ul 、ol li 继承原有样式的问题
- Linux日志 系统日志及分析
- mysql分片建表语句_Mysql元数据如何生成Hive建表语句注释脚本详解
- 寄存器地址和内存地址_通俗易懂和你聊聊寄存器那些事(精美图文)
- ubuntu 10.04 花屏 启动缓慢 处理办法
- 圣诞快乐: 用 GaussDB T 绘制一颗圣诞树,兼论高斯数据库语法兼容
- Notes on UNPv1 Ch.5
- java实现多线程断点续传,上传下载
- linux ffmpeg插件,Linux FFmpeg(含x264、lame插件)安装记录
- 食谱数据库数据找不到的问题
- ie visio 打开_Visio viewer 不能从IE打开vsd文件
- C语言构建连连看游戏(矩阵方式)
- 关于 小程序 传值的 几个方法
- codeforces 707c
- 服务器被入侵了,怎么防范服务器被黑客入侵情况
- 程序猿面试八股文分享~