Quelle est la spécification de transmission de paramètres pour Java axios et la séparation front-end et back-end Spring ?

1. La méthode de transfert de paramètres axios correspondant à l'annotation @RequestParam

Prenons le code Java Spring suivant comme exemple. L'interface utilise le protocole POST et les paramètres qui doivent être acceptés sont tsCode, indexCols et table. Pour cette interface HTTP Spring, comment axios doit-il transmettre les paramètres ? Combien de méthodes existe-t-il ? Présentons-les un par un.

@PostMapping("/line")
public List<? extends BaseEntity> commonEChart(@RequestParam String tsCode,
                                     @RequestParam String indexCols,
                                     @RequestParam String table){

Passage du paramètre 1.1.params (recommandé)

Utilisez les paramètres de l'instance axios pour transférer les paramètres, et les paramètres params seront formatés au format x-www-form-urlencoded, qui correspond aux paramètres back-end un par un. Le transfert des paramètres a réussi. C’est aussi la méthode de passage des paramètres que je recommande à tout le monde !

return request({
    url: '/chart/line',
    method: 'post',
    params: {   //注意这里的key是params
        tsCode,
        indexCols,
        table
    }
})

1.2. Passage des paramètres FormData

Vous pouvez également utiliser l'objet FormData de js pour le formatage des paramètres, et vous pouvez également utiliser correctement l'annotation @RequestParam sur le backend Spring pour recevoir les paramètres. @RequestParam注解进行参数接收。

let params = new FormData();
params.append('tsCode', tsCode);
params.append('indexCols', indexCols);
params.append('table', table);
return request({
    url: '/chart/line',
    method: 'post',
    data: params   //注意这里的key是data
})

1.3.qs.stringfy传参

还可以使用qs.stringfy进行参数格式化，同样可以在Spring后端正确的使用@RequestParam注解进行参数接收。

import qs from "qs";

return request({
    url: '/chart/line',
    method: 'post',
    data: qs.stringify({    //注意这里的key是data
        tsCode,
        indexCols,
        table
    })
})

需要注意的是使用这种方法，需要手动设置header(Content-Type)

const service = axios.create({
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    }
});

二、@RequestBody的axios传参方法

java代码部分如下所示，DemoModel类是一个实体类，包含名称tsCode,indexCols,table三个字符串成员变量。接收到的JSON格式参数会自动为demo对象的成员变量赋值。

@PostMapping("/line")
public List<? extends BaseEntity> commonEChart(@RequestBody DemoModel demo){

@RequestBody

return request({
    url: '/chart/line',
    method: 'post',
    data: {    //注意这里的key是data
        tsCode,
        indexCols,
        table
    }
})

Passage du paramètre 1.3.qs.stringfy🎜🎜Vous pouvez également utiliser qs.stringfy pour le formatage des paramètres, et vous pouvez également utiliser correctement l'annotation @RequestParam sur le Spring backend. Paramètres reçus. 🎜rrreee🎜Il convient de noter qu'en utilisant cette méthode, vous devez définir manuellement l'en-tête (Content-Type)🎜rrreee🎜2 La méthode de transmission du paramètre axios de @RequestBody🎜🎜La partie du code Java est la suivante. classe d'entité, y compris Il existe trois variables membres de chaîne nommées tsCode, indexCols et table. Les paramètres au format JSON reçus attribueront automatiquement des valeurs aux variables membres de l'objet de démonstration. 🎜rrreee🎜@RequestBody annotation, qui reçoit les données au format JSON par défaut. Dans axios, le passage des paramètres de données par défaut utilisera le format de données JSON par défaut, donc aucun traitement spécial supplémentaire n'est requis. 🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!