Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Федеральное агентство железнодорожного транспорта

Омский государственный университет путей сообщения (ОмГУПС)

Кафедра «Автоматика и системы управления»

К ЗАЩИТЕ ДОПУСТИТЬ

хДоцент кафедры «АиСУ»

____________ Е. А. Альтман

«__» ____________ 2017 г.

КЛИЕНТ-СЕРВЕРНОЕ ПРИЛОЖЕНИЕ НА ПЛАТФОРМАХ

SPRING И REACT

Пояснительная записка к курсовой работе

по дисциплине «Объектно-ориентированное программирование»

ИНМВ.400200.000 ПЗ

Студент гр. 25м

___________Р.Д. Актаев

Руководитель - доцент

кафедры АиСУ

___________ Е. А. Альтман

Омск 2017

Задание

Тема курсовой работы - разработка клиент-серверного веб-приложения для ведения библиографических списков литературы для рабочей программы дисциплины.

Клиент представляет из себя веб-страницу, управляемую компонентами React, и запускается в браузере. Backend-часть реализована с помощью фреймфорка Spring и представляет собой REST-сервер, взаимодействующий с сущностями базы данных посредством JPA. Клиентские запросы к серверу осуществляются с помощью rest-инструментов пакета npm.

Проект реализует редактирование данных для раздела 8, в котором приводится перечень основной и дополнительной учебной литературы, необходимой для освоения дисциплины (модуля).

В пункте 8.1 «Основная литература» приводится список литературы, обязательной для изучения данной учебной дисциплины (модуля). В этом разделе должно быть, как правило, не менее трех библиографических источников, доступных в электронно-библиотечных системах, с которыми Университет заключил договоры на право доступа к электронным ресурсам (необходимо указать ссылки).

В пункте 8.2 «Дополнительная литература» указывается список литературы, содержащий дополнительный материал к основным разделам дисциплины (модуля), необходимый для постановки научных исследований и углубленного ее изучения (монографии, справочно-библиографические, учебно-методические пособия, периодические и научные издания).

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

Полностью разработанное приложение и пояснительная записка к нему должны быть сданы не позднее 25 декабря 2017 года.

Реферат

Пояснительная записка к курсовой работе содержит 50 страниц, 30 рисунков, 4 использованных источника, 28 листингов, 3 приложения.

Клиент, сервер, браузер, верстка, HTML, веб-разработка, front-end, JavaScript, React, Node.js, Spring, REST, библиография, LaTEX, BibTEX, AJAX.

Цель работы: закрепление полученных в рамках лабораторного практикума знаний основ frontend-разработки с использованием HTML+CSS и JavaScript и backend-разработки с использованием Spring MVC.

Результатом курсовой работы является клиент-серверное приложения с удобным графическим интерфейсом.

Пояснительное записка к курсовой работе выполнена в текстовом редакторе Microsoft Word 2016, клиентская часть написана в IDE JetBrains WebStorm 2016.3.2, серверная - в IntellijIDEA 2016.3.3. Для быстрого доступа к файлам исходного кода использован текстовый редактор Sublime Text 3. Макет приложения построен с помощью программы Adobe Photoshop 2015. Библиографические списки создавались в системе управления библиографической информацией JabRef. Тестирование HTTP-запросов производилось в программе Postman.



Содержание

клиент сервер интерфейс приложение

Задание

Реферат

Введение

1Теоретические основы

1.1Разметка страницы

1.1.1Язык гипертекстовой разметки (HTML5)

1.1.2Каскадные таблицы стилей (CSS)

1.2Управление отображением страницы

1.2.1Язык JavaScript

1.2.2Библиотека React как инструмент для построения пользовательских интерфейсов

1.3Инструменты для построения проекта

1.4Построение REST-сервиса на Java с помощью фреймфорка Spring

1.5СУБД MySQL

1.6BibTeX и создание форматированных списков библиографии

2Клиентская часть приложения

3База данных и репозитории приложения

3.1Создание базы данных для приложения

3.2Классы данных

4Создание сервера с помощью Spring Data REST

4.1Создание JPA-репозиториев

4.2REST-контроллер

5Формирование запросов к серверу со стороны клиента

5.1Компонент App

5.2Компонент Book

5.3Компонент Add

5.4Компонент Update

5.5Работоспособность ссылки источника

6Импорт из BibTeX

6.1Обработка запроса

6.2Обработка запроса

6.3Отправка запроса со стороны клиента

6.4Тестирование импорта

Заключение

Библиографический список

Приложения



Введение

Всемирная паутина - это непрерывно развивающаяся сеть, и на сегодняшний день она ушла далеко от своих концепций 1990-х годов. Большой объем данных был слишком велик, чтобы передавать его большому числу людей по всему миру. Тогда Тим Бернерс-Ли, один из специалистов ЦЕРН, придумал способ навигации между ними посредством протокола передачи гиперссылок (Hyper Text Transfer Protocol (HTTP)). Он также создал специальный язык разметки, названный языком гипертекстовой разметки (Hyper Text Markup Language (HTML)). Для того чтобы собрать все это воедино, он создал первые браузер и веб-сервер.

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

Для управления доступом к серверу могут использоваться как специальная платформа NodeJS, так и языки программирования PHP (наиболее популярный фреймворк Lavarel), Java (Spring, Vert.x, Spark и др), Python (Django) или Ruby (Ruby on Rails).

Внешним видом страницы на стороне клиента управляет JavaScript. Для этого существуют такие библиотеки как jQuery, React; фреймворки Angular, Vue и многие другие.

