Aplikasi CRUD AngularJS dengan Spring Data REST

1. Gambaran keseluruhan

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

2. Membuat Perkhidmatan Data REST

Untuk membuat sokongan untuk kegigihan, kami akan menggunakan spesifikasi Spring Data REST yang akan membolehkan kami melakukan operasi CRUD pada model data.

Anda boleh mendapatkan semua maklumat yang diperlukan mengenai cara menetapkan titik akhir REST dalam pengenalan Spring Data REST. Dalam artikel ini, kami akan menggunakan semula projek yang ada yang telah kami siapkan untuk tutorial pengenalan.

Untuk kegigihan, kami akan menggunakan H2 dalam pangkalan data memori.

Sebagai model data, artikel sebelumnya mendefinisikan kelas WebsiteUser , dengan sifat id , nama dan e - mel dan antara muka repositori yang disebut UserRepository .

Mendefinisikan antara muka ini mengarahkan Spring untuk membuat sokongan untuk mendedahkan sumber koleksi dan sumber item REST. Mari kita perhatikan lebih dekat titik akhir yang tersedia untuk kita sekarang yang kemudian kita akan hubungi dari AngularJS .

2.1. Sumber Pengumpulan

Senarai semua pengguna akan tersedia untuk kita di titik akhir / pengguna . URL ini boleh dipanggil menggunakan kaedah GET dan akan mengembalikan objek JSON dari bentuk:

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

2.2. Sumber Item

Objek tunggal WebsiteUser dapat dimanipulasi dengan mengakses URL borang / pengguna / {userID} dengan kaedah HTTP yang berbeza dan meminta muatan.

Untuk mendapatkan objek WebUser , kita dapat mengakses / users / {userID} dengan kaedah GET. Ini mengembalikan objek JSON dari 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 / pengguna dengan kaedah POST. Atribut rekod WebsiteUser baru akan ditambahkan dalam badan permintaan sebagai objek JSON:

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

Sekiranya tidak ada kesilapan, URL ini mengembalikan kod status 201 DIBUAT.

Sekiranya kita ingin mengemas kini atribut rekod WebsiteUser , kita perlu memanggil URL / pengguna / {UserID} dengan kaedah PATCH dan badan permintaan yang berisi nilai-nilai baru:

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

Untuk memadam WebsiteUser rekod, kita boleh memanggil URL / pengguna / {UserID} dengan kaedah DELETE. Sekiranya tidak ada kesilapan, ini mengembalikan kod status 204 TIADA KANDUNGAN.

2.3. Konfigurasi MVC

Kami juga akan menambahkan konfigurasi MVC asas untuk memaparkan fail html dalam aplikasi kami:

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

2.4. Membolehkan Permintaan Silang Asal

Sekiranya kita mahu menyebarkan aplikasi front-end AngularJS secara berasingan daripada REST API - maka kita perlu mengaktifkan permintaan silang asal.

Spring Data REST telah menambahkan sokongan untuk ini bermula dengan versi 1.5.0. SIARAN. Untuk membenarkan permintaan dari domain yang berbeza, yang perlu anda lakukan ialah 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 Pelanggan AngularJS

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

Untuk menggunakan AngularJS , pertama-tama kita perlu memasukkan fail angular.min.js di halaman html kami yang akan dipanggil pengguna.html :

Seterusnya, kita perlu membuat modul, pengawal, dan perkhidmatan Angular yang akan memanggil titik akhir REST dan memaparkan data yang dikembalikan.

Ini akan dimasukkan ke dalam file JavaScript yang disebut app.js yang juga perlu disertakan dalam halaman users.html :

3.1. Perkhidmatan Sudut

Pertama, mari buat perkhidmatan Angular yang disebut UserCRUDService yang akan menggunakan perkhidmatan AngularJS $ http yang disuntik untuk membuat panggilan ke pelayan. Setiap panggilan akan dilakukan dengan kaedah yang berasingan.

Mari kita melihat kaedah untuk mendapatkan pengguna menggunakan id menggunakan titik akhir / users / {userID} :

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

Seterusnya, mari kita tentukan kaedah addUser yang membuat permintaan POST ke URL pengguna / dan mengirimkan nilai pengguna dalam atribut data :

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

The updateUser kaedah adalah sama dengan yang di atas, kecuali ia akan mempunyai 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 } }); }

Kaedah untuk memadamkan WebsiteUser rekod akan membuat permintaan DELETE:

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

Dan akhirnya, mari kita lihat kaedah untuk mendapatkan keseluruhan senarai pengguna:

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

Semua kaedah perkhidmatan ini akan dipanggil oleh pengawal AngularJS .

3.2. Pengawal 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.

Seterusnya, mari gunakan atribut ng-click untuk menentukan pautan yang akan mencetuskan pemakaian setiap fungsi pengawal CRUD yang ditentukan:

Get User Update User Add User Delete User

Akhirnya, mari kita paparkan senarai pengguna sepenuhnya dan dengan nama:

Get all Users

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

4. Kesimpulan

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

Kod lengkap untuk contoh di atas boleh didapati dalam projek GitHub.

Untuk menjalankan aplikasi, anda boleh menggunakan perintah mvn spring-boot: run dan mengakses URL / pengguna.html .