[JAVA] [Spring] Implémenter le formulaire de saisie (écran de saisie ⇒ écran de confirmation ⇒ écran de fin)

introduction

Chose que tu veux faire

--Je veux faire quelque chose en fonction de la valeur saisie par l'utilisateur dans le formulaire. --Je veux passer de l'écran de saisie ⇒ écran de confirmation ⇒ écran de fin.

Personnes qui trouvent cet article utile

• Les personnes qui mettent en œuvre le formulaire de demande.
• Une personne qui a une connaissance minimale de Java, Spring, Thymeleaf.

Éléments techniques utilisés

• Java
• Spring
• Cadre
• Thymeleaf --Moteur de modèle
• lombok --Getter et setter sont générés automatiquement

la mise en oeuvre

Vous avez peut-être une préférence, mais je pense que vous devriez la mettre en œuvre en suivant les étapes ci-dessous. Seuls les extraits minimaux seront publiés.

écran de saisie

HTML

input.html

<blc:form  th:action="@{/input}" method="POST" name="hogeForm" th:object="${hogeForm}">
	<p>Catégorie de demande</p>
	<select name="category" th:field="*{category}">
		<option value="">---</option>
		<option th:each="item : *{getCategoryList()}" th:value="${item.key}" th:text="${item.value}"/>
	</select>
	<p th:if="${#fields.hasErrors('category')}" th:errors="*{category}">Message d'erreur</p>

	<p>Enquête</p>
	<textarea name="content" placeholder="Veuillez saisir votre demande." th:field="*{content}"></textarea>
	<p th:if="${#fields.hasErrors('content')}" th:errors="*{content}">Message d'erreur</p>

	<input type="submit" value="Vérification"/>
</blc:form>

Objet de formulaire

HogeForm.java

@Getter
@Setter
public class HogeForm implements Serializable {
	@NotBlank(message="Veuillez sélectionner")
	private String category;

	@NotBlank(message="Veuillez saisir quelque chose")
	@Length(max=1000)
	private String content;

	public Map<String, String> getCategoryList() {
	Map<String, String> categoryMap = new LinkedHashMap<String, String>();
        categoryMap.put("1", "Catégorie 1");
        categoryMap.put("2", "Catégorie 2");
        categoryMap.put("3", "Catégorie 3");
        return categoryMap;
	}
}

point

--Utilisez le même nom de variable pour le nom de la propriété et l'attribut name du formulaire. --Utilisez getCategoryList () pour conserver le contenu de la boîte de sélection dans Form. Utilisez LinkedHashMap parce que vous voulez les afficher dans l'ordre. La méthode d'affichage côté HTML est la suivante.

<option th:each="item : *{getCategoryList()}" th:value="${item.key}" th:text="${item.value}"/>

• Lorsqu'une erreur se produit lors de la validation
• Du côté HTML, # fields.hasErrors ('(property name)') devient true. --Si vous spécifiez @ (Type de validation) (message =" ～～～ ") et message dans la propriété, vous pouvez écrire th: errors =" * {(nom de la propriété)} " du côté HTML. , Le message spécifié peut être affiché.

Controller

HogeController.java

@RequestMapping("/input")
public ModelAndView input(
		@ModelAttribute("hogeForm") HogeForm hogeContactForm,
		Model model, HttpServletRequest request) {

	return "index.html";
}

@RequestMapping(value = "/input", method = RequestMethod.POST)
public ModelAndView input(
		@Valid @ModelAttribute("hogeForm") HogeForm hogeForm,
		BindingResult bindingResult,
		Model model, HttpServletRequest request) {

	//S'il y a une erreur, passez à votre propre écran
	if (bindingResult.hasErrors()) {
		return "index.html";
	}

	HttpSession session = request.getSession();
	session.setAttribute("hogeForm", hogeForm);
	return "redirect:/confirm";
}

point

• Au lieu de faire de la destination POST du formulaire un écran de confirmation (/ confirm), créez une deuxième méthode d'entrée pour celle-ci. --Avantage: La méthode / confirm peut se concentrer sur l'affichage de l'écran de confirmation.
• Si vous définissez la destination POST sur / confirm, vous devrez implémenter deux processus, un pour l'écran de saisie et un pour l'écran de confirmation, dans la méthode de confirmation. Comme ce qui précède est un exemple simple, vous ne pouvez pas ressentir autant le mérite, mais dans les affaires réelles, le code est propre et agréable.

écran de confirmation

HTML

confirm.html

<blc:form  th:action="@{/complete}" method="POST" name="hogeForm" th:object="${hogeForm}">
	<p>Catégorie de demande</p>
	<p th:text="*{getCategoryList().get('__*{category}__')}">Catégorie 1</p>

	<p>Enquête</p>
	<p th:text="*{content}">Afficher le contenu de la demande ici</p>

	<div>
		<input type="hidden" name="category" th:value="*{category}" />
		<input type="hidden" name="content" th:value="*{content}" />
		<input type="submit" value="Envoyer" />
	</div>
</blc:form>

point

• Vous pouvez afficher la valeur de la carte avec * {getCategoryList (). Get ('_ _ * {category} __')}. Normalement, si seulement «* {category}» est utilisé, la clé sera affichée.

Controller

HogeController.java

@RequestMapping("/confirm")
public ModelAndView confirm(
		Model model, HttpServletRequest request) {

	HttpSession session = request.getSession();
	HogeForm hogeForm = (HogeForm) session.getAttribute("hogeForm");
	model.addAttribute("hogeForm", hogeForm);
	return "confirm.html";
}

Écran de fin

HTML

complete.html

<p>Nous avons accepté avec le contenu suivant.</p>

<p>Catégorie de demande</p>
<p th:text="*{getCategoryList().get('__*{category}__')}">Catégorie 1</p>

<p>Enquête</p>
<p th:text="*{content}">Afficher le contenu de la demande ici</p>
</blc:form>

Controller

HogeController.java

@RequestMapping("/complete")
public ModelAndView complete(
		@ModelAttribute("hogeForm") HogeForm hogeContactForm,
		Model model, HttpServletRequest request) {

	model.addAttribute("hogeForm", hogeForm);
	return "complete.html";
}

Impressions

J'ai implémenté le formulaire pour la première fois en environ deux ans, donc c'était une mise en œuvre terrible. ..