Приложение AngularJS CRUD с весенними данными REST

1. Обзор

В этом учебнике мы создадим пример простого приложения CRUD с использованием AngularJS для переднего и весеннего данных REST для бэк-энда.

2. Создание службы данных REST

Для создания поддержки настойчивости мы будем использовать спецификацию Spring Data REST, которая позволит нам выполнять операции CRUD по модели данных.

Вы можете найти всю необходимую информацию о том, как настроить конечные точки REST во введении к весенним данным REST . В этой статье мы будем повторно использовать существующий проект у нас есть установка для введения учебник.

Для настойчивости мы будем использовать H2 в базе данных памяти.

В качестве модели данных предыдущая статья определяет СайтПользователь класса, с id , имя и электронной свойства и интерфейс репозитория под названием ПользовательРепозиторий .

Определение этого интерфейса поручает Spring создать поддержку для разоблачения ресурсов и ресурсов сбора REST. Давайте более подробно рассмотрим конечные точки, доступные нам сейчас, когда мы позже позвоним из AngularJS .

2.1. Ресурсы сбора

Список всех пользователей будет доступен нам в конце /пользователи . Этот URL можно назвать с помощью метода GET и вернет объекты JSON формы:

{
  "_embedded" : {
    "users" : [ {
      "name" : "Bryan",
      "age" : 20,
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/users/1"
        },
        "User" : {
          "href" : "http://localhost:8080/users/1"
        }
      }
    }, 
...
    ]
  }
}

2.2. Ресурсы пунктов

Одна СайтПользователь объектом можно манипулировать, получить доступ к URL-адресам формы /пользователи/пользователи и с различными методами HTTP и запросом полезной нагрузки.

Для получения СайтПользователь объект, мы можем получить доступ к /пользователи/пользователи и методом GET. Это возвращает объект JSON формы:

{
  "name" : "Bryan",
  "email" : "[email protected]",
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/users/1"
    },
    "User" : {
      "href" : "http://localhost:8080/users/1"
    }
  }
}

Чтобы добавить новую СайтПользователь , нам нужно будет позвонить /пользователи методом POST. Атрибуты нового СайтПользователь запись будет добавлена в орган запроса в качестве объекта JSON:

{name: "Bryan", email: "[email protected]"}

Если нет ошибок, этот URL возвращает код статуса 201 CREATED.

Если мы хотим обновить атрибуты СайтПользователь запись, мы должны позвонить по URL- /пользователи/пользователи и с методом PATCH и органом запроса, содержащим новые значения:

{name: "Bryan", email: "[email protected]"}

Удаление СайтПользователь запись, мы можем назвать URL- /пользователи/пользователи и методом DELETE. Если нет ошибок, это возвращает код статуса 204 NO CONTENT.

2.3. Конфигурация MVC

Мы также добавим базовую конфигурацию MVC для отображения HTML файлов в нашем приложении:

@Configuration
@EnableWebMvc
public class MvcConfig implements WebMvcConfigurer {
    
    public MvcConfig(){
        super();
    }
    
    @Override
    public void configureDefaultServletHandling(
      DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }
}

2.4. Разрешение запросов на перекрестное происхождение

Если мы хотим развернуть AngularJS интерфейсное приложение отдельно, чем API REST – тогда мы должны включить запросы кросс-происхождения.

Spring Data REST добавил поддержку для этого, начиная с версии 1.5.0.RELEASE. Чтобы разрешить запросы из другого домена, все, что вам нужно сделать, это добавить @CrossOrigin аннотация к репозиторию:

@CrossOrigin
@RepositoryRestResource(collectionResourceRel = "users", path = "users")
public interface UserRepository extends CrudRepository {}

В результате, на каждый ответ от конечных точек REST, заголовок Доступ-Контроль-Разрешить-Происхождение будут добавлены.

3. Создание клиента AngularJS

Для создания передней части нашего приложения CRUD мы будем использовать AngularJS – хорошо известная база JavaScript, которая облегчает создание передних приложений.

Для того, чтобы AngularJS , мы сначала должны включить angular.min.js файл на нашей странице HTML, который будет называться пользователей.html :

Далее нам нужно создать угловой модуль, контроллер и службу, которые будут называть конечные точки REST и отображать возвращенные данные.

Они будут помещены в файл JavaScript под названием приложение.js которые также должны быть включены в пользователей.html страница:

3.1. Угловая служба

Во-первых, давайте создадим угловую службу под названием ПользовательCRUDService , которые будут использовать инъекционные AngularJS $http службы для звонков на сервер. Каждый вызов будет помещен в отдельный метод.

Давайте рассмотрим определение метода извлечения пользователя с помощью идентификатора с помощью /пользователи/пользователи и конечная точка:

app.service('UserCRUDService', [ '$http', function($http) {

    this.getUser = function getUser(userId) {
        return $http({
            method : 'GET',
            url : 'users/' + userId
        });
    }
} ]);

Далее, давайте определим addUser метод, который делает запрос POST на /пользователи URL и отправляет значения пользователя в данные атрибут:

this.addUser = function addUser(name, email) {
    return $http({
        method : 'POST',
        url : 'users',
        data : {
            name : name,
            email: email
        }
    });
}

