6. Conception fonctionnelle

Le développement étant le thème principal, la conception fonctionnelle est facile à écrire.

6.1 Conception de l'écran

Liste des écrans

Disposition d'écran / transition d'écran

Conformément à [2. Objectif](# 2-Objectif).

Définition / interaction des éléments d'écran

Je pense que vous pouvez le comprendre, alors je l'ai omis.

6.2 Conception d'URL

Conçu en référence à ici.

6.3 Conception DB

Liste des tables

Définition de la table (client)

• Le nom de la séquence est "customer_id_seq"
• Si vous souhaitez augmenter le nombre de lignes, vous pouvez facilement l'augmenter ultérieurement. J'ai fait simple pour que ce ne soit pas trop.

7. Développement

Passons maintenant au développement du sujet principal.

7.0 Flux global

Téléchargez le modèle sur le site officiel de Spring et développez-le. La table est automatiquement générée à partir du modèle par la fonction de Spring JPA.

7.1 Téléchargement du modèle

Créez un modèle pour votre projet d'application Web. Il est facile à télécharger depuis Spring Initializr. Vous pouvez le télécharger en entrant ce qui suit et en appuyant sur le bouton "Générer".

7.1.1 Description du contenu d'entrée

Project

Sélectionnez

Gradle. Si vous aimez Maven, vous pouvez utiliser Maven.

Group / Artifact / Name

Nom du projet et nom du package. C'est une pratique, donc ça va.

Dependencies

Spécifiez la bibliothèque à utiliser.

7.1.2 Description des dépendances

Définissez les bibliothèques externes à utiliser.

Spring Boot DevTools

Une bibliothèque pour améliorer l'efficacité du développement.
Chaque fois que la source est modifiée, elle sera automatiquement construite et redémarrée pour refléter les changements.

lombok

Une bibliothèque pour améliorer l'efficacité du développement.
Vous pouvez clairement décrire les méthodes standard telles que getter / setter / equals avec des annotations.

Spring Configuration Processor

Une bibliothèque pour améliorer l'efficacité du développement.
La complétion du code peut être effectuée dans le fichier de configuration (application.yml) et les erreurs de description peuvent être supprimées.

Spring Web

Une bibliothèque pour les applications Web / API Web.

Thymeleaf

Moteur de modèle HTML. Comme mentionné ci-dessus, c'est le rôle de View.

Spring Data JPA

Bibliothèque liée à la base de données. Vous pouvez effectuer des opérations DB basées sur JPA.
Pour expliquer grossièrement JPA, c'est un mécanisme qui permet des opérations DB simples sans écrire SQL.

PostgreSQL Driver

Pilote JDBC pour PostgreSQL. Sans cela, PostgreSQL ne peut pas être utilisé.

7.1.3 Supplément

Vous pouvez faire de même à partir du menu Eclipse. Plus précisément, il s'agit de "Fichier", "Nouveau", "Autre", "Spring Boot" et "Spring Starter Project".

7.2 Construire

Importez le modèle téléchargé dans Eclipse. La procédure spécifique est la suivante.

1. Décompressez le modèle téléchargé (zip) dans le dossier contenant l'espace de travail Eclipse.
2. Démarrez Eclipse.
3. "Fichier" "Importer" "Gradle" "Projet Gradle existant" "Suivant"
4. Spécifiez 1 dossier dans "Répertoire racine du projet" et cliquez sur "Terminer".

Il sera construit automatiquement lors de l'importation, selon les dépendances dans build.gradle, Les bibliothèques externes seront téléchargées.

7.2.1 Ajout d'une bibliothèque externe

Certaines bibliothèques externes ne sont pas incluses dans Spring Initializr. Plus précisément, la bibliothèque java bootstrap n'est pas incluse. Ouvrez le fichier build.gradle dans Eclipse et ajoutez comme suit.

build.gradle

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	implementation 'org.webjars:jquery:3.3.1'        //ajouter à
	implementation 'org.webjars:bootstrap:4.3.1'     //ajouter à
	implementation 'org.webjars:font-awesome:5.13.0' //ajouter à
//réduction. La version complète est https://github.com/tk230to/tksystem

[Supplément] Description de la bibliothèque externe ajoutée

org.webjars:jquery

bibliothèque java jQuery.

org.webjars:bootstrap

Bibliothèque java de Bootstrap.

org.webjars:font-awesome

Bibliothèque java Font Awesome (en utilisant des icônes).

[Supplément] Comment trouver une bibliothèque externe

Recherchez ces bibliothèques dans le référentiel Maven (https://mvnrepository.com/).

7.3 Création de chaque classe

Créez chaque classe et fichier de configuration.

7.3.1 Cible de création

Créez un fichier de modèle / vue / contrôleur / configuration. Quel était ce fichier? Dans ce cas, veuillez relire [5.2 Configuration](# 52-Configuration).

7.3.2 Création de modèle (classe d'entité)

Classe de client

Créez une classe correspondant à la table client (conception # 63-db). Nom de classe = nom de table, nom de champ = nom de colonne.

Customer.java

package com.example.tksystem.model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.SequenceGenerator;
import javax.validation.constraints.NotBlank;

import lombok.Data;

/**
 *Classe de client.
 */
@Entity
@Data
public class Customer {

  /**Nom de la séquence*/
  private static final String SEQUENCE_NAME = "customer_id_seq";

  /** ID */
  @Id
  @GeneratedValue(strategy = GenerationType.SEQUENCE, generator = SEQUENCE_NAME)
  @SequenceGenerator(name = SEQUENCE_NAME, sequenceName = SEQUENCE_NAME, allocationSize = 1)
  private Long id;

  /**Nom*/
  @NotBlank
  private String name;
}

@Entity

Une annotation indiquant qu'il s'agit d'une classe Entity.

@Data

annotation lombok qui génère automatiquement getter / setter, etc.

@Id

Une annotation indiquant qu'il s'agit d'une colonne PK.

@GeneratedValue

Une annotation qui indique la numérotation automatique dans la séquence.

@SequenceGenerator

Une annotation pour créer une séquence.

7.3.3 Création d'un modèle (classe de référentiel)

Classe CustomerRepository

Créez une classe pour effectuer des opérations CRUD sur la table client. Il hérite simplement de JpaRepository.

CustomerRepository.java

package com.example.tksystem.model;

import org.springframework.data.jpa.repository.JpaRepository;

/**
 *Classe de référentiel client.
 */
public interface CustomerRepository extends JpaRepository<Customer, Long> {

}

Les méthodes (extraits) suivantes seront disponibles.

List<Customer> findAll()

Fait référence à tous les enregistrements de la table (SELECT) et les renvoie sous forme de liste.

Customer getOne(Long id)

Fait référence à l'enregistrement correspondant à l'ID client (SELECT) et renvoie le résultat.

Customer save(Customer entity)

Enregistrez / mettez à jour (INSERT / UPDATE) les informations client de l'argument

et renvoyez l'enregistrement de résultat.

void deleteById(Long id)

Supprimez (DELETE) l'enregistrement correspondant à l'ID client.

7.3.4 Création de vues

Créez un modèle HTML pour chaque écran. Comme la barre de navigation en haut est commune à tous les écrans, elle sera partagée en tant que mise en page commune.

Disposition commune

layout.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:fragment="head(title)">

  <title th:text="'Gestion de la clientèle- ' + ${title}">tksystem</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}" />
  <link rel="stylesheet" th:href="@{/webjars/font-awesome/5.13.0/css/all.min.css}" />

  <script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
  <script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>

</head>

<body>
  <nav class="navbar navbar-dark bg-dark navbar-expand-sm mb-3" th:fragment="navbar">

    <a class="navbar-brand" href="/">Gestion de la clientèle</a>

    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navbar" aria-controls="Navbar" aria-expanded="false" aria-label="Changement de navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div id="Navbar" class="collapse navbar-collapse">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" th:href="@{/customers/create/}">
            <i class="fas fa-plus fa-lg" aria-hidden=”true”></i>s'inscrire
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" th:href="@{/customers/}">
            <i class="fas fa-list fa-lg" aria-hidden=”true”></i>liste
          </a>
        </li>
      </ul>
    </div>

  </nav>
</body>

</html>

th:fragment

Permet le remplacement par th: replace sur d'autres écrans.

Autre syntaxe Thymeleaf Veuillez consulter

ici .

Syntaxe Bootstrap Veuillez vous référer au

document officiel .

l'écran supérieur

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/layout :: head('Home')">
</head>

<body>
  <div th:replace="fragments/layout :: navbar"></div>

  <div class="container-fluid">
    <h5>menu</h5>
    <hr>

    <div class="row">
      <div class="col-sm-6">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">
              <a class="nav-link" th:href="@{/customers/create}">
                <i class="fas fa-plus fa-lg" aria-hidden=”true”></i>s'inscrire
              </a>
            </h5>
            <p class="card-text">Enregistrez un nouveau client.</p>
          </div>
        </div>
      </div>

      <div class="col-sm-6">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">
              <a class="nav-link" th:href="@{/customers/}">
                <i class="fas fa-list fa-lg" aria-hidden=”true”></i>liste
              </a>
            </h5>
            <p class="card-text">Affichez une liste de clients.</p>
          </div>
        </div>
      </div>

    </div>
  </div>

</body>

</html>

Nouvel écran d'inscription

create.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/layout :: head('s'inscrire')">
</head>

<body>
  <div th:replace="fragments/layout :: navbar"></div>

  <div class="container-fluid">
    <h5>s'inscrire</h5>
    <hr>

    <div class="row">
      <div class="col-sm-12">
        <form action="#" th:action="@{/customers/create/}" th:object="${customer}" method="post">
          <div class="form-group">
            <label for="name">Nom<span class="badge badge-danger">Obligatoire</span></label>
            <input type="text" id="name" class="form-control" placeholder="(Exemple)Yamada Taro" th:field="*{name}" />
            <span th:if="${#fields.hasErrors('name')}" th:errors="*{name}" style="color: red"></span>
          </div>

          <button type="submit" class="btn btn-primary">Confirmer</button>  
        </form>
      </div>
    </div>
  </div>
</body>
</html>

Écran de mise à jour

C'est presque le même que l'écran d'enregistrement. Le produit fini est ici

Écran de liste

list.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/layout :: head('liste')">
</head>

<body>
  <div th:replace="fragments/layout :: navbar"></div>

  <div class="container-fluid">
    <h5>liste</h5>
    <hr>

    <div class="row">
      <div class="col-sm-12">

        <table class="table table-bordered table-hover">
          <thead class="thead-dark">
            <tr>
              <th width="10%">ID</th>
              <th width="80%">Nom</th>
              <th width="10%">Effacer</th>
            </tr>
          </thead>
          <tbody>
            <tr th:each="customer:${customer}">
              <td th:text="${customer.id}"></td>
              <td>
                <a th:text="${customer.name}" th:href="@{/customers/{id}/update/(id=${customer.id})}">
                </a>
              </td>
              <td>
                <a th:href="@{/customers/{id}/delete/(id=${customer.id})}" onClick="return window.confirm('Etes-vous sûr que vous voulez supprimer?')">
                  <i class="far fa-trash-alt fa-lg" aria-hidden=”true”></i>
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

</html>

7.3.5 Création d'un contrôleur

IndexController, classe

Créez une classe pour gérer les demandes d'écran supérieur.

IndexController.java

package com.example.tksystem.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 *classe de contrôleur d'écran d'index.
 */
@Controller
@RequestMapping("/")
public class IndexController {

  /**
   *écran d'index
   *
   * @modèle de modèle param
   * @retour Destination de transition
   */
  @RequestMapping("index")
  public String index(Model model) {
    return "index";
  }
}

@Controller

Une annotation qui indique qu'il s'agit d'une classe Controller.

@RequestMapping

Mappez l'URL de la requête HTTP à la classe / méthode.
Dans cet exemple, lorsque l'URL est "/ index /", la méthode d'index (modèle modèle) est appelée.

Valeur de retour de la méthode

La chaîne de valeur de retour indique le nom du fichier HTML Thymeleaf sur l'écran suivant.
Pour "index", il indique /src/main/resources/templates/index.html.

Classe CustomerController

Créez une classe pour traiter les demandes sur l'écran client (nouvel écran d'inscription / mise à jour / liste).

CustomerController.java

package com.example.tksystem.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.example.tksystem.model.Customer;
import com.example.tksystem.model.CustomerRepository;

/**
 *Classe de contrôleur d'écran client.
 */
@Controller
@RequestMapping("/customers")
public class CustomerController {

  /**enregistrement/mise à jour/Rediriger l'URL de destination une fois la suppression terminée*/
  private static final String REDIRECT_URL = "redirect:/customers/";

  /**Chemin HTML*/
  private static final String PATH_LIST = "customer/list";
  private static final String PATH_CREATE = "customer/create";
  private static final String PATH_UPDATE = "customer/update";

  /**Nom d'attribut du modèle*/
  private static final String MODEL_ATTRIBUTE_NAME = "customer";

  /**Référentiel client*/
  @Autowired
  private CustomerRepository customerRepository;

  /**
   *Affichez l'écran de liste.
   *
   * @modèle de modèle param
   * @retour Destination de transition
   */
  @GetMapping(value = "/")
  public String list(Model model) {
    model.addAttribute(MODEL_ATTRIBUTE_NAME, customerRepository.findAll(Sort.by("id")));
    return PATH_LIST;
  }

  /**
   *Affichez l'écran d'enregistrement.
   *
   * @modèle de modèle param
   * @retour Destination de transition
   */
  @GetMapping(value = "/create")
  public String create(Model model) {
    model.addAttribute(MODEL_ATTRIBUTE_NAME, new Customer());
    return PATH_CREATE;
  }

  /**
   *Effectuez l'enregistrement.
   *
   * @Param client Valeur d'entrée de l'écran client
   * @résultat du paramètre Résultat du contrôle d'entrée
   * @retour Destination de transition
   */
  @PostMapping(value = "/create")
  public String create(@Validated @ModelAttribute(MODEL_ATTRIBUTE_NAME) Customer customer,
      BindingResult result) {

    if (result.hasErrors()) {
      return PATH_CREATE;
    }

    customerRepository.save(customer);
    return REDIRECT_URL;
  }

  /**
   *Affichez l'écran de mise à jour.
   *
   * @ID de paramètre ID client
   * @modèle de modèle param
   * @retour Destination de transition
   */
  @GetMapping(value = "/{id}/update")
  public String update(@PathVariable("id") Long id, Model model) {
    model.addAttribute(MODEL_ATTRIBUTE_NAME, customerRepository.getOne(id));
    return PATH_UPDATE;
  }

  /**
   *Effectuez la mise à jour.
   *
   * @Param client Valeur d'entrée de l'écran client
   * @résultat du paramètre Résultat du contrôle d'entrée
   * @retour Destination de transition
   */
  @PostMapping(value = "/{id}/update")
  public String update(@Validated @ModelAttribute(MODEL_ATTRIBUTE_NAME) Customer customer,
      BindingResult result) {

    if (result.hasErrors()) {
      return PATH_UPDATE;
    }

    customerRepository.save(customer);
    return REDIRECT_URL;
  }

  /**
   *Effectuer la suppression.
   *
   * @ID de paramètre ID client
   * @retour Destination de transition
   */
  @GetMapping(value = "/{id}/delete")
  public String list(@PathVariable("id") Long id) {
    customerRepository.deleteById(id);
    return REDIRECT_URL;
  }
}

@GetMapping/@PostMapping

Identique à

@ RequestMapping.

@Validated

Une annotation indiquant que l'entrée est vérifiée.

BindingResult result

Contient le résultat de la vérification d'entrée.

7.3.6 Création d'un fichier de configuration

application.yml Ce fichier est utilisé pour définir les informations de connexion à la base de données, etc. url / nom d'utilisateur / mot de passe est la valeur par défaut pour PostgreSQL. S'il est différent de la valeur par défaut, modifiez-le.

application.yml

spring:
  datasource:

    #Adresse IP Postgres/numéro de port/Nom de la base de données
    url: jdbc:postgresql://localhost:5432/postgres

    #Nom d'utilisateur Postgres
    username: postgres

    #Mot de passe Postgres
    password: postgres

    #Pilote JDBC Postgres
    driver-class-name: org.postgresql.Driver

  jpa:
    hibernate:

      # @Déposez toujours la table correspondant à l'entité&créer.
      ddl-auto: create-drop

spring.jpa.hibernate.ddl-auto

Voir ici .

hibernate.properties Ce paramètre évite les exceptions qui se produisent dans PostgreSQL x Spring JPA. Il n'y a pas de problème de fonctionnement sans elle, mais il est désagréable d'obtenir une exception à chaque fois, il est donc préférable de la définir. Détails de l'exception ici

hibernate.properties

# PgConnection.createClob()Évitez les avertissements de méthode
hibernate.jdbc.lob.non_contextual_creation = true

ValidationMessages.properties La définition du message du message d'erreur de vérification d'entrée. Je vais créer le mien car le message japonais n'a pas encore été fourni. La demande d'extraction a été capturée à ici, donc je pense qu'elle sera fournie bientôt.

ValidationMessages.properties

javax.validation.constraints.AssertFalse.message     =Veuillez définir sur false
javax.validation.constraints.AssertTrue.message      =Veuillez définir sur true
javax.validation.constraints.DecimalMax.message      = {value} ${inclusive == true ? 'Veuillez définir les valeurs suivantes' : 'Veuillez le réduire'}
javax.validation.constraints.DecimalMin.message      = {value} ${inclusive == true ? 'Veuillez définir la valeur ci-dessus' : 'Veuillez définir une valeur plus élevée'}
javax.validation.constraints.Digits.message          =La valeur doit être dans la plage suivante(<entier{integer}chiffre>.<Après la virgule décimale{fraction}chiffre>)
javax.validation.constraints.Email.message           =Veuillez le formater correctement comme adresse e-mail
javax.validation.constraints.Future.message          =Veuillez définir une date ultérieure
javax.validation.constraints.FutureOrPresent.message =Définir la date actuelle ou future
javax.validation.constraints.Max.message             = {value}Veuillez définir les valeurs suivantes
javax.validation.constraints.Min.message             = {value}Veuillez définir la valeur ci-dessus
javax.validation.constraints.Negative.message        =Doit être inférieur à 0
javax.validation.constraints.NegativeOrZero.message  =Veuillez définir la valeur sur 0 ou moins
javax.validation.constraints.NotBlank.message        =Les blancs ne sont pas autorisés
javax.validation.constraints.NotEmpty.message        =Les éléments vides ne sont pas autorisés
javax.validation.constraints.NotNull.message         =null n'est pas autorisé
javax.validation.constraints.Null.message            =Veuillez le rendre nul
javax.validation.constraints.Past.message            =Veuillez définir une date antérieure
javax.validation.constraints.PastOrPresent.message   =Veuillez régler la date actuelle ou passée
javax.validation.constraints.Pattern.message         =Expressions régulières"{regexp}"Veuillez correspondre à
javax.validation.constraints.Positive.message        =Doit être supérieur à 0
javax.validation.constraints.PositiveOrZero.message  =Doit être supérieur ou égal à 0
javax.validation.constraints.Size.message            = {min}De{max}Veuillez faire la taille entre

WebConfig Définissez les paramètres pour utiliser les ValidationMessages.properties ci-dessus. Veuillez consulter ici pour plus de détails.

WebConfig.java

package com.example.tksystem;

import java.nio.charset.StandardCharsets;

import org.hibernate.validator.messageinterpolation.AbstractMessageInterpolator;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.support.ReloadableResourceBundleMessageSource;
import org.springframework.validation.Validator;
import org.springframework.validation.beanvalidation.LocalValidatorFactoryBean;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 *Classe de configuration Web.
 *
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {

  @Override
  public Validator getValidator() {

    // ValidationMessages.Propriétés à UTF-Vous permet de définir avec 8.
    ReloadableResourceBundleMessageSource messageSource =
        new ReloadableResourceBundleMessageSource();
    messageSource.setBasename(AbstractMessageInterpolator.USER_VALIDATION_MESSAGES);
    messageSource.setDefaultEncoding(StandardCharsets.UTF_8.name());

    LocalValidatorFactoryBean validator = new LocalValidatorFactoryBean();
    validator.setValidationMessageSource(messageSource);

    return validator;
  }
}

7.4 Génération automatique de démarrage et de table

Maintenant que tous les fichiers sont complets, exécutez le projet dans Eclipse. La procédure consiste à sélectionner un projet, à cliquer avec le bouton droit de la souris, à exécuter et à appliquer Spring Boot.

En définissant ddl-auto set dans application.yml La table est automatiquement générée en fonction de la classe Entity créée.

Accédez à [http: // localhost: 8080](http: // localhost: 8080) et vérifiez le fonctionnement. Si cela fonctionne comme [2. Objectif](# 2-Objectif), il réussit.

Je vous remercie pour votre travail acharné.