axios和SpringMVC数据交互(一维二维数组,JSON/form形式,@RequestBody/@RequestParam)

news2024/11/24 3:26:02

目录

  • 需求
  • 环境准备
    • 前端
    • 后端
  • 成功实现的案例
    • 以JSON形式发送double数组
    • 以JSON形式发送对象,对象中有数组
    • 以JSON形式发送对象,对象中有二维数组
    • 以x-www-form-urlencoded形式发送一维数组

需求

前端或postman发送数组,后端controller做为入参接收

环境准备

前端

// src/utils/request.js
const axiosInstance = axios.create({
  baseURL: 'http://localhost:8081/',
  // baseURL: 'http://106.14.92.82:8081/',
  timeout: 10000
})
export default axiosInstance
import request from 'src/utils/request'
request({
        method: 'post',
        url: '/tests',
        headers: { 'Content-Type': 'application/json' },
        data: 要发送的数据,
      }).then((res) => {
        console.log(res) // 打印一下返回的结果
      })

后端

springboot spingmvc

成功实现的案例

以JSON形式发送double数组

不是k-v,直接是一个数值数组

  • 前端
request({
        method: 'post',
        url: '/tests',
        headers: { 'Content-Type': 'application/json' },
        data: JSON.stringify([1,2,3]),
      }).then((res) => {
        console.log(res)
      })
  • postman(与上方的前端代码等效)
    和前端一个效果

  • 后端
    JSON要用@RequestBody去接收

    @PostMapping(value = "/tests")
    public void test(@RequestBody List<Double> BS){
        log.info(BS); // 打印 [1.0, 2.0, 3.0]
    }
    @PostMapping(value = "/tests")
    public void locateByFang(@RequestBody String BS){
        log.info(BS); // [1,2,3]      这是个长度为7的String
    }

以JSON形式发送对象,对象中有数组

  • 前端
const data0 = {
        'ld': [1,2,3],
        's':'一个字符串'
      }
request({
        method: 'post',
        url: '/tests',
        headers: { 'Content-Type': 'application/json' },
        data: data0
      }).then((res) => {
        console.log(res)
      })
  • postman
    在这里插入图片描述

  • 后端

public class TestEntity
{ // 记得补全getter setter toString
    List<Double> ld; // 注意@RequestBody不能自动映射大写字母开头的属性,这里都是小写,大写的需要@JsonProperty("XX")
    String s;
 }
@PostMapping(value = "/tests")
    public void test(@RequestBody TestEntity BS){
        log.info(BS); // testEntity{ld=[1.0, 2.0, 3.0], s='一个字符串'}
        log.info(BS.getLd().size()); // 3
        log.info(BS.getS()); // 一个字符串
    }

以JSON形式发送对象,对象中有二维数组

  • 前端或postman
    data0或者postman框中的文本改为
{
    "ld":[
        [1,2,3],
        [4,5,6],
        [7,8,9]
        ],
    "s":"一个字符串"
}
  • 后端
    把TestEntity的ld改成List<List<Double>>类型
log.info(BS); // testEntity{ld=[[1.0, 2.0, 3.0], [4.0, 5.0, 6.0], [7.0, 8.0, 9.0]], s='一个字符串'}
log.info(BS.getLd().size());// 3
log.info(BS.getLd().get(0).size()); // 3
log.info(BS.getS()); // 一个字符串

以x-www-form-urlencoded形式发送一维数组

  • 前端
let oneDimArr = [1,2,3]
const usp = new URLSearchParams();
usp.append('BS', oneDimArr);
request({
  method: 'post',
  url: '/tests',
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  data: usp
})
  • postman
    在这里插入图片描述

  • 后端

@PostMapping(value = "/tests")
public void locateByFang(@RequestParam(value="BS") double[] BS){
	for(double s : BS) log.info(s);
}
// 或者
@PostMapping(value = "/tests")
public void locateByFang(@RequestParam(value="BS") List<Double> BS){
	log.info(BS);
}

暂时没有实现使用x-www-form-urlencoded传输二维数组,3×3的数组到了后端变成了9×1的数组

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/66088.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

