How to Develop a CRUD Application with Deno? A Comprehensive Guide

обзор этот гид демонстрирует, как создать простое crud (создание, чтение, обновление, удаление) приложение с использованием deno мы будем использовать back4app в качестве нашей платформы управления бэкендом, настраивая ее для работы в качестве надежного решения для базы данных, и будем использовать api подход для взаимодействия с нашими бэкенд сервисами в этом учебном пособии вы создайте проект back4app под названием basic crud app deno разработайте и настройте схему вашей базы данных с коллекциями и полями, адаптированными для операций crud используйте приложение back4app admin для управления вашими коллекциями через интуитивно понятный интерфейс перетаскивания подключите ваш фронтенд на deno к back4app с помощью rest/graphql вызовов обеспечьте безопасность вашего бэкенда с помощью надежных мер контроля доступа к концу этого руководства вы создадите веб приложение, готовое к производству, которое поддерживает основные операции с данными и аутентификацию пользователей основные идеи освойте функции crud для эффективного управления данными узнайте, как разработать масштабируемый бэкенд, интегрированный с фронтендом на deno используйте приложение back4app admin для бесшовного управления данными изучите стратегии развертывания, включая контейнеризацию с помощью docker предварительные условия перед началом, пожалуйста, убедитесь, что у вас есть учетная запись back4app и инициализированный проект смотрите начало работы с back4app https //www back4app com/docs/get started/new parse app при необходимости настройка разработки deno убедитесь, что deno установлен и обновлен (рекомендуется версия 1 10+) знание javascript/typescript, deno и концепций rest api обратитесь к руководству deno https //deno land/manual для дальнейшего чтения шаг 1 – инициализация вашего проекта запуск нового проекта back4app войдите в свою учетную запись back4app нажмите кнопку “новое приложение” на вашей панели управления назовите ваш проект basic crud app deno и следуйте инструкциям на экране создать новый проект после создания проекта он будет виден на вашей панели управления, закладывая основу для вашей конфигурации бэкенда шаг 2 – создание схемы базы данных структурирование вашей модели данных для этого crud приложения вы определите несколько коллекций ниже приведены образцы коллекций с предложенными полями для упрощения основных операций 1\ коллекция элементы эта коллекция содержит детали для каждого элемента поле тип цель ид идентификатор объекта автоматически сгенерированный первичный ключ название строка название предмета описание строка краткое резюме элемента создано в дата время, когда элемент был добавлен обновлено дата метка времени для последнего обновления 2\ коллекция пользователи эта коллекция хранит профили пользователей и данные аутентификации поле тип цель ид идентификатор объекта автоматически сгенерированный первичный ключ имя пользователя строка уникальный идентификатор для пользователя электронная почта строка уникальный адрес электронной почты пользователя хэш пароля строка безопасно захешированный пароль создано в дата время создания аккаунта обновлено дата последнее обновление временной метки вы можете вручную создать эти коллекции в панели управления back4app, создав новый класс для каждой и добавив столбцы для определения каждого поля создать новый класс вы также можете добавлять поля, выбирая их тип, называя их, устанавливая значения по умолчанию и отмечая их как обязательные создать колонку использование ai агента back4app для создания схемы ai агент back4app упрощает генерацию схемы, позволяя вам вводить описательный запрос, который затем автоматически создает необходимые коллекции и поля шаги для использования ai агента доступ к ai агенту откройте свою панель управления back4app и найдите опцию ai агента введите описание вашей модели данных предоставьте подробный запрос, перечисляющий ваши коллекции и поля просмотрите и примените проверьте сгенерированные предложения схемы и внедрите их в ваш проект пример запроса create the following collections in my back4app application 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 в admin app вы можете добавить записи нажмите “добавить запись” в любой коллекции (например, элементы), чтобы создать новые записи просмотреть/изменить записи выберите записи для проверки или изменения деталей удалить записи удалите записи, которые больше не нужны этот простой инструмент упрощает процесс выполнения основных операций с данными шаг 4 – подключение deno к back4app с настроенным бэкендом пришло время связать ваш фронтенд deno с помощью rest или graphql api опция использование вызовов rest/graphql api мы будем полагаться на вызовы api для взаимодействия с back4app пример получение данных через rest в deno создайте модуль (например, fetchitems ts ) со следующим кодом const application id = "your application id"; const rest api key = "your rest api key"; const server url = "https //parseapi back4app com/classes/items"; export async function fetchitems() { try { const response = await fetch(server url, { headers { "x parse application id" application id, "x parse rest api key" rest api key, }, }); const data = await response json(); console log("retrieved items ", data results); } catch (error) { console error("error retrieving items ", error); } } fetchitems(); интегрируйте такие вызовы api в ваше приложение deno по мере необходимости шаг 5 – укрепление безопасности вашего бэкенда реализация списков контроля доступа (acl) защитите ваши данные, назначив acl для каждого объекта например, чтобы гарантировать, что элемент является приватным async function createprivateitem(itemdata { title string; description string }, ownertoken string) { const server url = "https //parseapi back4app com/classes/items"; const response = await fetch(server url, { method "post", headers { "content type" "application/json", "x parse application id" "your application id", "x parse rest api key" "your rest api key", "x parse session token" ownertoken, }, body json stringify({ title itemdata title, description itemdata description, acl { " " { read false, write false }, \[ownertoken] { read true, write true } } }), }); const result = await response json(); console log("private item created ", result); } настройка разрешений на уровне класса (clp) в панели управления back4app настройте clp для каждой коллекции, чтобы определить политики доступа по умолчанию, гарантируя, что только аутентифицированные или авторизованные пользователи могут получать доступ или изменять конфиденциальные данные шаг 6 – управление аутентификацией пользователей создание учетных записей пользователей back4app использует класс пользователя parse для аутентификации в вашем приложении deno управляйте регистрацией и входом пользователей через вызовы rest api пример регистрация пользователя в deno async function registeruser(username string, password string, email string) { const server url = "https //parseapi back4app com/users"; try { const response = await fetch(server url, { 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 data = await response json(); console log("user registered ", data); } catch (error) { console error("registration error ", error); } } registeruser("newuser", "securepassword", "user\@example com"); этот подход также можно применить к входу в систему и управлению сессиями шаг 7 – развертывание вашего фронтенда на deno с помощью веб развертывания функция веб развертывания back4app позволяет вам размещать ваш фронтенд на основе deno, развертывая код непосредственно из репозитория github 7 1 – создание вашей производственной версии откройте директорию вашего проекта в терминале запустите команду сборки например, если вы используете сборщик, такой как esbuild deno run allow read allow write build script ts подтвердите вывод сборки убедитесь, что выходная директория (например, dist ) содержит необходимые статические файлы, такие как index html , упакованный javascript, css и изображения 7 2 – организация и обязательство вашего кода ваш репозиторий должен включать все исходные файлы для вашего фронтенда на deno пример структуры может быть следующим basic crud app deno/ ├── deps ts ├── controllers/ ├── public/ │ └── index html ├── routes/ ├── src/ │ ├── app ts │ └── fetchitems ts ├── dockerfile ├── build script ts └── readme md пример файла deps ts export { serve } from "https //deno land/std\@0 140 0/http/server ts"; пример файла src/app ts import { serve } from " /deps ts"; import { fetchitems } from " /fetchitems ts"; serve(async (req) => { const { pathname } = new url(req url); if (pathname === "/api/items") { const items = await fetchitems(); return new response(json stringify(items), { headers { "content type" "application/json" }, }); } return new response(await deno readtextfile(" /public/index html"), { headers { "content type" "text/html" }, }); }); коммит вашего кода в github инициализируйте git git init стадируйте все файлы git add закоммитьте ваши изменения git commit m "первый коммит для deno crud фронтенда" запушьте в github создайте репозиторий (например, basic crud app deno ) и запушьте git remote add origin https //github com/your username/basic crud app deno git git push u origin main 7 3 – связывание github с веб развертыванием back4app войдите в back4app и перейдите к вашему проекту нажмите на функцию веб развертывания подключите свою учетную запись github следуя подсказкам выберите свой репозиторий и ветку (например, main ) в которой находится ваш код deno 7 4 – настройка параметров развертывания укажите команда сборки если папка dist не существует, установите команду (например, deno run allow read allow write build script ts ) каталог вывода определите папку вывода, например, dist переменные окружения добавьте необходимые переменные окружения (например, ключи api) 7 5 – докеризация вашего приложения deno чтобы развернуть с помощью docker, включите dockerfile в ваш проект \# use the official deno image from denoland/deno\ alpine 1 25 0 \# set the working directory workdir /app \# cache dependencies copy deps ts run deno cache deps ts \# copy the application code copy \# expose port 8000 expose 8000 \# run the application cmd \["run", " allow net", " allow read", "src/app ts"] выберите опцию развертывания docker в back4app, если вы предпочитаете контейнеризацию 7 6 – запуск вашего приложения инициализировать развертывание нажмите кнопку развернуть в вашей панели управления back4app мониторинг процесса back4app получит ваш код, выполнит шаги сборки и развернет ваше приложение доступ к вашему сайту после развертывания будет предоставлен url, по которому ваше приложение deno будет доступно 7 7 – подтверждение успешного развертывания посетите предоставленный url откройте url в вашем браузере проверьте ваше приложение убедитесь, что все маршруты, статические ресурсы и конечные точки api работают корректно устранение неполадок если возникнут проблемы, проверьте журналы развертывания и убедитесь в правильности вашей конфигурации шаг 8 – завершение и будущие направления поздравляем! вы успешно создали базовое crud приложение с использованием deno и back4app в качестве вашего бэкенда вы настроили проект basic crud app deno , структурировали вашу базу данных, управляли данными через админ приложение, подключили ваш фронтенд на deno через api вызовы и защитили ваши данные с помощью acl и clp будущие улучшения расширьте фронтенд добавьте функции, такие как детализированные представления, фильтры поиска или обновления в реальном времени расширенная логика бэкенда интегрируйте облачные функции или дополнительные api интеграции углубите безопасность изучите доступ на основе ролей и дополнительные меры аутентификации для получения дополнительной информации ознакомьтесь с документацией back4app https //www back4app com/docs и изучите дополнительные ресурсы счастливого кодирования и наслаждайтесь созданием вашего масштабируемого crud приложения на deno!