#java #html #spring #forms #thymeleaf
#java #HTML #spring #формы #thymeleaf
Вопрос:
Я использую Spring Boot / Thymeleaf для создания формы, которая принимает адрес электронной почты, перенаправляет на страницу результатов, которая отображает принятое электронное письмо и отправляет его стороннему API (аутентифицированному с помощью Oauth2). У меня возникли проблемы с частью формы, я пытаюсь использовать Thymeleaf для принятия ввода для отображения его на result.html страница. Я получаю сообщение об ошибке при попытке отобразить его на странице результатов, полная ошибка:
[THYMELEAF][http-nio-8080-exec-4] Exception processing template "result.html": Exception evaluating SpringEL expression: "signup.email" (template: "result.html" - line 10, col 4)
Я пытался следовать приведенным здесь примерам:
https://spring.io/guides/gs/handling-form-submission /
Я попытался изменить контроллер от @PostMapping
и @GetMapping
до @RequestMapping
и добавить комментарии, описанные в обходном пути, например:
<!--/*@thymesVar id="signup" type="com.mainconfig.controller1"*/-->
Вот signup.html
код, содержащий форму:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
<title>My Jmml</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style="background-color: #2B2B2B">
<br /><br />
<h2 style="text-align:center">Contact Information</h2>
<!-- Input Form -->
<!--/*@thymesVar id="signup" type="com.mainconfig.controller1"*/-->
<form action="#" th:action="@{/signup}" th:object="${signup}" method="post">
<div align="center">
<label>Email Address</label><br /><br />
<!--/*@thymesVar id="email" type="String"*/-->
<input type="text" th:field="*{email}" placeholder="Email" required />
<br />
<br />
<input class="submitbutton" type='submit' value='Submit'/>
<br />
</div>
</form>
</body>
</html>
Страница результатов, на которой должно отображаться электронное письмо (result.html ):
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thank you for your submission!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Thank you for your submission!</h1>
<p th:text="'Email: ' ${signup.email}" />
<a href="/index">Submit another message</a>
</body>
</html>
Контроллер:
@Controller
public class controller1 {
@RequestMapping (value = "/home")
public String home(Model model) {
return "index.html";
}
@RequestMapping(value = "/signup", method= RequestMethod.GET)
public String signupForm(Model model) {
model.addAttribute("signup", new emailInput());
return "signup.html";
}
@RequestMapping(value = "/signup", method= RequestMethod.POST)
public String signupSubmit(@ModelAttribute("email") emailInput email) {
return "result.html";
}
}
Ожидаемым результатом должна быть переменная email, отображаемая на странице результатов после ее сбора в форме регистрации.
Если у вас есть рекомендации о том, как лучше сделать то, что я пытаюсь, я открыт для предложений! Я очень новичок в Spring / Thymeleaf, но у меня был опыт работы с Java / Jsp. Спасибо за любую помощь, пожалуйста, дайте мне знать, если вам нужно что-нибудь еще, чтобы помочь!
Комментарии:
1. Я очень сомневаюсь, что ваша форма является вашим контроллером. Однако фактическая ошибка находится в вашей
result.html
форме. У вас есть объект с именемsignup
.
Ответ №1:
Надеюсь, это станет для вас отправной точкой. Убедитесь, что вы разместили html-файлы в разделе /resources/templates .
Я немного изменил ваш регистрационный HTML-код и result.html как следует из приведенного ниже, они все еще не идеальны (избегайте использования встроенных стилей и используйте внешнюю таблицу стилей!).:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>My Jmml</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style="background-color: #2B2B2B">
<br /><br />
<h2 style="text-align:center">Contact Information</h2>
<!-- Input Form -->
<!--/*@thymesVar id="signup" type="com.mainconfig.controller1"*/-->
<form th:action="@{/signup}" th:object="${signup}" method="post">
<div align="center">
<label>Email Address</label><br /><br />
<!--/*@thymesVar id="email" type="String"*/-->
<input type="text" th:field="*{email}" placeholder="Email" />
<br />
<br />
<input class="submitbutton" type="submit" value="Submit"/>
<br />
</div>
</form>
</body>
и тот result.html выглядит примерно так
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Thank you for your submission!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Thank you for your submission!</h1>
<p th:text="'Email: ' ${email}" />
<a href="/index">Submit another message</a>
</body>
</html>
Я также создал объект формы, добавьте сюда дополнительные поля, если хотите
public class SignUpForm {
//you can put some annotations here if you want for validating the email
//for e.g @NotEmpty or a @Pattern(regexp to validate the email)
private String email;
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
и, в конце концов, ваш Контроллер. Я передаю электронное письмо из запроса на регистрацию post в result.html с помощью атрибута flash:
@Controller
public class Controller1 {
@RequestMapping(value = "/signup", method= RequestMethod.GET)
public String signupForm(@ModelAttribute("signup") SignUpForm form) {
return "/signup";
}
@RequestMapping(value = "/signup", method= RequestMethod.POST)
public String signupSubmit(@ModelAttribute("signup") SignUpForm form, RedirectAttributes redirectAttributes) {
//validate form first -> check bindingResult documentation
//do what you need with your form object
redirectAttributes.addFlashAttribute("email", form.getEmail());
return "redirect:/result";
}
@RequestMapping(value = "/result", method= RequestMethod.GET)
public String result() {
return "/result";
}
}
Комментарии:
1. Спасибо! Это решило мою проблему, глядя на то, как вы ее настроили, похоже, что моими самыми большими проблемами были signup.email на странице результатов и что вы сделали с контроллером! У меня был объект формы, я не был уверен, какие файлы мне нужны, чтобы получить помощь с вопросом. Еще раз спасибо! Если вы читаете это, находится ли внутри контроллера .post для регистрации, где я хотел бы поместить http-вызовы в сторонний API, с которым я работаю?