[JAVA] Créez un CRUD simple avec SpringBoot + JPA + Thymeleaf ② ~ Création d'écran et de fonctions ~

Contenu

-Suite de Dernière fois --Créez une application CRUD simple avec Spring Boot ――Cette fois, créez les 4 écrans suivants et passez par le traitement

Écran de liste --Nouvel écran
Écran d'édition
Écran de référence

Fonctions à développer

Créez une table de joueur pour stocker les informations des joueurs
Activez pour faire fonctionner la table de lecture à l'aide de JPA
Création d'un point de terminaison pour le lecteur
Créez un modèle pour chaque écran

1. Créez une table de joueur pour stocker les informations des joueurs

Si vous utilisez Spring Boot et JPA, la création d'une classe Entity générera automatiquement une table, vous n'avez donc pas besoin de frapper SQL. --Créez Player.java pour enregistrer les informations du joueur dans src / main / java / com / example / baseball / domain

`src/main/java/com/example/baseball/domain/Player.java`


package com.example.baseball.domain;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity // ①
public class Player {
    @Id // ②
    @GeneratedValue(strategy = GenerationType.IDENTITY) // ③
    private Long id;
    private String name;
    private Integer age;
    private String team;
    private String position;

    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public Integer getAge() {
        return age;
    }
    public void setAge(Integer age) {
        this.age = age;
    }
    public String getTeam() {
        return team;
    }
    public void setTeam(String team) {
        this.team = team;
    }
    public String getPosition() {
        return position;
    }
    public void setPosition(String position) {
        this.position = position;
    }

    @Override
    public String toString() {
        return "Player [id=" + id + ", name=" + name + ", age=" + age + ", team=" + team + ", position=" + position + "]";
    }
}

--①: Lien avec la table DB en ajoutant @ Entity --②: La variable avec «@ Id» devient la clé d'amorce de la table. --③: Si vous ajoutez @ GeneratedValue, les numéros de série seront attribués automatiquement.

2. Autorisez JPA à faire fonctionner la table de lecture

--JPA fournit le traitement de base pour accéder à la table, vous n'avez donc pas à écrire SQL. --Peut être utilisé en créant une interface qui hérite du référentiel JPA de JPA.

Si vous voulez faire autre chose que les opérations typiques telles que findAll et save, vous devrez l'ajouter au référentiel. --Créez PlayerRepository.java dans src / main / java / com / example / baseball / repository

`src/main/java/com/example/baseball/repository/PlayerRepository.java`


package com.example.baseball.repository;

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

import com.example.baseball.domain.Player;

@Repository
public interface PlayerRepository extends JpaRepository<Player, Long> {

}

--Créez un service qui appelle le traitement du référentiel

La logique métier est écrite en service et le référentiel est uniquement un accès à la base de données.
Appelez la méthode de service lorsque vous souhaitez effectuer un traitement qui accède à la base de données
Comme il n'y a pas de logique métier à ce stade, seul le processus d'appel de la méthode du référentiel est écrit. --Créez PlayerService.java dans src / main / java / com / example / baseball / service

`src/main/java/com/example/baseball/service/PlayerService.java`


package com.example.baseball.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.example.baseball.domain.Player;
import com.example.baseball.repository.PlayerRepository;

@Service
public class PlayerService {
    // ①
    @Autowired
    private PlayerRepository playerRepository;

    public List<Player> findAll() {
        return playerRepository.findAll();
    }

    public Player findOne(Long id) {
        return playerRepository.findOne(id);
    }

    public Player save(Player player) {
        return playerRepository.save(player);
    }

    public void delete(Long id) {
        playerRepository.delete(id);
    }
}

--①: Si vous déclarez avec @ Autowired, le bean sera injecté, vous pouvez donc l'utiliser sans nouveau.

3. Création d'un point de terminaison pour le lecteur

--Créer une méthode associée à l'URL accédée par l'utilisateur --Les 6 types de points finaux suivants sont créés

Méthode HTTP	URL	Méthode du contrôleur	Aperçu
GET	/players	index()	Affichage de l'écran de liste
POST	/players	create()	Stockage de données
GET	/players/new	newPlayer()	Affichage d'un nouvel écran de création
GET	/players/1/edit	edit()	Affichage de l'écran d'édition
GET	/players/1	show()	Affichage de l'écran de référence
PUT	/players/1	update()	Mise à jour des données
DELETE	/players/1	destroy()	Suprimmer les données

--Créez PlayerController.java dans src / main / java / com / example / baseball / controller

`src/main/java/com/example/baseball/controller/PlayerController.java`


package com.example.baseball.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.DeleteMapping;
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.PutMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.example.baseball.domain.Player;
import com.example.baseball.service.PlayerService;

@Controller
@RequestMapping("/players") // ①
public class PlayerController {
    @Autowired
    private PlayerService playerService;

