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

обзор в этом руководстве вы узнаете, как создать полностью функциональное crud (создание, чтение, обновление, удаление) приложение с использованием ractive js этот учебник охватывает весь рабочий процесс от настройки вашего проекта back4app до проектирования схемы вашей базы данных и, наконец, интеграции интерфейса ractive js с вашим бэкендом проект, названный basic crud app ractive , будет служить надежным решением для управления данными для вашего веб приложения вы начнете с инициализации проекта back4app, настройки коллекций и полей либо вручную, либо с помощью ai агента back4app затем вы воспользуетесь интуитивно понятным приложением back4app admin для простого управления данными, после чего интегрируете свой интерфейс ractive js с back4app через вызовы rest api это руководство также объясняет, как защитить ваш бэкенд с помощью современных методов контроля доступа к концу вы получите приложение crud уровня производства, которое не только выполняет основные операции, но и поддерживает аутентификацию пользователей и безопасное управление данными основные моменты освойте создание crud приложений, которые эффективно управляют данными с надежным бэкендом поймите, как разработать расширяемую схему данных и связать ее с фронтендом на ractive js используйте интерфейс управления с функцией перетаскивания (back4app admin app) для простых действий crud изучите стратегии развертывания, включая контейнеризацию docker для быстрого запуска веб приложений предварительные требования перед началом убедитесь, что у вас есть активная учетная запись back4app с созданным новым проектом смотрите начало работы с back4app https //www back4app com/docs/get started/new parse app для получения инструкций настройка разработки ractive js настройте свой проект, используя шаблон или вашу предпочтительную конфигурацию, убедившись, что у вас установлена node js (версии 14 или выше) базовые знания javascript, ractive js и rest api просмотрите документацию ractive js https //ractive js org/ по мере необходимости шаг 1 – инициализация проекта запуск нового проекта back4app войдите в свою учетную запись back4app выберите опцию “новое приложение” на вашей панели управления назовите ваш проект basic crud app ractive и следуйте инструкциям на экране, чтобы создать его создать новый проект после настройки ваш проект будет виден на панели управления, готовый к дальнейшей конфигурации бэкенда шаг 2 – проектирование схемы вашей базы данных создание вашей модели данных для этого crud приложения вы определите несколько коллекций для управления вашими данными ниже приведены примеры коллекций с предложенными полями и типами данных, чтобы обеспечить оптимизацию бэкенда для функциональности crud 1\ коллекция элементы эта коллекция содержит детали для каждого элемента поле тип цель ид идентификатор объекта автоматически сгенерированный основной идентификатор название строка название элемента описание строка краткое резюме элемента создано в дата время создания записи обновлено дата последнее время обновления 2\ сбор пользователи эта коллекция управляет данными пользователей и аутентификацией поле тип цель ид идентификатор объекта автоматически сгенерированный основной идентификатор имя пользователя строка уникальный идентификатор для пользователя электронная почта строка уникальный адрес электронной почты пользователя хэш пароля строка хэшированный пароль для безопасной аутентификации создано в дата метка времени для создания аккаунта обновлено дата метка времени для последнего обновления аккаунта вы можете вручную создать эти коллекции через панель управления back4app, создав новые классы и добавив необходимые столбцы создать новый класс определите поля, выбрав соответствующий тип данных, назвав столбец и установив значения по умолчанию или обязательные значения создать столбец использование ai агента back4app для автоматизации схемы ai агент back4app может автоматически генерировать вашу схему на основе вашего запроса этот эффективный инструмент упрощает управление проектом, быстро создавая ваши коллекции и поля как управлять ai агентом получите доступ к ai агенту из панели управления вашего проекта введите подробный запрос, описывающий ваши желаемые коллекции и поля просмотрите и примените автоматически сгенерированную схему к вашему проекту пример запроса create these collections for 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 admin предлагает решение без кода для управления вашими данными на сервере его интерфейс перетаскивания позволяет легко выполнять операции crud, такие как добавление, изменение или удаление записей как включить приложение admin перейдите в меню “дополнительно” на вашей панели управления back4app выберите “admin app” и нажмите “включить admin app ” настройте своего первого администратора, что также настраивает роли (такие как b4aadminuser ) и системные коллекции включить admin app после активации войдите в приложение admin, чтобы управлять вашими коллекциями панель управления admin app управление данными через приложение admin добавление записей используйте опцию “добавить запись” в коллекции (например, товары), чтобы ввести новые данные просмотр/редактирование записей выберите любую запись, чтобы просмотреть детали или обновить поля удаление записей используйте функцию удаления, чтобы устранить устаревшие записи этот удобный интерфейс упрощает все функции crud шаг 4 – подключение ractive js к back4app теперь, когда ваш сервер готов, пора подключить ваш фронтенд ractive js к back4app использование вызовов rest api с ractive js поскольку ractive js не имеет специального parse sdk, вы будете использовать вызовы rest api для выполнения операций crud пример получение элементов создайте компонент ractive, который извлекает и отображает данные из вашей коллекции элементов back4app items html items list {{#each items}} {{title}} {{description}} edit delete {{/each}} add new item add items js import ractive from "ractive"; const api url = "https //parseapi back4app com/classes/items"; const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; const ractive = new ractive({ target "#items container", template "#items template", data { items \[], newtitle "", newdescription "" } }); // function to load items async function loaditems() { try { const response = await fetch(api url, { headers headers }); const result = await response json(); ractive set("items", result results map(item => ({ id item objectid, title item title, description item description }))); } catch (error) { console error("error fetching items ", error); } } ractive on("additem", async function () { const title = ractive get("newtitle"); const description = ractive get("newdescription"); try { await fetch(api url, { method "post", headers headers, body json stringify({ title, description }) }); ractive set({ newtitle "", newdescription "" }); loaditems(); } catch (error) { console error("error adding item ", error); } }); // additional functions for editing and deleting would follow a similar rest approach loaditems(); import ractive from "ractive"; const api url = "https //parseapi back4app com/classes/items"; const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; const ractive = new ractive({ target "#items container", template "#items template", data { items \[], newtitle "", newdescription "" } }); // function to load items async function loaditems() { try { const response = await fetch(api url, { headers headers }); const result = await response json(); ractive set("items", result results map(item => ({ id item objectid, title item title, description item description }))); } catch (error) { console error("error fetching items ", error); } } ractive on("additem", async function () { const title = ractive get("newtitle"); const description = ractive get("newdescription"); try { await fetch(api url, { method "post", headers headers, body json stringify({ title, description }) }); ractive set({ newtitle "", newdescription "" }); loaditems(); } catch (error) { console error("error adding item ", error); } }); // additional functions for editing and deleting would follow a similar rest approach loaditems(); import ractive from "ractive"; const api url = "https //parseapi back4app com/classes/items"; const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; const ractive = new ractive({ target "#items container", template "#items template", data { items \[], newtitle "", newdescription "" } }); // function to load items async function loaditems() { try { const response = await fetch(api url, { headers headers }); const result = await response json(); ractive set("items", result results map(item => ({ id item objectid, title item title, description item description }))); } catch (error) { console error("error fetching items ", error); } } ractive on("additem", async function () { const title = ractive get("newtitle"); const description = ractive get("newdescription"); try { await fetch(api url, { method "post", headers headers, body json stringify({ title, description }) }); ractive set({ newtitle "", newdescription "" }); loaditems(); } catch (error) { console error("error adding item ", error); } }); // additional functions for editing and deleting would follow a similar rest approach loaditems(); вы можете интегрировать эти взаимодействия с api в ваши компоненты ractive js для обработки всех операций crud шаг 5 – укрепление безопасности бэкенда реализация контроля доступа улучшите безопасность, установив списки контроля доступа (acl) на ваши объекты например, чтобы сделать элемент приватным async function createprivateitem(itemdata, owneruserid) { const data = { title itemdata title, description itemdata description, acl { \[owneruserid] { read true, write true }, " " { read false, write false } } }; try { const response = await fetch(api url, { method "post", headers headers, body json stringify(data) }); const result = await response json(); console log("private item created ", result); } catch (error) { console error("error creating private item ", error); } } настройка разрешений на уровне класса в панели управления back4app настройте разрешения на уровне класса (clp) для каждой коллекции, чтобы определить политики доступа по умолчанию этот шаг гарантирует, что только авторизованные пользователи могут получить доступ к конфиденциальным данным шаг 6 – управление аутентификацией пользователей настройка учетных записей пользователей back4app использует класс user от parse для обработки аутентификации реализуйте регистрацию и вход пользователей через вызовы rest api в вашем приложении ractive js пример регистрация пользователя async function signupuser(username, email, password) { const response = await fetch("https //parseapi back4app com/users", { method "post", headers headers, body json stringify({ username, email, password }) }); const result = await response json(); if (result objectid) { alert("user registered successfully!"); } else { alert("error during sign up " + result error); } } реализуйте аналогичные процедуры для входа и обработки сессий дополнительные функции, такие как восстановление пароля и подтверждение электронной почты, можно настроить через панель управления back4app шаг 7 – развертывание вашего фронтенда ractive js функция веб развертывания back4app позволяет вам размещать ваше приложение ractive js, связывая его с вашим репозиторием github 7 1 создание вашей производственной версии откройте папку вашего проекта в терминале запустите процесс сборки (это может быть пользовательская команда в зависимости от вашей настройки, например, с использованием rollup или webpack) убедитесь, что ваша производственная папка (обычно называемая dist или build ) содержит ваши статические файлы 7 2 организация и коммит вашего кода ваш репозиторий проекта должен иметь четкую структуру, например basic crud app ractive/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── main js \| ├── ractiveconfig js \| └── components/ \| ├── items html \| └── auth html \| package json \| readme md пример файла ractiveconfig js // ractiveconfig js // this file can include global configuration for your ractive app export const api url = "https //parseapi back4app com"; export const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; коммит вашего кода инициализируйте репозиторий git git init добавьте ваши файлы git add закоммитьте изменения git commit m "первый коммит для фронтенда ractive js" создайте репозиторий на github (например, basic crud app ractive ) и отправьте ваш код git remote add origin https //github com/your username/basic crud app ractive git git push u origin main 7 3 связывание вашего репозитория с веб развертыванием back4app войдите в свою панель управления back4app, выберите свой проект ( basic crud app ractive ), и выберите веб развертывание подключите свою учетную запись github, как указано выберите репозиторий и ветку (обычно main ), которая содержит ваш код ractive js 7 4 настройка параметров развертывания настройте следующее команда сборки укажите вашу команду сборки (например, npm run build ) каталог вывода установите его в вашу папку для продакшена (например, build или dist ) переменные окружения включите все необходимые ключи api или переменные конфигурации 7 5 контейнеризация с docker (по желанию) если вы хотите развернуть через docker, включите dockerfile в ваш проект \# base build stage using node js from node 16 alpine as build \# set the 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 \# production stage using nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 запуск вашего приложения нажмите кнопку развернуть в back4app следите за процессом развертывания, пока back4app загружает и собирает ваш репозиторий после завершения back4app предоставит url для вашего размещенного приложения ractive js 7 7 проверка развертывания откройте предоставленный url в вашем браузере проверьте все маршруты, убедившись, что все ресурсы (css, js, изображения) загружаются правильно если возникнут проблемы, проверьте журналы развертывания и настройки сборки шаг 8 – завершение и будущие направления отличная работа! вы успешно создали полное crud приложение с использованием ractive js и back4app вы настроили проект под названием basic crud app ractive , определили точные коллекции для элементов и пользователей, и использовали интуитивно понятное приложение администратора для управления бэкендом кроме того, вы интегрировали свой фронтенд на ractive js с бэкендом и укрепили безопасность данных следующие шаги улучшите свой интерфейс добавьте функции, такие как детальные представления, функции поиска или обновления в реальном времени расширьте свой бэкенд интегрируйте сложную логику бэкенда, такую как облачные функции или сторонние api сервисы углубите свои знания изучите документацию back4app https //www back4app com/docs для более сложных конфигураций и оптимизаций с этим руководством у вас теперь есть экспертиза для создания масштабируемого crud бэкенда для вашего приложения на ractive js с использованием back4app удачного кодирования!