«1. Обзор
В этой статье мы в основном сосредоточимся на реализации разбивки на страницы на стороне сервера в Spring REST API и простом внешнем интерфейсе AngularJS.
Мы также рассмотрим часто используемую сетку таблиц в Angular под названием UI Grid.
2. Зависимости
Здесь мы подробно описываем различные зависимости, необходимые для этой статьи.
2.1. JavaScript
Чтобы Angular UI Grid работал, нам понадобятся следующие скрипты, импортированные в наш HTML.
-
Angular JS (1.5.8)
-
Angular UI Grid
2.2. Maven
Для нашего бэкэнда мы будем использовать Spring Boot, поэтому нам потребуются следующие зависимости:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
Примечание. Другие зависимости здесь не указаны, полный список см. в полном файле pom.xml в проект GitHub.
3. О приложении
Приложение представляет собой простое приложение-каталог учеников, которое позволяет пользователям видеть сведения об учениках в таблице с разбивкой на страницы.
Приложение использует Spring Boot и работает на встроенном сервере Tomcat со встроенной базой данных.
Наконец, что касается API, есть несколько способов разбиения на страницы, описанных в статье REST Pagination in Spring здесь, которую настоятельно рекомендуется прочитать вместе с этой статьей.
Наше решение здесь простое — иметь информацию о подкачке в запросе URI следующим образом: /student/get?page=1\u0026size=2.
4. Клиентская сторона
Во-первых, нам нужно создать логику клиентской стороны.
4.1. UI-Grid
Наш index.html будет иметь необходимые импорты и простую реализацию таблицы grid:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/
bower-ui-grid/master/ui-grid.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.5.6/angular.min.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/
master/ui-grid.min.js"></script>
<script src="view/app.js"></script>
</head>
<body>
<div ng-controller="StudentCtrl as vm">
<div ui-grid="gridOptions" class="grid" ui-grid-pagination>
</div>
</div>
</body>
</html>
Давайте посмотрим на код поближе:
-
ng-app — это директива Angular, которая загружает приложение модуля. Все элементы под ними будут частью модуля приложения ng-controller — это директива Angular, которая загружает контроллер StudentCtrl с псевдонимом vm. Все элементы под ними будут частью ui-grid контроллера StudentCtrl — это директива Angular, которая принадлежит Angular ui-grid и использует gridOptions в качестве настроек по умолчанию, gridOptions объявлен в $scope в app.js
4.2 . Модуль AngularJS
Давайте сначала определим модуль в app.js:
var app = angular.module('app', ['ui.grid','ui.grid.pagination']);
Мы объявили модуль приложения и внедрили ui.grid, чтобы включить функциональность UI-Grid; мы также внедрили ui.grid.pagination, чтобы включить поддержку нумерации страниц.
Далее мы определим контроллер:
app.controller('StudentCtrl', ['$scope','StudentService',
function ($scope, StudentService) {
var paginationOptions = {
pageNumber: 1,
pageSize: 5,
sort: null
};
StudentService.getStudents(
paginationOptions.pageNumber,
paginationOptions.pageSize).success(function(data){
$scope.gridOptions.data = data.content;
$scope.gridOptions.totalItems = data.totalElements;
});
$scope.gridOptions = {
paginationPageSizes: [5, 10, 20],
paginationPageSize: paginationOptions.pageSize,
enableColumnMenus:false,
useExternalPagination: true,
columnDefs: [
{ name: 'id' },
{ name: 'name' },
{ name: 'gender' },
{ name: 'age' }
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
gridApi.pagination.on.paginationChanged(
$scope,
function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
StudentService.getStudents(newPage,pageSize)
.success(function(data){
$scope.gridOptions.data = data.content;
$scope.gridOptions.totalItems = data.totalElements;
});
});
}
};
}]);
Давайте теперь посмотрим на пользовательские настройки пагинации в $scope.gridOptions:
-
paginationPageSizes — определяет доступные параметры размера страницы paginationPageSize — “ определяет размер страницы по умолчанию enableColumnMenus — используется для включения/отключения меню в столбцах useExternalPagination — требуется, если вы разбиваете страницы на стороне сервера columnDefs — имена столбцов, которые будут автоматически сопоставлены с объектом JSON вернулся с сервера. Имена полей в объекте JSON, возвращенном с сервера, и определенное имя столбца должны совпадать. onRegisterApi — возможность регистрировать события публичных методов внутри сетки. Здесь мы зарегистрировали gridApi.pagination.on.paginationChanged, чтобы указать UI-Grid запускать эту функцию при каждом изменении страницы.
И отправить запрос к API:
app.service('StudentService',['$http', function ($http) {
function getStudents(pageNumber,size) {
pageNumber = pageNumber > 0?pageNumber - 1:0;
return $http({
method: 'GET',
url: 'student/get?page='+pageNumber+'&size='+size
});
}
return {
getStudents: getStudents
};
}]);
5. Бэкенд и API
5.1. Служба RESTful
Вот простая реализация RESTful API с поддержкой разбиения на страницы:
@RestController
public class StudentDirectoryRestController {
@Autowired
private StudentService service;
@RequestMapping(
value = "/student/get",
params = { "page", "size" },
method = RequestMethod.GET
)
public Page<Student> findPaginated(
@RequestParam("page") int page, @RequestParam("size") int size) {
Page<Student> resultPage = service.findPaginated(page, size);
if (page > resultPage.getTotalPages()) {
throw new MyResourceNotFoundException();
}
return resultPage;
}
}
@RestController был представлен в Spring 4.0 как удобная аннотация, которая неявно объявляет @Controller и @ResponseBody.
Для нашего API мы объявили, что он принимает два параметра: страницу и размер, которые также будут определять количество записей, возвращаемых клиенту.
Мы также добавили простую проверку, которая выдает исключение MyResourceNotFoundException, если номер страницы превышает общее количество страниц.
Наконец, мы вернем Page в качестве ответа — это очень полезный компонент Spring Data, который содержит данные разбиения на страницы.
5.2. Реализация службы
Наша служба просто возвращает записи на основе страницы и размера, предоставленных контроллером:
@Service
public class StudentServiceImpl implements StudentService {
@Autowired
private StudentRepository dao;
@Override
public Page<Student> findPaginated(int page, int size) {
return dao.findAll(new PageRequest(page, size));
}
}
5.3. Реализация репозитория
«Для нашего уровня сохраняемости мы используем встроенную базу данных и Spring Data JPA.
Во-первых, нам нужно настроить нашу конфигурацию сохраняемости:
@EnableJpaRepositories("com.baeldung.web.dao")
@ComponentScan(basePackages = { "com.baeldung.web" })
@EntityScan("com.baeldung.web.entity")
@Configuration
public class PersistenceConfig {
@Bean
public JdbcTemplate getJdbcTemplate() {
return new JdbcTemplate(dataSource());
}
@Bean
public DataSource dataSource() {
EmbeddedDatabaseBuilder builder = new EmbeddedDatabaseBuilder();
EmbeddedDatabase db = builder
.setType(EmbeddedDatabaseType.HSQL)
.addScript("db/sql/data.sql")
.build();
return db;
}
}
Конфигурация сохраняемости проста — у нас есть @EnableJpaRepositories для сканирования указанного пакета и поиска интерфейсов репозитория Spring Data JPA.
Здесь у нас есть @ComponentScan для автоматического сканирования всех bean-компонентов, и у нас есть @EntityScan (из Spring Boot) для сканирования классов сущностей.
Мы также объявили наш простой источник данных — используя встроенную базу данных, которая будет запускать сценарий SQL, предоставленный при запуске.
Теперь пришло время создать наш репозиторий данных:
public interface StudentRepository extends JpaRepository<Student, Long> {}
Это в основном все, что нам нужно сделать здесь; если вы хотите глубже узнать, как настроить и использовать очень мощный Spring Data JPA, обязательно прочитайте руководство по нему здесь.
6. Запрос и ответ на разбиение на страницы
При вызове API – http://localhost:8080/student/get?page=1\u0026size=5 ответ JSON будет выглядеть примерно так:
{
"content":[
{"studentId":"1","name":"Bryan","gender":"Male","age":20},
{"studentId":"2","name":"Ben","gender":"Male","age":22},
{"studentId":"3","name":"Lisa","gender":"Female","age":24},
{"studentId":"4","name":"Sarah","gender":"Female","age":26},
{"studentId":"5","name":"Jay","gender":"Male","age":20}
],
"last":false,
"totalElements":20,
"totalPages":4,
"size":5,
"number":0,
"sort":null,
"first":true,
"numberOfElements":5
}
~ ~~ Здесь следует отметить, что сервер возвращает DTO org.springframework.data.domain.Page, обертывая наши ресурсы для учащихся.
Объект Page будет иметь следующие поля:
-
last — установите значение true, если это последняя страница, иначе false first — установите значение true, если это первая страница, иначе false totalElements — общее количество строк/записей. В нашем примере мы передали это параметру сетки пользовательского интерфейса $scope.gridOptions.totalItems, чтобы определить, сколько страниц будет доступно. количество записей на странице, это было передано от клиента через параметр size number — номер страницы, отправленный клиентом, в нашем ответе число равно 0, потому что в нашем бэкэнде мы используем массив студентов, который является нулевым. на основе индекса, поэтому в нашем бэкенде мы уменьшаем номер страницы на 1 sort — параметр сортировки для страницы numberOfElements — количество строк/записей, возвращаемых для страницы
7. Тестирование нумерации страниц
Давайте теперь настройте тест для нашей логики разбиения на страницы, используя RestAssured; чтобы узнать больше о RestAssured, вы можете ознакомиться с этим руководством.
7.1. Подготовка теста
Для простоты разработки нашего тестового класса мы добавим статический импорт:
io.restassured.RestAssured.*
io.restassured.matcher.RestAssuredMatchers.*
org.hamcrest.Matchers.*
Далее мы настроим тест с поддержкой Spring:
@RunWith(SpringJUnit4ClassRunner.class)
@SpringApplicationConfiguration(classes = Application.class)
@WebAppConfiguration
@IntegrationTest("server.port:8888")
@SpringApplicationConfiguration помогает Spring знает, как загрузить ApplicationContext, в этом случае мы использовали Application.java для настройки нашего ApplicationContext.
@WebAppConfiguration был определен, чтобы сообщить Spring, что загружаемый ApplicationContext должен быть WebApplicationContext.
И @IntegrationTest был определен для запуска запуска приложения при запуске теста, что делает наши службы REST доступными для тестирования.
7.2. Тесты
Вот наш первый тестовый пример:
@Test
public void givenRequestForStudents_whenPageIsOne_expectContainsNames() {
given().params("page", "0", "size", "2").get(ENDPOINT)
.then()
.assertThat().body("content.name", hasItems("Bryan", "Ben"));
}
Этот тестовый пример выше предназначен для проверки того, что когда страница 1 и размер 2 передаются службе REST, содержимое JSON, возвращаемое с сервера, должно иметь имена Bryan и Бен.
Давайте разберем тестовый пример:
-
задано — часть RestAssured и используется для начала построения запроса, вы также можете использовать with() get — часть RestAssured и, если используется, запускает получение request, используйте post() для пост-запроса hasItems — часть hamcrest, которая проверяет совпадение значений
Мы добавляем еще несколько тестов: фактически вызывается, получен ответ OK:
@Test
public void givenRequestForStudents_whenResourcesAreRetrievedPaged_thenExpect200() {
given().params("page", "0", "size", "2").get(ENDPOINT)
.then()
.statusCode(200);
}
Этот тест утверждает, что когда запрашивается размер страницы, равный двум, размер возвращаемой страницы фактически равен двум:
@Test
public void givenRequestForStudents_whenSizeIsTwo_expectNumberOfElementsTwo() {
given().params("page", "0", "size", "2").get(ENDPOINT)
.then()
.assertThat().body("numberOfElements", equalTo(2));
}
Этот тест утверждает, что при вызове ресурсов в первый раз, когда значение имени первой страницы истинно.
@Test
public void givenResourcesExist_whenFirstPageIsRetrieved_thenPageContainsResources() {
given().params("page", "0", "size", "2").get(ENDPOINT)
.then()
.assertThat().body("first", equalTo(true));
}
В репозитории есть еще много тестов, поэтому обязательно загляните в проект GitHub.
8. Заключение
В этой статье показано, как реализовать сетку таблицы данных с помощью UI-Grid в AngularJS и как реализовать необходимое разбиение на страницы на стороне сервера.
«Реализацию этих примеров и тестов можно найти в проекте GitHub. Это проект Maven, поэтому его должно быть легко импортировать и запускать как есть.
Чтобы запустить загрузочный проект Spring, вы можете просто выполнить mvn spring-boot:run и получить к нему локальный доступ по адресу http://localhost:8080/.
«