Introduction à Maven, Spring, MySQL, Hibernate et la première application CRUD (partie 4)

Bon après-midi. Dans cet article, j'aimerais partager ma première rencontre avec des éléments comme Maven, Spring, Hibernate, MySQL et Tomcat en train de créer une application CRUD simple. C'est la dernière partie. L'article est principalement destiné à ceux qui ont déjà terminé 30 à 40 niveaux ici, mais qui ne se sont pas encore aventurés au-delà du Java pur et qui commencent tout juste (ou sont sur le point de commencer) à entrer dans le monde ouvert avec toutes ces technologies, frameworks et autres inconnus. mots. Il s'agit de la dernière quatrième partie de l'article « Introduction à Maven, Spring, MySQL, Hibernate et à la première application CRUD ». Les parties précédentes peuvent être consultées en suivant les liens :

• Introduction à Maven, Spring, MySQL, Hibernate et la première application CRUD (partie 1)
• Introduction à Maven, Spring, MySQL, Hibernate et la première application CRUD (partie 2)
• Introduction à Maven, Spring, MySQL, Hibernate et à la première application CRUD (partie 3)

Contenu:

• Ressources de conception et Web
• Pagination
• Conclusion

Ressources de conception et Web

Notre application fonctionne, mais vous ne pouvez pas la regarder sans larmes, sans inscriptions ennuyeuses, sans liens laids, sans fond blanc vide. Nous devons résoudre ce problème et ajouter différentes beautés. Comment faisons-nous cela? Eh bien, tout d’abord, vous pouvez simplement jouer avec les pages et faire toutes sortes de choses en utilisant les capacités du HTML . Mais si vous essayez de modifier les arrière-plans, les couleurs, les tailles, la disposition des éléments, etc. en utilisant uniquement HTML. et ainsi de suite. à la fin, vous pouvez créer un tel désordre dans la page que vous ne pourrez plus rien y comprendre plus tard. Et de plus, les options de conception HTML sont assez limitées. Il est préférable d'utiliser du CSS (Cascading Style Sheets) pour cela . Ensuite, tout ce qui concerne le design peut être rassemblé en un seul endroit, puis appliqué à l'élément souhaité de la page. Le code CSS peut être écrit directement sur la page JSP dans une balise spéciale, mais il est beaucoup plus pratique de le placer dans un fichier séparé, puis de l'appliquer simplement aux pages nécessaires. Pour placer des fichiers avec des styles et d'autres ressources Web statiques, nous allons créer un répertoire séparé dans webapp . Afin de ne pas confondre les ressources Web avec les ressources régulières (où nous avons db.properties ), appelons simplement ce répertoire res et plaçons-y tous les fichiers CSS, images, etc. : Pour utiliser ces fichiers, nous devons spécifier leur emplacement dans la configuration. Allons à notre classe WebConfig. Auparavant, nous utilisions l'annotation @EnableWebMvcpour ne rien configurer, mais simplement utiliser la configuration par défaut. Mais maintenant, il faut configurer quelque chose. Pour ce faire, nous utilisons l'interface WebMvcConfigurer, qui permet de remplacer les méthodes de configuration. Que. nous pouvons utiliser la configuration par défaut, mais en même temps personnaliser certains aspects pour nous-mêmes. Dans ce cas addResourceHandlers, nous avons besoin d’une méthode avec laquelle nous indiquons l’emplacement des ressources Web statiques. Juste au cas où, la classe entière finirait par ressembler à ceci :

