SPA ПРОЕКТ СОЗДАНИЕ СЕРВЕРА (ASP.NET CORE WEB API)
Мы научимся настраивать серверное приложение, заточенное полностью под новые потрясающие реали мира веб технологий. Приложение на основе веб-сервисов. Такие приложения могу работать не толко с браузерами, но и с мобильными устройствами, десктомными приложениями и т.д.
Если Вы просто хотите получить готовый каркас проекта, то просто скачайте его с гита.
https://github.com/rusrc/WebApiApplication
Итак, сильно углубляется не будем, но, если в кранце развитие веб технологий можно разбить на два этапа синхронный принцип и асинхронный принцип работы.
синхронный — это передача небольших данных серверам и ожидание ответа от сервра, т.е. сделали запрос, который сам по себе очень легкий, страница замерла, сервер пыжится, считает, калькулирует, обращается к базе, что-то рендерит у себя, использует всякие шаблонизаторы для рендеринга, а мы, как пользователи ждем, когда ответит сервер. До этих пор мы не можем взаимодействовать со страницей, она полностью замерла или синхронизировалась с сервером в ожидании его ответа. Еще одна особенность такого подхода — это передача огромного количества данных по сети. Мы захотели просто посмотреть, например, меню сайта пиццерии, нажали на мелкую ссылку отправили опять запрос на сервер и процесс повторяется. В итоге — это тяжелые рабочие будни серверов и ленивые браузеры.
асинхронный — это передача данных серверам, но без необходимости ожидания ответа от сервера. Т.е. сделали запрос к серверу, при этом страница все еще активна мы можем нажимать другие кнопочки и ссылки, полностью взаимодействовать со страницей. Самому же серверу больше не надо рендерить километровые портянки html разметки, логика на сервере сильно упрощается за счет отсутствия рендеринга представления. И сами данные невероятно легкие, передается небольшое количество данных по сети, нет сложной работы сервера, а сами браузеры трудолюбивые и умные.
Интересен сам факт того, что данные раньше передавали через грузный формат xml огромными порциями при слабом интернете.
А сегодня передают совсем крохотный объем данных при мощных интернет соединениях.
Кто-то скажет, что пк пользователей были слабые, но не надо. Потому что уже в 2000 компы были очень мощные мы с друзьями играли во Operation Flashpoint и меня удивляла масштабность игры уже тогда, поэтому можно было сделать концепцию сильного клиента еще раньше. Но это всё лирика.
Собственно, в этом видео я расскажу, как настроить и как использовать такой север.
Давайте запустим проект. Dotnet core (https://www.microsoft.com/net/core#windowsvs2017) позволяет нам сделать это невероятно просто. Это абсолютно бесплатный и внимательно, кроссплатформенная система от Microsoft, работает на nginx, на сайте проекта можно увидить какие ОС поддерживает платформа. Наличие потрясающего языка программирования C#. Также можно писать на F# и на момент записи урока еще ожидается поддержка VB. В принципе любая технология на сегодня поддерживает простую развертку web api серверов, например, такие технологии как Node.js, PHP, Ruby, Java, Python. Я умею работать и Node.js, и php, это хорошие технологии особенно node.js, но эти языки не типизированные (хотя Node.js можно писать на TypeScript или др. препроцессорах), в общем я обожаю типизацию, поэтому в своих проектах использую в основном платформу на c#.
Итак, т.к. dotnet core кроссплатформенный вы можете использовать любой редактор кода или IDE, но я крайне рекомендую вам использовать Visual Studio 2017 Community если вы используете Windows. На мой взгляд она проще для новичка или ленивого программиста. Это тоже абсолютно бесплатная среда разработки от Microsoft, которая поддерживается большое комьюнити.
Запустите Visual Studio 2017 выберите добавить новый проект, далее выберите шаблон .NET Core и ASP.NET Core Web Application (.NET Core). Назовем наш проект “WebApiApplication”.
Из списка шаблонов выберите Web API
Проверим что в “Change Authentication” у нас ничего не указанно.
Нажмите ОК. У нас запустится проект в этом шаблоне уже всё по минимуму скомпоновано для начала работы, поэтому мы можем спокойно запустить проект.
Есть два способа запуска.
- Запустить проект в режиме отладки в этом режиме мы сможем просмотреть работу приложения в режиме трассировке, что крайне удобно понять работу приложения в целом. Но в этом режиме нельзя в полной мере редактировать код. Такой запуск осуществляется через нажатие клавиши
- Второй способ — это запустить проект в режиме IIS Express без возможности отладки, но в этом режиме мы сможем легко редактировать код. Т.е. Visual Studio сама поднимет мини сервер для нас. Такой запуск осуществляется через нажатие клавиш Ctrl + F5.
И так нажмем сочетание клавиш Ctrl + F5. Наше приложение запуститься в браузере по умолчанию. В моем случае это Google Chrome. И мы сразу видим пример запуска наших API сервисов по адресу api/values (данный адрес запуска прописан в файле launchSettings.json).
|
1
2
3
4
5
6
7
8
9
|
«profiles»: {
«IIS Express»: {
«commandName»: «IISExpress»,
«launchBrowser»: true,
«launchUrl»: «api/values»,
«environmentVariables»: {
«ASPNETCORE_ENVIRONMENT»: «Development»
}
}
|
В данном случае это тестовый список Value1, Value2. Мы можем обратиться к каждой записи по id. Указав данный id в url (http://localhost:61474/api/values/1) получим value. В этом нет никакого смысла, но главное, что система работает.
Давайте разберемся почему система возвращает именно то что мы видим.
Перейдем в проект. Структура проекта очень простая. Фактически всё что нас интересует это папка Controllers там мы и реализуем наши веб-сервисы.
Давайте откроем контроллер ValuesController.cs. Как мы видимо адрес, который мы вводили в браузере очень похож на структуру в котроллере. Очень мощный атрибут Route позволяет редактировать сегменты адреса по нашему желанию. В данном примере “api” – это корневой сегмент. Мы можем, например, написать слово «привет» и наш сервис будет доступен по адресу привет/values давайте попробуем запустить, каждый раз как вы меняете что-то в коде необходимо пересобрать приложение Build -> BuildSolition. Второй сегмент адреса это [controller] в квадратных скобках. Таким образом мы говорим системе, что тут должно быть название нашего котроллера Values без приставки Controller.
Внутри класса ValuesController у нас запускаются методы их называют методы действия т.к. они находятся в котроллере.
Обратите внимания что над некоторыми методами есть специальный атрибуты указывающие на различие способы вызвать метод класса. Такие способы приятно называть глаголами запросов (потому что они призывают что-то сделать get – получить, post – отправить, put — положить) их еще называют «методами запросов» не путайте с методами класса.
Пример GET запроса в браузере google chrome
Чтобы понять, что это такое получше откроем браузер, в моем случае хром, наберем адрес google.ru, откроем консоль и перейдем на вкладку «Network» тут мы увидим все обращения нашего браузера к серверу. Удалите всё что есть в данном окне и обновите страницу, чтобы увидеть обращения браузера к серверу. Также проставьте галочку “Disable cache”.
После обновления мы увидим, как браузер обращается к серверу и шлет очень много разных запрос. Остановите запись запросов, чтобы браузер не писал лишних.
В моем примере получилось больше 25 запросов за раз. Эти запросы уходят на разные сервера гугла.
Как видите простая с виду страничка совершает множество запросов.
В панели внизу видна общая информация о запросах и статусе.
25 request – 25 запросов на данный момент
432 kb – 432 килобита данных переданных в 25 запросах.
Finish: 874 ms – время прошедшее с момента первого запроса.
DOMContentLoaded: 325 ms – время в миллисекундах указывающее за сколько грузится только DOM структура или html без css, картинок и др. попутных запросов. Чтобы четко увидеть DOM нажмите «Посмотреть код страницы» или Ctrl + U. Всё что вы увидите это и есть структура DOM она может содержать не только HTML. Собственно, это содержимое без пробелов и переносов загрузилась в моем случае за 325 ms.
Load: 320 ms – это уже время всего остального загрузившегося за раз.
Но нас интересует самый первый запрос к серверу в списке это тот самый запрос, который мы руками вбиваем в адресную строку браузера. Она идентична с запросов в консоли. Если щелкнуть по этому запросу в консоли, то мы увидим всю информацию по этому запросу.
Как видно в окне справа у нас есть общая информация, которую отправляет браузер на сервер в секции “General”. А также попутное содержание запроса в секции Request Headers – заголовки запроса. Но не пугайтесь в моей работе, например, за последние 2 года я использовал только два заголовка Content-Type и иногда Cookie, поэтому знать все заголовки не надо.
Но нас интересует общая информация. В этой секции возможно вы уже заметили и расположен наш метода запроса. По умолчанию, в адресной строке браузеров все запросы отправляются по методу “GET”.
Повторим тоже самое, но с нашим временным IIS сервером. Перейдем по адресу http://localhost:51827/api/values.
В моем случае несколько запросов, но все остальные запросы кроме первого это локальные, закодированные запросы они почти не имеют нагрузки (1, 2 мс.). Это запросы плагина «jsonview». В целом картина получше. Количество информации — это байты, время в три раза быстрее.
Но мы конечно сравнивали простую страну мирового супергиганта в IT индустрии. Для примера я зашел еще на сайт auto.ru картина колоcсальной разницы. Загрузка данных 4.4 мегабайт. Время загрузки за раз 3.03 секунды.
Воспроизведение запросов через программу PostMan.
Конечно всю палитру запросов сложно имитировать в браузере. Поэтому для таких целей существуют специальные программы. Самая продвинутая и популярная на сегодняшний день https://www.getpostman.com/ программу можно установить в качестве расширения в браузер так локально.
Откройте постман и тут же мы увидим глаголы запросов, который может генерить постман
Удалите все методы в котроллере.
1. Единственный метод с любым названием в контроллере запускается по умолчанию. Добавьте совсем простой метод
|
1
2
3
4
|
public IEnumerable<string> Get()
{
return new string[] { «value1», «value2» };
}
|
FrameWork увидит его первый делом т.к. у нас ничего больше нет в контроллере система по умолчанию запустить его если глагол запроса GET.
Запустим в ПОСТМЕН-е.
2. Два метода класса, но одно имеет атрибут HttpGet. Framework приоритетно сначала запустит тот у которого есть атрибут глагола.
|
1
2
3
4
5
6
7
8
9
10
|
public IEnumerable<string> Get()
{
return new string[] { «value1», «value2» };
}
[HttpGet]
public IEnumerable<string> Get2()
{
return new string[] { «value3», «value4» };
}
|
3. Можно поменять глагол запроса, например, на HttpPost
|
1
2
3
4
5
6
7
8
9
10
|
public IEnumerable<string> Get()
{
return new string[] { «value1», «value2» };
}
[HttpPost]
public IEnumerable<string> Get2()
{
return new string[] { «value3», «value4» };
}
|
Запустим в ПОСТМАН-е
4. Именованные сервисы. Через атрибут Route можно задать дополнительные сигменты.
|
1
2
3
4
5
|
[Route(«Get»)]
public IEnumerable<string> Get2()
{
return new string[] { «value3», «value4» };
}
|
Next Post