Aplikasi AngularJS CRUD dengan Spring Data REST

1. Ikhtisar

Dalam tutorial ini, kita akan membuat contoh aplikasi CRUD sederhana menggunakan AngularJS untuk front-end dan Spring Data REST untuk back-end.

2. Membuat Layanan Data REST

Untuk membuat dukungan untuk persistensi, kami akan menggunakan spesifikasi REST Data Musim Semi yang akan memungkinkan kami melakukan operasi CRUD pada model data.

Anda dapat menemukan semua informasi yang diperlukan tentang cara menyiapkan titik akhir REST dalam pengantar Spring Data REST. Pada artikel ini, kami akan menggunakan kembali proyek yang ada yang telah kami siapkan untuk tutorial pengantar.

Untuk persistensi, kita akan menggunakan H2 dalam database memori.

Sebagai model data, artikel sebelumnya mendefinisikan kelas WebsiteUser , dengan id , nama dan properti email dan antarmuka repositori yang disebut UserRepository .

Mendefinisikan antarmuka ini menginstruksikan Spring untuk membuat dukungan untuk mengekspos sumber daya koleksi REST dan sumber daya item. Mari kita lihat lebih dekat titik akhir yang tersedia bagi kita sekarang yang nantinya akan kita panggil dari AngularJS .

2.1. Sumber Daya Koleksi

Daftar semua pengguna akan tersedia bagi kami di titik akhir / pengguna . URL ini dapat dipanggil menggunakan metode GET dan akan mengembalikan objek JSON dalam bentuk:

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

2.2. Sumber Daya Item

Objek WebsiteUser tunggal dapat dimanipulasi dengan mengakses URL dengan format / users / {userID} dengan metode HTTP berbeda dan meminta payload.

Untuk mengambil objek WebsiteUser , kita bisa mengakses / users / {userID} dengan metode GET. Ini mengembalikan objek JSON dalam bentuk:

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

Untuk menambahkan WebsiteUser baru , kita perlu memanggil / users dengan metode POST. Atribut catatan WebsiteUser baru akan ditambahkan dalam isi permintaan sebagai objek JSON:

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

Jika tidak ada kesalahan, URL ini mengembalikan kode status 201 DIBUAT.

Jika kita ingin memperbarui atribut catatan WebsiteUser , kita perlu memanggil URL / users / {UserID} dengan metode PATCH dan badan permintaan yang berisi nilai-nilai baru:

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

Untuk menghapus record WebsiteUser , kita dapat memanggil URL / users / {UserID} dengan metode DELETE. Jika tidak ada kesalahan, ini mengembalikan kode status 204 NO ISI.

2.3. Konfigurasi MVC

Kami juga akan menambahkan konfigurasi MVC dasar untuk menampilkan file html di aplikasi kami:

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

2.4. Mengizinkan Permintaan Lintas Asal

Jika kita ingin menerapkan aplikasi front-end AngularJS secara terpisah dari REST API - maka kita perlu mengaktifkan permintaan lintas sumber.

Spring Data REST telah menambahkan dukungan untuk ini dimulai dengan versi 1.5.0.RELEASE. Untuk mengizinkan permintaan dari domain lain, yang harus Anda lakukan adalah menambahkan anotasi @CrossOrigin ke repositori:

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

Akibatnya, pada setiap respons dari titik akhir REST, header Access-Control-Allow-Origin akan ditambahkan.

3. Membuat Klien AngularJS

Untuk membuat front end aplikasi CRUD kami, kami akan menggunakan AngularJS - kerangka kerja JavaScript terkenal yang memudahkan pembuatan aplikasi front-end.

Untuk menggunakan AngularJS , pertama-tama kita perlu menyertakan file angular.min.js di halaman html yang akan disebut users.html :

Selanjutnya, kita perlu membuat modul Angular, pengontrol, dan layanan yang akan memanggil titik akhir REST dan menampilkan data yang dikembalikan.

Ini akan ditempatkan di file JavaScript yang disebut app.js yang juga perlu disertakan di halaman users.html :

3.1. Layanan Sudut

Pertama, mari buat layanan Angular yang disebut UserCRUDService yang akan menggunakan layanan AngularJS $ http yang diinjeksi untuk melakukan panggilan ke server. Setiap panggilan akan ditempatkan dalam metode terpisah.

Mari kita lihat cara menentukan metode untuk mengambil pengguna dengan id menggunakan titik akhir / users / {userID} :

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

Selanjutnya, mari tentukan metode addUser yang membuat permintaan POST ke URL / users dan mengirimkan nilai pengguna di atribut data :

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

The updateUser Metode ini mirip dengan yang di atas, kecuali ia akan memiliki id parameter dan membuat permintaan PATCH:

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

Metode untuk menghapus catatan WebsiteUser akan membuat permintaan DELETE:

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

Dan terakhir, mari kita lihat metode untuk mengambil seluruh daftar pengguna:

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

Semua metode layanan ini akan dipanggil oleh pengontrol AngularJS .

3.2. Pengontrol Sudut

We will create an UserCRUDCtrlAngularJS controller that will have an UserCRUDService injected and will use the service methods to obtain the response from the server, handle the success and error cases, and set $scope variables containing the response data for displaying it in the HTML page.

Let's take a look at the getUser() function that calls the getUser(userId) service function and defines two callback methods in case of success and error. If the server request succeeds, then the response is saved in a user variable; otherwise, error messages are handled:

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!"; } }); }; }]);

The addUser() function will call the corresponding service function and handle the response:

$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 = ''; } }

The updateUser() and deleteUser() functions are similar to the one above:

$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=''; }); }

And finally, let's define the function that retrieves a list of users, and stores it in the users variable:

$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 Page

The users.html page will make use of the controller functions defined in the previous section and the stored variables.

First, in order to use the Angular module, we need to set the ng-app property:

Then, to avoid typing UserCRUDCtrl.getUser() every time we use a function of the controller, we can wrap our HTML elements in a div with a ng-controller property set:

Let's create theform that will input and display the values for the WebiteUser object we want to manipulate. Each of these will have a ng-model attribute set, which binds it to the value of the attribute:


    
ID:
Name:
Age:

Binding the id input to the user.id variable, for example, means that whenever the value of the input is changed, this value is set in the user.id variable and vice versa.

Selanjutnya, mari gunakan atribut ng-click untuk menentukan tautan yang akan memicu pemanggilan setiap fungsi pengontrol CRUD yang ditentukan:

Get User Update User Add User Delete User

Terakhir, mari kita tampilkan daftar pengguna secara keseluruhan dan berdasarkan nama:

Get all Users

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

4. Kesimpulan

Dalam tutorial ini, kami telah menunjukkan bagaimana Anda dapat membuat aplikasi CRUD menggunakan AngularJS dan spesifikasi Spring Data REST .

Kode lengkap untuk contoh di atas dapat ditemukan di proyek GitHub.

Untuk menjalankan aplikasi, Anda dapat menggunakan perintah mvn spring-boot: run dan akses URL /users.html .