Главная страница>Исходный код ASP>Другие категории
Скачать

Создание приложения для обмена фотографиями с использованием хостинга Blazor Web Assembly, веб-API, gRPC и Duende Identity Server

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

  • Каждый может просматривать существующие изображения и комментарии.
  • Только авторизованные пользователи могут загружать новые фотографии и комментарии.
  • Только владелец изображения может редактировать или удалять изображение.
  • Только владелец комментария может удалить или обновить комментарий.

Мы собираемся построить 3 части.

  • FrontEnd — клиентское веб-приложение Blazor в сочетании с собственным веб-узлом ASP.NET Core .
  • Backend , созданный с помощью .NET 7.0, будет состоять из
    • Служба REST для управления изображениями.
    • Сервис gRPC для комментариев.
  • Поставщиком удостоверений будет наш собственный проект Duende .

1.1 — Интерфейсный клиент

  • Клиент Blazor
  • HTML 5
  • CSS 3
  • Клиент Open Id Connect

Этот проект будет взаимодействовать с пользователем через браузер путем динамического создания пользовательского интерфейса HTML и будет использовать собственный сервер с помощью gRPC Web и HttpClient .

1.2 – Серверная часть для внешнего интерфейса (BFF)

  • Основной веб-хостинг ASP.Net
  • ЯРП
  • Дуэнде.Bff.Yarp

В этом проекте размещается и обслуживается клиентское приложение Blazor. Он также действует как обратный прокси-сервер для пересылки вызовов на бэкэнды REST и gRpc.

2.1 — Служба REST для фотографий

  • Контроллер веб-API .NET 7
  • Entity Framework Core 7.0
  • База данных SqLite
  • Аутентификация клиента Duende

2.2 – Комментарии службы gRPC

  • Служба .NET 7 gRPC
  • Entity Framework Core 7.0
  • База данных SqLite
  • Аутентификация клиента Duende

Эти проекты будут отвечать за хранение данных на сервере и отвечать на запросы клиентов через http, json и protobuf.

  1. Сервер аутентификации
    • Сервер идентификации 4 (Дуэнде)
    • Ядро Entity Framework

Этот проект позаботится об аутентификации. Он выдаст токены JWT, которые будут использоваться клиентским приложением для получения доступа к сервисам.

Что вам уже нужно знать:

  • С#
  • HTML 5
  • CSS 3

Чему вы собираетесь научиться:

  • ОТДЫХ
  • gRPC
  • Блазор
  • Контроллер веб-API ASP.NET Core 7.0
  • Служба gRPC ASP.NET Core 7.0
  • Entity Framework Core 7.0
  • Сваггер / OpenAPI
  • КОРС
  • ЯРП
  • Аутентификация и авторизация
  • OAuth 2 и Open Id Connect
  • Сервер идентификации 4 (Дуэнде)
  • Простая авторизация
  • Авторизация владельца ресурса
  • ЧИСТАЯ Архитектура
  • Модульное тестирование с помощью bUnit
  • Совместимость с Javascript

Прежде чем начать

На момент написания этого руководства .NET Core 7.0 можно было использовать только с Visual Studio 2022. Для работы с .NET Core 7.0 рекомендуется установить последнюю версию Visual Studio 2022.

  • Установите последнюю версию Visual Studio 2022 с рабочей нагрузкой ASP.NET и веб-разработкой.
  • Установите .NET Core 7.0, загрузив пакет SDK для .NET Core 7.0.

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

Наш рабочий процесс

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

Как следовать этому руководству

Если вы начнете с Lab01 и будете следовать каждому файлу readme.md, вы сможете завершить каждую лабораторную работу и перейти к следующей, используя свой собственный код. Нет необходимости открывать ни папку Start , ни папку Solution представленную в этом репозитории.

  • Start папки — это отправные точки каждого шага.
  • Папки Solution — это окончательные версии каждого шага, которые предоставляются вам на тот случай, если вы захотите проверить, каким должен стать ваш проект в конце каждой лабораторной работы.

Вам нужно открыть папку Start , соответствующую лабораторной работе, которую вы хотите попробовать ( Lab01/Start , чтобы начать с нуля) и следовать инструкциям, которые вы найдете в файле readme.md . Когда вы закончите, не стесняйтесь сравнить свою работу с решением, представленным в папке Solution .

НАЧАТЬ

  1. Откройте папку Labs
  2. Перейдите в подпапку Lab01
  3. Перейдите в подпапку Start .
  4. Следуйте инструкциям, содержащимся в файле readme.md чтобы продолжить.

Если вы хотите увидеть окончательную версию приложения