Порядок разработки и утверждения рабочей программы дисциплины (модуля) и программы практики по образовательным программам высшего образования - программам бакалавриата, программам специалитета, программам магистратуры в ОмГУПС разработан в соответствии с Федеральным законом от 29.12.2012 № 273-ФЗ «Об образовании в Российской Федерации».

1 Теоретические основы

Веб-приложение - это клиент-серверное приложение, клиентом в котором является динамическая веб-страница. Принцип его работы основан на взаимодействии между браузером, запущенным на компьютере конечного пользователя, и веб-сервером. Задача сервера состоит в том, чтобы принять запрос от клиента и попытаться дать на него содержательный ответ, обычно передавая ему запрошенную веб-страницу. Прежде всего, он передает запрос программе, называемой сервером приложений. Здесь анализируется код, осуществляется доступ ресурсам и формируется веб-страница.

Чтобы отделять оформление сайта от содержимого, используется такой ресурс как база данных, которая упрощяет доступ к информации, структурирует ее и предоставляет методы для управления ими. Запросы к ней осуществляются посредством языка SQL (синтаксис как правило зависит от используемой СУБД).

Процесс взаимодействия между сервером и клиентом для управления ресурсами представлен на рисунке 1.

Рисунок 1 - Процесс взаимодействия между клиентом и серверов в

динамическом веб-приложении

Как и описывалось ранее, клиент формирует запрос к серверу, а тот, в свою очередь посылает запросы к базе данных, получает необходимую информацию и превращает ее в программный код и формирует HTML-разметку, которую отправляет клиенту и которую в своем браузере видит пользователь.4

1.1 Разметка страницы

1.1.1 Язык гипертекстовой разметки (HTML5)

HTML - это язык описания структуры веб-страниц. Страницы, созданные с его помощью могут быть открыты только с помощью специальных программ (браузеров). Для выполнения своей основной функции HTML использует теги.

На рисунке 2 представлена структура любого HTML-документа.

Рисунок 2 - Структура HTML-документа

В заголовке помещается тег <!DOCTYPE [стандарт HTML]>. Здесь указывается версия языка. На момент выполнения курсовой работы актуальной версией является стандарт HTML5.

Весь код страницы помещается в тегах <html>…</html>. Внутри <head>…</head> указывается заголовок страницы, подключаются скрипты и стили, указываются такие метаданные, как кодировка, ключевые слова, актальность и т.д.

Внутри тегов <body>…</body> помещаются элементы, непосредственно отображаемые в браузере. Здесь можно разделить блоки по смыслу, указать абзацы, создать таблицы, списки и элементы формы. Также в аттрибутах указываются разного рода параметры вроде идентификаторов и имен классов, которые будут применяться при стилизации CSS.

Документы сохраняются в формате «.html».

1.1.2 Каскадные таблицы стилей (CSS)

Для стилизации элементов разметки используются так называемые каскадные таблицы стилей или, проще говоря, CSS. Основной целью разработки CSS было разделение логического оформления страниц и описания их внешнего вида.

Здесь можно регулировать шрифты, границы и размеры блоков, расстояния между элементами, фон, цвета и многое другое. Синтаксис CSS приведен на рисунке 3.

Рисунок 3 - Синтаксис CSS

Сначала указывается селектор - элемент или группа элементов, к которым будут применены стили. Это может быть какой-то тип элементов, класс или уникальный идентификатор. Можно указывать, чьих наследников оформлять. Допускается перечисление селекторов через запятую.

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

Таблицы стилей хранятся в формате «.css». Код подключения стилей к документу представлен на листинге 1.

<link rel="stylesheet" href="style.css">

Листинг 1 - Подключение стилей к документу

Значение аттрибута «href» - это и есть относительный или абсолютный путь к CSS-файлу. Тег помещается внутри элемента «head».

1.2 Управление отображением страницы

1.2.1 Язык JavaScript

Для придания интерактивности элементам разметки применяется язык JavaScript или его многочисленные модификации.

Язык JavaScript был разработан в 1995 году. Его ссновные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.

JavaScript является объектно-ориентированным языком, но используемое в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными класс-ориентированными языками. Кроме того, JavaScript имеет ряд свойств, присущих функциональным языкам -- функции как объекты первого класса, объекты как списки, карринг, анонимные функции, замыкания -- что придаёт языку дополнительную гибкость.

Сценарии встраиваются в HTML-документ с помощью тега <script>…</script>.

1.2.2 Библиотека React как инструмент для построения пользовательских интерфейсов

React -- это JavaScript библиотека для создания пользовательских интерфейсов от Facebook. Она была разработана «с нуля», с упором на производительность.

Важно понимать, что React - это только уровень представления, а не полноценный фреймворк наподобие Angular или Vue. Он используется собственную спецификацию языка JavaScript, называемую JSX. Ее синтаксис позволяет использовать синтаксис HTML прямо в коде сценария.

ReactJS манипулирует виртуальным DOM-деревом, поскольку взаимодействие с реальным DOM - очень дорогостоящия операция. Каждый компонент библиотеки - это объект, который имеет свой жизненный цикл и который может быть отрисован в браузере. Какие-то методы жизненного цикла вызываются при отрисовке компонента, какие-то - при его перерисовке; и, наконец, существуют функции, которые вызываются перед уничтожением объекта. За отрисовку отвечает метод render(). Все функции жизненного цикла представлены на рисунке 4.

