Как создать CRUD-приложение с Aurelia? A Comprehensive Tutorial

обзор в этом руководстве вы узнаете, как создать простое crud (создание, чтение, обновление, удаление) приложение с использованием фреймворка aurelia этот учебник объясняет, как построить приложение, способное обрабатывать основные операции с данными, интегрируя aurelia с back4app в качестве вашего серверного решения сначала вы создадите проект back4app с названием basic crud app aurelia для того, чтобы он служил вашей надежной системой управления данными затем вы наметите масштабируемую структуру базы данных, вручную определив коллекции и поля — или воспользовавшись ai агентом back4app — чтобы обеспечить надежные операции с данными после этого вы воспользуетесь приложением back4app admin app, которое предлагает интерфейс перетаскивания для легкого управления вашими данными наконец, вы свяжете ваш фронтенд на aurelia с back4app, используя rest/graphql вызовы (или parse sdk, где это применимо), и обеспечите безопасность вашего бэкенда с помощью детального контроля доступа к концу этого учебника у вас будет готовое к производству веб приложение с полной функциональностью crud, аутентификацией пользователей и безопасной обработкой данных основные идеи освойте создание crud приложений с надежным бэкенд сервисом приобретите практические навыки проектирования масштабируемого бэкенда и его интеграции с фронтендом aurelia изучите интерфейс администратора без кода (back4app admin app) для бесшовных операций с данными узнайте, как развернуть ваше приложение с использованием современных технологий, включая контейнеризацию предварительные требования перед началом убедитесь, что у вас есть следующее аккаунт back4app с активным проектом посетите начало работы с back4app https //www back4app com/docs/get started/new parse app если вам нужна помощь настройка разработки aurelia используйте aurelia cli или аналогичный инструмент; убедитесь, что у вас установлена node js (версии 14 или выше) базовые знания javascript, aurelia и rest api обратитесь к документации aurelia https //aurelia io/docs для получения дополнительной информации, если это необходимо шаг 1 – настройка вашего проекта создание нового проекта back4app войдите в свою учетную запись back4app нажмите кнопку “новое приложение” на вашей панели управления введите имя проекта basic crud app aurelia и завершите шаги настройки создать новый проект после создания ваш проект будет виден на вашей панели управления, готовый к конфигурации бэкенда и управлению данными шаг 2 – проектирование схемы вашей базы данных создание модели данных для этого crud приложения вы определите несколько коллекций ниже приведены примеры необходимых коллекций вместе с полями и типами данных, необходимыми для эффективной поддержки операций crud 1\ коллекция предметов поле тип данных детали ид идентификатор объекта автоматически сгенерированный первичный ключ название строка название или заголовок элемента описание строка краткое описание предмета создано в дата время, когда элемент был создан обновлено дата время, когда элемент был в последний раз изменен 2\ коллекция пользователей поле тип данных детали ид идентификатор объекта автоматически сгенерированный первичный ключ имя пользователя строка уникальный идентификатор для пользователя электронная почта строка уникальный адрес электронной почты для валидации аккаунта хэш пароля строка зашифрованный пароль для аутентификации пользователя создано в дата время создания аккаунта обновлено дата время последнего обновления аккаунта вы можете создать эти коллекции вручную в панели управления back4app, добавив новый класс для каждой и определив необходимые столбцы создать новый класс легко настройте поля вашей базы данных, выбрав правильный тип данных, указав имена полей, установив значения по умолчанию и указав, является ли поле обязательным создать колонку использование ai агента back4app для создания схемы ai агент back4app упрощает генерацию схемы, позволяя вам описывать вашу модель данных через подсказки этот инструмент автоматически создает коллекции и поля на основе ваших требований шаги для использования 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) этот метод ускоряет процесс создания схемы и гарантирует согласованную структуру для вашего приложения шаг 3 – активация интерфейса администратора и функциональности crud изучение интерфейса администратора приложение администратора back4app – это мощное решение без кода, которое позволяет вам управлять вашими данными на сервере через удобный интерфейс перетаскивания этот инструмент упрощает выполнение операций crud активация приложения администратора откройте меню “дополнительно” в вашей панели управления back4app выберите “admin app” и затем нажмите “включить admin app ” настройте свои учетные данные администратора создав свою первоначальную учетную запись администратора, что также устанавливает роли по умолчанию (такие как b4aadminuser ) и системные коллекции включить admin app после включения войдите в admin app, чтобы начать управлять своими данными панель управления admin app выполнение операций crud с помощью admin app в этом интерфейсе вы можете создавать записи используйте опцию “добавить запись” в коллекции (например, товары), чтобы добавить новые данные просматривать/изменять записи нажмите на любую запись, чтобы просмотреть ее детали или внести изменения удалять записи выберите опцию удаления, чтобы устранить данные, которые больше не нужны этот интерфейс упрощает ваши операции с данными, улучшая пользовательский опыт благодаря интуитивно понятному дизайну шаг 4 – связывание aurelia с back4app с вашим бэкендом, настроенным и управляемым через admin app, пришло время подключить ваш фронтенд aurelia к back4app использование rest или graphql вы можете использовать rest или graphql api например, чтобы получить элементы через rest // example rest request to get items async function fetchitems() { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items fetched ', data results); } catch (error) { console error('fetch error ', error); } } fetchitems(); интегрируйте эти api вызовы в ваши компоненты aurelia по мере необходимости шаг 5 – защита вашего бэкенда реализация списков контроля доступа (acl) улучшите безопасность, назначив acl для ваших объектов данных например, чтобы создать приватный элемент async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl restrict access to the owner only const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error saving secure item ', error); } } настройка разрешений на уровне класса (clp) в панели управления back4app настройте clp для каждой коллекции, чтобы обеспечить соблюдение стандартных правил безопасности, гарантируя, что только аутентифицированные или авторизованные пользователи могут получить доступ к конфиденциальной информации шаг 6 – управление аутентификацией пользователей настройка учетных записей пользователей back4app использует класс пользователя parse для обработки аутентификации в вашем приложении aurelia вы можете управлять регистрацией и входом пользователей, как показано ниже // src/resources/components/auth js import { observable } from 'aurelia framework'; import parse from ' / /parse config'; export class auth { @observable username = ''; @observable password = ''; @observable email = ''; async signup(event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration error ' + error message); } } } аналогичный шаблон можно реализовать для входа и управления сессиями дополнительные функции, такие как интеграция с социальными сетями, проверка электронной почты и сброс пароля, могут быть настроены через панель управления back4app шаг 7 – развертывание вашего фронтенда aurelia через веб развертывание функция веб развертывания back4app позволяет вам эффективно размещать ваше приложение aurelia, развертывая код из репозитория github в этом разделе вы подготовите вашу производственную сборку, зафиксируете ваш код в github, свяжете ваш репозиторий с веб развертыванием и развернете ваш сайт 7 1 создайте вашу производственную сборку откройте директорию вашего проекта в терминале выполните команду сборки au build env production эта команда генерирует папку dist с вашими оптимизированными статическими ресурсами подтвердите сборку убедитесь, что папка dist содержит файл index html и необходимые подкаталоги для javascript, css и изображений 7 2 организуйте и загрузите код вашего проекта ваш репозиторий github должен содержать все исходные файлы для вашего фронтенда aurelia пример структуры может быть следующим basic crud app aurelia frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parse config js \| ` resources/ \| | components/ \| | | items list js \| | ` auth js \| package json ` readme md пример файлов src/parse config js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } this is an example text in english коммит вашего кода в github инициализируйте git в папке вашего проекта (если это еще не сделано) git init стадируйте ваши файлы git add закоммитьте ваши изменения git commit m "первый коммит исходного кода aurelia" создайте репозиторий на github (например, basic crud app aurelia frontend ) запушьте ваш код в github git remote add origin https //github com/your username/basic crud app aurelia frontend git git push u origin main 7 3 связывание вашего репозитория github с веб развертыванием доступ к веб развертыванию войдите в свою панель управления back4app, перейдите к вашему проекту (basic crud app aurelia) и выберите опцию веб развертывание подключение к github следуйте инструкциям для интеграции вашей учетной записи github, предоставляя back4app доступ к вашему репозиторию выберите ваш репозиторий и ветку выберите репозиторий (например, basic crud app aurelia frontend ) и ветку (например, main ) содержащую ваш код 7 4 конфигурация развертывания установите следующие параметры конфигурации команда сборки если папка dist не была предварительно собрана, укажите команду (например, au build env production ) для выполнения back4app каталог вывода установите это значение на dist чтобы back4app знал, где находятся ваши статические файлы переменные окружения добавьте любые необходимые переменные окружения (например, ключи api) в параметры конфигурации 7 5 контейнеризация вашего приложения aurelia (docker) если вы предпочитаете развертывание с помощью docker, включите dockerfile в ваш репозиторий, аналогичный следующему \# use an official node image as the build environment from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining files and build the app copy run au build env production \# use nginx to serve the production build from nginx\ stable alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] соответственно настройте параметр развертывания docker в веб развертывании 7 6 развертывание вашего приложения нажмите кнопку развертывания после настройки развертывания нажмите развернуть мониторинг процесса сборки back4app получит ваш код с github, выполнит команду сборки при необходимости и развернет ваше приложение в контейнере получите ваш url после завершения развертывания back4app предоставит url, по которому размещено ваше приложение aurelia 7 7 проверка вашего развертывания откройте предоставленный url посетите url в вашем браузере, чтобы увидеть ваш живой сайт проверьте приложение убедитесь, что ваше приложение загружается правильно, маршруты работают как задумано, и все ресурсы (css, javascript, изображения) доступны устраните неполадки при необходимости используйте инструменты разработчика браузера для диагностики любых проблем и просмотрите журналы развертывания back4app при необходимости шаг 8 – завершение и будущие направления поздравляем! вы успешно создали полное crud приложение с использованием aurelia и back4app вы настроили проект под названием basic crud app aurelia , определили комплексные схемы базы данных для элементов и пользователей, и управляли своими данными с помощью приложения администратора back4app вы также интегрировали свой фронтенд на aurelia с бэкендом и реализовали надежные меры безопасности следующие шаги улучшите свой интерфейс расширьте свое приложение aurelia с помощью детализированных представлений, функций поиска и обновлений данных в реальном времени добавьте расширенные функции рассмотрите возможность интеграции облачных функций, сторонних api или разрешений на основе ролей изучите дальше посмотрите документацию back4app https //www back4app com/docs и дополнительные ресурсы aurelia для более глубокого руководства по оптимизации и настройке счастливого кодирования и удачи в вашем пути разработки!