Создайте базу данных службы REST фотографий.

  • Откройте Lab15SolutionblazorPhotoSharingApplicationPhotoSharingApplication.sln в Visual Studio.
  • Создайте решение
  • Убедитесь, что у вас есть несколько запускаемых проектов:
    • Идентитисервер
    • Отдых
    • gRPC
    • Фронтенд.Сервер

Запустить приложение

Вход в систему

  • Имя пользователя: Алиса
  • Пароль: Pass123$

Или

  • Имя пользователя: Боб
  • Пароль: Pass123$

Последнее замечание, прежде чем мы начнем

Я предполагаю, что вы программист C#, заинтересованный в создании веб-приложения. В зависимости от того, сколько вам лет, возможно, вы уже использовали страницы asp, aspx, mvc и/или razor, а теперь хотите попробовать blazor. Возможно, вы уже знакомы с HTML и CSS и, возможно, даже играли с некоторыми фреймворками JavaScript, такими как Angular, React или Vue.

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

Лаборатории

  • Лаборатория 01 — Интерфейс Blazor
    • Изучение структуры проекта Blazor Web Assembly и создание нашей первой страницы.
  • Лабораторная работа 02 — Интерфейс: дополнительные представления
    • ЧИСТАЯ Архитектура
    • Внедрение зависимостей
    • Использование дополнительных библиотек Blazor через пакеты NuGet
    • Маршруты
    • Привязка данных
    • Обработка событий
  • Лабораторная работа 03. Интерфейс: стилизация пользовательского интерфейса с помощью MatBlazor
    • Материальный дизайн
    • МатБлазор
    • Страницы макета
  • Лабораторная работа 04. Интерфейс. Библиотеки и компоненты классов Razor.
    • Создание библиотеки классов Razor
    • Использование библиотеки классов Razor внутри проекта
    • Компоненты бритвы
    • Родительские и дочерние компоненты
    • Характеристики
    • Обратные вызовы событий
  • Лабораторная работа 05. Серверная часть: веб-API с ASP.NET Core 7.0 и Visual Studio 2022.
    • REST-протокол
    • Базовый веб-API Asp.NET
    • Контроллеры
    • Действия
    • Маршруты
    • Связывание
    • Ядро Entity Framework
    • JSON
    • Сваггер / OpenAPI
  • Лабораторная работа 06. Интерфейс: соединение с серверной частью
    • HttpClient
    • Конфигурация HttpClient
    • GetFromJsonAsync
    • PostAsJsonAsync
    • PutAsJsonAsync
    • УдалитьАсинк
    • Чтениефромджсонасинк
    • КОРС
    • ЯРП
  • Лабораторная работа 07 — Интерфейс: комментарии
    • Больше ЧИСТОЙ архитектуры
    • Больше компонентов
  • Лабораторная работа 08. Серверная часть: gRPC с ASP.NET Core 7.0 и Visual Studio 2022.
    • Больше ЧИСТОЙ архитектуры
    • gRPC
    • протобуф
    • gRPC в ядре Asp.Net
  • Лабораторная работа 09. Интерфейс: соединение с серверной частью
    • gRPC Веб
    • Клиентская сеть gRPC в .NET Core
    • Конфигурация
    • КОРС
    • ЯРП
  • Лабораторная работа 10. Безопасность: аутентификация и авторизация
    • Сервер идентификации Duende
    • Настройка службы REST для аутентификации носителя JWT
    • Настройка службы gRPC для аутентификации носителя JWT
    • Настройка клиента Blazor для аутентификации носителя JWT
    • Простая авторизация с атрибутом авторизации
    • Получение и передача токенов носителя JWT с помощью платформы Duende.Bff.Yarp
  • Лабораторная работа 11. Безопасность: авторизация на основе ресурсов
    • Служба авторизации
    • Политика
    • Требования
    • Обработчики
  • Лабораторная работа 12. Оптимизация производительности
    • Разделение таблицы Entity Framework
    • Загрузите файл из службы REST Web Api
    • Кэширование браузера
  • Лабораторная работа 13. Валидация
    • Аннотации к данным
    • Свободная проверка в базовом сервисе
    • Свободная проверка в службе REST ASP.NET Core
    • Свободная проверка в Blazor с помощью Blazored.FluentValidation
  • Лабораторная работа 14. Модульное тестирование компонентов Blazor с помощью bUnit
    • Модульное тестирование
    • Насмешливый
    • xUnit
    • Минимальный заказ
    • бЕдиница
  • Лабораторная работа 15. Совместимость Blazor и Javascript.
    • IJSRuntime
    • Вызов функции JavaScript в ASP.NET Core Blazor
    • Вызов методов .NET из функций JavaScript в ASP.NET Core Blazor
    • Изоляция Blazor JavaScript и ссылки на объекты
    • Листовка
    • exif.js
Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все