Рисунок 4 - Функции жизненного цикла компонента React

1.3 Инструменты для построения проекта

Node.js - написанная на языке C++ программная платформа, основанная на движке V8. Она добавляет возможность JavaScript взаимодействовать с устройствами ввода-вывода через свой API, подключать другие внешние библиотеки, написанные на разных языках, обеспечивая вызовы к ним из JavaScript-кода. Как правило, Node.js выполняет роль веб-сервера, однако в данной курсовой работе эта возможность применяться не будет.

В Node.js входит менеджер пакетов npm. С помощью команды npm install <packagename> можно выборочно установить любой необходимый пакет от стороннего разработчика, облегчающий создание проекта.

Webpack - система сборки, которая предоставляет компоновку модулей. Вебпак не ограничивается JavsScript-файлами, он может работать с другой статикой вроде CSS, картинок, HTML-компонентов и др. Webpack также поддерживает очень полезную «code splitting» (разбиение кода). Большое приложение можно разбить на куски, которые загружаются по мере необходимости.

1.4 Построение REST-сервиса на Java с помощью фреймфорка Spring

REST (Representational state transfer) - это стиль архитектуры программного обеспечения для распределенных систем, таких как World Wide Web, который, как правило, используется для построения веб-служб. Термин REST был введен в 2000 году Роем Филдингом, одним из авторов HTTP-протокола. Системы, поддерживающие REST, называются RESTful-системами.

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

Управление информацией сервиса основывается на протоколе передачи данных. Наиболее распространенный протокол - HTTP. Так вот, для HTTP действие над данными задается с помощью методов: GET (получить), PUT (добавить, заменить), POST (добавить, изменить, удалить), DELETE (удалить). Таким образом, действия CRUD (Create-Read-Updtae-Delete) могут выполняться как со всеми 4-мя методами, так и только с помощью GET и POST.

Spring - это открытый универсальный фреймворк для Java-платформы. Он имеет собственную MVC-платформу для разработки веб-приложений.

Наиболее важные интерфейсы, определенные Spring MVC:

а) HandlerMapping: выбор класса и его метода, которые должны обработать данный входящий запрос на основе любого внутреннего или внешнего для этого запроса атрибута или состояния;

б) HandlerAdapter: вызов и выполнение выбранного метода обработки входящего запроса;

в) Controller: включен между Моделью (Model) и Представлением (View). Управляет процессом преобразования входящих запросов в адекватные ответы. Действует как ворота, направляющие всю поступающую информацию. Переключает поток информации из модели в представление и обратно;

г) View: ответственно за возвращение ответа клиенту в виде текстов и изображений. Некоторые запросы могут идти прямо во View, не заходя в Model; другие проходят через все три слоя;

д) ViewResolver: выбор, какое именно View должно быть показано клиенту;

е) HandlerInterceptor: перехват входящих запросов. Сопоставим, но не эквивалентен сервлет-фильтрам (использование не является обязательным и не контролируется DispatcherServlet-ом);

ж) LocaleResolver: получение и, возможно, сохранение локальных настроек (язык, страна, часовой пояс) пользователя;

з) MultipartResolver: обеспечивает Upload -- загрузку на сервер локальных файлов клиента;

Spring MVC предоставляет разработчику следующие возможности:

а) Ясное и прозрачное разделение между слоями в MVC и запросах.

б) стратегия интерфейсов -- каждый интерфейс делает только свою часть работы;

в) интерфейс всегда может быть заменен альтернативной реализацией;

г) интерфейсы тесно связаны с Servlet API;

д) высокий уровень абстракции для веб-приложений;

Поддержка REST в Spring появилась в версии 3. Появились аннтоации @RequestMapping, @ResponceBody, @PathVariable для указания URL и CRUD-метода.

1.5 СУБД MySQL

Для управления данными при разработке данного проекта была использована свободно распространяемая реляционная система управления базами данных MySQL. Ее разработку и поддержку осуществляет корпорация Oracle. Продукт распространяется как под GNU General Public License, так и под собственной коммерческой лицензией.

MySQL является решением для малых и средних приложений. Входит в состав серверов WAMP, AppServ, LAMP и в портативные сборки серверов Денвер, XAMPP, VertrigoServ. Гибкость СУБД MySQL обеспечивается поддержкой большого количества типов таблиц: пользователи могут выбрать как таблицы типа MyISAM, поддерживающие полнотекстовый поиск, так и таблицы InnoDB, поддерживающие транзакции на уровне отдельных записей. Более того, СУБД MySQL поставляется со специальным типом таблиц EXAMPLE, демонстрирующим принципы создания новых типов таблиц. Благодаря открытой архитектуре и GPL-лицензированию, в СУБД MySQL постоянно появляются новые типы таблиц.

Выбор обусловлен популярностей данной технологии при разработки веб-приложений. Данный инструмент превосходит по функционалу SQLite, и в то же время проще, чем PostgreSQL. MySQL весьма гибка и проста в обращении, что только на руку в длительной перспективе.

1.6 BibTeX и создание форматированных списков библиографии

LaTeX - это наиболее популярный макропакет для верстки текстовых документов.

BibTeX -- программное обеспечение для создания форматированных списков библиографии. BibTeX используется совместно с LaTeX'ом и входит во все известные дистрибутивы TeX и LaTeX.

BibTeX был создан Ореном Паташником и Лесли Лэмпортом в 1985 году. Он позволяет легко работать со списками источников, отделяя библиографическую информацию от её представления. Принцип отделения содержимого от его представления использован как в самом LaTeX'е, так и в XHTML, CSS и др.

