Travailler avec des requêtes HTTP dans Spring Boot
Hello world!
The main goal of this article is to help beginner developers handle HTTP requests in Spring Boot.
?In the examples I do not cover all the code required for the MVC app, just some parts to demonstrate the difference in data processing.
Recently, I’ve been working on an engineering project with other students in my class. It introduced us to a new technology stack, as we were required to build upon an “old” codebase. The codebase included Java, Spring Boot, and Thymeleaf. The project's aim was to create a clone of a popular social network.
The core functionality was fairly typical: users can create posts, and others can comment on or like those posts.
To add some visual dynamism, we decided to combine Thymeleaf with JavaScript. This way, when a post is displayed on the page, users can click to like or comment, and the changes will be processed in the back end. At this point, we needed a JavaScript function to send requests to the server for all the standard CRUD operations.
The question was: how do we properly pass data to the server using POST, PUT, or DELETE methods? GET is more or less clear, so I skip examples with GET.
Here are the possible ways.
URL Parameters (PathVariable)
URL Example: HTTP://myapp.com/posts/1
Suitable for: DELETE, PUT
Cases: You work with a specific entity on a back end - a single post in my examples.
Annotation Example:
@DeleteMapping("/posts/{post_id}")
public ResponseEntity<String> deletePost(@PathVariable("post_id") Long post_id) {
// Some logic here...
return ResponseEntity.ok("Deleted successfully");
}
Example of a corresponding JS code:
// Some pre-logic here to pass postId to the function,
// or you can use const deletePost = async(postId)=>{} to pass postId directly
const deletePost = async () => {
// Some pre-checks and error handling go here...
const requestOption = {
method:'DELETE',
headers:{
'Content-type':'application/json'
}
};
await fetch(`/posts/${postId}`, requestOptions);
// Some post-checks and error handling go here...
}
Form data (RequestParam)
URL Example: HTTP://myapp.com/posts or HTTP://myapp.com/posts/1 for editing
Suitable for: PUT, POST
Cases: You are creating or updating an entity with one or two parameters. In my example, it’s a post content (a text message).
Annotation Example:
@PutMapping("/posts/{post_id}")
public ResponseEntity<String> editPost(@PathVariable("post_id") Long post_id, @RequestParam("content") String content) {
// Some logic goes here...
return ResponseEntity.ok("Post updated successfully");
}
Example of a corresponding JS code:
// Some pre-logic here to pass postId and content to the function,
// or you can use const deletePost = async(postId, updatedContent)=>{} to pass
// them directly directly
const updatePost = async ()=> {
// Some pre-checks and error handling go here...
const formData = new FormData();
formData.append("content",updatedContent);
requestOptions = {
method:'PUT',
body: formData
};
await fetch(`/posts/${postId}`,requestOptions);
// Some post-checks and error handling go here...
}
JSON Body (RequestBody)
Suitable for: PUT, POST
Cases: You are creating or updating a complex entity (e.g. object with 3 or more parameters).
Annotation Example:
@PutMapping("/posts/{post_id}")
public ResponseEntity<String> editPost(@PathVariable("post_id") Long post_id, @RequestBody Post post) {
// Some logic goes here...
// It requires the whole object to be passed.
// After that it's possible to access values via getters of your object's model
return ResponseEntity.ok("Post updated successfully");
}
Example of a corresponding JS code:
const updatePost = async ()=> {
// Some pre-checks and error handling go here...
requestOptions = {
method:'PUT',
headers: {
'Content-type':'application/json'
},
body: JSON.stringify({'content':updatedContent})
};
await fetch(`/posts/${postId}`,requestOptions);
// Some post-checks and error handling go here...
}
This is it. Hope it will be helpful.
Cheers!
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Appareils et contextes avancés JavaScript
Jul 24, 2025 am 12:42 AM
La portée de JavaScript détermine la portée d'accessibilité des variables, qui sont divisées en étendue globale, fonction et au niveau du bloc; Le contexte détermine la direction de cela et dépend de la méthode d'appel de fonction. 1. Les étendues incluent la portée globale (accessible n'importe où), la portée de la fonction (valide uniquement dans la fonction) et la portée au niveau du bloc (LET et const sont valides dans {}). 2. Le contexte d'exécution contient l'objet variable, la chaîne de portée et les valeurs de cela. Cela pointe vers global ou non défini dans la fonction ordinaire, l'appel de méthode pointe vers l'objet d'appel, le constructeur pointe vers le nouvel objet, et peut également être explicitement spécifié par appel / application / liaison. 3. La fermeture fait référence aux fonctions accédant et en se souvenant des variables de portée externes. Ils sont souvent utilisés pour l'encapsulation et le cache, mais peuvent provoquer
Construire des iframes de sable à sable sécurisé avec JavaScript
Jul 16, 2025 am 02:33 AM
Pour utiliser JavaScript pour créer un sandbox sable sécurisé iframe, utilisez d'abord l'attribut de bac à sable de HTML pour limiter le comportement IFRAME, tel que l'interdiction de l'exécution du script, des fenêtres contextuelles et de la soumission de formulaire; Deuxièmement, en ajoutant des jetons spécifiques tels que des scénaristes pour assouplir les autorisations au besoin; Combinez ensuite PostMessage () pour obtenir une communication inter-domaine sécurisée, tout en vérifiant strictement les sources et les données de messages; Enfin, évitez les erreurs de configuration courantes, telles que ne pas vérifier la source, ne pas configurer CSP, etc., et effectuer des tests de sécurité avant de se rendre en ligne.
Comment obtenir la valeur d'un bouton radio sélectionné avec JS?
Jul 18, 2025 am 04:17 AM
Il existe deux méthodes de base pour obtenir la valeur du bouton radio sélectionné. 1. Utilisez QuerySelector pour obtenir directement l'élément sélectionné, et utilisez l'entrée [name = "Votre nom-radio"]: Sélecteur vérifié pour obtenir l'élément sélectionné et lire son attribut de valeur. Il convient aux navigateurs modernes et a un code concis; 2. Utilisez Document.PetelementsByName pour traverser et trouver la première radio vérifiée via la boucle Nodelist et obtenir sa valeur, qui convient aux scénarios compatibles avec les anciens navigateurs ou nécessitent un contrôle manuel du processus; De plus, vous devez faire attention à l'orthographe de l'attribut de nom, à la gestion des situations non sélectionnées et à un chargement dynamique du contenu
Maîtriser les modèles de concurrence JavaScript: les travailleurs du web contre les threads Java
Jul 25, 2025 am 04:31 AM
Il existe une différence essentielle entre les travailleurs Web de JavaScript et Javathreads dans un traitement simultané. 1. JavaScript adopte un modèle unique. WebWorkers est un fil indépendant fourni par le navigateur. Il convient pour effectuer des tâches longues qui ne bloquent pas l'interface utilisateur, mais ne peuvent pas utiliser le DOM; 2. Java prend en charge le multithreading réel à partir du niveau de la langue, créé via la classe de threads, adapté à un traitement simultanée complexe et côté serveur; 3. Les travailleurs Web utilisent PostMessage () pour communiquer avec le fil principal, qui est hautement sécurisé et isolé; Les threads Java peuvent partager la mémoire, de sorte que les problèmes de synchronisation doivent être prêts à prêter attention; 4. Les travailleurs Web sont plus adaptés à l'informatique parallèle frontale, comme le traitement d'image, et
API de composition Vue 3 Vs API Options: une comparaison détaillée
Jul 25, 2025 am 03:46 AM
CompositionAPI dans Vue3 convient plus à la logique complexe et à la dérivation de type, et OptionsAPI convient aux scénarios et débutants simples; 1. OptionsAPI organise le code en fonction d'options telles que les données et les méthodes, et a une structure claire mais les composants complexes sont fragmentés; 2. CompositionAPI utilise la configuration pour concentrer la logique liée, ce qui est propice à la maintenance et à la réutilisation; 3. CompositionAPI réalise la réutilisation logique sans conflit et paramétrisable par le biais de fonctions composables, ce qui est mieux que le mixin; 4. CompositionAPI a une meilleure prise en charge de la dérivation de type dactylographiée et de type plus précise; 5. Il n'y a pas de différence significative dans le volume de performances et d'emballage des deux; 6.
Techniques de débogage avancées pour les applications JavaScript complexes, en utilisant les principes du débogueur Java
Jul 17, 2025 am 01:42 AM
Le débogage des applications JavaScript complexes nécessite des outils d'utilisation systématiques. 1. Définissez des points d'arrêt et des points d'arrêt conditionnels pour intercepter les processus suspects, tels qu'avant l'entrée de la fonction, la boucle, le rappel asynchrone et le filtre en fonction des conditions; 2. Activer la fonction BlackBoxing pour bloquer les interférences de bibliothèque tierce; 3. Utiliser les déclarations du débogueur pour contrôler l'entrée de débogage en fonction du jugement environnemental; 4. Tracez le lien d'appel via CallStack, analysez le chemin d'exécution et l'état de la variable, localisez ainsi efficacement la cause profonde du problème.
Exploration des règles de coercition de type en javascript
Jul 21, 2025 am 02:31 AM
La coulée de type est le comportement de la conversion automatique d'un type de valeur en un autre type en JavaScript. Les scénarios courants incluent: 1. Lorsque vous utilisez des opérateurs, si un côté est une chaîne, l'autre côté sera également converti en une chaîne, comme '5' 5. Le résultat est "55"; 2. Dans le contexte booléen, les valeurs non cooliennes seront implicitement converties en types booléens, tels que des chaînes vides, 0, nuls, non définies, etc., qui sont considérées comme fausses; 3. Null participe aux opérations numériques et sera convertie en 0, et non défini sera converti en NAN; 4. Les problèmes causés par la conversion implicite peuvent être évitées grâce à des fonctions de conversion explicites telles que Number (), String () et Boolean (). La maîtrise de ces règles aide
Comment formater une date dans JS?
Jul 20, 2025 am 12:10 AM
Les dates de format dans JavaScript peuvent être implémentées via des méthodes natives ou des bibliothèques tierces. 1. Utilisez des coutures d'objets à date native: Obtenez la partie de date via Gettillyar, Getmonth, GetDate et d'autres méthodes, et les épisser manuellement dans des formats Yyyy-MM et d'autres, qui conviennent aux besoins légers et ne reposent pas sur des bibliothèques tierces; 2. Utilisez la méthode TolocaleDateString: vous pouvez sortir tel que le format mm / dd / yyyy en fonction des habitudes locales, en charge multilingue, mais le format peut être incohérent en raison de différents environnements; 3. Utilisez des bibliothèques tierces telles que Day.js ou Date-FNS: Fournit une syntaxe concise et des fonctions riches, adaptées aux opérations fréquentes ou lorsque l'extensibilité est requise, comme DayJS ()
