How to Create a Basic CRUD Application with Blazor?

обзор этот гид проведет вас через создание полного crud (создание, чтение, обновление, удаление) приложения с использованием blazor в этом учебном пособии вы настроите проект back4app, разработаете схему вашей базы данных и интегрируете ваш фронтенд на blazor с back4app через rest api этот процесс поможет вам создать надежный бэкенд, обеспечивая эффективное управление данными в вашем веб приложении сначала вы создадите проект back4app под названием basic crud app blazor , который будет служить основой вашей системы управления данными затем вы разработаете масштабируемый дизайн базы данных, создавая детализированные коллекции и поля, либо вручную, либо с помощью ai агента back4app после этого вы воспользуетесь возможностями приложения администратора back4app — удобным интерфейсом перетаскивания — для легкого управления вашими коллекциями наконец, вы подключите ваш фронтенд на blazor к back4app, используя rest api, и обеспечите безопасность вашего бэкенда с помощью надлежащего контроля доступа к концу этого учебника у вас будет готовое к производству веб приложение, которое поддерживает основные операции crud вместе с аутентификацией пользователей и безопасными обновлениями данных ключевые моменты обучения создавайте приложения crud, которые обрабатывают операции с данными без проблем, используя надежный бэкенд получите представление о создании масштабируемого бэкенда и интеграции его с фронтендом blazor используйте возможности перетаскивания и размещения приложения back4app admin для упрощения управления данными изучите техники развертывания, включая контейнеризацию docker, чтобы быстро запустить ваше приложение предварительные требования перед началом убедитесь, что у вас есть аккаунт back4app и новый проект посетите начало работы с back4app https //www back4app com/docs/get started/new parse app если вам нужна помощь среда разработки blazor используйте visual studio или visual studio code с последним net sdk (версии 6 или выше) базовые знания c#, blazor и restful api посмотрите документацию blazor https //docs microsoft com/en us/aspnet/core/blazor если это необходимо шаг 1 – начальная настройка проекта создание нового проекта back4app войдите в свою учетную запись back4app выберите кнопку “новое приложение” на вашей панели управления введите название проекта basic crud app blazor и следуйте инструкциям на экране, чтобы завершить процесс создания создать новый проект после настройки ваш новый проект будет отображаться на вашей панели управления, предоставляя надежную основу для настройки вашего бэкенда шаг 2 – проектирование схемы вашей базы данных создание вашей модели данных для этого базового приложения crud вам нужно будет создать несколько коллекций ниже приведены примеры коллекций вместе с необходимыми полями и типами данных для эффективной настройки вашей базы данных 1\ сбор предметов поле тип данных цель ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название или заголовок элемента описание строка краткое резюме предмета создано в дата временная метка, когда элемент был создан обновлено дата метка времени, когда элемент был в последний раз изменен 2\ коллекция пользователей поле тип данных цель ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальный идентификатор для пользователя электронная почта строка адрес электронной почты пользователя хэш пароля строка зашифрованный пароль для безопасного входа создано в дата время создания аккаунта обновлено дата время последнего обновления аккаунта вы можете создать эти коллекции вручную в панели управления back4app, создав новый класс для каждой коллекции и добавив необходимые столбцы создать новый класс вы можете определить столбцы, выбрав тип данных, назвав поле, установив значения по умолчанию и определив, является ли поле обязательным создать столбец использование ai агента back4app для создания схемы ai агент back4app упрощает создание схемы непосредственно из вашей панели управления введя подсказку, описывающую ваши коллекции и поля, ai агент автоматически генерирует необходимую схему базы данных как использовать ai агента получите доступ к ai агенту войдите в свою панель управления back4app и найдите ai агента в настройках или главном меню определите свою модель данных вставьте описательную подсказку, в которой перечислены коллекции и их поля просмотрите и подтвердите проверьте предложенную схему и примените ее к вашему проекту пример подсказки create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) использование этого ai агента не только экономит время, но и обеспечивает последовательную и эффективную настройку схемы шаг 3 – активация админ приложения и управление crud операциями введение в админ приложение админ приложение back4app предоставляет интерфейс без кода, с возможностью перетаскивания для управления вашими данными на сервере этот интуитивно понятный инструмент позволяет вам легко выполнять операции crud активация приложения администратора перейдите в “больше” меню на вашей панели управления back4app нажмите на “admin app” и затем выберите “включить admin app ” настройте свои учетные данные администратора, создав первоначального администратора, который также установит стандартные роли и системные коллекции включить admin app после активации войдите в приложение администратора, чтобы управлять вашими коллекциями и данными панель управления admin app выполнение операций crud с приложением администратора внутри приложения администратора вы можете создавать записи нажмите кнопку “добавить запись” в коллекции (например, товары), чтобы добавить новые записи читать/обновлять записи нажмите на запись, чтобы просмотреть ее детали или изменить ее поля удалять записи удалите записи, которые больше не нужны этот простой интерфейс перетаскивания значительно улучшает опыт управления данными шаг 4 – подключение blazor к back4app теперь, когда ваш бэкенд настроен, пришло время интегрировать ваш фронтенд blazor с back4app использование rest api в blazor поскольку sdk parse не применим к blazor, вы будете использовать rest api для выполнения операций crud в вашем приложении blazor используйте httpclient для взаимодействия с rest эндпоинтами back4app пример получение элементов через rest создайте сервис в вашем проекте blazor для получения элементов например // services/itemservice cs using system net http; using system net http headers; using system text json; using system threading tasks; using system collections generic; public class item { public string id { get; set; } public string title { get; set; } public string description { get; set; } } public class itemservice { private readonly httpclient httpclient; private const string baseurl = "https //parseapi back4app com/classes/items"; public itemservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task\<list\<item>> getitemsasync() { var response = await httpclient getasync(baseurl); response ensuresuccessstatuscode(); var json = await response content readasstringasync(); var itemsdata = jsonserializer deserialize\<itemsresponse>(json); return itemsdata results; } } public class itemsresponse { public list\<item> results { get; set; } } интегрируйте такие api вызовы в ваши компоненты blazor для управления crud операциями шаг 5 – защита вашего бэкенда реализация списков контроля доступа (acl) защитите ваши данные, установив acl на ваши объекты например, чтобы создать приватный элемент public async task createprivateitemasync(item newitem, string ownerid) { // prepare your item data with proper access controls // in your rest call, include acl information as required by your backend // this is a conceptual example; refer to back4app documentation for acl details } настройка разрешений на уровне класса (clp) в панели управления back4app настройте clp для каждой коллекции, чтобы гарантировать, что только авторизованные пользователи могут получать доступ или изменять конфиденциальные данные шаг 6 – управление аутентификацией пользователей настройка учетных записей пользователей в blazor back4app использует класс user от parse для обработки аутентификации в вашем приложении blazor управляйте регистрацией и входом пользователя через rest вызовы например // services/authservice cs using system net http; using system net http json; using system threading tasks; public class authservice { private readonly httpclient httpclient; private const string signupurl = "https //parseapi back4app com/users"; public authservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task signupasync(string username, string password, string email) { var user = new { username, password, email }; var response = await httpclient postasjsonasync(signupurl, user); response ensuresuccessstatuscode(); // handle success, such as storing tokens or redirecting the user } } аналогичные методы могут быть реализованы для входа и управления сессиями дополнительные функции, такие как социальные входы, проверка электронной почты и восстановление пароля, могут быть настроены через панель управления back4app шаг 7 – развертывание вашего фронтенда blazor функция веб развертывания back4app позволяет вам без проблем размещать ваше приложение blazor, развертывая ваш код из репозитория github 7 1 создание вашей производственной сборки откройте каталог вашего проекта в терминале запустите команду публикации dotnet publish c release эта команда генерирует опубликованную папку с оптимизированными статическими файлами для вашего приложения blazor проверьте сборку подтвердите, что выходная папка содержит необходимые файлы (например, index html , javascript, css и т д ) 7 2 организация и загрузка вашего кода ваш репозиторий git должен содержать полный исходный код вашего приложения blazor пример структуры папок может быть следующим basic crud app blazor frontend/ \| wwwroot/ \| | index html \| pages/ \| | index razor \| | items razor \| | login razor \| services/ \| | itemservice cs \| | authservice cs \| program cs \| basic crud app blazor csproj \| readme md пример файла program cs using microsoft aspnetcore components web; using microsoft aspnetcore components webassembly hosting; using basic crud app blazor; using basic crud app blazor services; var builder = webassemblyhostbuilder createdefault(args); builder rootcomponents add\<app>("#app"); builder rootcomponents add\<headoutlet>("head after"); builder services addscoped(sp => new httpclient { baseaddress = new uri(builder hostenvironment baseaddress) }); builder services addscoped\<itemservice>(); builder services addscoped\<authservice>(); await builder build() runasync(); коммит и отправка в github инициализируйте git в папке вашего проекта (если еще не сделано) git init добавьте ваши файлы git add закоммитьте ваши изменения git commit m "первый коммит исходного кода blazor фронтенда" создайте репозиторий на github назовите его basic crud app blazor frontend отправьте ваш репозиторий git remote add origin https //github com/your username/basic crud app blazor frontend git git push u origin main 7 3 интеграция вашего репозитория с веб развертыванием доступ к опции веб развертывания в вашей панели управления back4app откройте ваш проект ( basic crud app blazor ) и перейдите в раздел веб развертывание подключите свою учетную запись github следуйте инструкциям, чтобы связать свою учетную запись github, позволяя back4app получить доступ к вашему репозиторию выберите репозиторий и ветку выберите репозиторий (например, basic crud app blazor frontend ) и ветку (например, main ) в которой находится ваш код blazor 7 4 конфигурация развертывания предоставьте дополнительные детали, такие как команда сборки если опубликованная папка не была предварительно сгенерирована, укажите команду, такую как dotnet publish c release каталог вывода установите путь вывода (например, bin/release/net6 0/wwwroot ) переменные окружения добавьте любые необходимые настройки окружения (например, ключи api) в конфигурацию 7 5 контейнеризация вашего приложения blazor с помощью docker если вы предпочитаете docker для развертывания, включите dockerfile в ваш репозиторий вот пример \# use the official net sdk image for building the app from mcr microsoft com/dotnet/sdk 6 0 as build workdir /src copy \["basic crud app blazor csproj", " /"] run dotnet restore "basic crud app blazor csproj" copy run dotnet publish "basic crud app blazor csproj" c release o /app/publish \# use the official asp net core runtime image to run the app from mcr microsoft com/dotnet/aspnet 6 0 as runtime workdir /app copy from=build /app/publish expose 80 entrypoint \["dotnet", "basic crud app blazor dll"] затем в настройках развертывания веб приложения выберите опцию docker для развертывания вашего контейнеризованного приложения 7 6 запуск вашего приложения инициализируйте развертывание нажмите кнопку развернуть на панели управления back4app мониторинг сборки back4app получит ваш код с github, выполнит команду сборки, если это необходимо, и развернет ваше приложение в контейнере получите ваш url после завершения процесса развертывания back4app предоставит url для вашего размещенного приложения blazor 7 7 подтверждение развертывания откройте предоставленный url посетите url в браузере, чтобы увидеть ваше развернутое приложение проверьте приложение убедитесь, что все страницы загружаются правильно и что операции crud работают как ожидалось устраните неполадки, если необходимо используйте инструменты разработчика браузера и просмотрите журналы развертывания на back4app, чтобы диагностировать любые проблемы шаг 8 – резюме и дальнейшее исследование поздравляем! вы успешно создали базовое crud приложение с использованием blazor и back4app вы настроили проект под названием basic crud app blazor , разработали коллекции для элементов и пользователей, а также использовали приложение администратора back4app для удобного управления данными кроме того, вы интегрировали свой фронтенд на blazor с back4app, используя rest api, и применили надежные меры безопасности будущие шаги расширьте свой фронтенд улучшите свое приложение blazor более детализированными представлениями, функцией поиска или живыми уведомлениями добавьте расширенные функции рассмотрите возможность внедрения облачных функций, интеграций с третьими сторонами или разрешений на основе ролей консультируйтесь с дополнительными ресурсами просмотрите документацию back4app https //www back4app com/docs и другие продвинутые учебники, чтобы дополнительно оптимизировать и расширить ваше приложение следуя этому руководству, вы теперь имеете основу для создания масштабируемого и безопасного crud бэкенда для вашего приложения blazor с использованием back4app удачного кодирования!