Статьи

Создание облачных собственных приложений с помощью Spring: часть 3

Ноябрь 11, 2017

В частях  1  и  2  этого урока мы создали приложение, которое отображает предстоящие заезды с препятствиями и участников, которые будут их запускать. Мы рассмотрели некоторые типичные проблемы облачных приложений для составления списка междоменных запросов и обнаружения служб с помощью проектов Spring Cloud и Netflix, а именно Eureka и Zuul. В третьей части мы завершим реализацию веб-интерфейса нашего приложения.

Во-первых, давайте удостоверимся, что мы можем исправить междоменную проблему, которая возникла у нас при запуске.

Реализация представления о гонках

Откройте  main.js в  src/main/resources/static/controllers папке вашего веб-сервиса. Измените  url свойство  $http вызова на  /races.

angular.module('ocrApp')
  .controller('MainCtrl', function ($scope, $http) {
  $http({
          method: 'GET',
          url: '/races'
      }).then(function(response) {
      $scope.races = response.data;
      }, function(response) {
      console.error('Error requesting races');
      });
  });

Убедитесь, что все службы запущены и зарегистрированы в Eureka, и перейдите по  адресу http: // localhost: 8080 . Если вы откроете консоль своего браузера, вы больше не увидите междоменных ошибок, и ваш запрос к  http: // localhost: 8080 / races  должен быть успешно выполнен.

Теперь давайте используем данные, которые мы получаем из запроса, в представлении для основного контроллера. Откройте  main.html в  src/main/resouces/static/views папке веб-службы и измените код на:

<h3>Races</h3>
<ul>
<li ng-repeat="race in races"><a ng-href="/#/participants/{{race.id}}">{{race.name}}</a></li>
</ul>

После сохранения этого файла перейдите по  адресу http: // localhost: 8080,  и вы должны увидеть список рас:

Снимок экрана 2015-09-10 в 15.55.59

Щелчок по ссылкам пока не работает, потому что мы не добавили представления или контроллеры для отображения страницы, давайте сделаем это сейчас.

Добавление просмотра участников

Создайте новый файл с именем  participants.js in  src/main/resources/static/scripts/controllers и добавьте следующий код:

angular.module('ocrApp')
  .controller('ParticipantsCtrl', function ($scope, $http, $routeParams) {
  $http({
          method: 'GET',
          url: '/participants/races/' + $routeParams.raceId
      }).then(function (response) {
      $scope.participants = response.data;
      }, function(response) {
      console.error('Error requesting participants.')
      });
  });

Этот код просто делает запрос в службу нашего участника (через Zuul), чтобы получить список участников для гонки, на которую мы нажали. Теперь нам нужно представление для отображения имен участников. Создайте файл с именем  participants.html in  src/main/resources/static/views и добавьте следующий код

<h3>Participants</h3>
<ul>
<li ng-repeat="participant in participants">{{participant.firstName}} {{participant.lastName}}</li>
</ul>

Наконец, нам нужно рассказать Angular о новых участниках view и контроллере. Открыть  app.js в src/main/resources/static/scripts и изменить его , так это выглядит как следующий код

angular
  .module('ocrApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/participants/:raceId', {
      templateUrl: 'views/participants.html',
      controller: 'ParticipantsCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Последнее, но не менее важное, мы должны включить  participants.js в нашу  index.html страницу, чтобы загружался новый JavaScript. Откройте index.html внутри  src/main/resources/static и внизу, сразу после всех других тегов сценария, добавьте следующий тег сценария в файл:

<script src="scripts/controllers/participants.js"></script>

Это оно! Обновите страницу и попробуйте нажать на ссылки; все они должны работать сейчас, и вы должны видеть каждого участника в каждой гонке.

Поздравляем, вы создали свое первое микросервисное приложение с Spring Boot и Spring Cloud! Конечно, это очень просто и работает только на вашем локальном компьютере, но это не потребовало особых усилий, потому что Spring Boot и Spring Cloud позволяют легко выполнять то, что в противном случае было бы очень сложным заданием.

35
Share: