How to Build a Basic CRUD App with Riot.js: A Step-by-Step Guide

обзор в этом руководстве вы научитесь создавать приложение crud (создание, чтение, обновление и удаление) с использованием riot js мы пройдем через настройку проекта back4app — названного basic crud app riotjs — чтобы он служил вашим бэкендом, а затем интегрируем его с фронтендом на riot js этот учебник охватывает все, от проектирования схемы вашей базы данных и управления данными с помощью приложения администратора back4app до интеграции вашего фронтенда с использованием либо sdk (если применимо), либо вызовов rest/graphql api к концу вы получите полностью рабочее, готовое к производству веб приложение с функциями аутентификации пользователей и безопасного управления данными основные преимущества освойте операции crud с использованием масштабируемой системы бэкенда получите представление о интеграции фронтенда на riot js с back4app используйте интуитивно понятное приложение администратора back4app для легкого управления данными изучите стратегии развертывания, включая контейнеризацию docker предварительные условия перед началом убедитесь, что у вас есть учетная запись back4app с новым проектом смотрите начало работы с back4app https //www back4app com/docs/get started/new parse app для получения рекомендаций настройка разработки для riot js вы можете использовать riot cli или включить riot через тег скрипта убедитесь, что установлен node js (версии 14 или выше) базовые знания javascript, riot js и rest api если необходимо, обратитесь к документации riot js https //riot js org/ для получения дополнительных сведений шаг 1 – инициализация проекта создание проекта back4app войдите в свою учетную запись back4app нажмите «новое приложение» на вашей панели управления назовите ваш проект basic crud app riotjs и следуйте инструкциям по настройке создать новый проект ваш проект теперь будет отображаться на вашей панели управления back4app, служа основой для данных вашего приложения шаг 2 – проектирование схемы вашей базы данных создание вашей модели данных для нашего crud приложения вы определите несколько коллекций ниже приведены примеры коллекций и полей, которые помогут вам структурировать вашу базу данных для эффективных операций crud 1\ коллекция предметов эта коллекция содержит информацию о каждом предмете поле тип описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название элемента описание строка краткое описание элемента создано в дата время, когда элемент был добавлен обновлено дата время, когда элемент был изменен 2\ коллекция пользователей эта коллекция содержит данные пользователя и информацию для аутентификации поле тип описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальное имя пользователя электронная почта строка уникальный адрес электронной почты хэш пароля строка зашифрованный пароль создано в дата время создания аккаунта обновлено дата последнее время обновления учетной записи вы можете настроить эти коллекции вручную на панели управления back4app, создавая новые классы и определяя столбцы создать новый класс вы можете добавлять поля, выбирая тип данных, присваивая имя, устанавливая значения по умолчанию и отмечая, является ли поле обязательным создать колонку использование ai агента back4app для создания схемы ai агент back4app, доступный из вашей панели управления, может автоматически генерировать вашу схему, обрабатывая подробный запрос, описывающий ваши необходимые коллекции и поля использование ai агента откройте ai агента найдите его в настройках проекта или меню введите вашу модель данных вставьте запрос, описывающий ваши коллекции и их поля просмотрите и подтвердите проверьте сгенерированную схему и примените ее к вашему проекту пример запроса create these 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 выберите “приложение администратора” и нажмите “включить приложение администратора ” настройте свою учетную запись администратора создав первоначального администратора, что также устанавливает роли по умолчанию включить приложение администратора после активации войдите в приложение администратора, чтобы управлять вашими данными на сервере панель управления приложения администратора выполнение операций crud через приложение администратора в этом интерфейсе вы можете добавить записи используйте кнопку "добавить запись" в коллекции (например, элементы), чтобы создать новые записи редактировать записи нажмите на любую запись, чтобы просмотреть и изменить ее детали удалить записи удалите любую запись, которая больше не нужна этот инструмент упрощает ваш рабочий процесс, предлагая простой интерфейс для управления данными шаг 4 – подключение riot js к back4app теперь, когда ваш бэкенд настроен, пришло время подключить ваш фронтенд riot js к back4app вариант a использование parse sdk установите parse sdk npm install parse инициализируйте parse в вашем проекте riot js создайте файл (например, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; используйте parse в теге riot создайте тег riot (например, items riot ) для получения и отображения элементов items { item get("title") } — { item get("description") } вариант b использование rest или graphql api если sdk parse не подходит, выполняйте операции crud через api вызовы например, чтобы получить элементы с помощью rest // rest api example 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('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } } fetchitems(); интегрируйте эти api вызовы в ваши теги riot js по мере необходимости шаг 5 – защита вашего бэкенда настройка списков контроля доступа (acl) защитите свои данные, установив acl на ваши объекты например, чтобы создать приватный элемент async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } настройка разрешений на уровне класса (clp) в вашей панели управления back4app настройте clp для каждой коллекции, чтобы гарантировать, что только аутентифицированные или авторизованные пользователи имеют доступ к конфиденциальным данным шаг 6 – аутентификация пользователей настройка учетных записей пользователей приложения riot js могут обрабатывать регистрацию и вход пользователей, используя встроенный класс parse user от back4app ниже приведен пример тега riot для регистрации пользователя sign up аналогичную стратегию можно применить для входа в систему и управления сессиями дополнительные функции, такие как социальный вход, подтверждение электронной почты или восстановление пароля, можно настроить в вашей панели управления back4app шаг 7 – развертывание вашего фронтенда на riot js функция веб развертывания back4app позволяет вам размещать ваше приложение на riot js, связывая его с вашим репозиторием github следуйте этим шагам, чтобы развернуть вашу производственную сборку 7 1 соберите ваши производственные файлы откройте директорию вашего проекта в терминале запустите вашу команду сборки npm run build это создаст папку build с оптимизированными статическими файлами (html, js, css, изображения) подтвердите сборку убедитесь, что папка build включает в себя файл index html и необходимые директории с активами 7 2 организуйте и загрузите свой код на github ваш репозиторий должен содержать полный исходный код фронтенда riot js типичная структура может быть следующей basic crud app riotjs frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── app riot \| ├── parseconfig js \| └── tags/ \| ├── items riot \| └── auth riot \| package json \| readme md пример src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your actual back4app keys here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; пример src/app riot riot js crud app закоммитьте и отправьте ваш код инициализируйте репозиторий git (если не сделано) git init добавьте ваши файлы git add закоммитьте ваши изменения git commit m "первый коммит для фронтенда riot js" создайте репозиторий на github (например, basic crud app riotjs frontend ) и отправьте ваш код git remote add origin https //github com/your username/basic crud app riotjs frontend git git push u origin main 7 3 интеграция вашего репозитория github с веб развертыванием back4app открыть веб развертывание войдите в свою панель управления back4app, выберите свой проект ( basic crud app riotjs ), и нажмите на веб развертывание подключиться к github следуйте инструкциям, чтобы связать свою учетную запись github и репозиторий выберите свой репозиторий и ветку выберите свой репозиторий (например, basic crud app riotjs frontend ) и соответствующую ветку (например, main ) 7 4 конфигурация развертывания команда сборки если в вашем репозитории отсутствует предварительно собранная build папка, укажите команду сборки (например, npm run build ) back4app выполнит её каталог вывода установите это значение на build чтобы указать, где находятся ваши статические файлы переменные окружения включите все необходимые переменные (такие как ключи api) в вашу конфигурацию 7 5 докеризация вашего приложения riot js (по желанию) если вы предпочитаете контейнерное развертывание, добавьте dockerfile в ваш проект \# use an official node image to build 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 app and build it copy run npm run build \# use nginx to serve the built app 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, по которому размещено ваше приложение riot js 7 7 проверьте ваше развертывание посетите url откройте предоставленный url в вашем браузере проверьте приложение подтвердите, что все маршруты и ресурсы (css, javascript, изображения) работают корректно устранение неполадок используйте инструменты разработчика браузера и логи back4app, если возникнут какие либо проблемы шаг 8 – завершение и будущие направления поздравляем! вы создали полностью функциональное crud приложение с использованием riot js и back4app вы настроили проект под названием basic crud app riotjs , разработали надежную схему базы данных для элементов и пользователей и управляли своими данными с помощью admin app вы интегрировали свой фронтенд на riot js и реализовали меры безопасности, такие как acl следующие шаги улучшите фронтенд добавьте функции, такие как детализированные представления, возможности поиска и обновления в реальном времени расширьте функциональность изучите продвинутые операции на стороне сервера, такие как облачные функции, или интегрируйте сторонние api углубите свои знания посетите документацию back4app https //www back4app com/docs и другие ресурсы, чтобы оптимизировать и расширить ваше приложение с этими шагами у вас теперь есть экспертиза для создания масштабируемых crud приложений с использованием riot js и back4app удачного кодирования!