How to Create a CRUD Application with Svelte?

обзор в этом руководстве вы узнаете, как создать полное crud (создание, чтение, обновление, удаление) приложение с использованием svelte мы будем использовать back4app в качестве нашей платформы для бэкенда, которая предлагает надежный низкокодовый бэкенд для управления данными вашего приложения этот гид объясняет, как настроить проект back4app, разработать универсальную схему данных и реализовать операции crud в приложении svelte сначала вы создадите проект back4app под названием basic crud app svelte этот проект станет основой вашей настройки бэкенда, где вы определите свою схему данных либо вручную, либо с помощью встроенного ai агента back4app затем вы изучите приложение администратора back4app — удобный интерфейс для управления данными, который позволяет вам легко выполнять операции crud наконец, вы подключите ваше приложение svelte к back4app, используя либо parse javascript sdk, либо прямые вызовы rest/graphql api, обеспечивая безопасную обработку данных к концу этого учебника у вас будет полностью функциональное приложение svelte, которое выполняет основные задачи crud вместе с безопасной аутентификацией пользователей что вы узнаете как настроить приложение crud на основе svelte с гибким бэкендом методы организации вашего бэкенда и подключения его к вашему приложению svelte как использовать приложение администратора back4app для бесшовных операций с данными стратегии развертывания вашего приложения svelte, включая контейнеризацию docker предварительные требования перед тем как начать, убедитесь, что у вас есть аккаунт back4app с активным проектом нужна помощь? посетите руководство по началу работы с back4app https //www back4app com/docs/get started/new parse app для получения инструкций настройка разработки svelte вы можете использовать редактор кода, такой как vscode, и убедиться, что node js установлен базовое знакомство с svelte, javascript и rest api при необходимости ознакомьтесь с документацией svelte https //svelte dev/docs шаг 1 – настройка вашего проекта запуск нового проекта back4app войдите в свой аккаунт back4app нажмите кнопку “новое приложение” на вашей панели управления назовите ваш проект basic crud app svelte , и следуйте инструкциям на экране, чтобы завершить настройку создать новый проект после создания вашего проекта вы увидите его на своей панели управления, которая служит основой для настройки вашего бэкенда шаг 2 – создание схемы данных структурирование ваших данных для этого crud приложения вам нужно определить несколько коллекций в вашем проекте back4app ниже приведены примеры ключевых коллекций и полей, необходимых для поддержки ваших операций crud на svelte 1\ коллекция элементов эта коллекция хранит информацию для каждого элемента поле тип детали ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название или заголовок элемента описание строка краткое описание предмета создано дата время создания элемента обновлено дата метка времени для последнего обновления элемента 2\ коллекция пользователей эта коллекция управляет учетными данными пользователей и деталями аутентификации поле тип детали ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальное имя пользователя для каждого пользователя электронная почта строка адрес электронной почты пользователя хешпароля строка зашифрованный пароль для аутентификации создано дата время создания аккаунта обновлено дата метка времени для последнего обновления аккаунта вы можете создавать эти коллекции и определять поля непосредственно из вашей панели управления back4app создать новый класс вы можете добавлять поля, выбирая соответствующий тип, задавая имя поля, устанавливая значения по умолчанию и отмечая его как обязательное создать колонку использование ai агента back4app для быстрой генерации схемы интегрированный ai агент в back4app может автоматически настроить вашу схему данных на основе простого описания этот инструмент упрощает процесс настройки и гарантирует, что ваша схема оптимизирована для операций crud как использовать ai агента откройте ai агента в настройках вашего проекта на панели управления back4app найдите ai агента уточните требования к вашей схеме предоставьте четкий запрос, который описывает коллекции и поля, которые вам нужны просмотрите и подтвердите проверьте предложенную схему и подтвердите ее применение пример запроса create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) этот метод экономит время и гарантирует, что ваша схема бэкенда идеально соответствует потребностям вашего приложения шаг 3 – управление данными с помощью admin app обзор admin app admin app от back4app предлагает среду без кода для управления вашими данными бэкенда с помощью интерфейса перетаскивания вы можете легко выполнять операции, такие как добавление, редактирование и удаление записей активация admin app перейдите в меню “дополнительно” на панели управления back4app выберите “admin app” и затем нажмите на “включить admin app ” настройте свою учетную запись администратора следуя подсказкам для установления ваших учетных данных этот процесс также настроит роли (например, b4aadminuser ) и другие системные конфигурации включить admin app после активации войдите в admin app, чтобы эффективно управлять данными вашего проекта панель управления приложения администратора как использовать приложение администратора вставить новые записи используйте функцию «добавить запись» в коллекции (например, элементы), чтобы ввести новые данные просмотреть или отредактировать записи нажмите на запись, чтобы просмотреть ее детали или изменить ее поля удалить записи удалите устаревшие или ненужные записи данных этот интуитивно понятный интерфейс делает управление вашими данными на сервере простым и эффективным шаг 4 – подключение вашего приложения svelte к back4app теперь, когда ваш бэкенд настроен, пришло время связать ваше приложение svelte с back4app вариант a использование parse javascript sdk установите sdk используйте npm или yarn для установки parse javascript sdk npm install parse инициализируйте parse в вашем приложении svelte в вашем основном javascript файле (например, src/main js , инициализируйте parse // src/main js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; // код инициализации вашего приложения svelte следует реализуйте функции crud создайте модуль (например, src/services/items js ) для обработки операций crud // src/services/items js import parse from 'parse'; export async function fetchitems() { const query = new parse query("items"); try { const results = await query find(); return results; } catch (error) { console error("ошибка при получении элементов ", error); return \[]; } } export async function additem(title, description) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); try { await item save(); console log("элемент успешно создан!"); } catch (error) { console error("ошибка при создании элемента ", error); } } export async function updateitem(objectid, newtitle, newdescription) { const query = new parse query("items"); try { const item = await query get(objectid); item set("title", newtitle); item set("description", newdescription); await item save(); console log("элемент успешно обновлен!"); } catch (error) { console error("ошибка при обновлении элемента ", error); } } export async function removeitem(objectid) { const query = new parse query("items"); try { const item = await query get(objectid); await item destroy(); console log("элемент успешно удален!"); } catch (error) { console error("ошибка при удалении элемента ", error); } } вариант b использование rest/graphql api если sdk parse не подходит для вашего случая, вы можете напрямую вызывать rest или graphql конечные точки back4app например, чтобы получить элементы через rest export async function getitemsrest() { 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(); return data results; } catch (error) { console error("rest error fetching items ", error); return \[]; } } интегрируйте эти api вызовы в ваши компоненты svelte по мере необходимости шаг 5 – защита вашего бэкенда использование списков управления доступом (acl) увеличьте безопасность ваших данных, настроив acl на ваших объектах например, чтобы создать элемент, видимый только его владельцу import parse from 'parse'; export async function createprivateitem(title, description, owner) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item successfully created!"); } catch (error) { console error("error saving private item ", error); } } настройка разрешений на уровне класса (clp) настройте clp непосредственно в вашей панели управления back4app, чтобы ограничить доступ так, чтобы только аутентифицированные пользователи могли взаимодействовать с определенными коллекциями шаг 6 – реализация аутентификации пользователей в svelte настройка учетных записей пользователей back4app использует встроенную коллекцию пользователей parse для управления аутентификацией в вашем приложении svelte реализуйте функции регистрации и входа, аналогичные приведенным ниже примерам import parse from 'parse'; export async function registeruser(username, password, email) { const user = new parse user(); user set("username", username); user set("password", password); user set("email", email); try { await user signup(); console log("user registered successfully!"); } catch (error) { console error("registration error ", error); } } export async function loginuser(username, password) { try { const user = await parse user login(username, password); console log("user logged in ", user get("username")); } catch (error) { console error("login failed ", error); } } этот подход можно расширить для управления сессиями, сбросами паролей и дополнительными функциями аутентификации шаг 7 – развертывание вашего приложения svelte back4app упрощает процесс развертывания вы можете развернуть ваше приложение svelte, используя несколько методов, включая контейнеризацию docker 7 1 соберите ваше приложение svelte соберите ваше приложение запустите команду сборки svelte, обычно npm run build проверьте сборку убедитесь, что сгенерированные файлы (обычно в папке public или build ) включают все необходимые ресурсы 7 2 пример структуры проекта типичная структура проекта svelte может выглядеть так basic crud app svelte/ \| public/ \| | build/ \| | global css \| | index html \| src/ \| | components/ \| | | itemlist svelte \| | | itemform svelte \| | services/ \| | | items js \| | | auth js \| | app svelte \| | main js \| package json \| readme md 7 3 контейнеризация вашего приложения svelte если вы предпочитаете контейнеризированное развертывание, создайте файл dockerfile в корне вашего проекта \# use a node js image to build the app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the project files and build the app copy run npm run build \# use a lightweight server to serve the built files from nginx\ alpine copy from=build /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 развертывание через back4app web deployment свяжите ваш репозиторий github разместите ваш проект svelte на github настройте развертывание в back4app в панели управления back4app выберите web deployment опцию, подключите ваш репозиторий (например, basic crud app svelte ), и выберите вашу целевую ветку определите настройки сборки укажите вашу команду сборки (например, npm run build ) и укажите директорию вывода сборки разверните ваше приложение нажмите deploy и следите за логами, пока ваше приложение не станет доступным шаг 8 – завершение и будущие улучшения поздравляем! вы создали crud приложение на основе svelte, которое подключается к back4app вы создали проект под названием basic crud app svelte , настроили коллекции для элементов и пользователей и управляли своими данными через приложение back4app admin затем вы интегрировали свой фронтенд на svelte, используя parse javascript sdk (или rest/graphql), и добавили надежные меры безопасности что дальше? расширьте функциональность добавьте функции, такие как расширенный поиск, детализированные представления или обновления в реальном времени улучшите логику бэкенда экспериментируйте с облачными функциями, интеграциями сторонних api или контролем доступа на основе ролей углубите свои знания изучите дополнительные учебные пособия и документацию back4app https //www back4app com/docs для оптимизации вашего приложения счастливого кодирования и наслаждайтесь созданием вашего crud приложения на svelte!