汽车专场 | 新能源汽车动力电池PACK CAE分析实例解读

一、PACK为什么需要CAE分析&#xff1f; PACK是新能源汽车最重要的组成部分&#xff0c;可称之为心脏&#xff0c;电池系统需要满足汽车运营条件下的苛刻力学环境的要求。按照传统研发方式&#xff0c;设计-样包-测试-优化-样包-测试&#xff0c;反复循环&#xff0c;这种传统…

学完高性能计算后的发展怎么样?

高性能计算行业是指从事高性能计算相关性质的生产、服务的单位或个体的组织结构体系的总称。深刻认知高性能计算行业定义&#xff0c;对预测并引导高性能计算行业前景&#xff0c;指导行业投资方向至关重要。 一、什么是高性能计算&#xff1f; 高性能计算指通常使用很多处理…

音视频学习(十四)——rtsp详解

概念 rtsp&#xff08;Real Time Streaming Protocol&#xff0c;RFC2326&#xff09;&#xff0c;实时流传输协议&#xff0c;是TCP/IP协议体系中的一个应用层协议。 该协议主要规定了一对多应用程序如何有效地通过IP网络传送多媒体数据。RTSP体系结位于RTP和RTCP之上&#…

etsy账号被封的原因有哪些?

Etsy之所以让人又爱又恨&#xff0c;是因为它的流量大&#xff0c;但缺点是规则限制&#xff0c;尤其是对于中国卖家。根据各大社交媒体的留言和评论&#xff0c;大多数电商人最关心Etsy关店的问题。   为什么Etsy会被封号&#xff1f;首先&#xff0c;我们需要了解封号的原因…

高压放大器的输入和输出阻抗为啥是50欧的

选择高压放大器的时候&#xff0c;经常会看到有些高压放大器的输入和输出阻抗都是50欧&#xff0c;今天就来说说高压放大器和无处不在的50欧姆&#xff0c;来聊聊它们的关系。 电子测量仪器在使用的时候会出现电子信号幅度突然加倍或者减少一半的情况&#xff0c;原因是几乎所有…

用echarts实现柱状图

目录前言&#xff1a;什么是 Echarts 插件柱状图成品展示步骤&#xff1a;柱状图代码&#xff1a;前言&#xff1a; 大家都知道&#xff0c;一般情况下&#xff0c;想要使用前端设置一个 柱状图 需要使用 canvas 画布进行编写&#xff0c;不仅代码多&#xff0c;逻辑处理麻烦&…

搭建Nacos集群

nacos的默认端口是8848&#xff0c;但是他还占用了另外两个接口&#xff1a;9848、9849。因此&#xff0c;在单机配置集群时&#xff0c;不可使用三个连续的端口&#xff0c;否则会导致 gRPC端口冲突。 端口与主端口&#xff08;8848&#xff09;偏移量作用98481000客户端gRPC…

7.javase_数组1

一. 数组定义格式 格式1&#xff1a;数据类型[] 变量名; 范例&#xff1a;int[] arr; 格式2&#xff1a;数据类型 变量名[]; 范例&#xff1a; int arr[];二. 数组初始化方式 1.1静态初始化&#xff1a;【初始化时指定每个数组元素的初始值&#xff0c;由系统决定数组长度】格…

ARFoundation系列讲解 - 89 适配华为机型

一、简介 使用 ARCore 开发安卓应用的时候,由于谷歌的制裁和鸿蒙系统的不兼容,导致华为大部分机型无法使用,而国内使用华为设备的群体占比较大的比例所以兼容华为设备是一个绕不过的坎。这个章节我们将学习使用 HuaweiAREngine 结合 ARFoundation 兼容使用来解决这个问题。 …

职业教育数字化成行业发展新方向

