當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

angular8 rest_带有Angular JS的Java EE 7 – CRUD，REST，验证–第2部分

發布時間：2023/12/3 javascript 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 angular8 rest_带有Angular JS的Java EE 7 – CRUD，REST，验证–第2部分小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

angular8 rest

這是Angular JS承諾的Java EE 7的后續版本–第1部分。花了比我預期更長的時間（找到時間來準備代碼和博客文章），但是終于到了！

應用程序

第1部分中的原始應用程序只是帶有分頁的簡單列表，以及提供列表數據的REST服務。

在本文中，我們將添加CRUD（創建，讀取，更新，刪除）功能，綁定REST服務以在服務器端執行這些操作并驗證數據。

設置

該設置與第1部分中的設置相同，但是這里是供參考的列表：

Java EE 7
角JS
ng-grid
UI引導程序
野蠅

代碼

后端– Java EE 7

后端不需要很多更改。由于我們希望能夠創建，讀取，更新和刪除，因此我們需要在REST服務中添加適當的方法來執行以下操作：

人員資源

package com.cortez.samples.javaee7angular.rest;import com.cortez.samples.javaee7angular.data.Person; import com.cortez.samples.javaee7angular.pagination.PaginatedListWrapper;import javax.ejb.Stateless; import javax.persistence.EntityManager; import javax.persistence.PersistenceContext; import javax.persistence.Query; import javax.ws.rs.*; import javax.ws.rs.core.Application; import javax.ws.rs.core.MediaType; import java.util.List;@Stateless @ApplicationPath("/resources") @Path("persons") @Consumes(MediaType.APPLICATION_JSON) @Produces(MediaType.APPLICATION_JSON) public class PersonResource extends Application {@PersistenceContextprivate EntityManager entityManager;private Integer countPersons() {Query query = entityManager.createQuery("SELECT COUNT(p.id) FROM Person p");return ((Long) query.getSingleResult()).intValue();}@SuppressWarnings("unchecked")private List<Person> findPersons(int startPosition, int maxResults, String sortFields, String sortDirections) {Query query = entityManager.createQuery("SELECT p FROM Person p ORDER BY " + sortFields + " " + sortDirections);query.setFirstResult(startPosition);query.setMaxResults(maxResults);return query.getResultList();}private PaginatedListWrapper<Person> findPersons(PaginatedListWrapper<Person> wrapper) {wrapper.setTotalResults(countPersons());int start = (wrapper.getCurrentPage() - 1) * wrapper.getPageSize();wrapper.setList(findPersons(start,wrapper.getPageSize(),wrapper.getSortFields(),wrapper.getSortDirections()));return wrapper;}@GETpublic PaginatedListWrapper<Person> listPersons(@DefaultValue("1")@QueryParam("page")Integer page,@DefaultValue("id")@QueryParam("sortFields")String sortFields,@DefaultValue("asc")@QueryParam("sortDirections")String sortDirections) {PaginatedListWrapper<Person> paginatedListWrapper = new PaginatedListWrapper<>();paginatedListWrapper.setCurrentPage(page);paginatedListWrapper.setSortFields(sortFields);paginatedListWrapper.setSortDirections(sortDirections);paginatedListWrapper.setPageSize(10);return findPersons(paginatedListWrapper);}@GET@Path("{id}")public Person getPerson( @PathParam("id") Long id) {return entityManager.find(Person.class, id);}@POSTpublic Person savePerson(Person person) {if (person.getId() == null) {Person personToSave = new Person();personToSave.setName(person.getName());personToSave.setDescription(person.getDescription());personToSave.setImageUrl(person.getImageUrl());entityManager.persist(person);} else {Person personToUpdate = getPerson(person.getId());personToUpdate.setName(person.getName());personToUpdate.setDescription(person.getDescription());personToUpdate.setImageUrl(person.getImageUrl());person = entityManager.merge(personToUpdate);}return person;}@DELETE@Path("{id}")public void deletePerson(@PathParam("id") Long id) {entityManager.remove(getPerson(id));} }

