close

Вход

Забыли?

вход по аккаунту

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

код для вставки
Содержание
Аннотация
5
Abstract
6
Введение
7
1 Аспекты проектирования веб приложения. Постановка задачи
12
1.1 Описание предметной области. Постановка задачи. . . . . . . . 12
1.2 Изучение аналогов . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.3 Основные средства разработки . . . . . . . . . . . . . . . . . . . 14
1.4 Особенности клиент - серверной архитектуры. . . . . . . . . . . 18
2 Проектирование и разработка графического интерфейса
23
2.1 Моделирование приложения. Макет . . . . . . . . . . . . . . . . 23
2.2 Структура приложения . . . . . . . . . . . . . . . . . . . . . . . 24
3 Проектирование и программная реализация клиент - серверной архитектуры
29
3.1 Реализация REST API сервера . . . . . . . . . . . . . . . . . . . 29
3.2 Разработка клиентской части веб - приложения . . . . . . . . . 32
3.3 Тестирование готового клиент - серверного приложения . . . . . 38
3.3.1
Тестирование метода GET . . . . . . . . . . . . . . . . . . 39
3.3.2
Тестирование метода POST . . . . . . . . . . . . . . . . . 41
3.3.3
Тестирование метода PUT и PATCH . . . . . . . . . . . . 43
Заключение
47
Список используемых источников
49
Приложения
51
4
Аннотация
Магистерская диссертация на тему «Проектирование и разработка веб приложения для управления содержимым сайта по изданию научных публикаций» содержит 50 страниц текста, рисунков - 21, используемых источников
- 16.
В настоящее время веб - приложения очень востребованы и популярны,
так как они универсальны и практичны, облегчают организацию хранения
данных и экономически выгодны.
Ключевые слова: Клиент - сервер, БД, фреймворк, препроцессор, адаптивный дизайн, менеджер пакетов.
Предмет исследования. Содержание программного обеспечения, необходимого при разработке веб - приложения, для управления содержимым сайта
по изданию научных публикаций.
Объект исследования. Проектирование и разработка веб - приложения
для управления содержимым сайта по изданию научных публикаций.
Цель работы. Моделирование и разработка веб - приложения для управления содержимым сайта по изданию научных публикаций.
Результат работы. В магистерской диссертации разработано веб - приложение, позволяющее регистрировать пользователей в системе и работать с
научными публикациями. Приложение написано на фреймворке Angular и
библиотеке JQuery, а также json-server - используется, как серверная часть.
Работа имеет практическое значение, так как она дает возможность
сформировать банк научных публикаций, поданных на научную конференцию, с последующим рецензированием работ и изданием сборника трудов.
5
Abstract
The master’s dissertation on the theme of "Designing and developing a
web application for managing the content of a website for publishing scientific
publications"contains 50 pages of text, drawings - 21, and 16 sources used.
At present, web applications are very popular and demanded as they are
universal and are practical, facilitate the organization of data storage and are
economically viable.
bf Keywords: Client - server, DB, framework, preprocessor, adaptive design,
package manager.
bf Subject of the research. The contents of the software required to develop a web
application for managing the content of the site for the publication of scientific
articles.
bf Object of the research. Designing and developing a web application for
managing the content of the site for the publication of scientific articles.
bf The purpose of the work. Modeling and developing a web application for
managing the content of the site on the publication of scientific articles.
bf The result of work. In the master’s dissertation a web application is developed
that allows users to register in the system and work with scientific publications.
The application is written on the Angular framework and the jQuery library, as
well as json-server - used as the server part.
bf The work is of practical importance, as it provides an opportunity to form a
Bank of scientific publications submitted to the scientific conference, followed by
a review of the work and the publication of a collection of works.
6
Введение
Актуальность исследования и анализ источников. В современном
мире высоких технологий интернет-ресурсы - это неотъемлемая часть любой
серьёзной организации в самых различных сферах, в том числе, и в сфере
образования. В настоящий момент нам приходится работать с огромными
объемами информации. Зачастую нет необходимости охватывать весь объем
самостоятельно и большую часть работы за нас может делать техника. Ключевым моментом является правильно подобранное или разработанное программное обеспечение, которое позволит минимизировать времязатраты на
конкретный спектр задач. Также следует заметить, что грамотно подобранный сервис сведет к минимуму возможность ошибок, зависящих от человеческого фактора. В силу определенных обстоятельств, преподавательский
состав вынужден выполнять большой объем рутинной работы, которая не
влияет напрямую на учебный процесс. Поэтому внедрение современных технологий - назревшая необходимость для оптимизации работы профессорско
- преподавательского состава и активизации учебного процесса для студентов. Например, веб - приложение по изданию научных публикаций физико
- математического факультета поднимет уровень проведения всех научных
мероприятий, проводимым, как в стенах учебного заведения, так и за его
пределами. Наличие подобных сервисов повышает статус ВУЗа, а значит,
увеличивает входящий поток абитуриентов и расширяет возможности кадрового потенциала преподавательского состава.
В данный момент, факультет не имеет такого ресурса, как веб - приложение по работе с научными публикациями. Так как большая часть научных
статей хранится в бумажном виде, появилась необходимость создать такой
портал, который мог бы быть интерактивным веб - приложением, помогающим получать необходимые данные в кратчайшие сроки. В то же время,
он должен быть интересным и привлекательным, а это позволит увеличить
7
контингент пользователей в лице преподавателей, сотрудников и студентов.
Создание такого типа веб - приложения - трудоемкий процесс, с необходимостью глубокого изучения предметной области и специфики зоны применения.
Главное преимущество веб - ресурсов - это возможность получать информацию в любое время и в любом месте с доступом к интернету, что значительно экономит время, которое так ценно в современном мире. Также,
отпадает необходимость во множестве носителей, ведь всё находится в одном
месте - на сервере. У пользователя больше не будет возникать необходимости в копировании и хранении информации для последующего доступа к ней,
значит следующее преимущество - экономия ресурсов. Таким образом, вебприложение, в силу своей мобильности и экономичности для пользователя,
являются выигрышным вариантом для хранения информации и доступа к
ней [1].
Для того, чтобы заявленный ресурс был востребован не достаточно одного сайта. К решению задачи о предоставлении информации нужно подойти
комплексно, то есть необходимо создать полноценное веб - приложение, как
динамичный сервис, который сможет, добавлять, хранить, и обрабатывать
информацию [2].
Одним из основополагающих компонентов веб - приложения является графический интерфейс, который дает возможность доступа к данным в удобном
для пользователя виде.
Неотъемлемой частью разрабатываемого веб - приложения является
функционал сайта или его логика, с последующей отладкой и тестированием
на json - server, а также данные, которые будут использованы для обработки и
получения нужного результата. Все данные будут храниться в json формате,
в котором будет собрана и структурирована вся информация, для публикации
в веб-приложении [14]. Для осуществления каких - либо действий с данными, необходим набор запросов, которые и будут при обращении к серверу,
получать правильные данные. Таким образом, данные в json и запросы для
8
обработки информации в data.json - это те элементы, без которых невозможно
функционирование веб приложения.
Предмет исследования. Содержание программного обеспечения, необходимого при разработке веб - приложения, для управления содержимым
сайта по изданию научных публикаций.
Объект исследования. Проектирование и разработка веб - приложения
для управления содержимым сайта по изданию научных публикаций.
Цель работы заключается в моделировании и разработке веб - приложения для управления содержимым сайта по изданию научных публикаций.
Для достижения вышеобозначенной цели поставлены следующие задачи:
• изучение литературы, соответствующую тематике выпускной квалификационной работы и анализ актуальности проекта;
• реализация графического интерфейса;
• разработка функционала веб - приложения;
• реализация внедрения разработанного функционала и готового веб сервера.
• тестирование и отладка разработанного веб - приложения.
Методика разработки. По степени использования типовых проектных
решений - метод оригинального (индивидуального) проектирования, когда
проектные решения разрабатываются «с нуля» в соответствии с требованиями к информационной системе.
Практическое значение. Разработанный проект имеет большое практическое значение, так как он дает возможность каждому заинтересованному пользователю после регистрации и авторизации получить доступ к изданным научным публикациям. Его использование может быть локальным,
внутри университетской сети, а также и глобальным. Наличие такого ресурса у факультета будет способствовать привлечению нового контингента
9
в лице студентов и сотрудников и популяризировать физико-математическое
образование, что немаловажно в современном мире, когда приоритет науки
неуклонно растёт.
Основные инструменты. На данный момент нижеперечисленные средства наиболее популярны и актуальны и удовлетворяют всем современным
стандартам. Это базовые инструменты, которые дают возможность создавать
функциональное веб - приложение.
• Angular - открытый и свободный фреймворк для разработки веб - приложений [9-13, 16].
• Html - язык гипертекстовой разметки [3,4,7].
• CSS - формальный язык, применяемый для единообразного описания
внешнего вида всех компонентов веб - приложения. Другими словами,
набор стилей, которые позволяют сделать интерфейс более интересным
и современным [5-7].
• Nginx - свободный веб - сервер. Благодаря ему организован локальный
сервер на компьютере.
• Bootstrap - свободный набор настроек для создания веб интерфейсов
[15].
• JQuery - библиотека Javascript, которая придает динамичность веб
проекту [8].
• Json - server - готовый REST api сервер для клиентской часть веб приложения [14].
Структура работы:
Данная дипломная квалификационная работа состоит из следующих разделов: введения, трёх глав, заключения, списка используемых источников и
10
приложения. В введении рассматривается краткая характеристика, актуальность проекта и значимость проблемы, которой посвящена данная дипломная
работа. А также инструменты, которые использовались при решении поставленных задач. В первой главе содержатся анализ и возможные теоретические
обоснования по реализации проекта. Во второй главе демонстрируется макет
приложения и осуществляется детальный разбор приложения. В третьей главе представлен возможный способ решения поставленных задач с помощью
программного обеспечения. В ней освещена реализация продукта с примерами, доказывающими его работоспособность. В заключении подводятся итоги
по проделанной работе и делаются основные выводы. В списке используемых
источников отражаются все источники, как печатные, так и электронные. В
приложении представлены примеры исходного кода.
Апробация работы. Основой для разработки веб-приложения для управления содержимым сайта по изданию научных публикаций, послужило ранее созданное и испытанное веб-приложение «Виртуальный музей», которое
нашло свое отражение в научной работе: Разработка информационной системы «Виртуальный музей физико-математического факультета» // Современные проблемы физико-математических наук. Материалы II международной
научно-практической конференции, 24-27 ноября2016 г. / под общ. ред. Т. Н.
Можаровой. - Орел: ОГУ, 2016, с. 187 - 189.
11
1
Аспекты проектирования веб приложения.
Постановка задачи
1.1
Описание предметной области. Постановка задачи.
В рамках ВКР требуется разработать веб - приложение, которое обеспечит
доступ к научным публикациям и работу с ними для физико - математического факультета.
Для этого необходимо реализовать графический интерфейс приложения и его
функциональную логику. Так же, выполнить основную задачу разработки подключить созданный клиент к серверу и тестировать его запросами.
Необходимо, чтобы разработанное приложение имело регистрацию и авторизацию пользователей, могло работать с научными публикациями, а именно
их добавление, обновление и удаление. Очень важно продумать интерфейс
так, чтобы он был удобен для пользователя. Это значит, что он должен быть
интуитивно понятен, обеспечивая клиенту возможность выполнения определенной задачи, в кратчайший срок, без необходимости совершать большое
количество действий.
Также в приложении должна вестись новостная лента, которая будет оповещать пользователей о важных событиях касательно научных работ. Традиционным является наличие контактов. Важно, чтобы сервис поддерживался
на разных платформах, а корректное отображение не зависило от аппаратных особенностей (например, диагонали экрана).
1.2
Изучение аналогов
Для создания нашего приложения были изучить подобные сервисы разных организаций.
Например, рассмотрим сайт http://www.dsmmph.org.ua/ Харьковского
национального университета имени В. Н. Каразина (Методы дискретных осо12
бенностей в задачах математической физики). Здесь есть все необходимое для
того, чтобы отправить статью, а также получить справочную информацию о
заявленных научных мероприятиях. На сайте нет, отдельно выделенного личного кабинета, а вход и регистрация осуществляются из меню к конкретному
изданию. В целом интерфейс дружелюбен и понятен. Вид главной страницы
продемонстрирован на рис. 1.
Рис. 1. Методы дискретных особенностей в задачах
математической физики
Теперь рассмотрим ресурс - https://www.elsevier.com. Это англоязычный
сайт ведущего мирового поставщика научных, технических и медицинских
информационных продуктов и услуг. Сайт очень информативен, но в тоже
13
время и нагружен. Поэтому, вряд ли удасться разобраться с сервисом с первого раза неуверенному пользователю. Здесь также нет отдельно выделенного
личного кабинета для того, чтобы опубликовать статью необходимо выбрать
журнал, затем зарегистрироваться и подать заявку.
Рис. 2. ELSEVIER.
На рисунке представлен вид сайта при клике на ссылку «Submit your
paper» (предоставить Вашу статью).
1.3
Основные средства разработки
Прежде чем приступить к разработке веб - приложения, был определен
выбор инструментов, которые обеспечили процесс разработки. Очень важно
понимать, что от того, насколько современны и актуальны инструменты, напрямую зависит актуальность созданного приложения. Ниже представлены
14
технологии, которые были выбраны для разработки данного приложения, а
также описаны их достоинства.
• HTML - язык гипетртекстовой разметки, обладающий широкой функциональностью, кроссплатформенностью, быстродействием, легко подстраивающийся под различные устройства. Также в последних версиях
этого языка имеются библиотеки для облегчения работы с мультимедийными данными;
• CSS - формальный язык, применяемый для единообразного описания
внешнего вида всех компонентов веб - приложения. Применение CSS
делает код более прозрачным, модульным, он быстрее загружается, оптимизирован для поисковых систем и легко поддерживается. Все это в
итого уменьшает затраты времени на создание красивого, лаконичного
и функционального дизайна;
• Bootstrap - свободный для распространения набор настроек, для создания веб - приложений и веб - сайтов. Содержит множество стилей
для шрифтов, форм, кнопок, навигации и многого другого, что облегчает работу программиста в создании полноценного интерфейса и упрощает код, а также позволяет экономить аппаратные ресурсы.
• JavaScript - интерпретируемый язык программирования с объектно
ориентированными возможностями. Он позволяет сделать веб - страницы более динамичными и интересными. С помощью этого языка можно
добавлять новые элементы, а также сделать возможной реакцию на события (запуск какой либо функции, если произойдет нажатие мыши
или клавиши клавиатуры, окончание загрузки страницы).
Основными конкурентными преимуществами языка программирования
JavaScript, по праву являются:
– интуитивно понятный и простой синтаксис языка;
15
– по умолчанию, скрипты, разработанные на этом языке поддерживаются всеми наиболее популярными браузерами;
– высокая скорость работы;
– возможность прямого подключения к HTML коду гарантирует
незамедлительное выполнение скрипта при загрузке;
– возможность запуска программ не только в браузере, но и на сервере;
• JQuery - библиотека JavaScript, фокусирующаяся на взаимодействии
JavaScript и HTML. Основными преимуществами библиотеки являются:
– Скорость написания кода – при использовании JQuery написание
кода занимает гораздо меньше времени и сил, чем при использовании JavaScript в чистом виде. Это позволяет сэкономить массу
времени для разработки своего проекта;
– Легкость понимания – JQuery значительно проще и понятнее чем
JavaScript, который является достаточно неудобным и сложным
для понимания, особенно для начинающих. Библиотека JQuery
упрощает использование JavaScript настолько, насколько это возможно, а также делает программирование на нем легче и приятнее. После изучения основного функционала библиотеки, в котором есть такие функции, как селекторы, атрибуты, эффекты, события и т. д., можно создавать очень итересные и качественные
интерфейсы в своих проектах;
– Кроссбраузерность – функционал, который был разработан в
JQuery сможет корректно работать в любом современном браузере с наибольшей вероятностью. JavaScript в чистом виде не дает
такой гарантии;
16
– Поддержка – JQuery обеспечивает абсолютную совместимость всех
версий;
– Документация – помимо исчерпывающей документации на английском языке, имеется большой объем документации, переведённой
на русский язык. Также имеется огромное количество статей и онлайн сервисов, призванных помочь в изучении JQuery;
– Распространение – данный фреймворк используют в своих проектах такие всемирно известные компании, как Microsoft, Google, а
также многие российские, такие как Яндекс;
– Возможности – в стандартной библиотеке JQuery существует
огромное количество компонентов, которые можно использовать
в своих проектах - для этого нужно всего лишь подключить и настроить их. Любой, даже очень экзотический эффект, который может понадобиться вам в проекте скорее всего уже имеется среди
многочисленных плагинов JQuery;
– Конкурентоспособность – программист, умеющий работать с
JQuery будет гораздо больше цениться на рынке труда, чем работник, не имеющий таких навыков;
• Nginx - свободный веб - сервер. Его задача принимать запросы от клиента, передавать их веб - приложению (например, PHP), получать ответ
от веб - приложения и отдавать его пользователю. Преимущества nginx:
шифрование, сжатие, межсистемность, использование преимущества от
асинхронной системы ввода - вывода.
• Npm - стандартный менеджер пакетов, входящий в состав Node.js. Он
используется для скачивания пакетов из облачного сервера npm, либо
для загрузки пакетов на эти сервера.
• Webpack - «связующий модули». Он берет JavaScript модули с необ17
ходимыми зависимостями, и затем соединяет их вместе как можно более эффективным способом, на выходе создавая единый JS-файл. Это
особенно необходимо при создании одностраничных приложений (SPA),
что на данных момент является стандартом веб приложений.
• Json - server - готовый REST api сервер. Архитектурный стиль взаимодействия компонентов распределенных приложений. Он предназначен
для взаимодействия множества устройств путем выполнения простых
HTTP запросов.
• Angular - фреймворк javascript с открытым исходным кодом для построения веб - приложений. Одной из ключевых особенностей Angular
является то, что он использует в качестве языка программирования
TypeScript. Одним из главных преимуществ является свободное распространение. Также среди преимуществ можно выделить следующие:
– Если приложение сильно загружено , Angular полностью сохраняет
UI отклик;
– Использует SSR для более быстрого рендеринга на мобильных
устройствах;
– Хорошо работает с ECMAScript и другими языками, которые компилируются в JS код;
– Использует DI;
– Компонентно - ориентированный подход;
1.4
Особенности клиент - серверной архитектуры.
Архитектура «клиент-сервер» представляет собой взаимодействие структурных компонентов в сети на основе определенных принципов организации данной сети, где структурными компонентами является сервер и узлы18
поставщики определенных специализированных функций (сервисов), а также
клиенты, которые пользуются данным сервисом. Специфические функции
принято делить на три группы на основе решения определенных задач:
• функции ввода и представления данных предназначены для взаимодействия пользователя с системой;
• прикладные функции - для каждой предметной области имеется собственный набор;
• функции управления ресурсами предназначены для управления файловой системой, различными базами данных и прочими компонентами.
Клиентская часть должна выстраиваться вокруг модели, относящейся к
представлению (а не к предметной области). Здесь должна обрабатываться
только логика представления, но не бизнес-логика. В клиентской части выделяется три уровня:
• Уровень представления. Уровень представления состоит из HTMLшаблонов, таблиц CSS и директив Angular, соответствующих различным компонентам пользовательского интерфейса[2]. На листинге 1
представлен пример простого представления для формы входа:
19
Листинг 1: Уровень представления
<div class="signin">
<div class="caption"><h2>Логин</h2></div>
<div class="margins">
<div class="form-group">
<label>Имя</label>
<input placeholder="Логин" type="text"
class="form-control ember-view"
[(ngModel)]="nickname">
</div>
<div class="form-group">
<label>Пароль</label>
<input placeholder="Password" type="password"
class="form-control ember-view"
[(ngModel)]="password">
</div>
<button type="submit" class="btn btn-default"
(click)="getUser_info(nickname, password)"
[disabled]="nick.invalid || passwd.invalid">
<i class="fa fa-sign-in" aria-hidden="true"></i>
Войти
</button>
</div>
</div>
• Уровень управления. Уровень управления состоит из компонентов
Angular, склеивающий вместе данные, извлекаемые, из машинного ин20
терфейса (далее REST). Компонент инициализирует модель представления и определяет, как представление должно реагировать на изменения модели (Листинг 2):
Листинг 2: Уровень управления
@Component({
selector: ’signin-page’ })
export class SigninPage {
constructor(private signinService: SigninService,
private router: Router, private http: Http) {}
public
getUser_info(nickname: string, password: number) {
return new Promise((resolve) => {
if (nickname && password) {
this.signinService.getUser(nickname, password)
.subscribe(res => {
this.users = res.json()[0];
if (this.users) {
this.router.
navigate([’/sidebar/home/users’]);
});
}
}
)};
• Уровень клиентских сервисов. В компоненты Angular можно внедрить набор сервисов Angular, которые могут взаимодействовать с REST
(Листинг 3):
21
Листинг 3: Уровень клиентских сервисов
@Injectable()
export class SigninService {
constructor(private http: Http) {
}
public getUser(nickname: string = ’’, password: number) {
let headers = new Headers();
headers.append(’Content-Type’,
’application/X-www-form-urlencoded’);
let url:string=’http://localhost:3002/users?nickname=’
+ nickname + ’&’ + ’password=’ + password;
return this.http.get(url , {headers: headers})
.catch((error: any) => {
return Observable.throw(error);
});
}
}
В роли REST выступает JSON - server (передача состояния управления) архитектурный стиль, применяемый при разработке веб - сервисов. Информация передаваемая между клиентами и сервером должна быть конвертирована в удобный для передачи формат. Примерами таких форматов может
быть XML или JSON. Наиболее популярным на текущий момент является JSON.
22
2
Проектирование и разработка графического
интерфейса
2.1
Моделирование приложения. Макет
Проведя анализ современных сайтов, было выяснено, что наиболее распространены простые и ненагруженные интерфейсы веб - приложений. Самая популярная методика создания сайтов - блочная, поэтому было принято
решение придерживаться именно неё (Рис. 3).
Рис. 3. Макет разрабатываемого приложения
1. Заголовок веб - приложения;
2. Кнопка «hamburger menu» - открывает меню приложения;
3. Navbar - навигационная панель;
4. Блок main - рабочая поверхность;
23
5. Пространство для отображения основного функционала.
2.2
Структура приложения
На основе смоделированного макета, разработана структура веб - приложения, которая очень проста и понятна, и состоит из следующих частей: окно
авторизации и регистрации пользователя, боковое навигационное меню, заголовок с навигационной панелью и главное окно. Боковое меню - это главное
меню, которое является основной частью сайта. В него включены вкладки:
«избранные труды», «о системе», «новости», «контакты» (Рис. 4).
Рис. 4. Навигационная панель - боковое меню
Главное окно отражает содержимое вкладки и результаты запросов производимых пользователем. Имеются как статические, так и динамические
вкладки. Например, вкладка «Избранные труды» является динамической и
отображаемая в ней информация зависит от запроса клиента. В этом разделе
присутствует дополнительная навигация, которая разделена на пользователей и список статетей. На (рис. 5-7) представлен внешний вид этой вкладки.
Рис. 5. Дополнительная навигация по разделу
24
Рис. 6. Данные о пользователях
Рис. 7. Статьи авторов
Ниже, на (рис. 8) представлена следующая за избранными трудами вкладка - «О системе». Здесь описана краткая информационная сводка о данном
веб - приложении. Как и на всех страницах приложения, здесь представлена
тестовая информация, которая может быть дополнена или полностью изменена.
25
Рис. 8. Раздел «О системе»
Далее, идет новостной раздел (Рис. 9) - это широчайший выбор информационных поводов на физико - математическом факультете. В нём можно
размещать: темы и даты ближайших мероприятий, мнения экспертов о научной деятельности, лучшие работы и их авторов.
Актуальность и значимость приложению дают:
• Регулярность обновления. Это главное правило указывает на то, что
сайт и сам физико - математический факультет постоянно развиваются.
• Правдивость. Новости должны освещаться точно без искажения.
• Повсеместность. Помимо сайта, актуальную новость можно разместить в социальных сетях.
26
Рис. 9. Раздел «Новости»
Следующий раздел бокового меню - «Контакты». На (рис. 10) можно увидеть его содержимое. Здесь отображена вся необходимая информация для
обратной связи.
27
Рис. 10. Раздел «Контакты»
Также на данной вкладке имеется карта, отображающая геолокацию корпуса, в котором расположен физико - математический факультет. Это очень
удобно для наглядного представленияего местоположения. Также это упростит поиск нахождения факультета для людей из других городов.
28
3
Проектирование и программная реализация
клиент - серверной архитектуры
3.1
Реализация REST API сервера
REST (Representation state transfer) изначально был задуман, как простой
и однозначный интерфейс для управления данными, предполагавший всего
несколько базовых операций с непосредственным сетевым хранилищем: извлечение данных (GET), изменение (PATCH, PUT), добавление (POST) и
удаление (DELETE). Этот перечень всегда сопровождался такими опциями,
как обработка ошибок в запросе, валидация входящих данных и разграничение доступа, в общем, всеми возможными проверками, которые сервер выполняет перед тем, как выполнить желание клиента. Классический REST подразумевает работу клиента с сервером, как с плоским хранилищем данных,
при этом ничего не говорится о связанности и взаимозависимости данных.
Все это по умолчанию ложится на плечи клиентского приложения.
API - интерфейсы REST образуют «заднюю» часть для мобильных и веб
- приложений. При разработке приложения иногда нет подходящих REST
api, готовых для использования в целях развития. Чтобы увидеть мобильное
или веб - приложение в действии, нужен сервер, который выдаёт некоторые
фиктивные данные JSON.
Json-server предоставляет возможности для настройки вспомагательного сервера API REST с минимальными усилиями. Чтобы начать работу с
использованием json-server, необходимо установить пакет с помощью Node
Package Manager (npm). После установки, задаем адрес, по которому мы будем стучаться к серверу. Сервер проекта работает по адресу :
http://localhost:3002 и запускается специальной командой через терминал:
json - server data.json -w –port 3002.
Успешную работу сервера можно наблюдать на (Рис. 11).
29
Рис. 11. Работа Json-server
Клиент получает и отправляет данные на сервер через формирование запросов по URL адресам. Рассмотрим запрос GET на URL REST. Внутри
json-файла определены users конечных точек, которые содержат информацию, относящуюся к пользователям. При обращении к адресу:
http://localhost:3002/users - должны отображаться существующие данные
всех пользователей. Пример отображения, виден на листинге 4.
Листинг 4: Отображене users
1 "users": [
2
{
3
"fname": "test",
4
"lname": "test",
5
"pname": "test",
6
"email": "[email protected]",
7
"phone": "123",
30
8
"rank": "test",
9
"nickname": "test",
10
"password": "test",
11
"organization": "test",
12
"country": "test",
13
"city": "Орел",
14
"id": 2,
15
"articles":
{
16
"name_rus": "Тест",
17
"name_eng": "Test",
18
"description": "test",
19
"date": "2018-05-25",
20
"file":
21
{
"base64textString": "0KXQsNC5INGH0YPQstC
w0LosINC60LDQuiDRgdCw0Lw/Cg==",
22
"upload": "Succsesful"
23
}
24
}
25
},
26
.
.
.
Ключевым типом данных в общении между клиентом и сервером выступает объект. По сути, объект - перечень свойств и соответствующих им значений. Для того, чтобы добраться до любого из свойств объекта напрямую,
достаточно добавить к пути до объекта имя свойства, например получить
имя пользователя: /users/25/name. Мы можем отправить объект на сервер
в запросе и получить результат запроса в виде объекта. Большинство ответов от сервера призваны возвращать данные. В зависимости от типа запроса
31
и его успеха ожидаемый набор данных будет разным, тем не менее атрибут
«data» будет присутствовать в подавляющем большинстве ответов.
3.2
Разработка клиентской части веб - приложения
После установки и проверки на работоспособность json-server, приступаем к реализация клиента веб - приложения. Основными частями разработки
являются: интеграция GUI (графический интерфейс пользователя) с функционалом приложения и соединение клиента с сервером, путем запросов.
Одной из наиболее важных частей веб - приложения являются его авторизация и регистрация, на (Рис. 12, 13) представлены их GUI соответственно.
Рис. 12. Авторизация пользователей
32
Рис. 13. Регистрация пользователей
Рассмотрим как работает авторизация и регистрация более подробно. За
функционал авторизации отвечают файлы: signin.page.html, signin.servise.ts
и signin.page.ts.
В сервисе указываем путь, по которому будем обращаться на сервер (url)
и метод для работы с данными на сервере. Выбираем
• путь: ’http://localhost:3002/users?nickname=’ +nickname + ’password=’
+password
• метод: http.get(url)
Здесь определена функция getUser(), которая получает значения для отправки объекту users. Сами отправляемые данные вводятся с клавиатуры
и хранятся в переменных nickname и password. Для отправки применяется
метод http.get(), в который передается путь, указанный выше.
33
В компоненте прописана функция getUser.info(), которая срабатывает при
нажатии на кнопку «Войти». В функции, мы проверяем введенные данные и
отправляем запрос из сервиса, далее получаем ответ и если ответ - succses,
то срабатывает функция this.router.navigation(), которая перенаправляет нас
на главную страницу где мы и сможем выложить статью.
Теперь рассмотрим регистрацию, за функционал отвечают файлы:
signup.page.html, signup.page.ts и signup.service.ts. Регистрация работает с
методом http.post(url, body) и обращение идет ко всему объекту users. В
регистрации определена функция postUser, которая получает значения для
отправки объекту users. Отправляемые данные представляют объект body.
В компоненте используется функция postUser.info(). Ниже на листинге 5
можно увидеть класс SignupPage, в котором используется данная функция.
Листинг 5: Функция отвечающая за регистрацию
1 public
postUser_info(nickname: string,
2
email: string, password: number) {
3
let headers = new Headers();
4
headers.append(’Content-Type’, ’application/json’);
5
if (nickname && password && email) {
6
this.signupService.postUser(nickname,
7
email, password).subscribe(res => {
8
this.users = res.json();
9
if (this.users) {
10
this.router.navigate([’/sidebar
11
/home/users/update’,
12
this.users.id]);
13
console.log(’Он есть!’,
14
this.users.nickname);
15
} else if (!(this.users)) {
34
16
console.log(’Такого
17
пользователя нет!’);
18
}
19
20
});
}
21 }
Далее проверяется заполнены ли все поля и происходит запрос к серверу из сервиса. Ответ будет записан в переменную - объект users и если все
успешно, то так же как и с авторизацией, срабатывает маршрут, который
перенаправляет нас на форму дополнительной регистрации, где можно более
детально заполнить свои данные. На (Рис. 14) представлена дополнительная
форма регистрации пользователя.
Рис. 14. Детальная регистрация
Форма регистрации это html файл с полями ввода и кнопкой "Создать". У
полей ввода есть валидация - проверка на правильность заполнения данными
и двусторонняя привязка, элемент DOM привязан к значению на компоненте,
при этом изменения на одном конце привязки сразу приводят к изменениям
на другом конце.Так поля для заполнения имеют двустороннюю привязку:
[(ngModel)] = ". . ."
35
А кнопка "Создать привязка метода компонента к событию в DOM (односторонняя). Пример:
<button (click)="postUser.info(. . .)"[disabled]=". . .» Создать </button>
при клике срабатывает функция postUser.info() с параметрами
nickname: string, email: string, password: string.
Также в кнопке присутствует ограничение на нажатие "disabled"которое
позволяет скрыть кнопку и следить за тем, введены данные или нет.
После того как пользователь зарегистрировался в системе он попадает на
форму дополнительной регистрации (Рис. 14), где он может добавить данные
о себе, а именно:
• Имя (fname)
• Фамилия (lname)
• Отчество (pname)
• Должность (rank)
• Организация (organization)
• Страна (country)
• Город (city)
дополняя основную часть регистрации:
логин (nickname), почта (email), пароль (password). На (Рис. 14) видно,
что форма имеет скролл, с помощью которого можно пролистывать данный
раздел. Это удобно, так как отображение сразу всех полей будет занимать
много места и нарушать стилистику проекта.
Следующей, важной частью веб - приложения является - отправка статьи.
Переход в данный раздел осуществляется сразу после авторизации. В нем
присутствуют поля :
36
• Название на русском
• Название на английском
• Описание
• Дата
• Файл
Необходимыми для заполнения являются: название и файл, остальные
поля - по желанию. Чтобы добавить файл, необходимо нажать на поле «выбрать файл» и из списка выбрать нужный файл в pdf формате. После чего
подтвердить отправку «Save». Вид формы для добавления статей представлен на (Рис. 15).
Рис. 15. Добавить статью
К pdf -файлу применится btoa() - метод, предназначенный для кодирования строки, указанной в качестве параметра в ASCII строку base-64, которая
будет представлена с помощью 64 символьной : "A - Z, a - z, 0 - 9, +, /, =".
Принцип работы метода заключается в том, что он сначала преобразует строку в последовательность бит, затем на основе схемы base-64 преобразуются в
37
закодированную строку.
Ниже на листинге 6 представлена реализация метода btoa().
Листинг 6: Метод btoa()
1
handleFileSelect(evt) {
2
let files = evt.target.files;
3
let file1 = files[0];
4
5
if (files && file1) {
6
let reader = new FileReader();
7
reader.onload = this.-handleReaderLoaded.bind(this);
8
reader.readAsBinaryString(file1);
9
}
10 }
11 -handleReaderLoaded(readerEvt) {
12
let file = readerEvt.target.result;
13
this.upload = ’succsesful’;
14
this.base64textString = btoa(file);
15 }
3.3
Тестирование готового клиент - серверного приложения
Работа клиента и сервера строится вокруг стандартных методов HTTP
(GET, POST, PUT, PATCH, DELETE) и схемы url. Рассмотрим каждый метод на практике и протестируем запросы, разработанного веб - приложения.
В данном проекте были реализованы следующие методы HTTP:
38
• GET (авторизация и вывод данных на странице)
• POST (регистрация)
• PUT (дополнительная регистрация)
• PATCH (отправка статьи)
3.3.1
Тестирование метода GET
Первым методом осуществляется авторизация, то есть проверка на существования конкретного пользователя в системе, а также вывод некоторых
данных в виде таблицы. Этот метод является самым распространенным и запросы к серверу чаще всего происходят с его использованием. Ниже на рис.
16 представлена форма авторизации с заполненными полями.
Рис. 16. Пример авторизации
Запрос к серверу методом GET состоит из двух частей: строка запроса
(Request Line), заголовок (Messae Headers). Сам GET запрос не имеет тела
сообщения. Но, это не означает, что с его помощью мы не можем передать
39
серверу никакую информацию. Это можно делать с помошью специальных
GET параметров.
Чтобы добавить GET параметры к запросу, нужно в конце
URL - адреса поставить знак «?» и после него начать задавать их по следующему правилу:
имя параметра1=значение параметра1 &
имя параметра2=значение параметра2 & . . .
Разделителем между параметрами служит знак «& ».
На листинге 7 представлен пример GET запроса с параметрами для
авторизацию.
Параметрами выступают nickname и password. Когда выполнен данный запрос, данные попадают в так называемую переменную окружения
QUERY_STRING, из которой их можно получить на сервер.
Листинг 7: GET запрос с параметрами
1
.
.
.
2
let url: string = ’http://localhost:3002/users?nickname=’
3
+ nickname + ’&’ + ’password=’ + password;
4
return this.http.get(url, . . .);
5
.
.
.
После отправки запроса на сервер мы получаем ответ: "succses"или "user
not found". В нашем случаем такой пользователь существует, поэтому результатом будет переход в раздел добавления статьи.
Еще метод GET используется для отображения данных о пользователях и
о выложенных статьях. Что и продемонстрированно нам на (Рис. 6-7). Также
метод GET применяется в разделе «новости». На главной странице news можно наблюдать список последних новостей. А на листинге 8.1 - 8.2 представлен
GET запрос для получения списка параметров.
40
Листинг 8.1: Отображение списка параметров users
1
.
.
2
let url: string = ’http://localhost:3002/users’;
3
this.http.get(url);
5
.
.
.
.
Листинг 8.2: Отображение списка параметров news
1
.
2
let url: string = ’http://localhost:3002/news’;
3
this.http.get(url);
5
.
3.3.2
.
.
.
.
Тестирование метода POST
Кроме метода GET, который мы рассматривали выше, существует еще
- метод POST. Данный метод используется для добавления данных о пользователе (регистрация) на сервере. Параметры запросов передаются в теле
HTTP запроса. Количество и размер параметров неограничен. Листинг 9 демонстрирует пример POST запроса с передаваемыми параметрами: nickname,
email, password. Так наши параметры добавляются в файл data.json в объект
users и происходит переход на страницу дополнительной регистрации (детальное редактирование пользователя), где он может добавить данные о себе
или оставить все без изменения, так как основную регистрацию он прошел
успешно.
41
Листинг 9: POST запрос
1
.
.
.
2
const body = {nickname: nickname, email: email,
3
password: password};
4
let url: string = ’http://localhost:3002/users’;
5
this.http.post(url, body);
6
.
.
.
Рис. 17 демонстрирует нам пример заполнения формы регистрации. Кроме стандартных полей: nickname, email, password имеется поле
«подтверждение пароля», необходимое для точного и правильного заполнения данного поля.
Рис. 17. Форма регистрации
42
Еще одним дополнением является компонент «password strength». Так,
своей формой он показывает, какой сложности пароль создает клиент, тем
самым позволяет подобрать наиболее надежный пароль.
3.3.3
Тестирование метода PUT и PATCH
Далее рассмотрим два метода: PUT и PATCH. Принцип работы этих методов похож - обновление (изменение) данных на сервере. Но правила, по
которым они функционируют имеют различия.
PATCH - обновляет только определенные поля сущности.
PUT - может создавать новую сущность или обновлять существующую.
Так с помощью методов PATCH и PUT соответственно реализованы: добавление статьи и дополнительная регистрация. Для выполнения поставленных
задач можно использовать только PATCH или PUT. Но стоит понимать, что
PUT заменяет существующую сущность. Те элементы сущности, которые не
представлены в запросе, будут очищены или заменены на null. Ниже на рис.
18 продемонстрированно добавление статьи.
Рис. 18. Форма добавления статьи
После того, как форма заполнена и прикреплена статья, нужно отправить
PATCH запрос на сервер, который добавит статью авторизованному пользо43
вателю. На листинге 10 представлен PATCH запрос, а на (Рис. 19) - результат
отработки запроса.
Листинг 10: PATCH запрос
1
.
.
.
2
this.file = {
3
base64textString: this.base64textString,
4
upload: this.upload
5
};
6
if (this.upload == ’ ’) {
7
8
this.upload = ’Empty’;
} else {
9
this.upload = ’Succsesful’;
10 }
11 const body = {articles: {name_rus: name_rus,
12
name_eng: name_eng, description: description,
13
date: date, file: this.file = {
14
base64textString: this.base64textString,
15
upload: this.upload} } };
16 this.http.patch(‘${’http://localhost:3002/users’}/
17
18
${this.id}‘, body, . . .);
.
.
.
44
Рис. 19. Результат выполнения функции add_new_article()
Теперь рассмотрим редактирование пользователя (дополнительная регистрация), на (Рис. 20) представлена форма детальной регистрации с заполненными полями.
Рис. 20. Пример детальной регистрации
После того, как форма заполнена, нужно отправить PUT запрос на сервер,
который добавит данные к созданному ранее пользователю. На листинге 11
представлен PUT запрос.
45
Листинг 11: PUT запрос
1
.
.
.
2
const url = ‘${’http://localhost:3002/users’}/
3
${this.id}‘;
4
const body = {
5
fname: fname, lname: lname, pname: pname,
6
email: email, phone: phone, rank: rank,
7
nickname: nickname, password: password,
8
organization: organization, country: country,
9
city: city
10 };
11 this.http.put(url, JSON.stringify(body), . . .);
12
.
.
.
Рис. 21. Результат выполнения функции update_user()
На (Рис. 21) представлен результат работы функции, в которой и отправляется PUT запрос на сервер. Успешно отработанный запрос, добавит новые
поля в объект.
46
Заключение
В данной работе, рассматривается вопрос разработки веб-приложения по
сбору, хранению и взаимодействию с данными, отвечающими заданным требованиям. Такого рода задача является актуальной и востребованной, так
как позволяет перевести весь бумажный материал в электронную систему.
А это дает возможность найти и получить необходимые данные с любого
электронного носителя.
Для решения данной задачи был применен метод оригинального (индивидуального) проектирования, с использованием современных веб - технологий.
Была достигнута поставленная цель - моделирование и разработка веб приложение для управления содержимым сайта по изданию научных публикаций. В процессе разработки проекта были решены следующие задачи:
• изучена литература, соответствующая тематике выпускной квалификационной работы и проанализирована актуальность проекта;
• спроектирован и сверстан графический интерфейс;
• разработан клиент (логика представления) веб - приложения;
• реализована интеграция разработанного функционала и готового вебсервера.
• протестировано и отлажено разработанное веб - приложение.
Работа имеет большое практическое значение, так как было спроектировано и разработано веб - приложение для управления содержимым сайта по
сбору научных публикаций, состоящее из графического интерфейса и клиентской части веб - приложения, которое подключается к серверу и тестируется
запросами.
Веб - приложение обладает достаточно удобным интерфейсом и функциональным наполнением, что обеспечивает комфортность работы с ним. Таким
47
образом, готовый проект может использоваться, как онлайн ресурс не только
на физико - математическом факультете, но и за его пределами.
48
Список используемых источников
[1 ] Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL,
JavaScript, CSS и HTML5. 3-e изд. -СПб.: Питер, 2015. - 688с.
[2 ] Купер А., Рейман Р., Кронин Д. Алан Купер об интерфейсе. Основы
проектирования взаимодействия. - Пер. с англ. - СПб.: Символ-Плюс,
2009. - 688 с.
[3 ] Хеник Б. HTML и CSS: путь к совершенству. - СПб.: Питер, 2011. 336 с.
[4 ] Прохоренок Н., Дронов В. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. 4-е изд. - СПб.: БХВ-Петербург, 2015. 766с.
[5 ] Бердышев С. Н. Искусство оформления сайта. Практическое пособие.
- М.: Дашков и КО, 2010. - 148 с. .
[6 ] Шмит К. CSS. Рецепты программирования. 3-е изд.: Пер. с англ. - М.:
Издательство "Русская редакция"; "БХВ-Петербург 2011. - 672 с.
[7 ] Голдстайн А., Лазарис Л., Уэйл Э. HTML5 и CSS3 для всех. - М.:
Эксмо, 2012. -368с.
[8 ] Бибо Беэр, Иегуда, де Роза Аурелио jQuery в действии. 3-е издание .
- СПб.: Питер, 2017. - 528 с.
[9 ] Фримен А. Angular для профессионалов. - СПб.: Питер, 2018. - 800 с.:
ил. - (Серия "Для профессионалов").
[10 ] Флэнаган Д. JavaScript. Подробное руководство, 6-е изд.: Пер. с англ.
- СПб: Символ-Плюс, 2012. - 1080 с.
49
[11 ] Дилеман П., Изучаем Angular 2 / пер. с англ. Р. Н. Рагимова; под
науч. ред. А. Н. Киселева. - М.: ДМК Пресс, 2017. - 354 с.: ил.
[12 ] Документация по Angular на русском языке: [Электронный ресурс].
– Режим доступа: https://metanit.com/web/angular2/. - Дата доступа:
12/09/2017
[13 ] Документация по Angular на английском языке: [Электронный ресурс].
– Режим доступа: https://angular.io/docs. - Дата доступа: 14.09.2017
[14 ] Документация по Json-server: [Электронный ресурс]. – Режим доступа:
https://www.npmjs.com/package/json-server. - Дата доступа: 05.03.2018
[15 ] Документация по Bootstrap: [Электронный ресурс]. – Режим доступа:
http://getbootstrap.ru . - Дата доступа: 01/09/2017
[16 ] Документация по Webpack: [Электронный ресурс]. – Режим доступа:
https://webpack.js.org. - Дата доступа: 14.10.2017
50
Приложения
Приложение 1
Компонент авторизации
@Component({
selector: ’signin-page’,
template: require(’./signin.page.html’),
styles: [require(’./signin.page.scss’)]
})
export class SigninPage {
constructor(private signinService: SigninService,
private router: Router,
private http: Http, ) {
}
public users: any = [];
public nickname: string = ’’;
public password: number;
public
getUser_info(nickname: string,
password: number) {
let headers = new Headers();
headers.append(’Content-Type’, ’application/json’);
return new Promise((resolve) => {
if (nickname && password) {
this.signinService.getUser(nickname,
password).subscribe(res => {
this.users = res.json()[0];
if (this.users) {
localStorage.setItem(’currentUser’,
JSON.stringify({token: ’jwt will come later’,
51
nickname: nickname}))
this.router.navigate([’/sidebar/home/add’,
this.users.id]);
$(document).ready(function () {
let trigger = $(’.hamburger’),
overlay = $(’.overlay’),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed === true) {
overlay.hide();
trigger.removeClass(’is-open’);
trigger.addClass(’is-closed’);
isClosed = false;
} else {
overlay.show();
trigger.removeClass(’is-closed’);
trigger.addClass(’is-open’);
isClosed = true;
}
}
$(’[data-toggle="offcanvas"]’).click(
function () {
$(’#wrapper’).toggleClass(’toggled’);
});
);
console.log(’Он есть!’, res);
52
console.log(’Он есть!’, this.users);
} else if ((!this.users) &&
(nickname = ’undefined’)) {
console.log(’Такого пользователя нет!’);
}
},
error => {
this.errorMessage = error.json().message;
console.error(this.error);
}
);
} else if (!nickname && !password) {
this.texted = ’User not found!’;
}
});
};
}
Сервис авторизации
@Injectable()
export class SigninService {
constructor(private http: Http) {
}
public getUser(nickname: string = ’’, password: number) {
let headers = new Headers();
headers.append(’Content-Type’,
’application/X-www-form-urlencoded’);
let url: string = ’http://localhost:3002/users?nickname=’
+ nickname + ’&’ + ’password=’ + password;
53
console.log(url);
return this.http.get(url , {headers: headers})
.catch((error: any) => {
console.log(error);
return Observable.throw(error);
});
}
}
Форма авторизации
<router-outlet></router-outlet>
<div class="signin">
<div class="caption">
<h2>Логин</h2>
</div>
<div class="margins">
<div class="text-center">
<a id="ember383" [routerLink]="[’/signup’]"
tabindex="-1" class="ember-view-btn">
Нет аккаунта? Зарегистрируйтесь</a>
</div>
<div class="form-group">
<label>Имя</label>
<input id="ember425" autofocus=""
placeholder="Логин" tabindex="1" type="text"
class="form-control ember-view"
[(ngModel)]="nickname"
name="nick" #nick="ngModel" required>
<div [hidden]="nick.valid || nick.untouched"
54
class="validate">
Username is required
</div>
</div>
<div class="form-group">
<label>Пароль</label>
<input id="ember443" placeholder="Password"
tabindex="2" type="password"
class="form-control ember-view"
[(ngModel)]="password"
name="passwd" #passwd="ngModel" required>
<div [hidden]="passwd.valid || passwd.untouched"
class="validate">
Password is required
</div>
</div>
<button type="submit" class="btn btn-default"
(click)="getUser_info(nickname, password)"
[disabled]="nick.invalid || passwd.invalid">
<i class="fa fa-sign-in" aria-hidden="true"></i>
Войти
</button>
{{users?.nickname}}
</div>
</div>
Компонент регистрации
@Component({
selector: ’signup-page’,
55
providers: [ProductActions, SignupService],
template: require(’./signup.page.html’),
styles: [require(’./signup.page.scss’)],
})
export class SignupPage {
form: FormGroup;
constructor(private signupService: SignupService,
private router: Router, private http: Http) {
overlay.defaultViewContainer = vcRef;
new FormControl(’’, CustomValidators.equal(’xxx’));
let password = new FormControl(’’, Validators.required);
let certainPassword = new FormControl(’’,
CustomValidators.equalTo(password));
this.form = new FormGroup({
password: password,
certainPassword: certainPassword
});
}
emailPattern = ’^[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,4}$’;
public barLabel: string = ’Password strength:’;
public myColors = [’#DD2C00’, ’#FF6D00’,
’#FFD600’, ’#AEEA00’, ’#00C853’];
public password: number;
public email: string = ’’;
public error: any;
public texted;
errorMessage: string = ’’;
public users: any = [];
56
public
postUser_info(nickname: string, email: string,
password: number) {
let headers = new Headers();
headers.append(’Content-Type’, ’application/json’);
if (nickname && password && email) {
this.signupService.postUser(nickname, email,
password).subscribe(res => {
this.users = res.json();
if (this.users) {
this.router.navigate([’/sidebar/home
/users/update’,
this.users.id]);
console.log(’Он есть!’, res);
console.log(’Он есть!’,
this.users.nickname);
} else if (!(this.users)) {
console.log(’Такого пользователя нет!’);
}
},
error => {
this.errorMessage = error.json().message;
console.error(this.error);
}
);
} else if (!nickname && !password && !email) {
this.texted = ’User not found!’;
}
};
}
Сервис регистрации
57
@Injectable()
export class SignupService {
constructor(private http: Http) {
}
public postUser(nickname: string = ’’, email: string = ’’,
password: number) {
const body = {nickname: nickname, email: email,
password: password};
let url: string = ’http://localhost:3002/users’;
return this.http.post(url, body)
.catch((error: any) => {
console.log(error);
return Observable.throw(error);
});
}
}
Форма регистрации
<div class="signup">
<div class="caption">
<h2>Регистрация</h2>
</div>
<div class="margins">
<div class="text-center">
<a id="ember383" [routerLink]="[’/signin’]"
tabindex="-1" class="ember-view-btn">
Авторизация</a>
</div>
<form [formGroup]="form">
58
<div class="form-group">
<label>Имя</label>
<input id="ember425" autofocus=""
placeholder="Введите логин" tabindex="1"
type="text" class="form-control ember-view"
[(ngModel)]="nickname"
[ngModelOptions]="{standalone: true}"
name="nicks" #nicks="ngModel"
minlength="3" required>
<div [hidden]="nicks.valid || nicks.untouched"
class="validate">
Username is required (minimum 3 characters)
</div>
</div>
<div class="form-group">
<label>Email</label>
<input id="ember422" autofocus=""
placeholder="Введите email" tabindex="1"
type="email" class="form-control ember-view"
[(ngModel)]="email"
[ngModelOptions]="{standalone: true}"
[pattern]="emailPattern"
name="emails" #emails="ngModel"
minlength="3" required>
<div [hidden]="emails.valid || emails.untouched">
<div *ngIf="emails.errors" class="validate">
<div *ngIf="emails.errors.required">
Email is required
</div>
59
<div *ngIf="emails.errors.pattern">
Email not valid
</div>
</div>
</div>
</div>
<div class="form-group">
<label>Пароль</label>
<input class="form-control ember-view"
type="password" placeholder="Введите пароль"
name="password"
[(ngModel)]="password"
formControlName="password"/>
<div class="strength">
<ng2-password-strength-bar
[passwordToCheck]="password"
[barLabel]="barLabel"
[barColors]="myColors">
</ng2-password-strength-bar>
</div>
</div>
<div class="form-group">
<!--<label>Подтвердить пароль</label>-->
<input class="form-control ember-view"
type="password" placeholder="Повторите пароль"
formControlName="certainPassword"/>
<p class="validate"
*ngIf="form.controls.certainPassword.errors?.equalTo">
Password mismatch</p>
60
</div>
</form>
<button type="submit"
class="btn btn-default responsive-btn"
(click)="postUser_info(nickname, email, password)">
<i class="fa fa-user-plus" aria-hidden="true"></i>
Создать
</button>
</div>
</div>
Компонент детальной регистрации
@Component({
selector: ’user-update’,
template: require(’./user.update.page.html’),
styles: [require(’./users.page.scss’)]
})
export class UserUpdate
implements OnInit {
constructor(private http: Http, private router: Router,
private route: ActivatedRoute ) {
}
id: number;
users: any = [];
data: object = {};
public nickname: string = ’’;
public password: number;
public fname: string = ’’;
public lname: string = ’’;
public pname: string = ’’;
61
public email: string = ’’;
public phone: number;
public rank: string = ’’;
public organization: string = ’’;
public country: string = ’’;
public city: string = ’’;
private headers = new Headers({
’Content-Type’: ’application/json’});
update_user(fname, lname, pname,
nickname, email, phone,
password, rank,
organization, country, city) {
const url = ‘${’http://localhost:3002/users’}/
${this.id}‘;
const body = {
fname: fname, lname: lname, pname: pname,
email: email, phone: phone, rank: rank,
nickname: nickname, password: password,
organization: organization, country: country,
city: city
};
this.http.put(url, JSON.stringify(body),
{headers: this.headers}).subscribe((res: Response)
=> {
console.log(’res:’, res);
this.router.navigate([’/sidebar/home/add’,
this.id]);
});
}
ngOnInit() {
62
this.route.params.subscribe(params => {
this.id = +params[’id’];
});
// this.fetch_articles();
this.http.get(’http://localhost:3002/users’).subscribe(
(res: Response) => {
this.users = res.json();
console.log(’Результат: ’, res);
for (let i = 0; i < this.users.length; i++) {
if (parseInt(this.users[i].id) === this.id) {
this.data = this.users[i];
break;
}
}
}
);
}
}
Форма детальной регистрации
<div class="user_add">
<div class="margins">
<div class="name-user">
<p>Редактировать пользователя {{data.nickname}}</p>
</div>
<div class="the_user">
<div class="form-group fio">
63
<label class="user-label">Имя</label>
<input type="text"
class="form-control ember-view"
[(ngModel)]="data.fname">
<label class="user-label">Фамилия</label>
<input type="text"
class="form-control ember-view"
[(ngModel)]="data.lname">
<label class="user-label">Отчество</label>
<input type="text"
class="form-control ember-view"
[(ngModel)]="data.pname">
</div>
<div class="form-group">
<label class="user-label">Nickname</label>
<input type="email"
class="form-control ember-view"
[(ngModel)]="data.nickname">
</div>
<div class="form-group">
<label class="user-label">Email</label>
<input type="email"
class="form-control ember-view"
[(ngModel)]="data.email">
</div>
<div class="form-group">
<label class="user-label">Phone</label>
<input type="number"
class="form-control ember-view"
64
[(ngModel)]="data.phone">
</div>
<div class="form-group">
<label class="user-label">Password</label>
<input type="password"
class="form-control ember-view"
[(ngModel)]="data.password">
</div>
<div class="form-group">
<label class="user-label">Rank</label>
<input type="text"
class="form-control ember-view"
[(ngModel)]="data.rank">
</div>
<div class="form-group">
<label class="user-label">Organization</label>
<input type="text"
class="form-control ember-view"
[(ngModel)]="data.organization">
</div>
<div class="form-group">
<label class="user-label">Country</label>
<input type="text"
class="form-control ember-view"
[(ngModel)]="data.country">
</div>
<div class="form-group">
<label class="user-label">City</label>
<input type="text"
65
class="form-control ember-view"
[(ngModel)]="data.city">
</div>
</div>
<button type="button" class="btn btn-default"
(click)="update_user(data.fname, data.lname,
data.pname, data.nickname, data.email,
data.phone, data.password, data.rank,
data.organization, data.country, data.city)">
<i class="fa fa-floppy-o" aria-hidden="true"></i>
Update
</button>
<button type="button" class="btn btn-default back"
[routerLink]="[’/sidebar/home/users’]">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
Back
</button>
</div>
</div>
Компонент добавление статьи
@Component({
selector: ’articles-add’,
template: require(’./articles.add.page.html’),
styles: [require(’./articles.page.scss’)]
})
export class ArticlesAdd
implements OnInit {
constructor(private http: Http, private router: Router,
private route: ActivatedRoute) {
66
}
public id: number;
articles: any = [];
public name_rus: string = ’’;
public name_eng: string = ’’;
public description: string = ’’;
public date: string = ’’;
private base64textString: string = ’’;
public upload: string = ’’;
public file = {};
public data = [];
public users = [];
private headers = new Headers({
’Content-Type’: ’application/json’});
fetch_articles() {
this.http.get(’http://localhost:3002/articles’)
.subscribe(
(res: Response) => {
this.articles = res.json();
console.log(’Результат: ’, res);
}
);
for (let i = 1; i <= 100; i++) {
this.articles.push(‘item ${i}‘);
}
};
handleFileSelect(evt) {
let files = evt.target.files;
let file1 = files[0];
67
if (files && file1) {
let reader = new FileReader();
reader.onload = this._handleReaderLoaded
.bind(this);
reader.readAsBinaryString(file1);
}
}
_handleReaderLoaded(readerEvt) {
let file = readerEvt.target.result;
this.upload = ’successful’;
this.base64textString = btoa(file);
console.log(’btoa :’, btoa(file));
console.log(’upload :’, this.upload );
}
add_new_article(name_rus, name_eng,
description, date, file) {
this.file = {
base64textString: this.base64textString,
upload: this.upload
};
if (this.upload == ’’) {
this.upload = ’Empty’;
} else {
this.upload = ’Succsesful’;
}
const body = {articles: {name_rus: name_rus,
name_eng: name_eng, description: description,
date: date, file : this.file = {base64textString :
68
this.base64textString, upload : this.upload}}};
this.http.patch(‘${’http://localhost:3002/users’}/
${this.id}‘, body, {headers: this.headers})
.subscribe((res: Response) => {
console.log(’res:’, res);
console.log(’file:’, this.upload);
this.router.navigate([’/sidebar/home/users’]);
});
}
ngOnInit() {
this.route.params.subscribe(params => {
this.id = +params[’id’];
});
this.fetch_articles();
this.http.get(’http://localhost:3002/users’)
.subscribe(
(res: Response) => {
this.users = res.json();
console.log(’Результат: ’, res);
for (let i = 0; i < this.users.length; i++) {
if (parseInt(this.users[i].id) === this.id) {
this.data = this.users[i];
break;
}
}
}
);
}
}
69
Форма добавления статьи
<div class="article_add">
<div class="margins">
<div class="name-article">
<p>Добавить статью</p>
</div>
<div class="form-group">
<label class="article-label">
Название на русском</label>
<input type="text"
class="form-control ember-view"
[(ngModel)]="name_rus">
</div>
<div class="form-group">
<label class="article-label">
The name in English</label>
<input type="text"
class="form-control ember-view"
[(ngModel)]="name_eng">
</div>
<div class="form-group">
<label class="article-label">
Описание/Description</label>
<input type="text"
class="form-control ember-view"
[(ngModel)]="description">
</div>
<div class="form-group">
<label class="article-label">Дата</label>
70
<input type="date"
class="form-control ember-view"
[(ngModel)]="date">
</div>
<div class="form-group">
<label class="article-label">Файл</label>
<input type="file"
class="form-control ember-view"
accept="application/pdf"
[(ngModel)]="data.file"
(change)="handleFileSelect($event)">
</div>
<button type="button" class="btn btn-default"
(click)="add_new_article(name_rus, name_eng,
description, date, data.file)">
<i class="fa fa-floppy-o" aria-hidden="true"></i>
Save
</button>
<button type="button" class="btn btn-default back"
[routerLink]="[’/sidebar/home/articles’]">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
Back
</button>
</div>
</div>
71
Приложение 2
Файл data.json
{
"posts": [
{
"id": 1,
"name": "json-server",
"description": "text1"
},
{
"id": 2,
"name": "admin",
"description": "text2"
},
{
"id": 3,
"name": "gleb",
"description": "text3"
},
{
"id": 4,
"name": "gleb12",
"description": "text3"
}
],
"users": [
{
72
"fname": "Глеб",
"lname": "Помазнев",
"pname": "Олегович",
"email": "[email protected]",
"phone": 12345678,
"rank": "admin",
"nickname": "Gleb",
"password": "1234",
"organization": "ОГУ",
"country": "Россия",
"city": "Орел",
"id": 1,
"articles": {
"name_rus": "Статья 1",
"name_eng": "Article 1",
"description": "Описание",
"date": "2018-05-20",
"file": {
"base64textString": "0KHQsNC70Y7Rggo=",
"upload": "Succsesful"
}
}
},
{
"fname": "test",
"lname": "test",
"pname": "test",
"email": "[email protected]",
"phone": 123,
73
"rank": "test",
"nickname": "test",
"password": "test",
"organization": "test",
"country": "test",
"city": "test",
"id": 2,
"articles": {
"name_rus": "Разработка веб - приложений
по изданию научных публикаций",
"name_eng": "Development of web
applications for the publication of
scientific publications",
"description": "",
"date": "2018-06-01",
"file": {
"base64textString": "0KHQsNC70Y7Rggo=",
"upload": "Succsesful"
}
}
},
{
"fname": "Екатерина",
"lname": "Зверева",
"pname": "Петровна",
"email": "[email protected]",
"phone": 8888888888,
"rank": "Студент",
"nickname": "Ekaterina",
74
"password": "ekaterina1Q",
"organization": "ОГУ",
"country": "Россия",
"city": "Орел",
"id": 3,
"articles": {
"name_rus": "Статья 3",
"name_eng": "Article 3",
"description": "",
"date": "2018-05-21",
"file": {
"base64textString":
"0KXQsNC5INGH0YPQstCw
0LosINC60LDQuiDRgdCw0Lw/Cg==",
"upload": "Succsesful"
}
}
},
{
"fname": "Павел ",
"lname": "Петренко",
"pname": "Александрович",
"email": "[email protected]",
"phone": 987654321,
"rank": "студент",
"nickname": "Pavel",
"password": "pav123pav",
"organization": "ОГУ",
"country": "Россия",
75
"city": "Орел",
"id": 4,
"articles": {
"name_rus": "Статья 4",
"name_eng": "Article 4",
"description": "Описание",
"date": "",
"file": {
"base64textString": "",
"upload": "Empty"
}
}
},
{
"fname": "Мария",
"lname": "Син",
"pname": "Валерьевна",
"email": "[email protected]",
"phone": 43211234,
"rank": "Студент",
"nickname": "Maria",
"password": "12345",
"organization": "ОГУ",
"country": "Россия",
"city": "Орел",
"id": 5,
"articles": {
"name_rus": "Статья 5",
"name_eng": "Article 5 ",
76
"description": "",
"date": "",
"file": {
"base64textString": "0KHQsNC70Y7Rggo=",
"upload": "Succsesful"
}
}
},
{
"nickname": "Rick",
"email": "[email protected]",
"password": "12345",
"id": 6
},
{
"nickname": "Ivan",
"email": "[email protected]",
"password": "ivan123",
"id": 7
},
{
"nickname": "tester",
"email": "[email protected]",
"password": "tester123",
"id": 8
}
],
"news": [
{
77
"id": 1,
"number_btn": 1,
"name": "Заголовок новости 1",
"short_desc": "Повседневная практика
показывает, что начало повседневной
работы по формированию позиции
обеспечивает широкому кругу
(специалистов) участие в формировании
системы обучения кадров, соответствует
насущным потребностям.",
"description": "Линза концентрирует
векторный фронт, тем самым открывая
возможность цепочки квантовых превращений.
Резонатор усиливает экситон.
Непосредственно из законов сохранения
следует, что фонон инвариантен
относительно сдвига. Волновая тень
по определению расщепляет изобарический
экситон. Луч трансформирует электронный фронт.
Интерпретация всех изложенных ниже наблюдений
предполагает, что еще до начала измерений
взвесь трансформирует квантово-механический
гидродинамический удар. Примесь экстремально
отражает циркулирующий атом. Солитон
оптически стабилен.",
"date": "17.03.2018"
},
{
"id": 2,
78
"number_btn": 2,
"name": "Заголовок новости 2",
"short_desc": "Внезапно, сторонники
тоталитаризма в науке набирают популярность
среди определенны слоев населения, а значит,
должны быть представлены в исключительно
положительном свете.",
"description": "Текст новости 2 ...",
"date": "25.02.2018"
},
{
"id": 3,
"number_btn": 3,
"name": "Заголовок ноаости 3",
"short_desc": "Для современного мира
внедрение современных методик способствует
повышению качества укрепления моральных
ценностей.",
"description": "Текст новости 3 ...",
"date": "12.02.2018"
}
]
}
79
1/--страниц
Пожаловаться на содержимое документа