后端接口的查询方式

在路上的小y2023-10-22 13:06
	在与前端对接过程中一直都会遇到一个问题，就是我们后端接口提供好了，自测也通过了，前端却说接口不通，当我们去排查时却发现大都不是接口不通，很多情况是前端使用的姿势不对，比如接口明明写的参数是放到ULR路径上，前端却传到了queryString上，接口明明写的是使用application/x-www-form-urlencoded格式，前端却传了application/json格式，所以本文总结常用的前后端传参数据格式，方便前端与后端开发人员更好的理解HTTP接口协议传参格式。
一、通过HTTP URL传参数

这种方式是最简单，也是最常用的传参方式，通常用于前端从后端获取数据，通过URL传参分为两种，一种是将参数放在URL路径上，另一种是将参数放在QueryString上，也就是URL的?后面

HTTP报文格式GET /user/1?userName=admin&arrays=a,b,c,d&ids=1&ids=2&ids=3&ids=4注意事项：1.路径 /user/1 上的1是通过URL路径传参数，这种RestFul风格的传参方式，有些前端会搞错

2.userName=admin 这种就是简单的QueryString传参,是最常见的，一般不会搞错

3.arrays=a,b,c,d 这种是通过QueryString传数组，其实就是使用,分隔4.ids=1&ids=2&ids=3&ids=4这种也是传数组参数的一种方式，一般用的比较少，容易出错

后端接口代码

我们使用SpringMVC框架编写接口，可以通过@PathVariable和@RequestParam两个注解来接收上面参数，主要有三种方法：

1.第一种是在方法上一个一个的来接收参数；

2.第二种是使用Map<String,Object>接收来参数；

3.第三种是封装个UserDTO对象来接收。

matlab 复制代码 
@GetMapping("/user/{id}")
    public UserDTO request(@PathVariable Long id, String userName, String[] arrays,@RequestParam List<Long> ids) {
        return UserDTO.builder().id(id).build();
    }

    @GetMapping("/user2/{id}")
    public Map<String,Object> user2(@PathVariable Long id,@RequestParam Map<String,Object> map)    {
        return map;
    }

    @GetMapping("/user3/{id}")
    public UserDTO user3(@PathVariable Long id, UserDTO user) {
        return user;
    }

    @Data
    public class UserDTO {
        private Long id;
        private String userName;
        private String[] arrays;
        private List<Long> ids;
    }

注意事项：

1.接收数组参数时可以使用String[]和List两种数据类型;

2.使用Map<String,Object> map接收参数时 Value的类型要是Object类型,并且要增加@RequestParam

3.使用User对象接收参数时不要增加@RequestParam注解

前端调用接口代码

前端对于这种传参数方式直接把所有参数拼接到URL上就好了

matlab 复制代码 
var request = new XMLHttpRequest();
        request.open('GET', 'http://localhost/user/1?userName=admin&arrays=a,b,c,d&ids=1&ids=2&ids=3&ids=4', true);
        request.responseType = 'json';
        request.onload = function () {
            var data = this.response;
            console.log(data);
        };
        request.send();

注意事项：

1.如果传的参数不是URL安全的需要进行URLEncode

2.POST、PUT、DELETE方法也是支持通过URL传参的

3.使用这种URL拼接不同浏览器支持的最大参数长度是不一样的，以下是不同浏览器支持参数的最大长度：

浏览器 URL长度限制

IE浏览器 2048字节

360极速浏览器 65536字节

Firefox(Browser) 2118字节

Safari(Browser) 80000字节

Opera(Browser) 190000字节

Google(chrome) 8182字节

二、通过HTTP Body传参数

通过HTTP Body传参数主要用于前端向服务端提交数据，如添加数据、修改数据、上传文件等等，通过Body传参常用的数据格式主要有以下3种：1.application/x-www-form-urlencoded 也就是表单提交，body报文中使用key=value拼接参数;

2.application/json 将数据转成JSON格式放在Body中；

3.multipart/form-data 用于文件上传。

HTTP报文格式

application/x-www-form-urlencoded格式报文：

matlab 复制代码 
POST /user3/1
Content-Type: application/x-www-form-urlencoded

userName=admin&arrays=a,b,c,d&ids=1&ids=2&ids=3&ids=4

application/json格式报文：

GET /user4/1

Content-Type: application/json

matlab 复制代码 
{
    "id": 1,
    "userName": "admin",
    "arrays": [
        "a",
        "b",
        "c",
        "d"
    ],
    "ids": [
        1,
        2,
        3,
        4
    ]
}

注意事项：

GET方法也可以通过Body传参数,这点很多人会觉得GET方法不能通过Body传参，不过只能传application/json，使用过elasticsearch应该知道，在搜索数据是就是通过GET方法传JSON数据的。

后端接口代码

在SpringMvc框架中接收Body的application/x-www-form-urlencoded类型参数和在URL的QueryString传参数是通用的，接收application/json需要使用@RequestBody注解。