Наиболее известной системой управления библиографической информацией является JabRef. Она предоставляет графический пользовательский интерфейс для редактирования файлов BibTeX, импорта данных из научных баз данных, а также для поиска и управления BibTeX-файлами. Распространяется под лицензией GPL, написана на языке программирования Java.



2 Клиентская часть приложения

Изначально создается клиентская часть, которая верстается на основе заранее созданного макета. Здесь создаются компоненты React, настраивается их поведение и реакция на события, задаются стили для оформления документа.

Стартовая страница представлена на рисунке 5. Изначально, пользователю предлагают выбрать дисциплину - данные о дисциплинах и их этапах настраиваются в других разделах.

Рисунок 5 - Стартовая страница приложения

После выбора дисциплины ее название и данные о этапах сохранятся в состоянии основного элемента, и откроется меню для просмотра и редактирования библиографии. Основные элементы здесь - шапка, содержащая логотип и навигационное меню, а также кнопка для добавления новой записи. Основное меню приложения преставлено на рисунке 6.



Рисунок 6 - Стартовая страница приложения

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

Для навигации используются якорные ссылки - это очень удобный современный подход, не требующий создания нескольких страниц, либо постоянной перерисовки одной. По нажатию элемент навигационного меню браузер скроллит до необходимого компонента. Исходный код jQuery представлен на листинге 3.