該代碼與普通的Java POJO完全一樣，但是使用Java EE批注來增強行為。 @ApplicationPath("/resources")和@Path("persons")會將REST服務公開在URL yourdomain/resources/persons （ yourdomain將是運行應用程序的主機）。 @Consumes(MediaType.APPLICATION_JSON)和@Produces(MediaType.APPLICATION_JSON)接受REST請求和響應并將其格式化為JSON。

對于REST操作：

注釋/ HTTP方法 Java方法網址行為

@GET / GET	listPersons	http：// yourdomain / resources / persons	返回10個人的分頁列表。
@GET / GET	getPerson	http：// yourdomain / resources / persons / {id}	通過其ID返回一個Person實體。
@POST / POST	savePerson	http：// yourdomain / resources / persons	創建或更新一個人。
@DELETE / DELETE	deletePerson	http：// yourdomain / resources / persons / {id}	通過其ID刪除Person實體。

每個操作調用的url非常相似。提交請求時，HTTP方法本身定義了區分需要調用哪個操作的魔術。檢查HTTP方法定義。

對于getPerson和deletePerson請注意，我們添加了注釋@Path("{id}") ，該注釋定義了調用服務的可選路徑。由于我們需要知道要獲取或刪除的對象，因此需要以某種方式指示該id 。這是在要調用的服務網址中完成的，因此，如果要刪除ID為1的Person，我們將使用HTTP方法DELETE調用http://yourdomain/resources/persons/1 。

后端內容就是這樣。僅30行代碼添加到了舊的REST服務。我還向Person對象添加了一個新屬性，以保留指向圖像的鏈接，目的是顯示此人的化身。

UI – Angular JS

對于UI部分，我決定將其分為3個部分：網格，表單和反饋消息部分，每個部分都有自己的Angular控制器。網格與第1部分中的網格基本相同，但確實需要對新內容進行一些調整：

網格HTML

<div class="grid" ng-controller="personsListController"><div><h3>List Persons</h3></div><div class="gridStyle" ng-grid="gridOptions"></div><pagination direction-links="true" boundary-links="true"total-items="persons.totalResults" items-per-page="persons.pageSize"ng-model="persons.currentPage" ng-change="refreshGrid()"></pagination> </div>

這里沒什么特別的。與第1部分幾乎相同。

網格角控制器

app.controller('personsListController', function ($scope, $rootScope, personService) {// Initialize required information: sorting, the first page to show and the grid options.$scope.sortInfo = {fields: ['id'], directions: ['asc']};$scope.persons = {currentPage: 1};$scope.gridOptions = {data: 'persons.list',useExternalSorting: true,sortInfo: $scope.sortInfo,columnDefs: [{ field: 'id', displayName: 'Id' },{ field: 'name', displayName: 'Name' },{ field: 'description', displayName: 'Description' },{ field: '', width: 30, cellTemplate: '<span class="glyphicon glyphicon-remove remove" ng-click="deleteRow(row)"></span>' }],multiSelect: false,selectedItems: [],// Broadcasts an event when a row is selected, to signal the form that it needs to load the row data.afterSelectionChange: function (rowItem) {if (rowItem.selected) {$rootScope.$broadcast('personSelected', $scope.gridOptions.selectedItems[0].id);}}};// Refresh the grid, calling the appropriate rest method.$scope.refreshGrid = function () {var listPersonsArgs = {page: $scope.persons.currentPage,sortFields: $scope.sortInfo.fields[0],sortDirections: $scope.sortInfo.directions[0]};personService.get(listPersonsArgs, function (data) {$scope.persons = data;})};// Broadcast an event when an element in the grid is deleted. No real deletion is perfomed at this point.$scope.deleteRow = function (row) {$rootScope.$broadcast('deletePerson', row.entity.id);};// Watch the sortInfo variable. If changes are detected than we need to refresh the grid.// This also works for the first page access, since we assign the initial sorting in the initialize section.$scope.$watch('sortInfo.fields[0]', function () {$scope.refreshGrid();}, true);// Do something when the grid is sorted.// The grid throws the ngGridEventSorted that gets picked up here and assigns the sortInfo to the scope.// This will allow to watch the sortInfo in the scope for changed and refresh the grid.$scope.$on('ngGridEventSorted', function (event, sortInfo) {$scope.sortInfo = sortInfo;});// Picks the event broadcasted when a person is saved or deleted to refresh the grid elements with the most// updated information.$scope.$on('refreshGrid', function () {$scope.refreshGrid();});// Picks the event broadcasted when the form is cleared to also clear the grid selection.$scope.$on('clear', function () {$scope.gridOptions.selectAll(false);}); });

需要更多一些屬性來配置網格的行為。重要的data: 'persons.list'是data: 'persons.list' ，它將網格數據綁定到Angular模型值$scope.persons ， columnDefs ，這些列使我們能夠根據需要對網格進行建模。由于我想添加一個選項來刪除每一行，因此我需要添加一個新單元格，當您單擊十字圖標時，該單元格將調用函數deleteRow 。需要afterSelectionChanges函數來與網格中選定的人更新表單數據。您可以在此處檢查其他網格選項。

其余代碼是不言自明的，其中也有一些注釋。關于$rootScope.$broadcast特別說明：用于將事件調度到所有其他控制器。這是控制器之間進行通信的一種方式，因為網格，表單和反饋消息具有單獨的控制器。如果所有內容都只在一個控制器中，則不需要這樣做，只需一個簡單的函數調用就足夠了。如果我們要保留多個控制器，另一種可能的解決方案是使用Angular服務。所使用的方法看起來更加簡潔，因為它可以將應用程序的關注點分開，并且不需要您實現其他Angular服務，但是如果需要的話，調試起來可能會有些困難。

表格HTML

<div class="form" ng-controller="personsFormController"><div ng-if="person.id == null"><h3>Add Person</h3></div><div ng-if="person.id != null"><h3>Edit Person</h3></div><div><form name="personForm" ng-submit="updatePerson()" novalidate><div class="form-group" ng-class="{'has-error' : personForm.name.$invalid && personForm.name.$dirty}"><label for="name">Name:</label><span ng-class="{'glyphicon glyphicon-ok' : personForm.name.$valid && personForm.name.$dirty}"></span><input id="name" name="name" type="text" class="form-control" maxlength="50"ng-model="person.name"required ng-minlength="2" ng-maxlength="50"/><p class="help-block" ng-show="personForm.name.$error.required">Add Name.</p><p class="help-block" ng-show="personForm.name.$error.minlength">Name must be at least 2 characters long.</p><p class="help-block" ng-show="personForm.name.$error.maxlength">Name cannot be longer than 50 characters.</p></div><div class="form-group" ng-class="{'has-error' : personForm.description.$invalid && personForm.description.$dirty}"><label for="description">Description:</label><span ng-class="{'glyphicon glyphicon-ok' : personForm.description.$valid && personForm.description.$dirty}"></span><input id="description" name="description" type="text" class="form-control" maxlength="100"ng-model="person.description"required ng-minlength="5" ng-maxlength="100"/><p class="help-block" ng-show="personForm.description.$error.required">Add Description.</p><p class="help-block" ng-show="personForm.description.$error.minlength">Description must be at least 5 characters long.</p><p class="help-block" ng-show="personForm.description.$error.maxlength">Description cannot be longer than 100 characters.</p></div><div class="form-group" ng-class="{'has-error' : personForm.imageUrl.$invalid && personForm.imageUrl.$dirty}"><label for="imageUrl">Image URL:</label><span ng-class="{'glyphicon glyphicon-ok' : personForm.imageUrl.$valid && personForm.imageUrl.$dirty}"></span><input id="imageUrl" name="imageUrl" type="url" class="form-control" maxlength="500"ng-model="person.imageUrl"required/><p class="help-block" ng-show="personForm.imageUrl.$error.required">Add Image URL.</p><p class="help-block" ng-show="personForm.imageUrl.$invalid && personForm.imageUrl.$dirty">Invalid Image URL.</p></div><div class="avatar" ng-if="person.imageUrl"><img ng-src="{{person.imageUrl}}" width="400" height="250"/></div><div class="buttons"><button type="button" class="btn btn-primary" ng-click="clearForm()">Clear</button><button type="submit" class="btn btn-primary" ng-disabled="personForm.$invalid">Save</button></div></form></div> </div>

外觀如下：

許多代碼用于驗證目的，但讓我們更詳細地研究一下：每個input元素將其值綁定到person.something 。這允許在HTML和Javascript控制器之間對數據建模，因此我們可以在控制器中寫入$scope.person.name ，以將輸入值填充為name為name的形式。要訪問HTML表單中的數據，我們使用表單名稱personForm加上輸入字段的名稱。

HTML5在輸入字段中有自己的一組驗證，但是我們想使用Angular驗證。在這種情況下，我們需要通過在form元素上使用novalidate來禁用表單驗證。現在，要使用Angular驗證，我們可以在input元素中使用一些Angular指令。對于這種非常基本的形式，我們僅使用required ， ng-minlength和ng-maxlength ，但您可以使用其他形式。只需查看文檔即可。

Angular根據輸入驗證狀態分配CSS類。想一想，這些是可能的值：

州 CSS 上

valid	ng有效	該字段有效時。
invalid	ng無效	當該字段無效時。
pristine	ng-原始	當領域從未被觸及過。
dirty	ng-dirty	字段更改時。

這些CSS類為空。您需要創建它們并在包含CSS表單中為應用程序分配它們的樣式。相反，我們將使用Bootstrap中的樣式，這些樣式非常好。為了使它們起作用，需要將一些其他類應用于這些元素。包含輸入的div元素需要CSS類form-group ，而input元素需要CSS類form-control 。

要顯示無效的輸入字段，我們將ng-class="{'has-error' : personForm.name.$invalid && personForm.name.$dirty}"到包含的輸入div中。此代碼評估personForm中的名稱是否無效以及是否骯臟。條件驗證后，輸入將顯示為無效。

最后，對于表單驗證消息，我們需要為每個輸入和要執行的驗證類型驗證$error指令。只需將ng-show="personForm.name.$error.minlength"到帶有消息HTML顯示元素，以警告用戶名稱輸入字段太短。

表單角度控制器

// Create a controller with name personsFormController to bind to the form section. app.controller('personsFormController', function ($scope, $rootScope, personService) {// Clears the form. Either by clicking the 'Clear' button in the form, or when a successfull save is performed.$scope.clearForm = function () {$scope.person = null;// For some reason, I was unable to clear field values with type 'url' if the value is invalid.// This is a workaroud. Needs proper investigation.document.getElementById('imageUrl').value = null;// Resets the form validation state.$scope.personForm.$setPristine();// Broadcast the event to also clear the grid selection.$rootScope.$broadcast('clear');};// Calls the rest method to save a person.$scope.updatePerson = function () {personService.save($scope.person).$promise.then(function () {// Broadcast the event to refresh the grid.$rootScope.$broadcast('refreshGrid');// Broadcast the event to display a save message.$rootScope.$broadcast('personSaved');$scope.clearForm();},function () {// Broadcast the event for a server error.$rootScope.$broadcast('error');});};// Picks up the event broadcasted when the person is selected from the grid and perform the person load by calling// the appropiate rest service.$scope.$on('personSelected', function (event, id) {$scope.person = personService.get({id: id});});// Picks us the event broadcasted when the person is deleted from the grid and perform the actual person delete by// calling the appropiate rest service.$scope.$on('deletePerson', function (event, id) {personService.delete({id: id}).$promise.then(function () {// Broadcast the event to refresh the grid.$rootScope.$broadcast('refreshGrid');// Broadcast the event to display a delete message.$rootScope.$broadcast('personDeleted');$scope.clearForm();},function () {// Broadcast the event for a server error.$rootScope.$broadcast('error');});}); });

對于表單控制器，我們需要兩個功能來執行與按鈕“清除”和“保存”按鈕相關的操作，這兩個功能是不言自明的。快速說明：由于某些原因，Angular不會清除處于無效狀態的輸入字段。我確實發現一些人抱怨同樣的問題，但是我需要進一步調查。也許這是我做錯了。

使用已實現相應HTTP方法的$resource對象中的save和delete調用REST服務。檢查文檔。您可以通過以下工廠獲得$resource ：

REST服務

// Service that provides persons operations app.factory('personService', function ($resource) {return $resource('resources/persons/:id'); });

控制器代碼的其余部分是用來拾取由網格創建的事件，以將人員數據加載到表單中并刪除人員的功能。該控制器還會創建一些事件。如果我們添加或刪除人員，則需要更新網格，以便生成一個事件，要求更新網格。

反饋消息HTML

<div class="message" ng-controller="alertMessagesController"><alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert> </div>

這只是應用程序的頂部，用于顯示基于保存，刪除或服務器錯誤的成功或錯誤消息。

反饋消息角度控制器

// Create a controller with name alertMessagesController to bind to the feedback messages section. app.controller('alertMessagesController', function ($scope) {// Picks up the event to display a saved message.$scope.$on('personSaved', function () {$scope.alerts = [{ type: 'success', msg: 'Record saved successfully!' }];});// Picks up the event to display a deleted message.$scope.$on('personDeleted', function () {$scope.alerts = [{ type: 'success', msg: 'Record deleted successfully!' }];});// Picks up the event to display a server error message.$scope.$on('error', function () {$scope.alerts = [{ type: 'danger', msg: 'There was a problem in the server!' }];});$scope.closeAlert = function (index) {$scope.alerts.splice(index, 1);}; });

這是將消息推送到視圖的控制器。偵聽由網格和表單控制器創建的事件。

最終結果

嗯，那是很多代碼和新信息。讓我們看一下最終結果：

感謝Cloudbees ，在http://javaee7-angular.radcortez.cloudbees.net中也運行了一個實時版本。如果云實例處于Hibernate狀態，則可能需要一段時間才能打開（因為沒有使用）。

資源資源

您可以從我的github存儲庫中克隆完整的工作副本，然后將其部署到Wildfly。您可以在此處找到有關部署它的說明。也應該在Glassfish上工作。

Java EE – Angular JS源

由于我將來可能會修改代碼，因此您可以從3.0版中下載本文的原始源。或者，克隆存儲庫并使用以下命令從版本3.0中檢出標記： git checkout 3.0 。

另請檢查：

帶有Angular JS的Java EE 7 –第1部分
Javascript軟件包管理– NPM – Bower – Grunt

最后的想法

開始輸入后，表單驗證立即啟動。 Angular 1.3將具有on模糊屬性，僅在失去焦點之后才能進行驗證，但我仍在使用Angular1.2.x。
我不得不承認，我發現驗證代碼有些冗長。我不知道是否有一種方法可以簡化它，但是您不必將每個消息驗證都添加到每個輸入中。
這里仍然缺少一些東西，例如參數清除或服務器端驗證。我將在下一篇博客文章中介紹這些內容。

這是一篇很長的文章，實際上是我在博客上寫的最長的文章。如果您到此為止，非常感謝您撥冗閱讀本文。我希望你喜歡它！讓我知道您是否有任何意見。

翻譯自: https://www.javacodegeeks.com/2014/10/java-ee-7-with-angular-js-crud-rest-validations-part-2.html