WEB 3 Ибрагимова Шакиров

УФИМСКИЙ ГОСУДАРСТВЕННЫЙ АВИАЦИОННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ

ФАКУЛЬТЕТ ИНФОРМАТИКИ И РОБОТОТЕХНИКИ

КАФЕДРА ВЫЧИСЛИТЕЛЬНОЙ МАТЕМАТИКИ И КИБЕРНЕТИКИ

		УТВЕРЖДАЮ Проректор университета по научной работе ФИО
		"___" ______________ _______г.
Лабораторная работа № 3 «Создание серверного приложения. Применение подхода AJAX для обмена данными с сервером.»
по предмету: Web-технологии
Преподаватель			Б.С. Юдинцев
Исполнители			К.Б. Ибрагимова А.Р. Шакиров
Уфа 2021

ЗАДАНИЕ

Создать серверное приложение, используя один из популярных языков программирования: Node.js, Python, PHP.

1. Развернуть базовое веб-приложение Node.js.

2. Реализовать созданные ранее контентные html-страницы с помощью любого популярного шаблонизатора серверного приложения.

ТЕОРЕТИЧЕСКИЙ МАТЕРИАЛ

Колбэк-функции в JavaScript

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

AJAX

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

AJAX — не самостоятельная технология, а концепция использования нескольких смежных технологий. AJAX реализуется с использованием технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью, например с использованием XMLHttpRequest или Fetch API.

Шаблонизаторы в веб-приложении

Шаблонизатор (в web) — программное обеспечение, позволяющее использовать html-шаблоны для генерации конечных html-страниц. Основная цель использования шаблонизаторов — это отделение представления данных от исполняемого кода. Часто это необходимо для обеспечения возможности параллельной работы программиста и дизайнера-верстальщика.

Маршрутизация запросов в серверном веб-приложении

Маршрутизация – это система связи между конечным пользователем и элементарными структурными единицами веб-приложения.

Маршрутизация определяет, как приложение отвечает на клиентский запрос к конкретному адресу (конечной точке), которым является URI (или путь), и определенному методу запроса HTTP (GET, POST и т.д.). Каждый маршрут может иметь одну или несколько функций обработки, которые выполняются при сопоставлении маршрута.

Главная задача маршрутизации – сделать адреса страниц удобными для восприятия пользователя и понятными для обработки сервером.

Виды HTTP-запросов

Виды (типы) HTTP запроса: GET, POST, PUT, PATCH, HEAD, DELETE, TRACE. Чаще всего в HTTP запросе используются методы GET, или POST:

GET — используется для запроса содержимого web-страницы по указанному URI. Кроме обычного метода GET, различают ещё условный GET и частичный GET. Условные запросы GET содержат заголовки If-Modified-Since, If-Match, If-Range и подобные.

POST — используется для отправки информации, на сервер. При отправке данных методом POST, они указываются в теле HTTP сообщения, а не в строке ввода адреса в браузере, как это делается при передаче данных методом GET.

Ход работы

1. Развернем базовое веб-приложение используя платформу Node.js.

2. Реализуем созданные контентные html-страницы предыдущей лабораторной работы с помощью шаблонизатора серверного веб приложения Express.js следующим образом:

   1. Создадим мастер-страницу (рис.1) и вынесем изменяемый контент в отдельные шаблоны (рис. 2-3).

Рисунок 1. Родительский шаблон

Рисунок 2. Шаблон для изменяемого контента главной страницы

Рисунок 3. Шаблон для изменяемого контента страницы сообщений

2. Заголовок страницы будем передавать в виде параметра в шаблон.

Определим переменную title в родительском шаблоне (рис.4).

Рисунок 4. Определяемый заголовок страницы

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

Рисунок 5. Пример модели данных главной страницы

3. Используемые повторяющиеся теги реализуем с помощью циклических конструкций в шаблоне (рис.6).

Рисунок 6. Пример реализации отображения постов на главной странице

3. Вынесем встроенный JavaScript код и статичные файлы в соответствующие папки веб-приложения

Рисунок 7. Дерево проекта

4. Привяжем к шаблонам соответствующие маршруты и обработчики маршрутов (рис. 8).

Рисунок 8. Пример обработчика маршрута с привязкой к шаблону

Таблица 1

Модули маршрутизации

Модуль маршрутизации	Описание
./routes/index.js	Обрабатывает запрос получения главной страницы и POST запросы.
./routes/im.js	Обрабатывает запрос получения страницы сообщений.

5. Реализуем обработку сообщений формы на странице сообщений используя подход AJAX.

Реализуем формирование запроса и получение ответа на стороне клиента (рис. 9).

Рисунок 9. Обработка запросов на стороне клиента

Реализуем обработку запроса на стороне сервера (рис. 10).

Рисунок 10. Обработка запросов на стороне сервера

Пример работы формы представлен на рисунках 11 и 12.

Рисунок 11. Форма до отправки запроса

Рисунок 12. Форма после совершения отправки и получения ответа

ВЫВОД

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