前后端传参

文章目录

  • 后端接收参数
  • 前端发送请求
    • 引入axios实现发送请求
    • 引入qs实现传参格式化
    • axios基本写法
  • 前后端传参
    • 将数组转化为单个Json字符串传输
      • 前端发送
      • 后端接收
    • 将数组转换为json对象进行传输
      • 前端发送请求
      • 后端接受请求
    • 直接传输数组
      • 前端发送请求
      • 后端接收请求
  • 前后端发送请求格式需要对应起来
  • 总结
    • 发送Get请求,后端可以直接使用@RequestParam接收,前后端名称要对应
    • 发送Post请求,后端最好使用@RequestBody接收参数
    • 传输数组时,前后端传输的格式要对应

后端接收参数

参考文章:@PathVariable@RequestParam@RequestBody接收参数区别

前端发送请求

引入axios实现发送请求

npm install axios

引入qs实现传参格式化

因为axios自带qs,引入了axios后可直接引入

import Qs from 'qs'

qs是否启用,需要根据后端的接收参数形式进行判断

axios基本写法

axios.js

import axios from "axios";
import { Message } from "element-ui";
import { getStore, setStore } from "./storage";let base = '/xx';
axios.defaults.timeout = 15000;//添加请求拦截器
axios.interceptors.request.use(function(config) {// 在发送请求之前做些什么return config;
}, function(error) {Message.error('请求出错');//对请求错误做些什么return Promise.reject(error);
})//添加响应拦截器
axios.interceptors.response.use(function(response) {// const data = response.data;//对响应数据做点什么return response;
}, function(error) {//对响应错误做点什么return Promise.reject(error)
})/*** 发送登录get请求*/
export const getRequest = (url,params) => {let accessToken = getStore('accessToken');return axios({method: 'get',url:`${base}${url}`,params:params,headers: {'Authorization': accessToken,}});
};/*** 发送未登录get请求*/
export const getNoAuthRequest = (url,params) => {return axios({method: 'get',url: `${base}${url}`,params: params});
};/*** 发送已登录 表单格式 post请求*/
export const postRequest = (url,params) => {let accessToken = getStore('accessToken');return axios({method: 'post',url: `${base}${url}`,data: params,transformRequest: [function(data){let ret = '';for (let it in data){ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';}ret = ret.substring(0,ret.length - 1);return ret;}],headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8','Authorization': accessToken}});
};/*** 发送已登录 body post请求*/
export const postBodyRequest = (url,params) => {let accessToken = getStore('accessToken');return axios({method: 'post',url: `${base}${url}`,data: params,headers: {'Authorization': accessToken,'Content-Type': 'application/json;charset=UTF-8'}});
};/*** 发送未登录 form post请求*/
export const postNoAuthRequest = (url,params) => {return axios({method: 'post',url: `${base}${url}`,data: params,transformRequest: [function(data){let ret = '';for (let it in data){ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';}ret = ret.substring(0,ret.length - 1);return ret;}],headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',}});
};/*** 发送未登录 body post请求*/
export const postNoAuthBodyRequest = (url,params) => {return axios({method: 'post',url: `${base}${url}`,data: params,headers: {'Content-Type': 'application/json;charset=UTF-8'}});
};

前后端传参

将数组转化为单个Json字符串传输

前端发送

let data = [1,2,3]
sendPostRequest(JSON.stringfy(data)).then(res => {if(res.data.code == 200){console.log('请求成功')}else{console.log('请求失败')}
})

后端接收

@PostMapping("/receive")
public Result receiveParams(@RequstBody String ids){System.out.println(ids);return Result.ok();
}

将数组转换为json对象进行传输

前端发送请求

const ids = [1,2,3]
const data = qs.stringify({
"ids": JSON.stringify(ids)
})
sendPostRequest(JSON.stringfy(data)).then(res => {if(res.data.code == 200){console.log('请求成功')}else{console.log('请求失败')}
})

后端接受请求

@PostMapping("/receive")
public Result receiveParams(@RequstBody Map<String,Object> idsMap){System.out.println(idsMap);return Result.ok();
}

直接传输数组

前端发送请求

const ids = [1,2,3]
sendPostRequest(JSON.stringfy(data)).then(res => {if(res.data.code == 200){console.log('请求成功')}else{console.log('请求失败')}
})

后端接收请求

@PostMapping("/receive")
public Result receiveParams(@RequstBody List<Integer> ids){System.out.println(ids);return Result.ok();
}

前后端发送请求格式需要对应起来

  • get请求:最好使用@GetMapping进行接收
  • post请求:最好使用@PostMapping进行接收
  • @RequestMapping接收post请求时容易出现参数对应不上的情况

总结

发送Get请求,后端可以直接使用@RequestParam接收,前后端名称要对应

发送Post请求,后端最好使用@RequestBody接收参数

传输数组时,前后端传输的格式要对应

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

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

相关文章

Ubuntu 镜像替换为阿里云镜像:简化你的下载体验

Ubuntu&#xff0c;作为一款广受欢迎的Linux发行版&#xff0c;以其稳定性和易用性著称。但你是否曾因为下载速度慢而感到沮丧&#xff1f;现在&#xff0c;你可以通过将Ubuntu的默认下载源替换为阿里云镜像来解决这个问题。本文将指导你如何完成这一过程。 为什么选择阿里云镜…

Docker 安装 ClickHouse 教程

Docker 安装 ClickHouse 教程 创建目录 首先&#xff0c;创建必要的目录用于存放 ClickHouse 的配置、数据和日志文件。 mkdir -p /home/clickhouse/conf mkdir -p /home/clickhouse/data mkdir -p /home/clickhouse/log chmod -R 777 /home/clickhouse/conf chmod -R 777 /…

R语言Shiny包新手教程

R语言Shiny包新手教程 1. 简介 Shiny 是一个 R 包&#xff0c;用于创建交互式网页应用。它非常适合展示数据分析结果和可视化效果。 2. 环境准备 安装R和RStudio 确保你的计算机上安装了 R 和 RStudio。你可以从 CRAN 下载 R&#xff0c;或从 RStudio 官网 下载 RStudio。…

网络安全中的 EDR 是什么:概述和功能

专业知识&#xff1a;EDR、XDR、NDR 和 MDR_xdr edr ndr-CSDN博客 端点检测和响应 (EDR) 是一种先进的安全系统&#xff0c;用于检测、调查和解决端点上的网络攻击。它可以检查事件、检查行为并将系统恢复到攻击前的状态。EDR 使用人工智能、机器学习和威胁情报来避免再次发生攻…

CentOS7 离线部署docker和docker-compose环境

一、Docker 离线安装 1. 下载docker tar.gz包 下载地址&#xff1a; Index of linux/static/stable/x86_64/ 本文选择版本&#xff1a;23.0.6 2.创建docker.service文件 vi docker.service文件内容如下&#xff1a; [Unit] DescriptionDocker Application Container Engi…

Python鸭子类型解释

Python 的 鸭子类型&#xff08;Duck Typing&#xff09; 是一种动态类型机制&#xff0c;源于一句幽默的编程哲学&#xff1a;“如果它走起来像鸭子&#xff0c;叫起来像鸭子&#xff0c;那么它就可以被认为是鸭子”&#xff08;“If it walks like a duck and quacks like a …

【MySQL】数据库的介绍以及数据库基础

目录 &#x1f333;介绍 &#x1f384;数据库操作 &#x1f6a9;显示当前数据库 &#x1f6a9;创建数据库 ​编辑&#x1f6a9;使用/选中 数据库 &#x1f6a9;删除数据库 &#x1f334;常用的数据类型 &#x1f6a9;数值类型 &#x1f6a9;字符串类型 &#x1f6a9…

【自用软件】IDM下载器 Internet Download Manager v6.42 Build 10

下载IDM&pj安装教程 Internet Download Manager&#xff0c;简称 IDM&#xff0c;是国外的一款优秀下载工具。目前凭借着下载计算的速度优势在外媒网站中均受好评&#xff0c;现在已被多数国人熟知。Internet Download Manager 提升你的下载速度最多达5倍&#xff0c;安排下…

【HarmonyOS】深入理解LocalStorage之逻辑处理存取

【HarmonyOS】深入理解LocalStorage 一、前言 鸿蒙应用中关于状态管理的处理机制有很多。从状态装饰器State prop等&#xff0c;LocalStrong&#xff0c;AppStrong到首选项&#xff0c;再到数据库。内存到持久化。轻量级到重量级。全方位覆盖。 学习和记忆技术点&#xff0c…

Java-数据结构-Map和Set-(二)-哈希表 |ू・ω・` )

文本目录&#xff1a; ❄️一、哈希表&#xff1a; ☑ 1、概念&#xff1a; ☑ 2、冲突-概念&#xff1a; ☑ 3、冲突-避免&#xff1a; ☞ 1&#xff09;、避免冲突-哈希函数的设计&#xff1a; ☞ 2&#xff09;、避免冲突-负载因子调节(重点)&#xff1a; ☑ 4、冲突-解决&…

那年我双手插兜,使用IPv6+DDNS动态域名解析访问NAS

估计有很多科技宅和我一样&#xff0c;会买一个NAS存储或者自己折腾刷一下黑群晖玩玩&#xff0c;由于运营商不给分配固定的公网IP&#xff0c;就导致我在外出的时候无法访问家里的NAS&#xff0c;于是远程访问常常受到IP地址频繁变动的困扰。为了解决这一问题&#xff0c;结合…

Python 统计学

Python 统计学 Python 是一种广泛使用的编程语言,尤其在数据科学和统计学领域。它提供了丰富的库和工具,使得进行统计分析变得更加容易和高效。本文将介绍 Python 在统计学中的应用,包括基本统计概念、常用的统计函数和库,以及如何使用 Python 进行数据分析。 基本统计概…

git本地分支落后于远程分支,因此推送被拒绝怎么办?

error: failed to push some refs to https:// 这个错误提示表明你的本地分支落后于远程分支&#xff0c;因此推送被拒绝。你需要先将远程分支的更改合并到本地分支&#xff0c;然后再推送。 以下是解决方法&#xff1a; 拉取远程分支的更改并合并&#xff1a; git pull orig…

【Kubernetes】常见面试题汇总(三十八)

目录 91. Docker 的网络通信模式。 特别说明&#xff1a; 题目 1-68 属于【Kubernetes】的常规概念题&#xff0c;即 “ 汇总&#xff08;一&#xff09;~&#xff08;二十二&#xff09;” 。 题目 69-113 属于【Kubernetes】的生产应用题。 91. Docker 的网络通信模式…

element 输入框文字+对应签进行长度 和 的判断

输入文字长度 指定标签的长度 &#xff08;判断长度并提示&#xff09; <div style"position: relative;" classchangyongyu><el-input type"textarea" :autosize"{ minRows: 8, maxRows: 8 }" style"margin-bottom:10px;"…

计算机网络面试题——第一篇

1. 常见的HTTP状态码有哪些 1xx&#xff1a;信息响应 100 continue&#xff1a; 服务器已经接受请求的初步部分&#xff0c;客户端应继续请求。101 switching protocols&#xff1a;服务器统一切换协议&#xff0c;如从HTTP切换到websocket。 2xx&#xff1a;成功 200 OK&a…

pytest - 多线程提速

import timedef test1_test1():time.sleep(1)assert 1 1, "11"def test1_test2():time.sleep(1)assert 1 1, "11" 上面2个函数&#xff0c;执行情况&#xff1a; 正常执行时&#xff0c;花费 2.08s2个进程执行时&#xff0c;花费 1.18s2个线程执行时&a…

k8s篇之数据挂载类型及区别

一、K8S集群数据挂载类型及区别 在 Kubernetes 中,数据挂载类型主要有以下几种,每种类型适用于不同的场景。以下是主要的挂载类型及其应用场景的详细说明: 1. emptyDir 描述:emptyDir 是一个空目录,其生命周期与 Pod 相同。 它在 Pod 创建时被创建,并在 Pod 删除时被清…

NLP:命名实体识别及案例(Bert微调)

1. 命名实体识别 1.1 序列标注 序列标注(Sequence Labeling)是NLP中最基础的任务之一&#xff0c;其应用十分广泛。它指的是对给定的序列(如文本中的单词或字符)中的每个元素进行标注&#xff0c;以识别出该元素在序列中的特定角色或属性。 1.2 命名实体识别 命名实体识别(Na…

【React】useEffect

1. 基本介绍 概念 语法 副作用函数依赖项数组&#xff08;空数组时&#xff0c;只会在组件渲染完毕后执行一次副作用函数&#xff09; 2. 使用 import { useEffect, useState } from reactfunction App() {const [value, setValue] useState(0)useEffect(() > {console…