[JAVA] [Frühling] Implementieren Sie das Eingabeformular (Eingabebildschirm ⇒ Bestätigungsbildschirm ⇒ Abschlussbildschirm)

Einführung

Was du machen willst

• Ich möchte etwas tun, das auf dem vom Benutzer im Formular eingegebenen Wert basiert.
• Ich möchte vom Eingabebildschirm ⇒ Bestätigungsbildschirm ⇒ Abschlussbildschirm wechseln.

Personen, die diesen Artikel hilfreich finden

• Personen, die das Anfrageformular implementieren.
• Eine Person mit Mindestkenntnissen in Java, Spring, Thymeleaf.

Technische Elemente verwendet

• Java
• Spring
• Rahmen
• Thymeleaf
• Template Engine
• lombok
• Getter und Setter werden automatisch generiert

Implementierung

Möglicherweise haben Sie eine Präferenz, aber ich denke, Sie sollten sie implementieren, indem Sie die folgenden Schritte ausführen. Es werden nur die Mindestausschnitte veröffentlicht.

Eingabebildschirm

HTML

input.html

<blc:form  th:action="@{/input}" method="POST" name="hogeForm" th:object="${hogeForm}">
	<p>Anfragekategorie</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}">Fehlermeldung</p>

	<p>Anfrage</p>
	<textarea name="content" placeholder="Bitte geben Sie Ihre Anfrage ein." th:field="*{content}"></textarea>
	<p th:if="${#fields.hasErrors('content')}" th:errors="*{content}">Fehlermeldung</p>

	<input type="submit" value="Bestätigung"/>
</blc:form>

Formularobjekt

HogeForm.java

@Getter
@Setter
public class HogeForm implements Serializable {
	@NotBlank(message="Bitte auswählen")
	private String category;

	@NotBlank(message="Bitte geben Sie etwas ein")
	@Length(max=1000)
	private String content;

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

Punkt

--Verwenden Sie denselben Variablennamen für den Eigenschaftsnamen und das Namensattribut des Formulars. --Verwenden Sie getCategoryList (), um den Inhalt des Auswahlfelds in Form beizubehalten. Verwenden Sie LinkedHashMap, weil Sie sie der Reihe nach anzeigen möchten. Die Anzeigemethode auf der HTML-Seite lautet wie folgt.

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

--Wenn bei der Validierung ein Fehler auftritt

• Auf der HTML-Seite wird "# fields.hasErrors (" (Eigenschaftsname) ")" true ".
• Wenn Sie "@ (Validierungstyp) (message =" ～～～ ")" und message in der Eigenschaft angeben, können Sie "th: Errors =" * {(property name)} "" auf der HTML-Seite schreiben. , Die angegebene Meldung kann angezeigt werden.

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) {

	//Wenn ein Fehler auftritt, wechseln Sie zu Ihrem eigenen Bildschirm
	if (bindingResult.hasErrors()) {
		return "index.html";
	}

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

Punkt

• Anstatt das POST-Ziel des Formulars zu einem Bestätigungsbildschirm (/ verify) zu machen, erstellen Sie eine zweite Eingabemethode dafür. --Vorteil: Die Methode / verify kann sich auf die Anzeige des Bestätigungsbildschirms konzentrieren.
• Wenn Sie das POST-Ziel auf "/ bestätigen" setzen, müssen Sie in der Bestätigungsmethode zwei Prozesse implementieren, einen für den Eingabebildschirm und einen für den Bestätigungsbildschirm. ――Seit das Obige ein einfaches Beispiel ist, kann man den Verdienst nicht so sehr spüren, aber im eigentlichen Geschäft ist der Code sauber und nett.

Bestätigungsbildschirm

HTML

confirm.html

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

	<p>Anfrage</p>
	<p th:text="*{content}">Zeigen Sie hier den Inhalt der Anfrage an</p>

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

Punkt

• Sie können den Map-Wert mit * {getCategoryList (). Get ('_ _ * {category} __')} anzeigen. Wenn nur "* {category}" verwendet wird, wird normalerweise der Schlüssel angezeigt.

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";
}

Abschlussbildschirm

HTML

complete.html

<p>Wir haben mit folgenden Inhalten akzeptiert.</p>

<p>Anfragekategorie</p>
<p th:text="*{getCategoryList().get('__*{category}__')}">Kategorie 1</p>

<p>Anfrage</p>
<p th:text="*{content}">Zeigen Sie hier den Inhalt der Anfrage an</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";
}

Impressionen

Ich habe das Formular zum ersten Mal seit ungefähr zwei Jahren implementiert, es war also eine schreckliche Implementierung. ..