package testgroup.filmography.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.view.InternalResourceViewResolver;

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "testgroup.filmography")
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/res/**").addResourceLocations("/res/");
    }

    @Bean
    ViewResolver viewResolver() {
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        viewResolver.setPrefix("/WEB-INF/pages/");
        viewResolver.setSuffix(".jsp");
        return viewResolver;
    }
}

Maintenant, pour utiliser notre CSS sur la page, vous devez créer un lien vers celui-ci à l'intérieur de la balisehead :

<head>
    <link href="<c:url value="/res/style.css"/>" rel="stylesheet" type="text/css"/>
</head>

Ajoutez simplement cette ligne et créez, par exemple, ce simple fichier CSS :

table {
    border-spacing: 0 10px;
    font:  bold 100% Georgia, serif;
    margin: 40px auto;
    text-shadow: 5px 5px 5px #3F3F7F;
    background: #B1B9D9;
    text-align: center;
    vertical-align: middle;
    width: 50%;
    border: 10px solid blue;
}

Et cela va complètement changer notre tableau (ça a l'air stupide, bien sûr, mais c'est comme ça, par exemple) : Bon, je pense qu'il n'est pas nécessaire de parler en détail du CSS, tout est assez simple. Sur Internet, vous pouvez trouver de nombreuses options toutes faites pour concevoir des tableaux et des formulaires. Mais il vaut mieux, bien sûr, faire le design vous-même, vous n'avez pas besoin d'être designer, après tout, ce n'est pas une sorte de site compliqué. Même quelques heures après la première connaissance suffiront à créer un design assez beau et soigné pour une page aussi simple. De plus, Internet regorge de toutes sortes de leçons, d'exemples, il existe des sites spéciaux où vous pouvez simultanément éditer du HTML, du CSS sur un seul écran et voir immédiatement à quoi tout cela ressemble. Avec un peu de pratique, vous pouvez créer un véritable art. Certes, il ne faut pas trop se laisser emporter ici non plus (à moins, bien sûr, que vous envisagiez de devenir designer), sinon le design est une telle chose, vous pouvez rester coincé ici pendant très longtemps. Quand j’ai commencé à comprendre CSS, je suis resté bloqué. Je voulais tout essayer, chaque propriété, tordre quelque chose, le bricoler, expérimenter, prendre des pages de certains sites et les refaire au-delà de toute reconnaissance. Je me suis probablement amusé avec ce jouet pendant une semaine, sans rien faire d'autre, jusqu'à ce qu'il me lâche :) Eh bien, en général, bien sûr, il ne faut pas en faire trop et faire un miracle coloré incompréhensible, il faut le faire simplement et avec goût. La seule chose qui mérite d'être notée. Vous devez comprendre que CSS est une description du design et que HTML est un balisage . Vous ne devriez pas essayer de tout faire avec CSS ; certains aspects seront très difficiles à faire, et d’autres seront tout simplement impossibles, alors qu’en HTML, cela se fait avec quelques lignes supplémentaires, ou même avec un seul attribut dans une balise. Vous devez les combiner, créer toutes sortes de couleurs, d'arrière-plans, de polices en CSS et si, par exemple, vous devez combiner quelques cellules de tableau, il est plus facile d'utiliser les outils HTML. Eh bien, par exemple, voici ce que j'ai pu faire avec les pages en quelques heures à jouer avec CSS et HTML (je n'entrerai pas dans les détails ici sur le désordre que j'ai fait pour y parvenir, à la fin il y aura un lien vers le GitHub de ce projet où vous pouvez regarder) : Bien sûr, je ne sais pas avec quelle compétence j'ai tout fait là-bas, mais étant donné que j'ai vu CSS pour la première fois une semaine auparavant, je pense que cela s'est plutôt bien passé.

Pagination

Maintenant, tout fonctionne, ça a l'air bien, mais il n'y a jusqu'à présent que quelques enregistrements dans le tableau. Et s'il y avait une centaine de films dedans, ou un millier ? Ce n'est pas très pratique de faire défiler une liste aussi longue. C'est beaucoup plus pratique lorsque la liste est affichée en pages de 10 entrées, par exemple. Par conséquent, nous allons maintenant essayer d'implémenter le fractionnement de la liste en pages (parfois également appelé « pagination » ou « pagination » ( pagination anglaise )). Cela peut se faire de différentes façons. Par exemple, vous pouvez transférer la liste complète vers une page jsp et y créer un tableau pour le nombre d'enregistrements requis. Ou, par exemple, vous pouvez extraire les enregistrements requis de la liste générale du service, puis envoyer cette mini-liste vers une page jsp pour l'afficher. Mais il est bien sûr préférable de le faire au niveau de la base de données. L’idée n’est pas de prendre une liste complète de la base de données puis de la diviser en morceaux, mais d’obtenir dans un premier temps l’élément requis de la base de données sans toucher à tout le reste. Après tout, pourquoi devons-nous extraire simultanément les centaines ou les milliers d'enregistrements de la base de données, si celui dont nous avons besoin figure dans le top dix, il est préférable de n'extraire que celui-ci. Allons dans DAO et ajoutons allFilmsun paramètre à la méthode int page, qui sera responsable du numéro de page (dans le service, bien sûr, nous faisons de même). Et modifions un peu la mise en œuvre de cette méthode : si auparavant nous retirions toute la liste, maintenant nous n'en retirerons qu'une partie. setFirstResultLes méthodes (par quelle ligne du tableau commencer) et setMaxResults(combien d'enregistrements afficher) nous aideront à cela :

@SuppressWarnings("unchecked")
public List<Film> allFilms(int page) {
    Session session = sessionFactory.getCurrentSession();
    return session.createQuery("from Film").setFirstResult(10 * (page - 1)).setMaxResults(10).list();
}

Ceux. si c'est la 1ère page, on affiche au maximum 10 enregistrements à partir de la 0ème ; s'il s'agit de la 5ème page, alors 10 enregistrements à partir de la 40ème (n'oubliez pas que la numérotation dans la base de données commence à 0). Nous créerons également une méthode qui renverra le nombre d'enregistrements dans la table. Nous en aurons besoin pour connaître le nombre de toutes les pages et créer des liens pour elles sur notre page jsp :

public int filmsCount() {
     Session session = sessionFactory.getCurrentSession();
     return session.createQuery("select count(*) from Film", Number.class).getSingleResult().intValue();
 }

En utilisant une telle requête, nous obtiendrons le nombre de tous les enregistrements de la table (en tant que intvaleur) sans extraire les enregistrements eux-mêmes. Passons maintenant au contrôleur et travaillons sur la méthode qui renvoie la page principale avec une liste de films :

@RequestMapping(value = "/", method = RequestMethod.GET)
public ModelAndView allFilms(@RequestParam(defaultValue = "1") int page) {
    List&ltFilm> films = filmService.allFilms(page);
    int filmsCount = filmService.filmsCount();
    int pagesCount = (filmsCount + 9)/10;
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("films");
    modelAndView.addObject("page", page);
    modelAndView.addObject("filmsList", films);
    modelAndView.addObject("filmsCount", filmsCount);
    modelAndView.addObject("pagesCount", pagesCount);
    return modelAndView;
}

Une nouvelle annotation est apparue ici @RequestParam, qui indique que nous obtenons cette valeur à partir d'un paramètre de requête. Maintenant, si nous allons à une adresse avec un paramètre, par exemple http://localhost:8080/ ?page=4 , nous obtiendrons en conséquence la 4ème page. Nous définissons la valeur par défaut sur " 1 " afin qu'au démarrage de l'application, lorsque nous accédons à une adresse sans le paramètre http://localhost:8080/ , nous obtenions la première page. Dans la méthode, nous obtenons le nombre de tous les enregistrements, puis de cette manière simple, nous calculons le nombre de pages. Ceux. si nous avons 10 enregistrements, cela fait 1 page, et s'il y en a 11, alors cela fait déjà 2. Eh bien, nous transférons tout cela dans le modèle. Vous devez connaître le nombre de pages afin de créer des liens pour toutes dans un cycle, et laisser le nombre de films être là au cas où, par exemple, vous souhaiteriez afficher cette information quelque part sur la page. Il ne reste plus qu'à aller sur films.jsp et à ajouter des liens vers chaque page en utilisant cette construction :

<c:forEach begin="1" end="${pagesCount}" step="1" varStatus="i">
    <c:url value="/" var="url">
        <c:param name="page" value="${i.index}"/>
    </c:url>
    <a href="${url}">${i.index}</a>
</c:forEach>

Nous créons des liens par compteur 1, 2, 3, ... et définissons le paramètre par la valeur de l'index. Ajoutons encore une petite touche. Nous revenons au contrôleur. Dans les méthodes d'ajout, d'édition et de suppression, une fois l'opération terminée, nous redirigeons vers la page principale "redirect:/" . Que. si nous sommes quelque part sur la 50ème page et cliquons sur modifier l'entrée, alors après l'exécution, nous irons à l'adresse " / ", c'est-à-dire Revenons à la page 1. Ce n’est pas très pratique, je voudrais revenir d’où nous venons. Résolvons cela très simplement. FilmControllerCréons une variable d'instance dans la classeint page

private int page;

A l'intérieur de la méthode allFilmsnous attribuerons la valeur du paramètre à cette variable page:

this.page = page;

Que. Chaque fois que cette méthode est exécutée (c'est-à-dire lorsque nous parcourons les pages), la valeur de la page actuelle sera écrite dans la variable. Et puis nous utilisons cette valeur dans nos méthodes pour rediriger vers la même page.

modelAndView.setViewName("redirect:/?page=" + this.page);

Conclusion

Nous finirons probablement ici. Le résultat est une application CRUD à part entière. C'est certainement loin d'être idéal (très loin), mais il peut être optimisé et amélioré, des bugs corrigés et des fonctionnalités ajoutées. Vous pouvez utiliser des méthodes intégrées pour les opérations brutes ; ajouter du filtrage, de la recherche, du tri ; ajouter d'autres tables associées ; mettre en œuvre la prise en charge de différents utilisateurs avec autorisation et authentification, etc. et ainsi de suite. Les possibilités d’imagination sont illimitées, alors foncez. Lien vers le github de ce projet . Merci pour votre attention. PS C'est la première tentative de ma vie d'écrire un article, alors ne jugez pas strictement :). Je m'excuse de ne pas avoir ajouté de liens différents vers des ressources utiles ; malheureusement, je n'arrive toujours pas à prendre l'habitude de sauvegarder les liens vers les sources à partir desquelles j'obtiens des informations. Et bien sûr, je m'excuse pour les nombreuses lettres, la brièveté n'est pas mon talent, j'espère que quelqu'un pourra gérer ça. Liens vers toutes les parties

• Introduction à Maven, Spring, MySQL, Hibernate et la première application CRUD (partie 1)
• Introduction à Maven, Spring, MySQL, Hibernate et la première application CRUD (partie 2)
• Introduction à Maven, Spring, MySQL, Hibernate et à la première application CRUD (partie 3)
• Introduction à Maven, Spring, MySQL, Hibernate et la première application CRUD (partie 4)