$(document).ready(function() { $(document).on('click', '.nav-menu-item', function(event) { event.preventDefault();

var target = $(this).attr('href'); var topDiv = $(target).offset().top; $('body, html').animate({scrollTop: topDiv}, 1200); }); $(document).on('scroll', function () { var scrollTopPosition = $(this).scrollTop();

$('#navigation-menu .nav-menu-item').each(function () { var target = $($(this).attr('href')); //В данном случае нужно учитывать отступы сверху var top = target.offset().top - (target.outerHeight() - target.height()) / 2; if(scrollTopPosition >= top && scrollTopPosition < top + target.outerHeight()) { $(this).addClass('active'); } else { $(this).removeClass('active'); } }); }); });

Листинг 3 - Код реакции на событий навигации по странице

Функция $() позволяет искать в DOM-дереве элементы по тегам, id, имени класса, объектам-родителям и т.д., достаточно передать нужное значение. В первой строке кода была получена ссылка на основной документ с помощью переменной document, и к функции ready(), которая вызывается при загрузке страницы, был прикреплен callback-метод, добавляющий слушателей событий.

Функции on() элемента передаются два аргумента - событие и функция, вызываемая при его прослушивании. Клик вызывает скролл с задержкой на верхнюю координату элемента, на который ссылается кнопка. При этом установлена, чтобы при достижении верхушки компонента активный пункт меню имел особый стиль.

Основные компоненты приложения - список литературы (основной и дополнительной), список электронных источников и формы для добавления и обновления. Структура компонентов React представлена на рисунке 7.

Рисунок 7 - Структура сценариев для создания компонентов React

Результат перехода к списку основной литературы представлен на рисунке 8.

Рисунок 8 - Список основной литературы

Результат перехода к списку дополнительной литературы представлен на рисунке 9.

Рисунок 9 - Список дополнительной литературы

Результат перехода к списку электронных ресурсов представлен на рисунке 10.

Рисунок 10 - Список электронных ресурсов

Записи можно редактировать - например, изменить название книги, авторов или разделы. Для этого нужно нажать по иконке в правом столбце. Откроется форма, по умолчанию заполненная имеющимися данными. На рисунке 11 показано изменение сведений о методичке: аббревиатура ФНП была заменена корректным названием, из авторов убрана Радченко Р.А, вместо нее добавлена Галич Ю.А.

Рисунок 11 - Редактирование записи

Кнопка «Отправить» сохраняет все изменения. Результат обновления представлен на рисунке 12.

Рисунок 12 - Результат обновления записи

Можно добавлять запись в список, для этого необходимо нажать на специальную кнопку в шапке, после чего выбрать тип добавляемой информации из выпадающего списка меню, представленного на рисунке 13.



Рисунок 13 - Выбор таблицы для добавления

При добавлении элемента списка литературы откроется форма, аналогичная той, что можно было наблюдать при обновлении элемента. Отправить форму можно только в том случае, когда все поля заполнены. Форма для добавления, заполненная сведениями о новой книге представлена на рисунке 14.

Рисунок 14 - Добавление записи в список литературы

Рисунок 15 - Таблица основной литературы после добавления записи

Форма для добавления интернет-источника представлена на рисунке 16.

Рисунок 16 - Добавление интернет-источника

Результат добавления можно наблюдать на рисунке 17.

Рисунок 17 - Результат добавления интернет-источника



3 База данных и репозитории приложения

Серверная часть приложения разработана с помощью Spring MVC и его инструментов для создания REST-сервера. Работу с сущностями выполняет спецификация JPA и библиотека Hibernate. В качестве СУБД используется MySQL.

3.1 Создание базы данных для приложения

В качестве СУБД используется MySQL. На рисунке 12 представлена ER-диаграмма структуры данных.

Рисунок 12 - Структура данных

Существует определенное количество дисциплин, отображаемых в виде таблицы disciplines основные поля здесь - идентификатор и название дисциплины. Внешних ключей сущность не содержит. Информация о стоблцах таблицы представлена на рисунке 13.

Рисунок 13 - Структура таблицы дисциплин

Каждую дисциплину составляют разделы (этапы), отображаемые в виде сущности sections, содержащей следующие аттрибуты: идентификатор, название и id дисциплины, представленной внешним ключом. Структура таблицы представлена на рисунке 14. Связь между сущностью disciplines и сущностью sections - один ко многим.

Рисунок 14 - Структура таблицы разделов

Для прохождения разделов (этапов) составляются библиографические списки и ссылки на электронные ресурсы. Это - ядро приложения. Библиографические списки и ссылки на интернет-ресурсы представлены таблицами bibliography и internet_sources соответственно. Связь между disciplines (дисциплинами) и ранее названными сущностями - один ко многим.

На рисунке 15 представлена информация о полях таблицы bibliography.

Рисунок 15 - Структура таблицы списка литературы

На рисунке 16 представлена информация о полях таблицы internet_sources.

Рисунок 16 - Структура таблицы списка интернет-ресурсов

Для каждого элемента библиографического списка указываются этапы, при которых данная литература понадобится. Этапы выбираются из тех, что соответствуют дисциплине. Связь между сущностями bibliography, - многие ко многим - реализована посредством промежуточной таблицы sections_for_bibliography.

Рисунок 17 - Структура таблицы промежуточной таблицы

Для подключения к MySQL необходимо добавить несколько строк в файл application.properties, как показано на листинге 4.

spring.jpa.hibernate.ddl-auto=update spring.datasource.username=springuser spring.datasource.password=springpassword spring.datasource.url=jdbc:mysql://localhost:3306/bibliography

Листинг 4 - Подключение к MySQL

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

3.2 Классы данных

Библиотека javax.persistence предоставляет аннотации для создания так называемых data-классов - классов, объекты которых будут отображать сущности базы данных.

Аннтоация @Entity указывает, что объект данного класса является сущность базы данных, значение поля name указывает на имя таблицы (не обязательно, если имя класса и имя таблицы совпадают).

Первичный ключ задается аннотацией @Id, @GeneratedValue означает, что индекс будет нумероваться автоматически.

Аннотация @Column позволяет указать имя столбца в базе данных. Аннотации @OneToMany, @ManyToOne, @ManyToMany обозначают связи один-ко-многим, многие-к-одному и многие-ко-многим соответственно.

Аннотация, @OrderBy указывает внешний ключ.

Если поле является внешним ключом, то, помимо аннотации, указывающей отношение, добавляются @JoinColumn (если связь многие-к-одному) или @JoinTable (для обозначения связывающей таблицы отношения многие-ко-многим).

Data-классы, отображающие сущности базы данных проекта, представлены в приложении Б «Классы данных».



4 Создание сервера с помощью Spring Data REST

Spring Data REST предоставляет собой часть Spring Data, позволяющая обращаться с JPA-репозиториями как к REST-сервисам.

4.1 Создание JPA-репозиториев

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

Для bibliography, помимо прочего, был создан сервис, позволяющие добавлять дополнительные манипуляции с сущностью. Здесь будет реализован импорт из BiBTeX.

Исходный код сервиса без дополнительных методов импорта представлен на листинге 5.

public class BibliographyService { BibliographyRepository bibliographyRepository; DisciplinesRepository disciplinesRepository; public BibliographyService(BibliographyRepository bibliographyRepository, DisciplinesRepository disciplinesRepository) { this.bibliographyRepository = bibliographyRepository; this.disciplinesRepository = disciplinesRepository; } }

Листинг 5 - Сервис для списка библиографии

Как видно, он хранит репозитории, передающиеся ему через конструктор.

4.2 REST-контроллер

Контроллер помечается аннотацией @Controller и по сути своей является бином, который подгружается при запуске приложения. С помощью аннотации @RequestMapping можно указать URL (path); GET, POST, PUT или DELETE метод (method) и другие сведения.

В качестве Template Engine для Java XML/XHTML/HTML5 в данном проекте используется Thymeleaf. Чтобы им воспользоваться, нужно в корневом каталоге вернуть имя template-файла, по сути своей, являющегося текстовым файлом, расположенным в директории templates. Переход к корневому пути вернет содержимое страницы index.html.

На листинге 6 приведен код метода для запроса основной страницы приложения.

@RequestMapping(path = "/") public String index() { return "index"; }

Листинг 6 - Запрос основной страницы приложения

Реализация контроллера и класса с метдом для запуска приложения представлена в приложении А «Классы для запуска сервера и контроллер».

Для того, чтобы получать сведения о данных на сервере в формате HAL+JSON, небходимо установить «base path» в файле application.properties. Данный формат позволяет получать объекты и ссылки на них. Переход к API будет осуществляться по ссылку /api, он устанавливается в свойствах с помощью строки, представленной на листинге 7.

spring.data.rest.base-path=/api

Листинг 7 - Добавление «base path»

Для более удобного отражения тела запроса используется HAL Browser, зависимость подключена в pom.xml. На рисунке 18 представлены доступные данные.

Рисунок 18 - Доступные данные в HAL Browser

На рисунке 19 отображена структура данных о дисциплинах c программы Postman.

Рисунок 19 - Данные о дисциплинах

На рисунке 20 отображена структура данных о литературе, относящейся к дисциплине «математика».

Рисунок 20 - Сведение о литературы для математики

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



5 Формирование запросов к серверу со стороны клиента

5.1 Компонент App

Для формирования запросов к серверу используется скрипт rest.js пакета npm, а также AJAX-запросы библиотеки jQuery.

Запрос на получение списка дисциплин реализован в методе loadDisciplines() корневого компонента React. Исходный код представлен на листинге 8.

//Здесь загружаются доступные дисциплины loadDisciplines() { follow(client, root, [{rel: 'disciplines'}]).then(response => { var disciplines = response.entity._embedded.disciplines; this.setState({disciplinesList: disciplines}); }); }

Листинг 8 - GET-запрос для получения списка дисциплин

Основным является метод client(…), принимающий такие параметры, как метод, путь, заголовки, параметры и тело запроса. Метод возвращает Promise, удобно организовывающий асинхронный код и позволяющий предусмотреть разные варианты ответа с backend-стороны. Функция follow также предоставляет удобный доступ к API.

Запрос на получение списка литературы реализован в методе loadFromServer() корневого компонента React. Исходный код представлен на листинге 9.

loadFromServer(discipline) { if(this.state.disciplinesList != null) { client({method: 'GET', path: discipline._links.bibliographies.href}).then(response => { //фильтруется вручную this.mainList = response.entity._embedded. bibliographies.filter(element => {return element.type == MAIN}); this.additionList = response.entity._embedded. bibliographies.filter(element => {return element.type == ADDITION}); }).then(response => { return client({method: 'GET', path: discipline._links.internetSources.href}); }).done(response => { this.setState({ discipline: discipline, [MAIN + 'Bibliography']: this.mainList, [ADDITION + 'Bibliography']: this.additionList, [INTERNET + 'Bibliography']: response.entity._embedded.internetSources }); }); } }

Листинг 9 - GET-запрос для получения списка литературы

В данном случае запрос GET по пути http://localhost:<port>/api/disciplines/<id_дисциплины>/bibliographies возвращает список литературы, относящейся к выбранной дисциплине. Полученный массивы фильтруются и выделяются список основной и дополнительной литературы. Там они распределяются по компонентам. В случае успеха загружаются интернет-источники.

POST-запрос добавление записи представлен на листинге 10. Здесь указывается сущность в теле запроса (в данном случае добавляемая запись).

onAdd(rel, newElement) { follow(client, root, [{'rel': rel}]).then(response => { client({method: 'POST', path: response.entity._links.self.href, entity: newElement, headers: {'Content-Type': 'application/json'} }).then(response => { this.loadFromServer(this.state.discipline); }); }); }

Листинг 10 - POST-запрос для добавления записи

В качестве внешнего ключа указывается ссылка на элемент другой сущности. Содержимое новой записи представлено на рисунке 21.

Рисунок 21 - Содержимое добавляемого объекта

Метод onUpdate() осуществляет запрос PATCH. Можно пользоваться также методом PUT, осуществляющим обновление записи по заданной ссылке, но в таком случаю могут возникнуть проблемы с добавлением в промежуточную таблицу. В данном случае используется более новый HTTP-метод. Формирование запроса представлено на листинге 11.

onUpdate(updatedElement, newElement) { client({ method: 'PATCH', path: updatedElement._links.self.href, entity: newElement, headers: {'Content-Type': 'application/json'} }).done(res => { this.loadFromServer(this.state.discipline); }) }

Листинг 11 - PATCH-запрос для добавления записи

Метод removeFromList() послыает запрос на удаление элемента, отправляя ссылку на него. Исходный код формирования запроса представлен на листинге 12.

removeFromList(url, biblType) { client({method: 'DELETE', path: url}).then(response => { this.loadFromServer(this.state.discipline); }); }

Листинг 12 - DELETE-запрос для удаления записи

5.2 Компонент Book

Компонент Book отвечает за отдельную строку таблицы. Поскольку в свойствах хранится только ссылка на разделы, при которых понадобится литература. Запрос на получение разделов, относящихся к данной записи, реализован в методе loadSections() и в качестве ссылки передает значение поля href из объекта _links. Исходный код функции представлен на листинге 13.

loadSections () { let context = this; this.shouldUpdate = false; client({method: 'GET', path: this.props.book._links.sections.href}).then(response => { this.shouldUpdate = false; this.setState({ sections: response.entity }); }); }

Листинг 13 - Запрос на получения списка разделов

5.3 Компонент Add

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

loadSections() { client({method: 'GET', path: this.props.discipline._links.sections.href}).done(response => { this.setState({ sectionsForDiscipline: response.entity._embedded.sections }); }); }

Листинг 14 - Запрос на получения списка разделов для дисциплины

В качестве ссылки передается значения из поля _links сущности disciplines (внешний ключ).

5.4 Компонент Update

Компонент Update является наследником компонента Add, однако, помимо загрузки списка разделов для дисциплины в целом, необходимо загружать список секций, выбранных для обновляемой записи.

Запрос на загрузку информации о разделах реализован в методе getSectionsForCheckedElement().

getSectionsForCheckedElement() { this.state.sections = new Set(); client({method: 'GET', path: this.props.discipline._links.sections.href}).then(response => { return response.entity._embedded.sections; }).then(sectionsForDiscipline => { client({method: 'GET', path: this.props.book._links.sections.href}) .done(response => { let sectionsForElement = response.entity._embedded.sections; this.state.sections = new Set(); /*Из ответа извлекаются ссылки и сравниваются с теми, что есть в списке дисциплин нужно, чтобы Set увидел их в списке*/ sectionsForDiscipline.forEach((sfd, index) => { sectionsForElement.forEach((sfe, index) => { if(sfd._links.self.href === sfe._links.self.href) this.state.sections.add(sfd); }); }); this.shouldUpdate = false; this.setState({ sectionsForDiscipline: sectionsForDiscipline, sections: this.state.sections }); }); });

Листинг 14 - Загрузка разделов для дисциплины и для обновляемой записи

Сначала загружаются все этапы выбранной дисциплины, а затем, в случае успеха, загружаются этапы, выбранные для данной записи. Для списка разделов выбранной записи используется множество Set, и если просто добавить в него результат запроса, то сравнивать с общим числом разделов (для данной дисциплины) будет невозможно. Поэтому цикл foreach ищет совпадения и добавляет те разделы, чьи ссылки совпадают с ответом.

Далее результаты запросов устанавливаются в состояние.

5.5 Работоспособность ссылки источника

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

Со стороны клиента запрос посылается на сервер, где и проверяется работоспособность url. Исходный код действий метода контроллера, отвечающего за проверку ссылки, представлен на листинге 15.

@RequestMapping(path = "/check", method = RequestMethod.GET) @ResponseBody public int checkUrl(@RequestParam("url") String url) { try { OkHttpClient client = new OkHttpClient(); Request request = new Request.Builder() .url(url) .build(); Response response = client.newCall(request).execute(); return response.code(); } catch (IOException e) { return -1; } }

Листинг 15 - Проверка работоспособности URL

Запрос осуществляется с помощью OkHttp - популярной у разработчиков под Android библиотеки, позволяющей формировать клиент для HTTP-запросов.

На основе переданной URL формируется запрос, который посылает клиент. Результат - код запроса, либо -1, если хост не найден.

Как показано на листинге 16, со стороны клиента посылается запрос, передающий в качестве параметра проверямую ссылку и сохраняет новое значение, только если статус ответа - 200 (выполнено успешно).

client({method: 'GET', path: '/check', params: {'url':

newListElement.url}}).done(response => { if(response.entity == 200) { //Здесь происходит формирование нового элемента //...

} else alert("Проверьте работоспособность введенной ссылки-источника!"); });

Листинг 16 - Проверка ссылки перед отправкой формы

На рисунке 22 приведен пример попытки отправить не существующее URL. На рисунке 23 - попытка отправить не существующую страницу. При обеих попытках ввод не удастся, пользователь получит соответстсвующий алерт.

Рисунок 22 - Добавление записи с несуществующим URL

Рисунок 23 - Добавление записи с несуществующей страницей

Правильная ссылка будет успешно добавлена - на рисунке 24 это продемонстрировано на примере интернет-источника с рабочей ссылкой.

Рисунок 24 - Добавление интернет-источника с рабочей ссылкой



6 Импорт из BibTeX

6.1 Обработка запроса

Считывание .bib файлов производится на стороне сервера, в качестве параметров в тело POST-запроса посылаются тип литература (основная или дополнительная), ID дисциплины и файл.

Тип передаваемого содержимого - multipart/form-data, составной тип содержимого, чаще всего использующийся для отправки HTML-форм методом POST протокола HTTP.

Для начала нужно сконфигурировать bean. Элемент MultipartConfig-Element задает ограничения на загрузку файлов (максимальный и минимальный размеры). Конфигурация в главном классе приложения представлена на листинге 17.

@Configuration @ComponentScan @EnableAutoConfiguration public class BibliographyApplication { @Bean public MultipartConfigElement multipartConfigElement() { MultipartConfigFactory factory = new MultipartConfigFactory(); factory.setMaxFileSize("128KB"); factory.setMaxRequestSize("128KB"); return factory.createMultipartConfig(); } public static void main(String[] args) { SpringApplication.run(BibliographyApplication.class, args); } }

Листинг 17 - Считывание из BibTeX на стороне сервера

Аннотация @ComponentScan сканирует пакеты, помогая зарегистировать бины. Их автоматическая конфигурация и регистрация обеспечивается аннотацией @EnableAutoConfiguration.

Для считывания .bib файлов используется библиотека JBibTeX. Она подключается в maven-записимостях. На листинге 18 показано, как сервер принимает файл, преобразует его к стандартному объекту File Java и передает его методу сервера, который задействует парсер.

@RequestMapping(path = "/import", method = RequestMethod.POST) @ResponseBody public Iterable<Bibliography> importFromBIBTeX( @RequestParam("type") String type, @RequestParam("discipline") String disciplineId, @RequestParam("file") MultipartFile file) throws IOException { File convFile = new File(file.getOriginalFilename()); convFile.createNewFile(); FileOutputStream fos = new FileOutputStream(convFile); fos.write(file.getBytes()); fos.close(); return this.service.saveFromBibtext(convFile, type, Long.parseLong(disciplineId)); }

Листинг 18 - Считывание из BibTeX на стороне сервера

Реализация методов сервиса для библиографии, которые вызывают парсер и получают результат, представлена на листинге 19.

public Iterable<Bibliography> saveFromBibtext(File file, String type, Long disciplineId) { this.file = file; return bibliographyRepository.save(importFromBIBTeX(type, disciplineId)); } private File file; private List<Bibliography> importFromBIBTeX(String type, Long disciplineId) { List<Bibliography> bibliographies = new ArrayList<>(); try { BibliographyParser parser = new BibliographyParser(this.file, disciplinesRepository); bibliographies = parser.parse(type, disciplineId); } catch (FileNotFoundException | ParseException e) { e.printStackTrace(); } return bibliographies; }

Листинг 19 - Методы сервиса, возвращающие информацию из BibTeX-файла

Метод saveFromBibtex() предназначен для контроллера и возвращает результат импорта. Метод importFromBIBTeX() создает объект-парсер, реализация которого будет представлена ниже, и вызывает метод для считывания.



6.2 Обработка запроса

Считыванием информации из файла .bib занимается класс BibliographyParser. Он содержит в себе файл, номер дисциплины и тип списка, который получает со стороны клиента.

Реализация метода непосредственного считывания представлена на листинге 20. Полный исходный код класса BibliographyParser приведен в приложении В «Класс для считывания BibTeX-файлов»

public List<Bibliography> parse(String type, Long disciplineId) throws ParseException, FileNotFoundException { BibTeXParser parser = new BibTeXParser(); BibTeXDatabase db = parser.parse(fileReader); Collection<BibTeXEntry> entries = db.getEntries().values(); List<Bibliography> bibliography = new ArrayList<>(); for (BibTeXEntry entry: entries) { //Создается сущность и задаются значения полей Bibliography entity = new Bibliography(); entity.setTitle(entry.getField(BibTeXEntry.KEY_TITLE).toUserString()); entity.setPublishPlace(entry.getField(BibTeXEntry.KEY_ADDRESS).toUserString()); entity.setPublisher(entry.getField(BibTeXEntry.KEY_PUBLISHER).toUserString()); entity.setYear(entry.getField(BibTeXEntry.KEY_YEAR).toUserString()); entity.setSource(entry.getField(BibTeXEntry.KEY_URL).toUserString()); entity.setType(type); //Тип литературы entity.setDiscipline(disciplinesRepository.findOne(disciplineId)); //В BibTeX авторы перечисляются через AND, в данном случае придется заменить эти слова запятыми String authors = entry.getField(BibTeXEntry.KEY_AUTHOR) .toUserString().replaceAll("\\s+AND+\\s", ", "); entity.setAuthors(authors); bibliography.add(entity); } return bibliography; }

Листинг 19 - Считывание из файла формата .bib

Сначала создается BibTeXParser библиотеки jbibtex, из него извлекается база данных списка. Затем, цикло проходит по всем записям и записывает поля из базы данных в поля объекта класса Bibliography. В качестве результата возвращается список литературы, который добавляется в уже существующий список.

6.3 Отправка запроса со стороны клиента

Параметры передаются в специальной форме, содержащей тег input типа «file», в которой пользователь выбирает, какой файл загрузить на сервер. Тут же задается информация о типе литературы (основная или дополнительная) и о выбранной дисциплине.

Для удобного формирования пар ключ-значение использован объект FormData, поддерживаемые новыми стандартами HTML, вследствие чего может вызывать трудности с совсместимостью. Метод, подгатавливающий параметры для запроса представлен на листинге 20.

handleFileDownload(event) { event.preventDefault(); let file = ReactDOM.findDOMNode(this.refs.file); let disciplineId = this.props.discipline._links.self.href.split('/').pop(); let formData = new FormData(); formData.append('file', file.files[0]); formData.append('type', this.props.dataType); formData.append('discipline', disciplineId); //Проверка на правильность формата if(!/.bib$/.test(file.value)) { alert('Вы должны загружать файл формата .bib. ' + 'Проверьте правильность ввода.'); } else { this.props.importFromBIBTeX(event.target.action, formData); window.location = '#'; } }

Листинг 20 - Подготовка параметров к отправке на сервер

Для отправки данных формы использована технология AJAX, предоставляемая библиотекой jQuery. В целом, отправка запроса аналогична ранее используемым методам, в полне data передаются пары ключ-значение. Реализация запроса на импорт представлена на листинге 21.

const $ = require(__dirname + '/../scrollEvents.js');

importFromBIBTeX(url, formData) { $.ajax({ method: 'POST', url: url, data: formData, contentType: false, processData: false }).done(response => { this.loadFromServer(this.state.discipline); }); }

Листинг 21 - Отправка данных формы

6.4 Тестирование импорта

Как видно из рисунка 25, в начальный момент времени в списке основной литературы содержится только одна запись.

Рисунок 25 - Список основной литературы в начальный момент времени

Для начала в JabRef нужно сформировать несколько записей, которые будут считаны, как это показано на рисунке 26.

Рисунок 26 - Список в .bib-файле

Исходный код .bib-файла представлен на рисунке 27.

Рисунок 27 - Исходный код .bib-файле

Для загрузки файла необходимо нажать на иконку BibTeX в заголовке нужной таблицы и в форму, представленную на рисунке 28, загрузить файл, как показано на рисунке 29.

Рисунок 28 - Форма для выбора файла

Рисунок 29 - Выбор файла

Как видно из рисунка 30, список литературы был успешно загружен. Осталось выбрать этапы, при которых используются книги библиографического списка.

Рисунок 30 - Результат загрузки из BibTeX

Заключение

В рамках курсовой работы было создано приложение для формирования списка необходимой литературы для рабочей программы дисциплины. Приложение поддерживает пользовательский ввод и редактирование основной и дополнительной литературы, а также электронных ресурсов. Дополнительно реализована проверка работоспособности ссылки-источника и импорт из BibTeX.

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



Библиографический список

1 JavaScript [Электронный] Совеременный учебник JavaScript - Режим доступа: https://learn.javascript.ru/

2 М. Пацианский, React.js для начинающий / М. Пацианский / 2016, 91 с.

3 Spring Framework [Электронный] Official Website - Режим доступа: https://spring.io/

...