Как создать CRUD-приложение на Astro?

обзор в этом руководстве вы узнаете, как создать веб приложение crud (создание, чтение, обновление и удаление) с использованием astro этот учебник проведет вас через настройку проекта back4app — нашего надежного бэкенда — и проектирование структуры данных, которая поддерживает основные операции затем мы создадим фронтенд на astro, который будет взаимодействовать с back4app через rest/graphql api, обеспечивая безопасное и эффективное управление данными к концу этого руководства у вас будет готовое к производству веб приложение с аутентификацией пользователей и безопасной обработкой данных что вы узнаете как структурировать приложение crud с помощью astro и back4app проектирование масштабируемого бэкенда с пользовательскими коллекциями использование интерфейса администратора с функцией перетаскивания для простого управления данными интеграция вашего фронтенда на astro с back4app с использованием rest или graphql развертывание вашего проекта astro и контейнеризация его с помощью docker при необходимости предварительные требования перед тем как начать, пожалуйста, подтвердите, что у вас есть аккаунт back4app с новым проектом готовым к использованию посмотрите начало работы с back4app https //www back4app com/docs/get started/new parse app для получения рекомендаций настроенная среда разработки astro используйте официальную документацию astro https //docs astro build чтобы начать убедитесь, что node js (версия 14+) установлен базовое знакомство с javascript, astro и rest api посетите документацию astro https //docs astro build если вам нужно освежить знания шаг 1 – инициализация вашего проекта начало нового проекта back4app войдите в свою учетную запись back4app нажмите «новое приложение» на вашей панели управления назовите ваш проект basic crud app astro и следуйте инструкциям для завершения настройки создать новый проект после создания ваш проект появится на панели управления back4app — вашей основе для конфигурации бэкенда шаг 2 – создание схемы вашей базы данных структурирование вашей модели данных для нашего crud приложения вы определите несколько коллекций ниже приведены примеры коллекций с полями и типами, которые помогут вам эффективно настроить схему вашей базы данных эта структура поддерживает эффективные операции crud 1\ сбор предметов поле тип цель ид идентификатор объекта автоматически сгенерированный первичный ключ название строка название или заголовок элемента описание строка краткий обзор предмета создано в дата время создания обновлено дата метка времени последнего изменения 2\ коллекция пользователей поле тип цель ид идентификатор объекта автоматически сгенерированный первичный ключ имя пользователя строка уникальный идентификатор для пользователя электронная почта строка электронная почта пользователя хэш пароля строка зашифрованный пароль для аутентификации создано в дата когда был создан аккаунт обновлено дата время последнего обновления для аккаунта вы можете вручную настроить эти коллекции в вашей панели управления back4app, создав новые классы и добавив соответствующие столбцы создать новый класс чтобы добавить поле, выберите тип данных, укажите имя поля, определите значение по умолчанию, если это необходимо, и отметьте, является ли поле обязательным создать колонку использование ai агента back4app для настройки схемы интегрированный ai агент в back4app может автоматически генерировать вашу схему опишите желаемые коллекции и поля в интерфейсе ai агента, просмотрите его рекомендации и примените их к вашему проекту пример запроса create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto created) \ 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 ) и системные коллекции включить приложение администратора после активации войдите в приложение администратора, чтобы управлять вашими коллекциями панель управления приложением администратора управление данными с помощью интерфейса администратора внутри приложения администратора вы можете добавить записи нажмите «добавить запись» в коллекции (например, товары), чтобы создать новые записи просмотреть/изменить записи нажмите на запись, чтобы просмотреть или изменить ее поля удалить записи удаляйте устаревшие записи без усилий этот инструмент упрощает операции crud с интуитивно понятным интерфейсом шаг 4 – подключение astro к back4app с настроенным бэкендом пришло время интегрировать ваш фронтенд astro использование rest/graphql api поскольку astro является генератором статических сайтов, оптимизированным для производительности, мы будем взаимодействовать с back4app, используя rest или graphql api этот подход исключает необходимость в parse sdk пример получение элементов через rest ниже приведен пример вызова rest api внутри компонента astro // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { 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(); setitems(data results); } catch (error) { console error('failed to fetch items ', error); } }; fetchitems(); }, \[]); \ \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} – {item description} \</li> ))} \</ul> \</div> интегрируйте аналогичные вызовы api для создания, обновления и удаления записей в ваших компонентах astro шаг 5 – защита вашего бэкенда реализация списков контроля доступа (acl) защитите свои данные, установив acl на объекты например, чтобы создать элемент, который может изменять только владелец async function createprivateitem(data, owner) { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title data title, description data description, acl { \[owner id] { read true, write true }, ' ' { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } настройка разрешений на уровне класса (clp) в панели управления back4app настройте clp для каждой коллекции, чтобы определить, кто может получить доступ и изменять ваши данные шаг 6 – добавление аутентификации пользователей настройка регистрации и входа пользователя back4app использует класс user от parse для аутентификации в вашем проекте astro создайте компоненты для регистрации и входа пользователя, используя вызовы rest api пример регистрация пользователя // src/components/signup astro \ import { usestate } from 'react'; const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (event) => { event preventdefault(); try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username, password, email }) }); const result = await response json(); alert('sign up successful!'); } catch (error) { alert('error during sign up ' + error message); } }; \ \<form on\ submit={handlesignup}> \<input type="text" placeholder="username" value={username} oninput={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} oninput={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} oninput={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> вы можете создать аналогичные компоненты для входа пользователя и управления сессиями шаг 7 – развертывание вашего фронтенда astro функция веб развертывания back4app позволяет вам без проблем размещать ваш проект astro, подключив ваш репозиторий github 7 1 создание вашей производственной версии откройте терминал в каталоге вашего проекта запустите команду сборки npm run build это создаст оптимизированную dist папку с вашими статическими ресурсами проверьте сборку убедитесь, что dist папка содержит index html вместе с другими директориями ресурсов 7 2 организация вашего репозитория проекта ваш репозиторий должен включать полный исходный код astro пример структуры может быть следующим basic crud app astro/ ├── node modules/ ├── public/ │ └── favicon ico ├── src/ │ ├── components/ │ │ ├── itemslist astro │ │ └── signup astro │ └── pages/ │ └── index astro ├── package json └── readme md пример файла src/components/itemslist astro // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { const getitems = async () => { try { const res = 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 json = await res json(); setitems(json results); } catch (err) { console error('error retrieving items ', err); } }; getitems(); }, \[]); \ \<div> \<h2>item list\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> 7 3 коммит и отправка вашего кода на github инициализируйте репозиторий git (если не сделано) git init добавьте все файлы git add зафиксируйте ваши изменения git commit m "первоначальный коммит для astro frontend" создайте репозиторий на github (например, basic crud app astro ) и отправьте git remote add origin https //github com/your username/basic crud app astro git git push u origin main 7 4 связывание github с развертыванием back4app в вебе доступ к веб развертыванию войдите в свою панель управления back4app, перейдите к вашему проекту ( basic crud app astro ) и выберите опцию веб развертывание подключите свою учетную запись github следуйте инструкциям, чтобы авторизовать back4app для доступа к вашему репозиторию выберите свой репозиторий и ветку выберите репозиторий (например, basic crud app astro ) и ветку (обычно main ) 7 5 настройка параметров развертывания команда сборки укажите команду сборки (например, npm run build ), если в вашем репозитории отсутствует предварительно собранный вывод каталог вывода установите его на dist так, чтобы back4app знал, где находить ваши статические файлы переменные окружения добавьте любые необходимые переменные, такие как ключи api 7 6 докеризация вашего приложения astro (по желанию) если вы предпочитаете контейнерные развертывания, включите dockerfile как \# use an official node image for building from node 16 alpine as builder \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source files and build the project copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] интегрируйте настройки docker в вашу конфигурацию веб развертывания, если это необходимо 7 7 запуск вашего приложения нажмите кнопку развернуть в разделе веб развертывания следите за процессом сборки back4app получит ваш код, соберет его и развернет ваше приложение получите ваш url после развертывания back4app предоставит url, по которому ваш сайт будет доступен шаг 8 – завершение и будущие улучшения отличная работа! вы теперь создали полное crud приложение с astro и back4app ваш проект включает бэкенд с подробными коллекциями для элементов и пользователей, а также фронтенд, который выполняет все операции crud через rest/graphql api следующие шаги улучшите фронтенд добавьте функции, такие как детализированные представления, возможности поиска и уведомления в реальном времени расширьте функциональность бэкенда рассмотрите возможность интеграции облачных функций или дополнительных конечных точек api для более сложной логики углубитесь изучите дополнительные ресурсы в документации back4app https //www back4app com/docs и в документации astro https //docs astro build для продвинутых тем следуя этому руководству, вы теперь обладаете знаниями для создания надежного и масштабируемого crud приложения с использованием astro и back4app наслаждайтесь кодированием и исследованием новых возможностей!