    @GetMapping
    public String index(Model model) { // ②
        List<Player> players = playerService.findAll();
        model.addAttribute("players", players); // ③
        return "players/index"; // ④
    }

    @GetMapping("new")
    public String newPlayer(Model model) {
        return "players/new";
    }

    @GetMapping("{id}/edit")
    public String edit(@PathVariable Long id, Model model) { // ⑤
        Player player = playerService.findOne(id);
        model.addAttribute("player", player);
        return "players/edit";
    }

    @GetMapping("{id}")
    public String show(@PathVariable Long id, Model model) {
        Player player = playerService.findOne(id);
        model.addAttribute("player", player);
        return "players/show";
    }

    @PostMapping
    public String create(@ModelAttribute Player player) { // ⑥
        playerService.save(player);
        return "redirect:/players"; // ⑦
    }

    @PutMapping("{id}")
    public String update(@PathVariable Long id, @ModelAttribute Player player) {
        player.setId(id);
        playerService.save(player);
        return "redirect:/players";
    }

    @DeleteMapping("{id}")
    public String destroy(@PathVariable Long id) {
        playerService.delete(id);
        return "redirect:/players";
    }
}

--①: Si vous ajoutez @ RequestMapping à la classe, il sera appliqué à toutes les méthodes de la classe.

Autrement dit, toutes les méthodes de cette classe sont mappées sur des URL commençant par http: // localhost: 8080 / players. --②: Si vous définissez une valeur de type Model dans l'argument de la méthode, une instance de Model sera transmise automatiquement. --③: Vous pouvez transmettre la valeur au modèle en remplissant le modèle reçu dans ② avec la valeur.
Ici, la liste des joueurs est définie avec le nom clé «joueurs». -④: Sur la base de la chaîne de caractères renvoyée, recherchez le fichier sous src / main / resources / templates / et renvoyez-le à l'utilisateur
Ici, src / main / resources / templates / players / index.html est retourné. -⑤: Vous pouvez obtenir la valeur sur l'URL en définissant @ PathVariable dans l'argument de la méthode.
Ici, quand http: // localhost / players / 1 est accédé, 1 est entré dans ʻid. --⑥: Si vous ajoutez @ ModelAttributeà l'argument de la méthode, vous pouvez obtenir les informations du corps de la requête envoyée. --⑦: "redirect: / players" vous redirigera vers/ players`
Il semble que le http: // localhost: 8080 / players soit accédé sans autorisation une fois le processus de la méthode de création terminé.

4. Créez un modèle pour chaque écran

--Depuis cette fois, nous allons créer un template pour player, nous le créerons sous src / main / resources / templates / players --Créez les 4 fichiers d'écran suivants --index.html (écran de liste) --new.html (nouvel écran de création) --edit.html (écran d'édition) --show.html (écran de référence)

Placement de fichiers statiques

--Préparez les fichiers css et javascript avant de créer un modèle --Cette fois, utilisez Bootstrap

La dernière version est la série 4, mais cette fois, nous utiliserons la série 3 -Téléchargez depuis ici et placez les fichiers suivants
Copiez bootstrap.css dans le dossier css dans le dossier src / main / resources / static / css
Copiez bootstrap.js dans le dossier js dans le dossier src / main / resources / static / js --Téléchargez et déployez le jQuery dont dépend Bootstrap --Téléchargez jQuery depuis ici
Si la source sort directement, faites un clic droit et enregistrez-la sous

index.html