2022年,职业教育正迎来新的风口。随着与普通教育同等重要的地位得到确认,职业教育将肩负起建设与我国经济结构转型需求相匹配的人才供给的重任,在社会服务业、战略新兴行业等各大领域中大放异彩。 一、职业教育是什么? 1、职业教育定义 联合国教科文组织认为职业教育(Vocat…

PID控制器的远程设定点功能及其应用

摘要&#xff1a;远程设定点功能是超高精度PID控制器的重要拓展功能之一&#xff0c;其在实际自动控制中有着广泛的应用。本文详细介绍了远程设定点的功能和操作设置过程&#xff0c;同时还介绍了远程设定点功能在跟踪控制、串级控制和比值控制中的具体应用。 原文阅读&#x…

争议不断的AI绘画,靠啥成为了顶流?

今年以来&#xff0c;AIGC迅速崛起。所谓AIGC&#xff0c;即AI-Generated Content&#xff0c;指的是利用人工智能来生成内容&#xff0c;被认为是继专业产出内容&#xff08;PGC&#xff09;、用户产出内容&#xff08;UGC&#xff09;后的新型内容创作方式。不久前掀起热议的…

品牌化、跨境电商、专注细分赛道,平台助力品牌快速出海

国内国外产品都面临着日趋激烈的竞争&#xff0c;卖家越来越意识品牌的效应的重要作用。在竞争激烈的大环境之下&#xff0c;卖家必须采取有效的产品品牌营销策略来提高自身产品的市场竞争力。品牌营销在一定程度上可以增强产品在激烈的市场竞争的影响力。同时&#xff0c;口碑…

【DL】Windiws10系统下安装CUDA和CUDNN实践教程

Windiws10系统下安装CUDA和CUDNN实践教程(手把手系列,不错过任何一个环节): 一、查看需要的CUDA版本 点击开始菜单栏右侧的放大镜,输入NVIDIA 然后点击NVIDIA Control Panel,进入NVIDIA控制面板 点击管理3D设置->系统信息 弹出以下界面框 点击组件,就可以看到驱动对…

工业CT检测技术及工业CT基本组成

工业CT基本组成 由重建CT图像的基本过程出发&#xff0c;我们可以想象一下组成一台工业CT设备的基本要求&#xff1a;它应该能够量 X射线穿透被检物体以后射线的强度&#xff0c;同时能够完成X射线机-探测器系统与被检测物体之间的扫描运动&#xff0c;从而获得重建CT图像所需的…

如何将u盘两个分区合并?u盘怎么合并一个区

U盘是我们日常工作中应用得很广泛的便携式存储设备&#xff0c;具有体积小、便携易带、容量大、随插随拔等优势。为了方便存储数据&#xff0c;不少的用户都会对U盘分区&#xff0c;那么&#xff0c;如何将u盘两个分区合并&#xff1f; 一、合并U盘分区的应用与说明 合并U盘分…

Java高效率复习-MySQL下篇

前言 本文章的语言描述会比上篇多一些 数据库的创建修改与删除 标识符命名规则 数据库名、表名不得超过30个字符&#xff0c;变量限制为29个必须只能包含A-Z&#xff0c;a-z&#xff0c;0-9&#xff0c;_等63个字符数据库名、表名、字段名等对象名中间不要包含空格同一个My…

【Unity编辑器扩展】GF_HybridCLR自定义Toolbar, 一键出包/打热更扩展工具

GF_HybridCLR是基于GameFramework HybridCLR的一款工具链完善&#xff0c;工作流简洁的游戏框架。拥有标准高效的开发工作流&#xff0c;开箱即用&#xff0c;适用于快速研发。 出包时经常遇到忘记刷新配置表、忘记重新打AB包等等&#xff0c;接入HybridCLR每次打热更包也需要…

Android Span进阶之路——ClickableSpan

一、前言 在Android中&#xff0c;可以使用强大的标记&#xff08;Span&#xff09;对象来实现富文本展示&#xff0c;相比 HTML 而言更高效实用。关于 Android Span 的入门篇可以阅读 Android中强大的标记对象-Span。本文将对 ClickableSpan &#xff08;可点击的Span&#xf…

WebDAV之葫芦儿·派盘 + Koder

Koder 支持WebDAV方式连接葫芦儿派盘。 一款可以让你在iPhone、iPad上写各种编程语言代码的app,码农不要错过。 Koder是iPad和iPhone的代码编辑器。它确实具有许多功能,包括语法突出显示,代码段管理器,选项卡式编辑,查找和替换代码,编辑器主题,远程和本地文件连接等等…