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

обзор в этом руководстве вы создадите простое crud (создание, чтение, обновление, удаление) приложение с использованием sveltekit мы продемонстрируем, как выполнять стандартные операции с данными и управлять бэкендом вашего веб приложения с помощью back4app учебник начинается с настройки проекта back4app под названием basic crud app sveltekit , который служит вашим надежным бэкендом затем вы разработаете адаптируемую схему базы данных, вручную создавая коллекции и поля или используя ai агента back4app это гарантирует, что ваша модель данных оптимизирована для эффективных операций crud далее вы будете использовать приложение back4app admin app — инструмент без кода с функцией перетаскивания — для управления вашими коллекциями, упрощая процесс управления данными наконец, вы интегрируете свой фронтенд sveltekit с back4app, используя rest api также будут настроены расширенные меры безопасности, такие как контроль доступа, для защиты вашего бэкенда к концу этого учебника у вас будет готовое к производству веб приложение, поддерживающее операции crud, а также аутентификацию пользователей и динамические обновления данных основные моменты освойте создание crud приложений, которые эффективно обрабатывают данные с надежным бэкендом поймите, как структурировать масштабируемую базу данных и подключить ее к фронтенду sveltekit узнайте, как использовать визуальный инструмент администрирования (back4app admin app) для выполнения операций с данными без проблем изучите стратегии развертывания, включая контейнеризацию docker, чтобы быстро запустить ваше приложение предварительные требования перед началом убедитесь, что у вас есть аккаунт back4app с новым проектом, готовым к работе смотрите начало работы с back4app https //www back4app com/docs/get started/new parse app для получения рекомендаций среда разработки sveltekit установите sveltekit, следуя официальной документации https //kit svelte dev/docs базовые знания javascript, sveltekit и rest api посмотрите документацию sveltekit https //kit svelte dev/docs для получения дополнительной информации шаг 1 – инициализация проекта настройка нового проекта back4app войдите в свою панель управления back4app нажмите кнопку “новое приложение” на вашей панели управления введите имя проекта basic crud app sveltekit и следуйте подсказкам на экране, чтобы создать ваш проект создать новый проект после создания ваш новый проект появится на вашей панели управления, предоставляя стабильную платформу для настройки бэкенда шаг 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 выберите “приложение администратора” затем нажмите “включить приложение администратора ” настройте учетные данные администратора создайте начального администратора для установления ролей (например, b4aadminuser ) и системных коллекций включить приложение администратора после активации войдите в приложение администратора, чтобы начать управлять вашими данными панель управления приложением администратора управление crud операциями с помощью приложения администратора внутри приложения администратора вы можете добавить записи нажмите кнопку “добавить запись” в любой коллекции (например, товары), чтобы создать новые записи просмотреть и редактировать записи выберите запись, чтобы увидеть ее детали или изменить ее поля удалить записи используйте опцию удаления, чтобы устранить записи, которые больше не нужны этот интуитивно понятный интерфейс значительно упрощает процесс управления вашими данными шаг 4 – подключение sveltekit к back4app с настроенным бэкендом через приложение администратора, пришло время связать ваш фронтенд sveltekit с back4app использование rest api в sveltekit вы будете выполнять операции crud с помощью вызовов rest api пример получения данных создайте конечную точку или компонент sveltekit, который извлекает элементы из back4app \<! src/routes/items svelte > \<script> import { onmount } from 'svelte'; let items = \[]; const loaditems = 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(); items = data results; } catch (error) { console error('failed to fetch items ', error); } }; onmount(loaditems); \</script> \<h2>items\</h2> \<ul> {#each items as item (item objectid)} \<li>{item title} – {item description}\</li> {/each} \</ul> интегрируйте аналогичные вызовы api в ваши компоненты sveltekit для операций создания, обновления и удаления шаг 5 – защита вашего бэкенда настройка списков контроля доступа (acl) защитите свои данные, установив acl для каждого объекта например, чтобы создать приватный элемент async function createprivateitem(itemdata, ownerid) { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } настройка разрешений на уровне класса (clp) в панели управления back4app настройте clp для каждой коллекции, чтобы только авторизованные пользователи могли получить доступ к конфиденциальным данным шаг 6 – реализация аутентификации пользователей управление учетными записями пользователей back4app использует класс пользователя parse для аутентификации в вашем приложении sveltekit настройте формы регистрации и входа, которые взаимодействуют с back4app через вызовы rest api пример регистрация пользователя \<! src/routes/signup svelte > \<script> let username = ''; let email = ''; let password = ''; const handlesignup = async () => { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, email, password }) }); const data = await response json(); if (data objectid) { alert('registration successful!'); } else { alert('sign up failed ' + data error); } } catch (error) { console error('error during sign up ', error); } }; \</script> \<form on\ submit|preventdefault={handlesignup}> \<input type="text" placeholder="username" bind\ value={username} /> \<input type="email" placeholder="email" bind\ value={email} /> \<input type="password" placeholder="password" bind\ value={password} /> \<button type="submit">register\</button> \</form> аналогичный метод можно реализовать для входа пользователя и управления сессиями шаг 7 – развертывание вашего фронтенда sveltekit функция веб развертывания back4app позволяет вам размещать ваш фронтенд sveltekit, связывая его с репозиторием github в этом разделе описывается, как создать ваши производственные файлы, загрузить ваш исходный код и развернуть ваш сайт 7 1 создание производственной сборки откройте терминал в каталоге проекта запустите команду сборки npm run build это создаст папку build (или output ) с оптимизированными статическими ресурсами проверьте сборку убедитесь, что папка сборки содержит index html и все необходимые директории ресурсов 7 2 структурирование и загрузка вашего кода ваш репозиторий должен содержать полный исходный код sveltekit типичная структура может быть следующей basic crud app sveltekit/ ├── node modules/ ├── static/ │ └── global css ├── src/ │ ├── routes/ │ │ ├── items svelte │ │ └── signup svelte │ └── lib/ │ └── api js ├── package json └── readme md пример файла api src/lib/api js export const fetchitems = async () => { 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 data = await res json(); return data results; }; коммит в github инициализируйте git (если не сделано) git init добавьте ваши файлы git add зафиксируйте ваши изменения git commit m "первый коммит для фронтенда sveltekit" создайте репозиторий на github назовите его, например, basic crud app sveltekit отправьте ваш код git remote add origin https //github com/your username/basic crud app sveltekit git git push u origin main 7 3 связывание вашего репозитория github с веб развертыванием откройте веб развертывание войдите в back4app, перейдите к вашему проекту (basic crud app sveltekit) и выберите опцию веб развертывание подключитесь к github следуйте инструкциям, чтобы связать вашу учетную запись github, чтобы back4app мог получить доступ к вашему репозиторию выберите ваш репозиторий и ветку выберите ваш репозиторий sveltekit (например, basic crud app sveltekit ) и ветку, содержащую ваш код (обычно main ) 7 4 настройка вашего развертывания предоставьте эти дополнительные настройки команда сборки если нет предварительно собранной папки, установите команду (например, npm run build ) каталог вывода укажите папку (обычно build или output ) в которой находятся ваши статические файлы переменные окружения добавьте любые необходимые переменные, такие как ключи api 7 5 докеризация вашего приложения sveltekit если docker является вашим выбором для развертывания, включите dockerfile в ваш репозиторий \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire source code and build the app copy run npm run build \# use nginx to serve the built files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] настройте веб развертывание для использования docker, если это предпочтительно 7 6 развертывание вашего приложения нажмите кнопку развертывания после завершения настройки нажмите кнопку развертывание мониторинг развертывания back4app получит ваш код, выполнит сборку и развернет ваше приложение в контейнере получите ваш url после успешного развертывания back4app предоставляет url для вашего размещенного приложения sveltekit 7 7 проверка вашего развертывания посетите url откройте предоставленный url в вашем браузере проверьте функциональность подтвердите, что ваше приложение загружается правильно, маршруты работают, и все ресурсы правильно обслуживаются отладка при необходимости используйте инструменты разработчика браузера для проверки ошибок и просмотрите журналы back4app для устранения неполадок шаг 8 – завершение и будущие направления поздравляем с созданием полного crud приложения с sveltekit и back4app! вы настроили проект под названием basic crud app sveltekit , разработали подробные коллекции для элементов и пользователей, и управляли своим бэкендом через админ приложение кроме того, вы интегрировали свой фронтенд на sveltekit через rest api и применили строгие меры контроля доступа будущие улучшения расширьте свой фронтенд улучшите свое приложение на sveltekit с помощью детализированных представлений, возможностей поиска и уведомлений в реальном времени добавьте расширенные функции реализуйте серверную логику (например, облачные функции), интегрируйте сторонние api или включите разрешения на основе ролей углубите свои знания посетите документацию back4app https //www back4app com/docs и изучите больше учебных пособий для улучшения производительности и пользовательских интеграций этот учебник обеспечил вас навыками, необходимыми для создания масштабируемого crud бэкенда для вашего приложения на sveltekit с использованием back4app удачного кодирования и приятного строительства!