`src/main/resources/templates/players/index.html`


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>Listing Players - baseball</title>
    <!-- ① -->
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>Listing Players</h1>
      <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th></th>
            <th></th>
            <th></th>
            <th>--Afficher une liste de joueurs dans une table -Créer ʻindex.html` dans` src / main / resources / templates / players` Nom Âge Nom de l'équipe Position défensive</th>
            <th></th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <!-- ② -->
          <tr th:each="player:${players}" th:object="${player}">
            <!-- ③ -->
            <td th:text="*{id}"></td>
            <td th:text="*{name}"></td>
            <td th:text="*{age}"></td>
            <td th:text="*{team}"></td>
            <td th:text="*{position}"></td>
            <!-- ④ -->
            <td><a class="btn btn-default btn-xs" th:href="@{/players/{id}(id=*{id})}">référence</a></td>
            <td><a class="btn btn-default btn-xs" th:href="@{/players/{id}/edit(id=*{id})}">Éditer</a></td>
            <td>
              <!-- ⑤ -->
              <form th:action="@{/players/{id}(id=*{id})}" th:method="delete">
                <input class="btn btn-default btn-xs" type="submit" value="Effacer" />
              </form>
            </td>
          </tr>
        </tbody>
      </table>
      <a class="btn btn-default" href="/players/new">Créer un nouveau</a>
    </div>
  </body>
</html>

--①: lire les fichiers css et javascript --②: Le traitement en boucle est effectué pour les «joueurs» transmis par le contrôleur.

Le traitement des boucles peut être décrit en faisant quelque chose comme th: each =" player: $ {players} "
Dans cet exemple, la boucle est tournée par le nombre de joueurs qui sont List, et chaque élément de List est traité avec le nom de variable player. --③: En définissant th: object =" $ {player} ", vous pouvez écrire $ {player.xxx} comme * {xxx} dans l'élément enfant de cette balise. Devenir --④: En définissant th: href =" xxx ", la valeur définie dans l'attribut href peut être rendue dynamique.
La valeur où la partie / players / {id} est définie dans l'attribut href. Une variable peut être incorporée dans la partie {id}, et la valeur est définie par la suivante (id = * {id}). --⑤: Puisque je veux accéder au processus de suppression en définissant la méthode HTTP sur DELETE, j'ai ajouté th: method =" delete " à la balise form.

new.html

Nouvel écran de création du joueur --Créez new.html dans src / main / resources / templates / players

`src/main/resources/templates/players/new.html`


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>New Player - baseball</title>
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>New Player</h1>
      <form th:action="@{/players}" th:method="post">
        <div class="form-group">
          <label class="control-label">Nom</label>
          <input class="form-control" type="text" name="name" />
        </div>
        <div class="form-group">
          <label class="control-label">âge</label>
          <input class="form-control" type="number" name="age" />
        </div>
        <div class="form-group">
          <label class="control-label">Nom de l'équipe</label>
          <input class="form-control" type="text" name="team" />
        </div>
        <div class="form-group">
          <label class="control-label">Position défensive</label>
          <input class="form-control" type="text" name="position" />
        </div>
        <button class="btn btn-default" type="submit">Créer</button>
      </form>
      <div class="pull-right">
        <a class="btn btn-link" href="/players">Vers l'écran de liste</a>
      </div>
    </div>
  </body>
</html>

edit.html

Écran pour éditer le joueur dont l'ID correspond à la valeur contenue dans l'URL --Créez ʻedit.html dans src / main / resources / templates / players`

`src/main/resources/templates/players/edit.html`


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>Editing Player - baseball</title>
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>Editing Player</h1>
      <form th:action="@{/players/{id}(id=*{id})}" th:method="put" th:object="${player}">
        <div class="form-group">
          <label class="control-label">Nom</label>
          <!-- ① -->
          <input class="form-control" type="text" th:field="*{name}" />
        </div>
        <div class="form-group">
          <label class="control-label">âge</label>
          <input class="form-control" type="number" th:field="*{age}" />
        </div>
        <div class="form-group">
          <label class="control-label">Nom de l'équipe</label>
          <input class="form-control" type="text" th:field="*{team}" />
        </div>
        <div class="form-group">
          <label class="control-label">Position défensive</label>
          <input class="form-control" type="text" th:field="*{position}" />
        </div>
        <button class="btn btn-default" type="submit">mise à jour</button>
      </form>
      <div class="pull-right">
        <a class="btn btn-link" href="/players">Vers l'écran de liste</a>
      </div>
    </div>
  </body>
</html>

--①: Pour la valeur définie dans «th: field», le nom de la variable est défini dans l'attribut name id attribut et la valeur est définie dans l'attribut value. --Si la valeur de * {age} est 20 comme th: field =" * {age} ", name =" age "id =" age "value =" 20 " est automatiquement défini. ing

show.html

Écran pour faire référence aux informations du joueur dont l'id correspond à la valeur contenue dans l'URL --Créez show.html dans src / main / resources / templates / players

`src/main/resources/templates/players/show.html`


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>Show Player - baseball</title>
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>Show Player</h1>
      <div th:object="${player}">
        <div>
          <label>ID</label>
          <p th:text="*{id}"></p>
        </div>
        <div>
          <label>Nom</label>
          <p th:text="*{name}"></p>
        </div>
        <div>
          <label>âge</label>
          <p th:text="*{age}"></p>
        </div>
        <div>
          <label>Nom de l'équipe</label>
          <p th:text="*{team}"></p>
        </div>
        <div>
          <label>Position défensive</label>
          <p th:text="*{position}"></p>
        </div>
      </div>
      <div>
        <a class="btn btn-default" th:href="@{/players/{id}/edit(id=*{id})}">Éditer</a>
      </div>
      <div class="pull-right">
        <a class="btn btn-link" href="/players">Vers l'écran de liste</a>
      </div>
    </div>
  </body>
</html>

Contrôle de fonctionnement

Jusqu'à présent, lorsque vous accédez à http: // localhost: 8080 / players, les fonctions suivantes sont disponibles.

la prochaine fois

Suite ici