Resumir los métodos de paso de parámetros del protocolo de interfaz HTTP comúnmente utilizados en la parte delantera y trasera.

Primer lanzamiento: cuenta pública " Zhao Xiake "

Prefacio

He estado haciendo desarrollo back-end durante muchos años. He proporcionado más de 1.000 interfaces para el front-end, si no 10.000. He trabajado con 50 desarrolladores front-end, si no 100, y los desarrolladores front-end que He trabajado con una variedad de recién graduados hasta profesionales en activo. Soy un programador experimentado con más de 10 años de experiencia. He conocido a casi todo tipo de personas, desde chicas lindas en el sur del río Yangtze hasta hombres fuertes en el noreste. Siempre encontramos un problema en el proceso de conexión con el front-end. Es decir, nuestra interfaz de back-end ha sido proporcionada. Autoprueba También pasó, pero el front-end dijo que la interfaz estaba bloqueada. Cuando fuimos a verificar, Descubrimos que la mayoría de las veces no era la interfaz la que estaba bloqueada. En muchos casos, la postura utilizada por el front-end era incorrecta. Por ejemplo, los parámetros claramente escritos en la interfaz se colocaban en la ruta, pero el front-end -end los pasó a Internet y la interfaz estaba ULRclaramente queryStringescrita Lo que se usa es application/x-www-form-urlencodedel formato, pero el front-end pasa application/jsonel formato, por lo que este artículo resume los formatos de datos de parámetros de front-end y back-end comúnmente utilizados para facilitar desarrolladores front-end y back-end para comprender mejor el formato de paso de parámetros del protocolo de interfaz HTTP.

1. Pasar parámetros a través de URL HTTP

Este método es el método de paso de parámetros más simple y más comúnmente utilizado. Generalmente lo usa el front-end para obtener datos del back-end. Hay dos tipos de parámetros que pasan a través de la URL. Uno es colocar los parámetros en la ruta y el otro es colocar los parámetros en la ruta. el otro es poner los parámetros en la ruta URL, los parámetros se colocan QueryStringarriba, es decir URL, ?detrás

formato de mensaje HTTP

GET /user/1?userName=admin&arrays=a,b,c,d&ids=1&ids=2&ids=3&ids=4

Precauciones:

1. /user/1En la ruta, los parámetros 1se pasan a través de la ruta. Algunas interfaces cometerán errores en este estilo de pasar parámetros.URLRestFul
2. userName=adminSe trata de una transferencia de parámetros sencilla QueryString, que es la más común y, por lo general, no puede cometer errores.
3. arrays=a,b,c,dEsto se hace QueryStringpasando una matriz, que en realidad utiliza ,separación.
4. ids=1&ids=2&ids=3&ids=4Esta también es una forma de pasar parámetros de matriz, que generalmente se usa con menos frecuencia y es propensa a errores.

Código de interfaz de backend

Usamos SpringMVCel marco para escribir la interfaz y podemos recibir los parámetros anteriores a través @PathVariablede dos anotaciones.Hay tres métodos principales:@RequestParam

1. La primera es recibir los parámetros uno por uno en el método;
2. El segundo es utilizar Map<String,Object>la recepción para pasar parámetros;
3. El tercer método consiste en encapsular un UserDTOobjeto para recibirlo.

    @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;
    }
    

Precauciones:

1. String[]Se pueden utilizar List<Long>dos tipos de datos al recibir parámetros de matriz ;
2. El tipo cuando se utiliza Map<String,Object> mapel parámetro recibido debe ser tipo y agregarValueObject@RequestParam
3. No agregue anotaciones cuando utilice Userobjetos para recibir parámetros@RequestParam

Código de interfaz de llamada front-end

URL上Para este método de paso de parámetros, el front-end puede unir directamente todos los parámetros.

        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();

Precauciones:

1. Si los parámetros pasados ​​no son URLseguros, debeURLEncode
2. POSTLos métodos , PUT, DELETEtambién admiten URLel paso de parámetros.
3. La longitud máxima de parámetros admitida por diferentes navegadores que utilizan este URLempalme es diferente. La siguiente es la longitud máxima de parámetros admitida por diferentes navegadores:

Navegador	Límite de longitud de URL
explorador de Internet	2048 bytes
Navegador de velocidad 360	65536 bytes
Firefox (navegador)	2118 bytes
Safari (navegador)	80000 bytes
Ópera (navegador)	190000 bytes
Google Chrome)	8182 bytes

2. Pasar parámetros a través del cuerpo HTTP

HTTP BodyEl front-end utiliza principalmente el paso de parámetros para enviar datos al servidor, como agregar datos , modificar datos , cargar archivos , etc. BodyHay tres formatos de datos principales que se usan comúnmente al pasar parámetros:

1. application/x-www-form-urlencodedEs decir, el envío del formulario utiliza parámetros de empalme bodyen el mensaje ;key=value
2. application/jsonConvierta los datos al JSONformato y colóquelos Body;
3. multipart/form-dataSe utiliza para cargar archivos.

formato de mensaje HTTP

• application/x-www-form-urlencodedMensaje de formato:

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/jsonMensaje de formato:

GET /user4/1
Content-Type: application/json

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

Precauciones:

1. GETLos métodos también pueden Bodypasar parámetros. Mucha gente piensa que el método GET no puede Bodypasar parámetros, pero solo se puede pasar application/json. Si lo ha usado elasticsearch, debe saber que los datos se pasan a través de GETmétodos cuando se buscan datos JSON.

Código de interfaz de backend

Los parámetros de tipo recibidos en el marco son comunes a los parámetros pasados ​​y se requieren SpringMvcanotaciones para la recepción .Bodyapplication/x-www-form-urlencodedURLQueryStringapplication/json@RequestBody

    @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);
    }

Precauciones:

1. @RequestBodyLas anotaciones se pueden usar directamente DTOpara recibir, o se pueden usar Stringpara recibir y convertir manualmente DTO. Este método es muy útil cuando no sabe qué campos hay en los datos que se recibirán y puede imprimir los datos completos enviados por la otra parte.

Código de interfaz de llamada front-end

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);
    }

    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));
    }

Precauciones:

1. multipart/form-dataSe utiliza principalmente para la carga de archivos. Puede parametrizar otro artículo mío:
   "One Demo maneja la carga de archivos grandes de front-end y back-end en partes, reanuda las cargas y carga en segundos".

Pasar parámetros a través del encabezado

El paso de Headerparámetros se utiliza principalmente para cierta información de autenticación de usuario común, como los de uso común Authentication: Bearer , Cookieetc.

formato de mensaje 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

Precauciones

1. Cuando se usa SpringMVC, la solicitud se rechaza java.lang.IllegalArgumentException: The HTTP header line [username : admin] does not conform to RFC 7230. The request has been rejected.porque userNameestos
   encabezados de solicitud personalizados no cumplen con los estándares, lo que se puede resolver agregando configuración.RFC 7230reject-illegal-header: off

application.ymlAgregado:

server:
  port: 80
  tomcat:
    reject-illegal-header: off

Código de interfaz de backend

La obtención Headerde parámetros se puede obtener request.getHeader(header)de forma secuencial o @CookieValuemediante@RequestHeader

    @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();
    }

Código de interfaz de llamada front-end

    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();
    }

Precauciones:

1. CookieEl navegador lo agrega automáticamente, no es necesario request.setRequestHeader("userName","admin")agregarlo.

Resumir

Este artículo resume los métodos comunes para pasar parámetros a través del protocolo de interfaz HTTP en el front-end y back-end, y demuestra el formato del mensaje, el método de adquisición de back-end y el método de llamada de front-end de cada parámetro del protocolo HTTP, back-end JAVA. código y código JS front-end. Por supuesto, también hay algunos métodos de transmisión de parámetros más avanzados, como protocolos de inserción en tiempo real basados ​​​​en websocket, sseetc.HTTP