知識庫 / Spring / Spring Data RSS 訂閱

2.3. MVC 配置

我們將添加一個基本的 MVC 配置，以便在我們的應用程序中顯示 HTML 文件：

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

   @Bean
   WebServerFactoryCustomizer<ConfigurableServletWebServerFactory> enableDefaultServlet() {
     return (factory) -> factory.setRegisterDefaultServlet(true);
   }
}

2.4. 允許跨域請求

如果我們要將 AngularJS 前端應用程序部署在與 REST API 隔離，則需要啓用跨域請求。

Spring Data REST 從 1.5.0.RELEASE 版本開始支持此功能。要允許來自不同域的請求，只需將 @CrossOrigin 註解添加到 repository 中即可。

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

因此，在從 REST 端點返回的每一條響應中，都會添加 Access-Control-Allow-Origin 標頭。

3. 創建 AngularJS 客户端

為了創建我們 CRUD 應用程序的前端，我們將使用 AngularJS – 一個廣為人知的 JavaScript 框架，它簡化了前端應用程序的創建。

為了使用 AngularJS，我們首先需要在我們調用為 users.html 的 HTML 頁面中包含 angular.min.js 文件。

<script 
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
</script>

接下來，我們需要創建一個 Angular 模塊、控制器和服務，這些組件將調用 REST 端點並顯示返回的數據。

這些組件將被放置在名為app.js的 JavaScript 文件中，並且還需要將其包含在users.html頁面中：

<script src="view/app.js"></script>

3.1. Angular 服務

首先，我們創建一個名為 UserCRUDService 的 Angular 服務，它將利用注入的 AngularJS $http 服務來向服務器發起調用。每個調用將被放置在單獨的方法中。

讓我們來看一下定義使用 /users/{userID} 端點通過 HTTP 請求檢索用户的方法：

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

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

接下來，我們定義 addUser 方法，它向 /users URL 發送 POST 請求，並將用户值發送到 data 屬性中：

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

updateUser 方法與上一個方法類似，但它將包含一個 參數，併發出 PATCH 請求：

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

刪除 WebsiteUser 記錄的方法將發出一個 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. Angular 控制器

我們將創建一個 UserCRUDCtrl Angular 控制器，該控制器將注入 UserCRUDService，並使用該服務的方法來獲取服務器響應、處理 success 和 error 情況，並設置 $scope 變量，其中包含響應數據，以便在 HTML 頁面上進行顯示。

讓我們來看一下 getUser() 函數，該函數調用 getUser(userId) 服務函數，並在成功和錯誤情況下定義兩個回調方法。如果服務器請求成功，則響應將保存到 user 變量中；否則，將處理錯誤消息：

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

最後，我們來定義一個檢索用户列表並將其存儲在 users 變量中的函數：

$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 頁面

該 users.html 頁面將使用前一節中定義的控制器函數以及存儲變量。

首先，為了使用 Angular 模塊，我們需要設置 ng-app 屬性：

<html ng-app="app">

然後，為了避免每次使用控制器函數時都必須輸入 <em UserCRUDCtrl.getUser()</em>，我們可以將我們的 HTML 元素包裹在一個 <em div</em> 中，並設置 <em ng-controller</em> 屬性：

<div ng-controller="UserCRUDCtrl">

讓我們創建一個用於輸入和顯示 WebiteUser 對象值的表單，以便我們能夠對其進行操作。 這些表單項都將具有 ng-model 屬性，該屬性將它們的值綁定到屬性本身：

<table>
    <tr>
        <td width="100">ID:</td>
        <td><input type="text" id="id" ng-model="user.id" /></td>
    </tr>
    <tr>
        <td width="100">Name:</td>
        <td><input type="text" id="name" ng-model="user.name" /></td>
    </tr>
    <tr>
        <td width="100">Age:</td>
        <td><input type="text" id="age" ng-model="user.email" /></td>
    </tr>
</table>