Application CRUD Spring Boot avec Thymeleaf

1. Vue d'ensemble

L'implémentation de couches DAO qui fournissent la fonctionnalité CRUD sur les entités JPA peut être une tâche répétitive et chronophage que nous voulons éviter dans la plupart des cas. Heureusement, Spring Boot facilite la création d'applications CRUD via une couche de référentiels CRUD standard basés sur JPA.

Dans ce didacticiel, nous allons apprendre à développer une application Web CRUD avec Spring Boot et Thymeleaf .

2. Les dépendances de Maven

Dans ce cas, nous nous fierons à spring-boot-starter-parent pour une gestion simple des dépendances, une gestion des versions et une configuration de plug-in. Par conséquent, nous n'avons pas besoin de spécifier les versions des dépendances du projet dans notre fichier pom.xml , sauf pour remplacer la version Java:

 org.springframework.boot spring-boot-starter-parent 2.2.2.RELEASE    org.springframework.boot spring-boot-starter-web   org.springframework.boot spring-boot-starter-thymeleaf   org.springframework.boot spring-boot-starter-data-jpa   com.h2database h2   

3. La couche de domaine

Avec toutes les dépendances de projet déjà en place, implémentons maintenant une couche de domaine naïve.

Par souci de simplicité, cette couche comprendra une seule classe qui sera responsable de la modélisation des entités utilisateur :

@Entity public class User { @Id @GeneratedValue(strategy = GenerationType.AUTO) private long id; @NotBlank(message = "Name is mandatory") private String name; @NotBlank(message = "Email is mandatory") private String email; // standard constructors / setters / getters / toString }

Gardons à l'esprit que nous avons annoté la classe avec l' annotation @Entity . Par conséquent, l'implémentation JPA, qui est Hibernate, dans ce cas, pourra effectuer des opérations CRUD sur les entités du domaine. Pour un guide d'introduction à Hibernate, visitez notre tutoriel sur Hibernate 5 avec Spring.

De plus, nous avons contraint les champs de nom et d' e - mail avec la contrainte @NotBlank . Cela implique que nous pouvons utiliser Hibernate Validator pour valider les champs contraints avant de persister ou de mettre à jour une entité dans la base de données.

Pour les bases à ce sujet, consultez notre didacticiel associé sur la validation de bean.

4. La couche du référentiel

À ce stade, notre exemple d'application Web ne fait rien. Mais c'est sur le point de changer.

Spring Data JPA nous permet d'implémenter des référentiels basés sur JPA (un nom sophistiqué pour l'implémentation du modèle DAO) avec un minimum de tracas .

Spring Data JPA est un composant clé de spring-boot-starter-data-jpa de Spring Boot qui facilite l'ajout de fonctionnalités CRUD via une puissante couche d'abstraction placée au-dessus d'une implémentation JPA. Cette couche d'abstraction nous permet d'accéder à la couche de persistance sans avoir à fournir nos propres implémentations DAO à partir de zéro.

Pour fournir à notre application les fonctionnalités CRUD de base sur les objets User , tout ce que nous devons faire est d'étendre l' interface CrudRepository :

@Repository public interface UserRepository extends CrudRepository {}

Et c'est tout! En étendant simplement l' interface CrudRepository , Spring Data JPA fournira des implémentations pour les méthodes CRUD du référentiel pour nous.

5. La couche contrôleur

Grâce à la couche d'abstraction que spring-boot-starter-data-jpa place au-dessus de l'implémentation JPA sous-jacente, nous pouvons facilement ajouter des fonctionnalités CRUD à notre application Web via un niveau Web de base .

Dans notre cas, une seule classe de contrôleur suffit pour gérer les requêtes HTTP GET et POST, puis les mapper aux appels de notre implémentation UserRepository .

La classe de contrôleur repose sur certaines des fonctionnalités clés de Spring MVC. Pour un guide détaillé sur Spring MVC, consultez notre tutoriel Spring MVC.

Commençons par les méthodes showSignUpForm () et addUser () du contrôleur .

Le premier affichera le formulaire d'inscription de l'utilisateur, tandis que le second conservera une nouvelle entité dans la base de données après avoir validé les champs contraints.

Si l'entité ne réussit pas la validation, le formulaire d'inscription sera de nouveau affiché. Sinon, une fois l'entité sauvegardée, la liste des entités persistantes sera mise à jour dans la vue correspondante:

@Controller public class UserController { @GetMapping("/signup") public String showSignUpForm(User user) { return "add-user"; } @PostMapping("/adduser") public String addUser(@Valid User user, BindingResult result, Model model) { if (result.hasErrors()) { return "add-user"; } userRepository.save(user); return "redirect:/index"; } // additional CRUD methods }

Nous aurons également besoin d'un mappage pour l' URL / index :

@GetMapping("/index") public String showUserList(Model model) { model.addAttribute("users", userRepository.findAll()); return "index"; }

Dans le UserController, nous aurons également la méthode showUpdateForm () qui est chargée de récupérer l' entité User qui correspond à l' id fourni dans la base de données.

Si l'entité existe , il sera transmis comme un attribut de modèle à la vue sous forme de mise à jour, d' où le formulaire peut être rempli avec les valeurs des nom et email champs:

@GetMapping("/edit/{id}") public String showUpdateForm(@PathVariable("id") long id, Model model) { User user = userRepository.findById(id) .orElseThrow(() -> new IllegalArgumentException("Invalid user Id:" + id)); model.addAttribute("user", user); return "update-user"; } 

Enfin, nous avons les méthodes updateUser () et deleteUser () dans la classe UserController .

Le premier conservera l'entité mise à jour dans la base de données, tandis que le dernier supprimera l'entité donnée.

Dans les deux cas, la liste des entités persistantes sera mise à jour en conséquence:

@PostMapping("/update/{id}") public String updateUser(@PathVariable("id") long id, @Valid User user, BindingResult result, Model model) { if (result.hasErrors()) { user.setId(id); return "update-user"; } userRepository.save(user); return "redirect:/index"; } @GetMapping("/delete/{id}") public String deleteUser(@PathVariable("id") long id, Model model) { User user = userRepository.findById(id) .orElseThrow(() -> new IllegalArgumentException("Invalid user Id:" + id)); userRepository.delete(user); return "redirect:/index"; }

6. Le calque de vue

À ce stade, nous avons implémenté une classe de contrôleur fonctionnel qui effectue des opérations CRUD sur les entités utilisateur . Même ainsi, il manque toujours un composant dans ce schéma: la couche de vue.

Dans le dossier src / main / resources / templates , nous devons créer les modèles HTML requis pour afficher le formulaire d'inscription, le formulaire de mise à jour et afficher la liste des entités utilisateur persistantes ,

Comme indiqué dans l'introduction, nous utiliserons Thymeleaf comme moteur de modèle sous-jacent pour analyser les fichiers de modèle.

Voici la section pertinente du fichier add-user.html :

 Name   Email    

Remarquez comment nous avons utilisé l' expression d'URL @ {/ adduser} pour spécifier l' attribut d' action du formulaire et les expressions de variable $ {} pour incorporer du contenu dynamique dans le modèle, comme les valeurs des champs de nom et d' adresse e - mail et la post-validation. des erreurs .

Semblable à add-user.html , voici à quoi ressemble le modèle update-user.html :

 Name   Email    

Enfin, nous avons le fichier index.html qui affiche la liste des entités persistantes ainsi que les liens pour modifier et supprimer celles existantes:

No users yet!

Users

Name Email Edit Delete
Edit Delete

Add a new user

Par souci de simplicité, les modèles semblent plutôt squelettiques et ne fournissent que les fonctionnalités requises sans ajouter de produits cosmétiques inutiles.

Pour donner aux modèles un aspect amélioré et accrocheur sans passer trop de temps sur HTML / CSS, nous pouvons facilement utiliser un kit d'interface utilisateur Twitter Bootstrap gratuit, comme Shards.

7. Exécution de l'application

Enfin, définissons le point d'entrée de l'application. Comme la plupart des applications Spring Boot, nous pouvons le faire avec une ancienne méthode main () :

@SpringBootApplication public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } }

Maintenant, frappons "Exécuter" dans notre IDE, puis ouvrons notre navigateur et pointez-le vers // localhost: 8080 .

Si la compilation a réussi, nous devrions voir un tableau de bord utilisateur CRUD de base avec des liens pour ajouter de nouvelles entités et pour modifier et supprimer celles existantes.

8. Conclusion

Dans ce didacticiel, nous avons appris à créer une application Web CRUD de base avec Spring Boot et Thymeleaf.

Comme d'habitude, tous les exemples de code présentés dans l'article sont disponibles à l'adresse over sur GitHub.