1. Обзор
Проверка никогда не бывает столь простой, как мы ожидаем. И, конечно, проверка значений, введенных пользователем в приложение, очень важна для сохранения целостности наших данных.
В контексте веб-приложения ввод данных обычно делается с использованием HTML-форм и требует проверки как со стороны клиента, так и со стороны сервера.
В этом учебнике, мы будем смотреть на реализация проверки формы на стороне клиента с использованием AngularJS и проверки на стороне сервера с использованием инфраструктуры Spring MVC .
Эта статья посвящена весенней MVC. Наша статья Проверка в весенней загрузки описывает, как сделать проверки в весенней загрузки.
2. Мейвен зависимостей
Для начала добавим следующие зависимости:
org.springframework spring-webmvc 4.3.7.RELEASE org.hibernate hibernate-validator 5.4.0.Final com.fasterxml.jackson.core jackson-databind 2.8.7
Последние версии весенне-вебмвк , спящий валидатор и Джексон-databind можно скачать из Maven Central.
3. Проверка с использованием весеннего MVC
Приложение никогда не должно полагаться исключительно на проверку со стороны клиента, так как это можно легко обойти. Чтобы предотвратить сохранение неправильных или вредоносных значений или ненадлежащее выполнение логики приложения, важно также проверить значения ввода на стороне сервера.
Spring MVC предлагает поддержку проверки серверной стороны с помощью JSR 349 Бин Проверка аннотации спецификации. В этом примере мы будем использовать эталонную реализацию спецификации, которая является спящий валидатор .
3.1. Модель данных
Давайте создадим Пользователь класс, который имеет свойства, аннотированные соответствующими аннотациями проверки:
public class User {
@NotNull
@Email
private String email;
@NotNull
@Size(min = 4, max = 15)
private String password;
@NotBlank
private String name;
@Min(18)
@Digits(integer = 2, fraction = 0)
private int age;
// standard constructor, getters, setters
}Используемые выше аннотации относятся к JSR 349 спецификации, за исключением @Email и @NotBlank , которые специфичны для спящий валидатор библиотека.
3.2. Весенний контроллер MVC
Давайте создадим класс контроллера, определяющий / конечная точка, которая будет использоваться для сохранения нового Пользователь возражать против Список .
Для проверки Пользователь объекту, полученного по параметрам запроса, декларации должен предшествовать @Valid аннотация, и ошибки проверки будут проводиться в СвязываниеРесульт пример.
Чтобы определить, содержит ли объект недействительные значения, мы можем использовать имеетErrors () метод СвязываниеРесульт .
Если имеетErrors () возвращает истинное , мы можем вернуть Массив JSON содержащие сообщения об ошибках, связанные с проверками, которые не прошли. В противном случае мы добавим объект в список:
@PostMapping(value = "/user") @ResponseBody public ResponseEntity
Как видите, Проверка на стороне сервера добавляет преимущество возможности выполнять дополнительные проверки, которые невозможны на стороне клиента.
В нашем случае, мы можем проверить, является ли пользователь с той же электронной почты уже существует – и вернуть статус 409 CONFLICT, если это так.
Мы также должны определить наш список пользователей и инициализировать его с несколькими значениями:
private Listusers = Arrays.asList( new User("[email protected]", "pass", "Ana", 20), new User("[email protected]", "pass", "Bob", 30), new User("[email protected]", "pass", "John", 40), new User("[email protected]", "pass", "Mary", 30));
Давайте также добавим отображение для получения списка пользователей в качестве объекта JSON:
@GetMapping(value = "/users") @ResponseBody public ListgetUsers() { return users; }
Окончательный элемент, который нам нужен в нашем контроллере Spring MVC, это отображение, чтобы вернуть главную страницу нашего приложения:
@GetMapping("/userPage")
public String getUserProfilePage() {
return "user";
}Мы посмотрим на пользователя.html более подробно в разделе AngularJS.
3.3. Весенняя конфигурация MVC
Давайте добавим базовую конфигурацию MVC в наше приложение:
@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "com.baeldung.springmvcforms")
class ApplicationConfiguration implements WebMvcConfigurer {
@Override
public void configureDefaultServletHandling(
DefaultServletHandlerConfigurer configurer) {
configurer.enable();
}
@Bean
public InternalResourceViewResolver htmlViewResolver() {
InternalResourceViewResolver bean = new InternalResourceViewResolver();
bean.setPrefix("/WEB-INF/html/");
bean.setSuffix(".html");
return bean;
}
}3.4. Инициализация приложения
Давайте создадим класс, который реализует WebApplicationИнициализатор интерфейс для запуска нашего приложения:
public class WebInitializer implements WebApplicationInitializer {
public void onStartup(ServletContext container) throws ServletException {
AnnotationConfigWebApplicationContext ctx
= new AnnotationConfigWebApplicationContext();
ctx.register(ApplicationConfiguration.class);
ctx.setServletContext(container);
container.addListener(new ContextLoaderListener(ctx));
ServletRegistration.Dynamic servlet
= container.addServlet("dispatcher", new DispatcherServlet(ctx));
servlet.setLoadOnStartup(1);
servlet.addMapping("/");
}
}3.5. Тестирование весенней проверки Mvc с помощью Curl
Прежде чем внедрить клиентский раздел AngularJS, мы можем протестировать наш API с помощью cURL с командой:
curl -i -X POST -H "Accept:application/json" "localhost:8080/spring-mvc-forms/user?email=aaa&password=12&age=12"
Ответом является массив, содержащий сообщения об ошибках по умолчанию:
[
"not a well-formed email address",
"size must be between 4 and 15",
"may not be empty",
"must be greater than or equal to 18"
]4. Проверка AngularJS
Проверка со стороны клиента полезна для создания лучшего пользовательского интерфейса, так как она предоставляет пользователю информацию о том, как успешно отправлять достоверные данные, и позволяет ему продолжать взаимодействовать с приложением.
Библиотека AngularJS имеет большую поддержку для добавления требований проверки на полях форм, обработки сообщений об ошибках и укладки действительных и недействительных форм.
Во-первых, давайте создадим модуль AngularJS, который вводит ngMessages модуль, который используется для проверки сообщений:
var app = angular.module('app', ['ngMessages']);Далее давайте создадим службу и контроллер AngularJS, которые будут потреблять API, построенный в предыдущем разделе.
4.1. Служба угловых
Наш сервис будет иметь два метода, которые называют методы контроллера MVC – один, чтобы спасти пользователя, и один для получения списка пользователей:
app.service('UserService',['$http', function ($http) {
this.saveUser = function saveUser(user){
return $http({
method: 'POST',
url: 'user',
params: {email:user.email, password:user.password,
name:user.name, age:user.age},
headers: 'Accept:application/json'
});
}
this.getUsers = function getUsers(){
return $http({
method: 'GET',
url: 'users',
headers:'Accept:application/json'
}).then( function(response){
return response.data;
} );
}
}]);4.2. Контроллер AngularjS
ПользовательКтрл контроллер впрыскивает Служба пользователей , вызывает методы обслуживания и обрабатывает сообщения ответа и ошибки:
app.controller('UserCtrl', ['$scope','UserService', function ($scope,UserService) {
$scope.submitted = false;
$scope.getUsers = function() {
UserService.getUsers().then(function(data) {
$scope.users = data;
});
}
$scope.saveUser = function() {
$scope.submitted = true;
if ($scope.userForm.$valid) {
UserService.saveUser($scope.user)
.then (function success(response) {
$scope.message = 'User added!';
$scope.errorMessage = '';
$scope.getUsers();
$scope.user = null;
$scope.submitted = false;
},
function error(response) {
if (response.status == 409) {
$scope.errorMessage = response.data.message;
}
else {
$scope.errorMessage = 'Error adding user!';
}
$scope.message = '';
});
}
}
$scope.getUsers();
}]);В приведеном выше примере мы видим, что метод обслуживания называется только в том случае, если $valid имущество пользовательФорма это правда. Тем не менее, в этом случае, есть дополнительная проверка на дубликаты писем, которые могут быть сделаны только на сервере и обрабатывается отдельно в ошибка () функция.
Кроме того, обратите внимание, что есть представленные переменная определена, которая скажет нам, если форма была представлена или нет.
Первоначально эта переменная будет ложные , и по призыву saveUser () метод, он становится истинное . Если мы не хотим, чтобы сообщения проверки были показываться до того, как пользователь представит форму, мы можем использовать представленные переменной, чтобы предотвратить это.
4.3. Форма с использованием проверки AngularJS
Для того, чтобы использовать библиотеку AngularJS и наш модуль AngularJS, нам нужно будет добавить скрипты в наш пользователя.html страница:
Затем мы можем использовать наш модуль и контроллер, установив ng-app и ng-контроллер свойства:
Давайте создадим нашу форму HTML:
Обратите внимание, что мы должны установить novalidate атрибут на форме, чтобы предотвратить проверку HTML5 по умолчанию и заменить его на наш собственный.
ng-класс атрибут добавляет форма-ошибка Класс CSS динамически к форме, если представленные переменная имеет значение истинное .
ng-представить атрибут определяет функцию контроллера AngularJS, которая будет называться при отправлении формы. Использование ng-представить вместо нг-клик имеет то преимущество, что он также реагирует на отправку формы с помощью ключа ENTER.
Теперь добавим четыре поля ввода для атрибутов пользователя:
Каждое поле ввода имеет привязку к свойству пользовательские переменная через ng-модель атрибут.
Для установления правил проверки , мы используем HTML5 необходимых атрибут и несколько атрибутов AngularJS: ng-minglength, ng-maxlength, ng-min, и ng-trim .
Для электронной поле, мы также используем тип атрибут со значением электронной для проверки электронной почты на стороне клиента.
Для добавления сообщений об ошибках, соответствующих каждому , AngularJS предлагает ng-сообщения директива, которая проходит через вводную $errors объект и отображает сообщения на основе каждого правила проверки.
Давайте добавим директиву для электронной поле сразу после определения ввода:
Invalid email!
Email is required!
Аналогичные сообщения об ошибках могут быть добавлены для других областей ввода.
Мы можем контролировать, когда директива отображается для электронной поле с использованием ng-шоу свойство с boolean выражением. В нашем примере мы отображаем директиву, когда поле имеет недействительное значение, то есть $invalid недвижимость истинное , и представленные переменная также истинное .
Одновременно для поля будет отображаться только одно сообщение об ошибке.
Мы также можем добавить знак чековой отметки (представленный символом кода HEX) после ввода поля в случае, если поле действительно, в зависимости от $valid свойство:
✓
Проверка AngularJS также предлагает поддержку для укладки с использованием классов CSS, таких как нг-действительный и ng-недействительный или более конкретные, такие как ng-недействительный требуемый и ng-invalid-minlength .
Давайте добавим свойство CSS пограничный цвет:красный для недействительных входов внутри формы форма-ошибка класс:
.form-error input.ng-invalid {
border-color:red;
}Мы также можем показать сообщения об ошибках красным цветом с помощью класса CSS:
.error-messages {
color:red;
}После сдачи все вместе, давайте посмотрим пример того, как наш клиент стороне формы проверки будет выглядеть, когда заполнены с сочетанием действительных и недействительных значений:
5. Заключение
В этом учебнике мы показали, как мы можем сочетать проверку на стороне клиента и сервера с помощью AngularJS и Spring MVC.
Как всегда, полный исходный код для примеров можно найти более на GitHub .
Чтобы просмотреть приложение, доступ к /userPage URL после запуска.