Как создать базовое CRUD приложение с Marko? Пошаговое руководство

обзор этот гид проведет вас через создание полного crud (создание, чтение, обновление, удаление) приложения с использованием marko и back4app в этом учебном пособии вы настроите проект — названный basic crud app marko — на back4app, разработаете надежную схему базы данных и интегрируете ваш фронтенд на marko с api back4app учебное пособие также объясняет, как защитить ваш бэкенд и развернуть ваше приложение для производственного использования что вы узнаете как строить crud приложения, которые эффективно управляют данными с использованием надежного бэкенда советы по проектированию масштабируемой схемы и связыванию ее с фронтендом на основе marko использование удобного интерфейса администратора back4app для легкого управления данными стратегии развертывания, включая контейнеризацию с docker, для запуска вашего веб приложения предварительные требования перед началом убедитесь, что у вас есть учетная запись back4app и новый проект следуйте инструкциям в начало работы с back4app https //www back4app com/docs/get started/new parse app при необходимости настроенная среда разработки marko используйте marko cli или предпочитаемый вами метод настройки убедитесь, что установлен node js (версии 14 или выше) базовые знания javascript, marko и rest api посетите документацию marko https //markojs com/docs/ для получения дополнительной информации шаг 1 – настройка вашего проекта начало нового проекта back4app войдите в свою учетную запись back4app выберите «новое приложение» на вашей панели управления введите имя проекта basic crud app marko и следуйте инструкциям на экране создать новый проект ваш новый проект теперь появится на вашей панели управления back4app, закладывая основу для вашего бэкенда шаг 2 – создание схемы вашей базы данных создание вашей модели данных для этого crud приложения вы создадите несколько коллекций ниже приведены примеры коллекций с предложенными полями, чтобы помочь вам разработать практическую схему базы данных 1\ коллекция продукты эта коллекция будет содержать информацию о каждом продукте поле тип детали ид идентификатор объекта автоматически сгенерированный основной идентификатор имя строка название продукта детали строка краткое описание продукта создано в дата метка времени, указывающая на создание продукта обновлено дата время последнего обновления 2\ сбор пользователи эта коллекция содержит данные пользователей и аутентификации поле тип детали ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальное имя для пользователя электронная почта строка уникальный адрес электронной почты пароль строка хэшированная версия пароля пользователя создано в дата время создания записи обновлено дата последняя измененная метка времени вы можете вручную определить эти коллекции в панели управления back4app, создав новый класс для каждой коллекции и добавив соответствующие столбцы создать новый класс вы можете быстро добавить поля, выбрав тип, назвав свой столбец, установив значения по умолчанию и отметив его как обязательное, если это необходимо создать колонку использование ai агента back4app для создания схемы ai агент back4app упрощает проектирование схемы, генерируя определения коллекций и полей на основе вашего запроса эта функция экономит время и обеспечивает согласованность в настройке вашей базы данных как использовать ai агента получите доступ к ai агенту перейдите на панель управления back4app и найдите ai агента в настройках вашего проекта опишите вашу схему предоставьте подробный запрос, описывающий коллекции и поля, которые вам нужны просмотрите и примените после генерации просмотрите предложенную схему и примените изменения пример запроса create the following collections for my back4app project 1\) collection products \ fields \ id objectid (auto generated) \ name string \ details 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 string \ created at date (auto generated) \ updated at date (auto updated) этот подход упрощает процесс создания вашей схемы шаг 3 – активация интерфейса администратора и функциональности crud представляем интерфейс администратора приложение администратора back4app – это интерфейс без кода, который делает управление данными простым его функции перетаскивания позволяют вам легко добавлять, изменять, просматривать или удалять записи включение интерфейса администратора перейдите в раздел “дополнительно” в вашей панели управления back4app выберите “admin app” и затем нажмите на “включить admin app ” настройте учетные данные администратора создайте свою первую учетную запись администратора, которая также назначит системные роли, такие как b4aadminuser включить admin app после активации войдите в admin app, чтобы управлять вашим бэкендом панель управления admin app управление crud операциями через интерфейс администратора внутри admin app вы можете добавить новые записи используйте опцию “добавить запись” в коллекции (например, продукты) просмотреть/изменить записи нажмите на любую запись, чтобы просмотреть или обновить ее детали удалить записи используйте функцию удаления, чтобы удалить устаревшие записи этот упрощенный интерфейс улучшает пользовательский опыт, упрощая задачи управления данными шаг 4 – подключение marko к back4app теперь, когда ваш бэкенд настроен, пришло время интегрировать ваш фронтенд marko с back4app, используя api вариант a использование api вы будете использовать вызовы rest api для выполнения операций crud в вашем приложении marko пример получение данных через rest // in a marko component script file (e g , fetchproducts marko) import { onmount } from 'marko/src/runtime/client'; onmount(async () => { try { const response = await fetch('https //parseapi back4app com/classes/products', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('products ', data results); } catch (error) { console error('failed to fetch products ', error); } }); этот фрагмент кода показывает, как получить данные о продуктах из back4app с помощью вызова rest api шаг 5 – защита вашего бэкенда настройка контроля доступа увеличьте безопасность, применяя списки контроля доступа (acl) к вашим записям например, чтобы создать частную запись продукта async function createsecureproduct(productdata, owner) { const product = { name productdata name, details productdata details }; // setup acl only the owner has read/write privileges product acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/products', { 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(product) }); const result = await response json(); console log('secure product created ', result); } catch (error) { console error('error creating product ', error); } } настройка разрешений по умолчанию используйте панель управления back4app для настройки разрешений на уровне класса (clp) для каждой коллекции, чтобы гарантировать, что только авторизованные пользователи могут получить доступ к конфиденциальным данным шаг 6 – настройка аутентификации пользователей создание учетных записей пользователей back4app использует класс пользователей для аутентификации в вашем приложении marko реализуйте регистрацию и вход пользователей следующим образом // in a marko component script (e g , auth marko) import { onmount } from 'marko/src/runtime/client'; async function registeruser(username, email, password) { const userdata = { username, email, password }; 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(userdata) }); const result = await response json(); console log('user registered ', result); } catch (error) { console error('registration error ', error); } } этот фрагмент демонстрирует простой процесс регистрации пользователя с использованием rest вызовов шаг 7 – развертывание вашего фронтенда на marko функция веб развертывания back4app позволяет вам размещать ваш проект marko непосредственно из репозитория github 7 1 – создание вашей производственной версии откройте директорию вашего проекта в терминале запустите команду сборки npm run build это создаст директорию сборки с вашими оптимизированными статическими файлами подтвердите сборку проверьте, что папка build включает в себя index html и все директории с активами 7 2 – организация и загрузка вашего кода ваш репозиторий должен содержать полный исходный код вашего проекта marko типичная структура каталогов может выглядеть так basic crud app marko frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── components/ │ │ ├── fetchproducts marko │ │ └── auth marko │ ├── app marko │ └── api js ├── package json └── readme md пример src/api js // src/api js export const api headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; export async function fetchproducts() { const response = await fetch('https //parseapi back4app com/classes/products', { headers api headers }); const data = await response json(); return data results; } коммит в github инициализируйте git (если необходимо) git init стадируйте ваши файлы git add закоммитьте ваши изменения git commit m "первый коммит для marko crud frontend" создайте и отправьте в ваш репозиторий github например, используйте репозиторий с именем basic crud app marko frontend 7 3 – связывание github с веб развертыванием доступ к веб развертыванию войдите в back4app, перейдите к вашему проекту (basic crud app marko) и откройте раздел веб развертывание подключите вашу учетную запись github следуйте инструкциям, чтобы связать вашу учетную запись github выберите репозиторий и ветку выберите репозиторий (например, basic crud app marko frontend ) и ветку (например, main ) для развертывания 7 4 – настройка развертывания установите дополнительные параметры команда сборки если папка build не существует, установите команду сборки (например, npm run build ) каталог вывода укажите build в качестве выходной папки переменные окружения введите любые необходимые переменные (например, ключи api) 7 5 – контейнеризация с помощью docker если вы предпочитаете docker, включите dockerfile в ваш репозиторий проекта \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# install dependencies copy package json / run npm install \# copy all files and build the app copy run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] в настройках развертывания выберите опцию развертывания docker 7 6 – развертывание вашего приложения нажмите кнопку развернуть back4app извлечет ваш репозиторий, выполнит сборку и развернет ваше приложение мониторинг процесса следите за журналами развертывания на предмет любых проблем со сборкой или во время выполнения доступ к вашему сайту после развертывания back4app предоставляет url для вашего размещенного приложения marko 7 7 – подтверждение вашего развертывания откройте предоставленный url проверьте, что ваше приложение загружается правильно пройдите через приложение убедитесь, что все страницы загружаются, а функции crud работают как ожидалось устраните неполадки, если необходимо используйте инструменты разработчика браузера и журналы back4app для решения любых проблем шаг 8 – заключительные мысли и будущие улучшения отличная работа! вы теперь создали полнофункциональное crud приложение с marko и back4app вы настроили проект под названием basic crud app marko , разработали подробные коллекции для продуктов и пользователей, управляли данными через интуитивно понятный интерфейс администратора, интегрировали ваш фронтенд на marko с использованием rest api и защитили ваш бэкенд с помощью надежных средств контроля следующие шаги улучшите ваш интерфейс рассмотрите возможность добавления расширенных функций, таких как страницы с деталями продуктов, функции поиска и живые уведомления расширьте возможности бэкенда изучите возможность интеграции безсерверных функций или сторонних api для добавления функциональности углубите свои знания обратитесь к документации back4app https //www back4app com/docs и дополнительным учебным материалам для получения более глубоких знаний о настройке производительности и пользовательских интеграциях счастливого кодирования с marko и back4app!