Ajouter des vues React pour personnage
Pour ajouter des vues pour les entités Personnage, Inventaire et Objet dans une application Spring MVC, vous pouvez suivre les étapes suivantes:
-
Créez des fichiers de vue pour chaque entité dans le répertoire approprié de votre application. Par exemple, si vous utilisez JSP comme technologie de vue, vous pouvez créer des fichiers JSP pour chaque entité dans le répertoire
/WEB-INF/views. -
Dans vos contrôleurs, renvoyez les noms de vue appropriés pour les demandes entrantes. Le résolveur de vue que vous avez configuré sera utilisé pour mapper les noms de vue aux fichiers de vue réels.
Voici un exemple de contrôleur qui renvoie des vues pour l’entité Personnage:
@Controller
@RequestMapping("/api/personnages")
public class PersonnageController {
@Autowired
private PersonnageService personnageService;
@GetMapping
public String listPersonnages(Model model) {
List<Personnage> personnages = personnageService.findAll();
model.addAttribute("personnages", personnages);
return "personnages/list";
}
@GetMapping("/{id}")
public String showPersonnage(@PathVariable Long id, Model model) {
Personnage personnage = personnageService.findById(id);
model.addAttribute("personnage", personnage);
return "personnages/show";
}
}
Dans cet exemple, nous avons créé une classe PersonnageController annotée avec @Controller et @RequestMapping pour indiquer qu’il s’agit d’un contrôleur et pour mapper les demandes à l’URI /api/personnages. Le contrôleur utilise l’annotation @Autowired pour injecter une instance de PersonnageService dans la classe, qui est utilisée pour effectuer des opérations CRUD (Create, Read, Update, Delete) sur les données des personnages.
Le contrôleur définit plusieurs méthodes de gestionnaire pour gérer les différentes demandes liées aux personnages:
listPersonnages(Model model): Cette méthode est annotée avec@GetMappingpour mapper les demandes GET à l’URI/personnagesà cette méthode. La méthode renvoie une vue nomméepersonnages/listqui affiche une liste de tous les personnages.showPersonnage(@PathVariable Long id, Model model): Cette méthode est annotée avec@GetMapping("/{id}")pour mapper les demandes GET à l’URI/personnages/{id}à cette méthode. La méthode prend en paramètre un identifiant de personnage et renvoie une vue nomméepersonnages/showqui affiche les détails du personnage correspondant.
Vous pouvez suivre la même approche pour créer des vues et des contrôleurs pour les entités Inventaire et Objet.
Vue React
Voici un exemple de code pour une vue React qui affiche une liste de personnages et les détails d’un personnage sélectionné:
import React, { useState, useEffect } from 'react';
function PersonnagesList() {
const [personnages, setPersonnages] = useState([]);
const [selectedPersonnage, setSelectedPersonnage] = useState(null);
useEffect(() => {
fetch('/api/personnages')
.then(response => response.json())
.then(data => setPersonnages(data));
}, []);
function handlePersonnageClick(id) {
fetch(`/api/personnages/${id}`)
.then(response => response.json())
.then(data => setSelectedPersonnage(data));
}
return (
<div>
<h1>Liste des personnages</h1>
<ul>
{personnages.map(personnage => (
<li key={personnage.id} onClick={() => handlePersonnageClick(personnage.id)}>
{personnage.nom}
</li>
))}
</ul>
{selectedPersonnage && (
<div>
<h2>Détails du personnage</h2>
<p>Nom: {selectedPersonnage.nom}</p>
<p>Age: {selectedPersonnage.age}</p>
{/* Ajouter d'autres détails du personnage ici */}
</div>
)}
</div>
);
}
export default PersonnagesList;
Ce code crée un composant React PersonnagesList qui utilise l’API Fetch pour récupérer la liste des personnages et les détails d’un personnage sélectionné à partir des points de terminaison /api/personnages et /api/personnages/{id} fournis par le contrôleur Spring. Le composant utilise les hooks useState et useEffect pour gérer l’état local et les effets secondaires.
Vous pouvez utiliser ce code comme point de départ pour créer votre propre vue React pour le contrôleur Spring fourni. Si vous avez besoin d’aide pour intégrer cette vue dans votre application Spring, je vous recommande de consulter les ressources suivantes:
Créer les vues avec React.
Avec Spring Framework, vous pouvez utiliser React pour créer des vues au lieu de JSP. React est une bibliothèque JavaScript populaire pour la création d’interfaces utilisateur complexes et interactives. Vous pouvez intégrer React dans une application Spring en utilisant des outils tels que create-react-app et frontend-maven-plugin pour créer et construire votre application React avec Maven.
How To Setup Spring Boot With React | by Martina Carter | JavaScript in Plain English
Getting Started | React.js and Spring Data REST
Vue React pour @GetMapping("/all")
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const PersonnageList = () => {
// Définit l'état des personnages avec un tableau vide comme valeur initiale
const [personnages, setPersonnages] = useState([]);
// Utilise l'effet pour récupérer les données des personnages à partir de l'API lors du montage du composant
useEffect(() => {
axios.get('/api/personnages/all')
.then(response => setPersonnages(response.data))
.catch(error => console.log(error));
}, []);
// Affiche la liste des personnages
return (
<ul>
{personnages.map(personnage => (
<li key={personnage.id}>
{personnage.nom}
</li>
))}
</ul>
);
};
export default PersonnageList;
Ce code crée un composant React appelé PersonnageList qui affiche une liste de personnages. Le composant utilise l’effet useEffect pour récupérer les données des personnages à partir de l’API /api/personnages/all lors du montage du composant. Les données sont stockées dans l’état personnages à l’aide du hook d’état useState. Le composant affiche ensuite la liste des personnages en utilisant la méthode map pour parcourir le tableau des personnages et créer un élément de liste pour chaque personnage
Vue React pour @GetMapping("/{id}")
import React, { useState, useEffect } from 'react'; // Importe les hooks React useState et useEffect
import axios from 'axios'; // Importe la bibliothèque axios pour effectuer des requêtes HTTP
const PersonnageDetails = ({ id }) => { // Déclare un composant fonctionnel PersonnageDetails qui prend en entrée l'identifiant du personnage à afficher
const [personnage, setPersonnage] = useState(null); // Déclare une variable d'état personnage et sa fonction de mise à jour setPersonnage avec une valeur initiale de null
useEffect(() => { // Utilise l'effet useEffect pour récupérer les données du personnage lors du montage du composant
axios.get(`/api/personnages/${id}`) // Envoie une requête GET à l'API pour récupérer les données du personnage
.then(response => setPersonnage(response.data)) // En cas de succès, met à jour la variable d'état personnage avec les données de réponse
.catch(error => console.log(error)); // En cas d'erreur, affiche l'erreur dans la console
}, [id]); // Spécifie que l'effet doit être exécuté à nouveau si la valeur de id change
return ( // Retourne le JSX à afficher pour ce composant
<div>
{personnage ? ( // Si la variable d'état personnage contient des données, affiche les détails du personnage
<div>
<h2>{personnage.nom}</h2>
{/* Affichez ici d'autres propriétés du personnage selon vos besoins */}
</div>
) : ( // Sinon, affiche un message indiquant que les données sont en cours de chargement
<p>Chargement...</p>
)}
</div>
);
};
export default PersonnageDetails; // Exporte le composant PersonnageDetails par défaut
Ce code crée un composant React appelé PersonnageDetails qui permet à l’utilisateur de visualiser les détails d’un personnage en utilisant son identifiant. Le composant utilise l’effet useEffect pour récupérer les données du personnage à partir de l’API /api/personnages/{id} lors du montage du composant. Les données sont stockées dans l’état personnage à l’aide du hook d’état useState. Le composant affiche ensuite les détails du personnage ou un message indiquant que les données sont en cours de chargement.
Vue React pour @PostMapping
import React, { useState } from 'react'; // Importe les hooks React useState
import axios from 'axios'; // Importe la bibliothèque axios pour effectuer des requêtes HTTP
const PersonnageCreate = () => { // Déclare un composant fonctionnel PersonnageCreate
const [nom, setNom] = useState(''); // Déclare une variable d'état nom et sa fonction de mise à jour setNom avec une valeur initiale de chaîne vide
const handleCreate = () => { // Déclare une fonction handleCreate qui sera appelée lorsque l'utilisateur cliquera sur le bouton de création
axios.post('/api/personnages', { nom }) // Envoie une requête POST à l'API pour créer un nouveau personnage avec le nom fourni
.then(response => console.log(response.data)) // En cas de succès, affiche les données de réponse dans la console
.catch(error => console.log(error)); // En cas d'erreur, affiche l'erreur dans la console
};
return ( // Retourne le JSX à afficher pour ce composant
<div>
<input // Champ de saisie pour permettre à l'utilisateur de saisir le nom du nouveau personnage
type="text"
value={nom}
onChange={e => setNom(e.target.value)} // Met à jour la variable d'état nom lorsque l'utilisateur saisit du texte
placeholder="Nom du personnage"
/>
<button onClick={handleCreate}>Créer</button> // Bouton pour déclencher la création du nouveau personnage
</div>
);
};
export default PersonnageCreate; // Exporte le composant PersonnageCreate par défaut
Ce code crée un composant React appelé PersonnageCreate qui permet à l’utilisateur de créer un nouveau personnage. Le composant utilise un champ de saisie pour permettre à l’utilisateur de saisir le nom du nouveau personnage. Lorsque l’utilisateur clique sur le bouton “Créer”, une requête POST est envoyée à l’API /api/personnages avec le nom pour créer le nouveau personnage.
Vue React pour @DeleteMapping("/{id}")
import React from 'react'; // Importe React
import axios from 'axios'; // Importe la bibliothèque axios pour effectuer des requêtes HTTP
const PersonnageDelete = ({ id }) => { // Déclare un composant fonctionnel PersonnageDelete qui prend en entrée l'identifiant du personnage à supprimer
const handleDelete = () => { // Déclare une fonction handleDelete qui sera appelée lorsque l'utilisateur cliquera sur le bouton de suppression
axios.delete(`/api/personnages/${id}`) // Envoie une requête DELETE à l'API pour supprimer le personnage
.then(response => console.log(response.data)) // En cas de succès, affiche les données de réponse dans la console
.catch(error => console.log(error)); // En cas d'erreur, affiche l'erreur dans la console
};
return ( // Retourne le JSX à afficher pour ce composant
<div>
<button onClick={handleDelete}>Supprimer</button> // Bouton pour déclencher la suppression du personnage
</div>
);
};
export default PersonnageDelete; // Exporte le composant PersonnageDelete par défaut
Ce code crée un composant React appelé PersonnageDelete qui permet à l’utilisateur de supprimer un personnage existant. Lorsque l’utilisateur clique sur le bouton “Supprimer”, une requête DELETE est envoyée à l’API /api/personnages/{id} pour supprimer le personnage.
Vue React pour @GetMapping("/search")
@RestController // Indique que cette classe est un contrôleur REST
@RequestMapping(path="/api/personnages") // Spécifie le chemin de base pour les méthodes de ce contrôleur
public class PersonnageController {
@Autowired // Injecte une instance de PersonnageRepository dans ce contrôleur
private PersonnageRepository personnageRepository;
// Récupère la liste de tous les personnages
@GetMapping("/all")
public List<Personnage> list() {
return (List<Personnage>) personnageRepository.findAll();
}
// Récupère un personnage par son identifiant
@GetMapping("/{id}")
public ResponseEntity<Personnage> get(@PathVariable Long id) {
Optional<Personnage> personnage = personnageRepository.findById(id);
if (personnage.isPresent()) {
return ResponseEntity.ok(personnage.get());
} else {
return ResponseEntity.notFound().build();
}
}
// Crée un nouveau personnage
@PostMapping
public ResponseEntity<Personnage> create(@RequestBody Personnage personnage) {
Personnage savedPersonnage = personnageRepository.save(personnage);
URI location = ServletUriComponentsBuilder.fromCurrentRequest().path("/{id}")
.buildAndExpand(savedPersonnage.getId()).toUri();
return ResponseEntity.created(location).body(savedPersonnage);
}
// Met à jour un personnage existant
@PutMapping("/{id}")
public ResponseEntity<Personnage> update(@PathVariable Long id, @RequestBody Personnage personnage) {
Optional<Personnage> currentPersonnag
Vue React pour @PutMapping("/{id}")
import React, { useState } from 'react'; // Importe les hooks React useState et useEffect
import axios from 'axios'; // Importe la bibliothèque axios pour effectuer des requêtes HTTP
const PersonnageUpdate = ({ id }) => { // Déclare un composant fonctionnel PersonnageUpdate qui prend en entrée l'identifiant du personnage à mettre à jour
const [nom, setNom] = useState(''); // Déclare une variable d'état nom et sa fonction de mise à jour setNom avec une valeur initiale de chaîne vide
const handleUpdate = () => { // Déclare une fonction handleUpdate qui sera appelée lorsque l'utilisateur cliquera sur le bouton de mise à jour
axios.put(`/api/personnages/${id}`, { nom }) // Envoie une requête PUT à l'API pour mettre à jour le personnage avec le nouveau nom
.then(response => console.log(response.data)) // En cas de succès, affiche les données de réponse dans la console
.catch(error => console.log(error)); // En cas d'erreur, affiche l'erreur dans la console
};
return ( // Retourne le JSX à afficher pour ce composant
<div>
<input // Champ de saisie pour permettre à l'utilisateur de saisir le nouveau nom du personnage
type="text"
value={nom}
onChange={e => setNom(e.target.value)} // Met à jour la variable d'état nom lorsque l'utilisateur saisit du texte
placeholder="Nouveau nom"
/>
<button onClick={handleUpdate}>Mettre à jour</button> // Bouton pour déclencher la mise à jour du personnage
</div>
);
};
export default PersonnageUpdate; // Exporte le composant PersonnageUpdate par défaut
Ce code crée un composant React appelé PersonnageUpdate qui permet à l’utilisateur de mettre à jour un personnage existant. Le composant utilise un champ de saisie pour permettre à l’utilisateur de saisir le nouveau nom du personnage. Lorsque l’utilisateur clique sur le bouton “Mettre à jour”, une requête PUT est envoyée à l’API /api/personnages/{id} avec le nouveau nom pour mettre à jour le personnage.