matlab 复制代码 
@RequestMapping("/user3/{id}")
    public UserDTO user3(@PathVariable Long id, UserDTO user) {
        return user;
    }

    @RequestMapping("/user4/{id}")
    public UserDTO user4(@PathVariable Long id,@RequestBody UserDTO user) {
        return user;
    }

    @RequestMapping("/user5/{id}")
    public UserDTO user4(@PathVariable Long id,@RequestBody String user) {
        return JSONUtil.toBean(user,UserDTO.class);
    }

注意事项：@RequestBody 注解可以直接使用DTO来接收，也可以使用String来接收再手动转成DTO，这个方法在不知道要接收的数据有哪些字段时非常有用，可以将对方传的完整数据打印出来。

前端调用接口代码

matlab 复制代码 
function sendFormUrl() {
        var request = new XMLHttpRequest();
        request.open('POST', 'http://localhost/user3/1', true);
        request.responseType = 'json';
        request.onload = function () {
            console.log(this.response);
        };
        var formData = new FormData();
        formData.append('userName', "admin");
        formData.append('arrays', "a,b,c,d");
        formData.append('ids', "1");
        formData.append('ids', "2");
        formData.append('ids', "3");
        formData.append('ids', "4");
        request.send(formData);
    }
matlab 复制代码 
function sendJson() {
    var request = new XMLHttpRequest();
    request.open('POST', 'http://localhost/user4/1', true);
    request.responseType = 'json';
    request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    request.onload = function () {
        console.log(this.response);
    };
    var body = {
        "userName": "admin",
        "arrays": [
            "a",
            "b",
            "c",
            "d"
        ],
        "ids": [
            1,
            2,
            3,
            4
        ]
    }
    request.send(JSON.stringify(body));
}

注意事项：multipart/form-data主要用于文件上传，可以参数我的另一篇文章： 《一个Demo搞定前后端大文件分片上传、断点续传、秒传》

三、通过Header传参数

通过Header传参主要用于一些通用的用户认证信息，比如常用的 Authentication: Bearer 、Cookie等

HTTP报文格式

GET /user7/1

Accept: application/json

userName : admin

Cookie: userName=admin;

arrays: a,b,c,d

ids:1

ids:2

ids:3

ids:4

注意事项

使用SpringMVC请求报java.lang.IllegalArgumentException: The HTTP header line [username : admin] does not conform to RFC 7230. The request has been rejected.因为userName这些自 定义请求头不符合RFC 7230标准所以被拒绝了，增加配置 reject-illegal-header: off可解决application.yml中增加：

matlab 复制代码 
server:
  port: 80
  tomcat:
    reject-illegal-header: off
后端接口代码

获取Header参数可以通过request.getHeader(header)依次获取，也可以通过@CookieValue，@RequestHeader来获取

matlab 复制代码 
@RequestMapping("/user6/{id}")
public User user6(@PathVariable Long id, HttpServletRequest request) {
    Enumeration<String> headerNames = request.getHeaderNames();
    while (headerNames.hasMoreElements()){
        String header= headerNames.nextElement();
        log.info("{}->{}",header,request.getHeader(header));
    }
    return User.builder().id(id).build();
}

@RequestMapping("/user7/{id}")
public User user7(@PathVariable Long id, @CookieValue String userName, @RequestHeader String[] arrays, @RequestHeader List<Long> ids) {
    return User.builder().id(id).userName(userName).arrays(arrays).ids(ids).build();
}

前端调用接口代码

matlab 复制代码 
  function sendHeader() {
        var request = new XMLHttpRequest();
        request.open('GET', 'http://localhost/user7/1', true);
        request.responseType = 'json';
        request.setRequestHeader("arrays","a,b,c,d");
        request.setRequestHeader("ids","1");
        request.setRequestHeader("ids","2");
        request.setRequestHeader("ids","3");
        request.setRequestHeader("ids","4");
        request.onload = function () {
            console.log(this.response);
        };
        request.send();
    }

注意事项：Cookie是浏览器自动添加了，不需要通过request.setRequestHeader("userName","admin")添加

总结

本文总结了前后端通过HTTP接口协议传参的常用方法，并从HTTP协议、后端JAVA代码、前端JS代码演示每种参数的报文格式、后端获取方法和前端调用方法，当然还有一些更高级的传参方式，比如websocket、sse等基于HTTP的实时推送协议没有涉及到。

相关推荐
zh路西法1 天前
【C++决策和状态管理】从状态模式，有限状态机，行为树到决策树(一)：从电梯出发的状态模式State Pattern
c++·决策树·状态模式
brrdg_sefg1 天前
Rust 在前端基建中的使用
前端·rust·状态模式
m0_748235243 天前
前端实现获取后端返回的文件流并下载
前端·状态模式
委婉待续3 天前
java抽奖系统（八）
java·开发语言·状态模式
m0_748241124 天前
前端监控之sourcemap精准定位和还原错误源码
前端·状态模式
m0_748245174 天前
前端下载文件的几种方式使用Blob下载文件
前端·状态模式
m0_748236584 天前
前端如何将pdf等文件传入后端
前端·pdf·状态模式
MatthewMao5 天前
设计模式12：状态模式
设计模式·状态模式
小白64025 天前
浅谈目前我开发的前端项目用到的设计模式
前端·设计模式·状态模式
xyz20117 天前
Flink State面试题和参考答案-（下）
flink·状态模式
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）