обновлениеПользователь метод похож на тот, который выше, за исключением того, что он будет иметь id параметр и делает запрос PATCH:

this.updateUser = function updateUser(id, name, email) {
    return $http({
        method : 'PATCH',
        url : 'users/' + id,
        data : {
            name : name,
            email: email
        }
    });
}

Метод удаления СайтПользователь запись сделает запрос DELETE:

this.deleteUser = function deleteUser(id) {
    return $http({
        method : 'DELETE',
        url : 'users/' + id
    })
}

И, наконец, давайте посмотрим на методы для получения всего списка пользователей:

this.getAllUsers = function getAllUsers() {
    return $http({
        method : 'GET',
        url : 'users'
    });
}

Все эти методы обслуживания будут называться AngularJS контроллер.

3.2. Угловой контроллер

Мы создадим ПользовательCRUDCtrl AngularJS контроллер, который будет иметь ПользовательCRUDService вводили и будут использовать методы обслуживания для получения ответа с сервера, обработки успех и ошибка случаях и установить $scope переменные, содержащие данные ответа для отображения их на странице HTML.

Давайте посмотрим на getUser () функция, которая вызывает getUser (userId) функции службы и определяет два метода обратного вызова в случае успеха и ошибки. Если запрос сервера удался, ответ сохраняется в пользовательские переменная; в противном случае обрабатываются сообщения об ошибках:

app.controller('UserCRUDCtrl', ['$scope','UserCRUDService', 
  function ($scope,UserCRUDService) {
      $scope.getUser = function () {
          var id = $scope.user.id;
          UserCRUDService.getUser($scope.user.id)
            .then(function success(response) {
                $scope.user = response.data;
                $scope.user.id = id;
                $scope.message='';
                $scope.errorMessage = '';
            },
    	    function error (response) {
                $scope.message = '';
                if (response.status === 404){
                    $scope.errorMessage = 'User not found!';
                }
                else {
                    $scope.errorMessage = "Error getting user!";
                }
            });
      };
}]);

addUser () функция будет называть соответствующую функцию службы и обрабатывать ответ:

$scope.addUser = function () {
    if ($scope.user != null && $scope.user.name) {
        UserCRUDService.addUser($scope.user.name, $scope.user.email)
          .then (function success(response){
              $scope.message = 'User added!';
              $scope.errorMessage = '';
          },
          function error(response){
              $scope.errorMessage = 'Error adding user!';
              $scope.message = '';
        });
    }
    else {
        $scope.errorMessage = 'Please enter a name!';
        $scope.message = '';
    }
}

updateUser () и deleteUser () функции похожи на те, которые были выше:

$scope.updateUser = function () {
    UserCRUDService.updateUser($scope.user.id, 
      $scope.user.name, $scope.user.email)
      .then(function success(response) {
          $scope.message = 'User data updated!';
          $scope.errorMessage = '';
      },
      function error(response) {
          $scope.errorMessage = 'Error updating user!';
          $scope.message = '';
      });
}

$scope.deleteUser = function () {
    UserCRUDService.deleteUser($scope.user.id)
      .then (function success(response) {
          $scope.message = 'User deleted!';
          $scope.User = null;
          $scope.errorMessage='';
      },
      function error(response) {
          $scope.errorMessage = 'Error deleting user!';
          $scope.message='';
      });
}

И, наконец, давайте определим функцию, которая получает список пользователей, и хранит его в пользователи переменная:

$scope.getAllUsers = function () {
    UserCRUDService.getAllUsers()
      .then(function success(response) {
          $scope.users = response.data._embedded.users;
          $scope.message='';
          $scope.errorMessage = '';
      },
      function error (response) {
          $scope.message='';
          $scope.errorMessage = 'Error getting users!';
      });
}

3.3.HTML Страница

пользователей.html страница будет использовать функции контроллера, определенные в предыдущем разделе, и сохраненные переменные.

Во-первых, для того, чтобы использовать угловой модуль, мы должны установить ng-app свойство:

Затем, чтобы избежать UserCRUDCtrl.getUser() каждый раз, когда мы используем функцию контроллера, мы можем обернуть наши html элементы в div с ng-контроллер набор свойств:

Давайте создадим форме, которая будет вводить и отображать значения для Веб-сайтПользователь объект, который мы хотим манипулировать. Каждый из них будет иметь ng-модель набор атрибутов, который связывает его со значением атрибута:

Связывание id ввода в user.id переменная, например, означает, что всякий раз, когда значение ввода изменено, это значение устанавливается в user.id переменной и наоборот.

Далее, давайте использовать нг-клик атрибут для определения ссылок, которые будут вызывать вызов каждой функции контроллера CRUD определяется:

Get User
Update User
Add User
Delete User

Наконец, давайте отобразить список пользователей полностью и по имени:

Get all Users



{{usr.name}} {{usr.email}}

4. Заключение

В этом учебнике мы показали, как можно создать приложение CRUD с помощью AngularJS и Весенние данные REST спецификация.

Полный код приведенного выше примера можно найти в Проект GitHub .

Для запуска приложения можно использовать командный mvn весна-загрузка:бегите и доступ к URL- /пользователи.html .