Environnement de développement

Java11
Spring Boot2
H2
MyBatis3
Thymeleaf3
JQuery
Bootstrap
Intellij IDEA

Construire un environnement de développement

Les éléments suivants doivent être installés à l'avance.
- Java11 --IDE (Ici, l'explication est donnée dans Intellij. D'autres IDE sont également possibles.)

Créer un projet

--Depuis Intellij, allez dans Fichier → Nouveau → Projet et sélectionnez Spring Initilizr.

Sélectionnez Java 11. (Peut-être que Java 8 est bien)

Vérifiez DevTools, Web, Thymeleaf, H2, MyBatis.

Entrez le nom du projet et vous avez terminé.

Paramètres de déploiement à chaud 1/2

Afin d'améliorer l'efficacité du développement, définissez un déploiement à chaud qui se construit automatiquement lorsque la source est modifiée.
S'il y a des changements majeurs ou que les changements ne sont pas reflétés, vous devez arrêter et démarrer le serveur. --Depuis les paramètres Intellij, à partir de Build, Run, Deploy → Compiler, cochez □ Automatically build project.

Paramètres de déploiement à chaud 2/2

--Entrez ctrl + shift + a → Registry et cliquez sur Registration .... (Si Intellij n'est pas traduit en japonais, entrez Registry et cliquez sur Registry ...)

--compilateur. ... .exécution de Check ☑.

Modifier pom.xml

--Si vous voulez utiliser la fonction de mise en page de tymeleaf, placez thymeleaf-layout-dialect dans` </ dependencies> ʻ de pom.xml comme indiqué ci-dessous. (Ici, nous allons procéder en supposant qu'il sera inclus.) --Incluez Bootstrap et JQuery pour améliorer l'apparence de votre conception.

Cliquez avec le bouton droit sur pom.xml → Réimporter.

`pom.xml`


    <dependency>
      <groupId>nz.net.ultraq.thymeleaf</groupId>
      <artifactId>thymeleaf-layout-dialect</artifactId>
      <version>2.3.0</version>
    </dependency>
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>jquery</artifactId>
      <version>1.11.1</version>
    </dependency>
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>bootstrap</artifactId>
      <version>3.3.7-1</version>
    </dependency>

Créer schema.sql, data.sql

--Si vous créez schema.sql et data.sql, les données de test seront automatiquement entrées dans la base de données au démarrage de l'exécution du projet. --Créez sous le nom du projet / src / main / resources.

`schema.sql`


CREATE TABLE IF NOT EXISTS user (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name varchar (50) NOT NULL
);

`data.sql`


INSERT INTO user (name) VALUES ('tanaka');
INSERT INTO user (name) VALUES ('suzuki');
INSERT INTO user (name) VALUES ('sato');

Création d'entité

--Créez un package d'entité et créez une classe User en dessous. --Créez une classe pour contenir les données utilisateur. Aucune annotation nécessaire pour utiliser MyBatis. --Ajouter la validation requise au nom.

`java:com.example.demo.entity.User.java`


package com.example.demo.entity;


import org.hibernate.validator.constraints.NotBlank;

public class User {

  private int id;

  @NotBlank(message = "{require_check}")
  private String name;

  public int getId() {
    return id;
  }

  public void setId(int id) {
    this.id = id;
  }

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

}

Créez mapper.java, mapper.xml

--Créez un package mapper et créez une interface UserMapper en dessous. --Ajoutez @ Mapper à l'annotation. Si cela est laissé tel quel, Autowired ne peut pas être exécuté, alors ajoutez également @ Repository.

`java:src/main/java/com.example.demo.mapper.UserMapper.java`


package com.example.demo.mapper;

import com.example.demo.entity.User;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

@Repository
@Mapper
public interface UserMapper {

  List<User> selectAll();

  User select(int id);

  int insert(User user);

  int update(User user);

  int delete(int id);
}

Le fichier de mappage en XML sera lu automatiquement si vous le créez dans la même hiérarchie de répertoires que Java sous ressources. --namename: nom du paquet en (java) ci-dessus --id: nom de méthode spécifié dans (java) ci-dessus --resultType: type de retour

`src/main/resouces/com/example/demo/mapper/UserMapper`


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.mapper.UserMapper">
    <select id="selectAll" resultType="com.example.demo.entity.User">
        select * from user
    </select>
    <select id="select" resultType="com.example.demo.entity.User">
        select * from user where id = #{id}
    </select>
    <insert id="insert">
        insert into user (name) values (#{name})
    </insert>
    <update id="update">
        update user set name = #{name} where id = #{id}
    </update>
    <delete id="delete">
        delete from user where id = #{id}
    </delete>
</mapper>

Créer un contrôleur

--Ajoutez 7 actions.

Méthode HTTP	URL	méthode du contrôleur	La description
GET	/users	getUsers()	Affichage de l'écran de liste
GET	/users/1	getUser()	Afficher l'écran des détails
GET	/users/new	getUserNew()	Affichage d'un nouvel écran de création
POST	/users	postUserCreate()	Insertion du traitement du nouvel écran de création
GET	/users/1/edit	getUserEdit()	Affichage de l'écran d'édition
PUT	/users/1	putUserEdit()	Modifier le processus de mise à jour de l'écran
DELETE	/users/1	deleteUser()	Supprimer le processus

`java:com.example.demo.controller.UserController`


package com.example.demo.controller;

import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import java.util.List;
import javax.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
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;

@Controller
@RequestMapping("/users")
public class UserController {

  private final UserMapper userMapper;

  @Autowired
  public UserController(UserMapper userMapper) {
    this.userMapper = userMapper;
  }

  /**
   *Affichage de l'écran de liste
   */
  @GetMapping
  public String getUsers(Model model) {
    List<User> users = userMapper.selectAll();
    model.addAttribute("users", users);
    return "users/list";
  }

  /**
   *Afficher l'écran des détails
   */
  @GetMapping("{id}")
  public String getUser(@PathVariable int id, Model model) {
    User user = userMapper.select(id);
    model.addAttribute("user", user);
    return "users/show";
  }

  /**
   *Affichage d'un nouvel écran de création
   */
  @GetMapping("new")
  public String getUserNew(Model model) {
    User user = new User();
    model.addAttribute("user", user);
    return "users/new";
  }

  /**
   *Insertion du traitement du nouvel écran de création
   */
  @PostMapping
  public String postUserCreate(@ModelAttribute @Valid User user,
      BindingResult bindingResult) {
    if (bindingResult.hasErrors()) {
      return "users/new";
    }
    userMapper.insert(user);
    return "redirect:/users";
  }

  /**
   *Affichage de l'écran d'édition
   */
  @GetMapping("{id}/edit")
  public String getUserEdit(@PathVariable int id, Model model) {
    User user = userMapper.select(id);
    model.addAttribute("user", user);
    return "users/edit";
  }

  /**
   *Modifier le processus de mise à jour de l'écran
   */
  @PutMapping("{id}")
  public String putUserEdit(@PathVariable int id, @ModelAttribute @Valid User user,
      BindingResult bindingResult) {
    if (bindingResult.hasErrors()) {
      return "users/edit";
    }
    user.setId(id);
    userMapper.update(user);
    return "redirect:/users";
  }

  /**
   *Supprimer le processus
   */
  @DeleteMapping("{id}")
  public String deleteUser(@PathVariable int id, Model model) {
    userMapper.delete(id);
    return "redirect:/users";
  }
}

Paramètres des messages de validation (messages.properties, WebConfig.java créés)

--Créez messages.properties pour définir les messages de validation.

`src/main/resources/messages.properties`


name=Nom d'utilisateur
require_check={0}Est une entrée obligatoire

La magie de créer le fichier Java de configuration suivant pour utiliser le fichier de propriétés ci-dessus.

`java:com.example.demo/WebConfig.java`


package com.example.demo;

import org.springframework.context.MessageSource;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.support.ReloadableResourceBundleMessageSource;
import org.springframework.validation.beanvalidation.LocalValidatorFactoryBean;

@Configuration
public class WebConfig {

  @Bean
  public MessageSource messageSource() {
    ReloadableResourceBundleMessageSource bean = new ReloadableResourceBundleMessageSource();
    bean.setBasename("classpath:messages");
    bean.setDefaultEncoding("UTF-8");
    return bean;
  }

  @Bean
  public LocalValidatorFactoryBean localValidatorFactoryBean() {
    LocalValidatorFactoryBean localValidatorFactoryBean = new LocalValidatorFactoryBean();
    localValidatorFactoryBean.setValidationMessageSource(messageSource());
    return localValidatorFactoryBean;
  }
}

Création d'écran (layout, show, list, new, edit, form, css creation)

Mise en page commune (layout.html)

Le contenu est affiché dans <div layout: fragment =" contents "> </ div>.

`src/main/resources/templates/commons/layout.html`


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

<head>
    <meta charset="UTF-8">
    <link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" rel="stylesheet"/>
    <script th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
    <link th:href="@{/css/home.css}" rel="stylesheet"/>
    <title>Home</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">SpringMyBatisDemo</a>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2 sidebar">
            <ul class="nav nav-pills nav-stacked">
                <li role="presentation"><a th:href="@{/users}">Gestion des utilisateurs</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-2 main">
            <div layout:fragment="contents">

            </div>
        </div>
    </div>
</div>

</body>
</html>

Écran de liste (list.html)

--Layout est utilisé avec layout: decorate =" ~ {commons / layout} ". --La partie délimitée par <div layout: fragment =" contents "> </ div> est affichée dans la mise en page.

`src/main/resources/templates/users/list.html`


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{commons/layout}">

<head>
  <meta charset="UTF-8">
  <link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" rel="stylesheet"/>
  <script th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script>
  <script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
  <link th:href="@{/css/home.css}" rel="stylesheet"/>
  <title>Home</title>
</head>
<body>
<div layout:fragment="contents">
  <div class="page-header">
    <h1>Liste d'utilisateur</h1>
  </div>
  <table class="table table-bordered table-hover table-striped">
    <tr>
      <th class="info col-sm-2">Identifiant d'utilisateur</th>
      <th class="info col-sm-2">Nom d'utilisateur</th>
      <th class="info col-sm-2"></th>
    </tr>
    <tr th:each="user:${users}">
      <td th:text="${user.id}"></td>
      <td th:text="${user.name}"></td>
      <td>
        <a class="btn btn-primary" th:href="@{'/users/' + ${user.id}}">Détails</a>
        <a class="btn btn-primary" th:href="@{'/users/' + ${user.id} + '/edit'}">Éditer</a>
      </td>
    </tr>
  </table>
  <label class="text-info" th:text="${result}">Affichage des résultats</label><br/>
  <a class="btn btn-primary" th:href="${'/users/new'}">Créer un nouveau</a>
</div>

</body>
</html>

Écran de détails (show.html)

--Layout est utilisé avec layout: decorate =" ~ {commons / layout} ". --La partie délimitée par <div layout: fragment =" contents "> </ div> est affichée dans la mise en page.

Le formulaire commun est affiché dans <div th: include =" users / form :: form_contents "> </ div>.

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


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{commons/layout}">

<head>
  <meta charset="UTF-8"/>
  <title></title>
</head>
<body>
<div layout:fragment="contents">
  <div class="row">
    <div class="col-sm-5">
      <div class="page-header">
        <div>
          <h1>Détails de l'utilisateur</h1>
        </div>
          <table class="table table-bordered table-hover">
            <tr>
              <th class="active col-sm-3">Nom d'utilisateur</th>
              <td>
                <div class="form-group" th:object="${user}">
                  <label class="media-body" th:text="*{name}">
                  </label>
                </div>
              </td>
            </tr>
          </table>
        <form th:action="@{/users}" th:method="get">
          <button class="btn btn-primary btn-lg pull-right" type="submit">liste</button>
        </form>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Écran d'édition (edit.html)

--Layout est utilisé avec layout: decorate =" ~ {commons / layout} ". --La partie délimitée par <div layout: fragment =" contents "> </ div> est affichée dans la mise en page.

Le formulaire commun est affiché dans <div th: include =" users / form :: form_contents "> </ div>.

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


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{commons/layout}">

<head>
  <meta charset="UTF-8"/>
  <title></title>
</head>
<body>
<div layout:fragment="contents">
  <div class="row">
    <div class="col-sm-5">
      <div class="page-header">
        <div>
          <h1>Détails de l'utilisateur</h1>
        </div>
        <form th:action="@{/users/{id}(id=*{id})}" th:method="put" th:object="${user}">

          <div th:include="users/form :: form_contents"></div>

          <button class="btn btn-primary btn-lg pull-right" type="submit">mise à jour</button>
        </form>
        <form th:action="@{/users/{id}(id=*{id})}" th:method="delete" th:object="${user}">
          <button class="btn btn-danger btn-lg" type="submit">Effacer</button>
        </form>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Nouvel écran (new.html)

--Layout est utilisé avec layout: decorate =" ~ {commons / layout} ". --La partie délimitée par <div layout: fragment =" contents "> </ div> est affichée dans la mise en page.

Le formulaire commun est affiché dans <div th: include =" users / form :: form_contents "> </ div>.

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


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{commons/layout}">

<head>
  <meta charset="UTF-8"/>
  <title></title>
</head>
<body>
<div layout:fragment="contents">
  <div class="row">
    <div class="col-sm-5">
      <div class="page-header">
        <div>
          <h1>Créer un nouvel utilisateur</h1>
        </div>
        <form method="post" th:action="@{/users}" th:object="${user}">

          <div th:include="users/form :: form_contents"></div>

          <button class="btn btn-primary btn-lg pull-right" type="submit" name="update">Créer</button>
        </form>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Forme commune

Le formulaire commun est à l'intérieur de <div th: fragment =" form_contents "> </ div> et peut être incorporé avec <div th: include =" users / form :: form_contents "> </ div>.

`src/main/resources/templates/users/form.html`


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

<head>
  <meta charset="UTF-8"/>
  <title></title>
</head>
<body>
<div th:fragment="form_contents">
  <table class="table table-bordered table-hover">
    <tr>
      <th class="active col-sm-3">Nom d'utilisateur</th>
      <td>
        <div class="form-group" th:classappend="${#fields.hasErrors('name')} ? 'has-error'">
          <label>
            <input type="text" class="form-control" th:field="*{name}"/>
          </label>
          <span class="text-danger" th:if="${#fields.hasErrors('name')}"
                th:errors="*{name}">Name error</span>
        </div>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

css

`src/main/resources/static/css/home.css`


body {
    padding-top: 50px;
}

.sidebar {
    position: fixed;
    display: block;
    top: 50px;
    bottom: 0;
    background-color: #F4F5F7;
}

.main {
    padding-top: 50px;
    padding-left: 20px;
    position: fixed;
    display: block;
    top: 0;
    bottom: 0;
}

.page-header {
    margin-top: 0;
}

--Lorsque vous ouvrez http: // localhost: 8080 / users, l'écran de liste suivant s'affiche.

Écran de liste

Écran d'édition

Pas d'affichage d'erreur d'entrée

Code source https://github.com/tseno/SpringMyBatisDemo

--Référence

[Spring Dismantling New Book](https://www.amazon.co.jp/%E3%80%90%E5%BE%8C%E6%82%94%E3%81%97%E3%81%AA% E3% 81% 84% E3% 81% 9F% E3% 82% 81% E3% 81% AE% E5% 85% A5% E9% 96% 80% E6% 9B% B8% E3% 80% 91 Printemps% E8% A7% A3% E4% BD% 93% E6% 96% B0% E6% 9B% B8-Boot2% E3% 81% A7% E5% AE% 9F% E9% 9A% 9B% E3% 81% AB% E4% BD% 9C% E3% 81% A3% E3% 81% A6% E5% AD% A6% E3% 81% B9% E3% 82% 8B% EF% BC% 81Spring-Security% E3% 80% 81Spring-JDBC% E3% 80% 81Spring-MyBatis% E3% 81% AA% E3% 81% A9% E5% A4% 9A% E6% 95% B0% E8% A7% A3% E8% AA% AC% EF% BC% 81- ebook / dp / B07H6XLXD7)
Créer un CRUD simple avec SpringBoot + JPA + Thymeleaf ② ~ Créer des écrans et des fonctions ~

[JAVA] Créez une application CRUD avec Spring Boot 2 + Thymeleaf + MyBatis

Environnement de développement

Construire un environnement de développement

Créer un projet

Paramètres de déploiement à chaud 1/2

Paramètres de déploiement à chaud 2/2

Modifier pom.xml

pom.xml

Créer schema.sql, data.sql

schema.sql

data.sql

Création d'entité

java:com.example.demo.entity.User.java

Créez mapper.java, mapper.xml

java:src/main/java/com.example.demo.mapper.UserMapper.java

src/main/resouces/com/example/demo/mapper/UserMapper

Créer un contrôleur

java:com.example.demo.controller.UserController

Paramètres des messages de validation (messages.properties, WebConfig.java créés)

src/main/resources/messages.properties

java:com.example.demo/WebConfig.java

Création d'écran (layout, show, list, new, edit, form, css creation)

Mise en page commune (layout.html)

src/main/resources/templates/commons/layout.html

Écran de liste (list.html)

src/main/resources/templates/users/list.html

Écran de détails (show.html)

src/main/resources/templates/users/show.html

Écran d'édition (edit.html)

src/main/resources/templates/users/edit.html

Nouvel écran (new.html)

src/main/resources/templates/users/new.html

Forme commune

src/main/resources/templates/users/form.html

src/main/resources/static/css/home.css

`pom.xml`

`schema.sql`

`data.sql`

`java:com.example.demo.entity.User.java`

`java:src/main/java/com.example.demo.mapper.UserMapper.java`

`src/main/resouces/com/example/demo/mapper/UserMapper`

`java:com.example.demo.controller.UserController`

`src/main/resources/messages.properties`

`java:com.example.demo/WebConfig.java`

`src/main/resources/templates/commons/layout.html`

`src/main/resources/templates/users/list.html`

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

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

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

`src/main/resources/templates/users/form.html`

`src/main/resources/static/css/home.css`