Почти все веб-сайты так или иначе требуют наличия формы. Это может быть так же просто, как поле поиска, или более сложная форма с множеством входных данных и механизмов проверки. В любом случае, основные принципы те же, и в этом посте я покажу вам, как создать простую форму регистрации пользователя с помощью Play Framework Java. Мы рассмотрим все аспекты, включая проверку входных данных, шаблон Twirl и отображение ошибок.
Статья первоначально опубликована на моем личном веб-сайте: Как создать форму в Play Framework
Шаг 1: Давайте подготовим нашу модель
Во-первых, нам нужно подготовить класс модели, который будет содержать данные, предоставленные пользователем. Это будет простой класс данных Java с ограничениями, добавленными к полям. В Play есть простой в использовании механизм ограничений для проверки данных формы, основанный на аннотациях. Нам также нужно определиться с необходимыми полями. Для этого примера я сохраню его простым: имя пользователя, адрес электронной почты, полное имя, пароль и повторно введенный пароль.
public class NewUserDTO {
@Constraints.Required
private String username;
@Constraints.Required
@Constraints.MinLength(8)
private String password;
@Constraints.Required
private String passwordre;
@Constraints.Required
@Constraints.Email
private String email;
@Constraints.Required
private String fullName;
// Getters and Setters
}
Этот класс будет использоваться для создания объектов, которые хранят пользовательский ввод, а аннотация будет использоваться для его проверки. Те, что включены на данный момент, являются предопределенными (и не требуют пояснений), однако при необходимости вы можете создать свои собственные и добавить еще более сложную логику.
Шаг 2: Подготовьте наш шаблон Twirl
Далее нам нужно подготовить шаблон Twirl, который будет отображать HTML-страницу с формой. Нам нужно будет импортировать необходимые классы: Новый UserDTO, а также помощники form и CSFR, предоставляемые Play. Форму необходимо добавить в качестве параметра, а также, если вы хотите предоставить перевод, переводчик сообщений I18N.
@import helper._ @import play.mvc.Http.Request @import data.dto.NewUserDTO @(newUserForm: play.data.Form[NewUserDTO])(implicit messages: play.i18n.Messages)
Далее мы напишем нашу HTML-страницу (которую я в основном опущу) и отобразим форму. Помощник формы предоставляет необходимые инструменты для этого. Мы предоставим контроллер и метод, который будет обрабатывать запрос, и он автоматически выполнит обратную маршрутизацию для определения конечной точки. Мы также включим скрытое поле CSFR для обеспечения безопасности и все необходимые нам поля.
@import helper._
@import play.mvc.Http.Request
@import data.dto.NewUserDTO
@(newUserForm: play.data.Form[NewUserDTO])(implicit messages: play.i18n.Messages)
@helper.form(action = routes.RegisterController.register()) {
@helper.CSRF.formField
@helper.inputText(newUserForm("username"))
@helper.inputText(newUserForm("email"))
@helper.inputPassword(myForm("password"))
@helper.inputPassword(myForm("passwordre"))
@helper.inputText(newUserForm("fullName"))
}
Как мы видим, мы можем включить HTML-код точно так же, как и в любую часть шаблона Twirl. Это очень полезно, так как мы можем выполнять сложный стиль и организовывать форму по разным разделам, чтобы она также выглядела хорошо. При необходимости мы можем легко добавить дополнительную информацию в поля ввода. Ниже мы добавили больше для поля Имени пользователя, а остальное можно сделать аналогичным образом:
@import helper._
@import play.mvc.Http.Request
@import data.dto.NewUserDTO
@(newUserForm: play.data.Form[NewUserDTO])(implicit messages: play.i18n.Messages)
@helper.form(action = routes.RegisterController.register()) {
@helper.CSRF.formField
@helper.inputText(newUserForm("username"), Symbol("id") -> "username", Symbol("class") -> "form-control", Symbol("placeholder") -> "Username")
@helper.inputText(newUserForm("email"))
@helper.inputPassword(myForm("password"))
@helper.inputPassword(myForm("passwordre"))
@helper.inputText(newUserForm("fullName"))
}
Если вы предпочитаете, мы можем отказаться от помощника для полей ввода и сами написать HTML-код. В этом нет никакого реального вреда, поскольку помощник на самом деле делает то же самое. В зависимости от фактического дизайна, это может быть проще таким образом. Тем не менее, я бы рекомендовал, по крайней мере, использовать @helper.form и @helper. CSFR, поскольку они экономят много времени в долгосрочной перспективе, особенно если конечная точка или метод меняются.
Шаг 3: Отображение ошибок
Поскольку мы добавили ограничения в наш класс данных, форма может возвращать ошибки. Мы должны быть в состоянии правильно обрабатывать эти ошибки и иметь возможность отображать их на странице. Это делается с помощью фактического нового объекта UserForm. Опять же, мы можем сделать сложный стиль, если это необходимо, но здесь я буду придерживаться простоты.
@import helper._
@import play.mvc.Http.Request
@import data.dto.NewUserDTO
@(newUserForm: play.data.Form[NewUserDTO])(implicit messages: play.i18n.Messages)
@helper.form(action = routes.UserRegistrationController.register()) {
@helper.CSRF.formField
@helper.inputText(newUserForm("username"), Symbol("id") -> "username", Symbol("class") -> "form-control", Symbol("placeholder") -> "Username")
@helper.inputText(newUserForm("email"))
@helper.inputPassword(myForm("password"))
@helper.inputPassword(myForm("passwordre"))
@helper.inputText(newUserForm("fullName"))
@if(newUserForm.hasErrors) {
@for(error <- newUserForm.errors) {
@error.format(messages)
}
}
}
Шаг 4: Обработка ввода формы на сервере
Как только мы подготовим наш шаблон Twirl, мы сможем начать работу над контроллером, который будет обрабатывать запрос. Здесь мы получим данные формы, проведем необходимые проверки и вернем ответ. У контроллера также будет метод для рендеринга начального представления.
public class UserRegistrationController extends Controller {
@Inject
private FormFactory formFactory;
@Inject
private MessagesApi messagesApi;
// the service that will handle registration of the user, the actual business logic that is needed
@Inject
private UserService userService;
/**
* Render the HTML page
*/
public Result registerView(Http.Request request) {
return ok(views.html.register.render(formFactory.form(NewUserDTO.class), messagesApi.preferred(request));
}
/**
* Handle the form submission
*/
public Result register(Http.Request request) {
Form form = formFactory.form(NewUserDTO.class).bindFromRequest(request);
if (form.hasErrors()) {
return ok(views.html.register.render(form, messagesApi.preferred(request)));
}
// Do any additional logic that is needed
userService.registerNewAdminUser(form.get());
return redirect(routes.AdminController.actionSuccessful());
}
}
Первый метод не так уж интересен, но давайте взглянем на второй. Сначала мы извлекаем форму и данные с помощью встроенной фабрики форм. Это может привязать данные, полученные в HTTP-запросе, к нашему внутреннему объекту передачи данных. На этом шаге выполняется любая проверка, которая была добавлена с использованием ограничений, и в следующей строке формы будут ошибки, если будут обнаружены нарушения.
Если мы получаем какие-либо ошибки, мы снова отображаем страницу, но на этот раз мы предоставляем существующую форму в качестве параметра. Таким образом, мы передаем ошибки в шаблон Twirl, чтобы он мог отображать ошибки. Используя более сложный шаблон Twirl, мы можем даже предварительно заполнить любые данные, поскольку у нас есть доступ к ранее отправленным данным.
После этого мы вызываем нашу службу, которая выполняет бизнес-логику и вставку базы данных, и, если все прошло успешно, мы перенаправляем на страницу результатов.
Оригинал: “https://dev.to/pazvanti/building-a-form-in-play-framework-8l4”