Как создать базовое CRUD приложение с помощью Marionette.js: Пошаговое руководство

введение в этом руководстве вы узнаете, как создать полное crud (создание, чтение, обновление, удаление) приложение с использованием marionette js этот учебник показывает, как настроить приложение, которое эффективно управляет операциями с данными мы начнем с настройки проекта back4app под названием basic crud app marionettejs , который служит мощным бэкендом для вашего приложения после настройки вашего проекта вы разработаете гибкую схему базы данных, определив коллекции и поля — либо вручную, либо с помощью ai агента back4app этот подход гарантирует, что ваш бэкенд будет хорошо организован и способен надежно обрабатывать операции crud затем вы будете использовать приложение back4app admin app — интерфейс перетаскивания — для управления вашими коллекциями без усилий, что позволит вам легко выполнять операции создания, чтения, обновления и удаления наконец, вы интегрируете свой фронтенд на marionette js с back4app, используя rest/graphql (или parse sdk, если это применимо), при этом обеспечивая безопасность вашего бэкенда с помощью продвинутых средств управления доступом к концу этого учебника у вас будет готовое к производству веб приложение, которое поддерживает операции crud вместе с аутентификацией пользователей и безопасным управлением данными основные выводы создавайте crud приложения, которые эффективно управляют данными с помощью надежного бэкенда получите представление о создании масштабируемого бэкенда и его подключении к фронтенду на marionette js научитесь использовать интерфейс управления без кода (back4app admin app) для упрощения операций с данными поймите техники развертывания, включая контейнеризацию docker, чтобы быстро запустить ваше приложение предварительные требования перед тем как начать, пожалуйста, убедитесь, что у вас есть следующее аккаунт back4app с настроенным новым проектом для получения инструкций смотрите начало работы с back4app https //www back4app com/docs/get started/new parse app среда разработки marionette js вы можете использовать шаблон или стартовый комплект для marionette js убедитесь, что установлен node js (версии 14 или выше) базовое понимание javascript, marionette js и rest api смотрите документацию marionette js https //marionettejs com/docs/master/ для получения дополнительных сведений шаг 1 – настройка проекта создание нового проекта back4app войдите в свою учетную запись back4app нажмите кнопку “новое приложение” на вашей панели управления назовите ваш проект basic crud app marionettejs и завершите подсказки создать новый проект после создания проекта он появится на вашей панели управления, предоставляя основу для конфигурации и управления бэкендом шаг 2 – проектирование схемы вашей базы данных создание вашей модели данных для этого crud приложения вы определите несколько коллекций вот примеры коллекций, которые вы можете создать, включая поля и типы данных, которые будут поддерживать вашу базу данных 1\ коллекция предметов эта коллекция содержит детали для каждого элемента поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название предмета описание строка краткое резюме о предмете создано в дата временная метка, когда элемент был создан обновлено дата метка времени для последнего обновления 2\ коллекция пользователей эта коллекция хранит учетные данные пользователей и детали профиля поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальный идентификатор для пользователя электронная почта строка уникальный адрес электронной почты хэш пароля строка зашифрованный пароль для аутентификации пользователя создано в дата метка времени для создания аккаунта обновлено дата метка времени для последнего обновления аккаунта вы можете вручную добавить эти коллекции на панели управления back4app, создав новый класс для каждой и определив их соответствующие поля создать новый класс вы можете создать поля, выбрав тип данных, указав имя, установив значения по умолчанию и отметив их как обязательные, если это необходимо создать колонку использование ai агента back4app для создания схемы ai агент back4app упрощает создание схем, генерируя коллекции и поля из описательного запроса как использовать ai агента запустите ai агента получите доступ через меню панели управления back4app или настройки проекта опишите вашу модель данных вставьте подробный запрос, описывающий коллекции и поля, которые вам нужны просмотрите и подтвердите изучите предложенную схему и примените ее к вашему проекту пример запроса 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 выберите “admin app” затем нажмите “включить admin app ” настройте свои учетные данные администратора создав администратора, что также настраивает роли по умолчанию, такие как b4aadminuser включить admin app после активации войдите в admin app, чтобы управлять вашими коллекциями панель управления admin app использование admin app для задач crud создание записей используйте кнопку “добавить запись”, чтобы вставить новые записи в коллекцию чтение/обновление записей нажмите на запись, чтобы просмотреть или изменить ее детали удаление записей удалите устаревшие записи, используя опцию удаления этот интуитивно понятный интерфейс улучшает взаимодействие с пользователем, упрощая управление данными шаг 4 – подключение marionette js к back4app с вашим бэкендом, настроенным и управляемым через admin app, следующим шагом является интеграция вашего фронтенда marionette js с back4app вариант a использование parse sdk (если применимо) установите parse sdk npm install parse инициализируйте parse в вашем приложении marionette js создайте файл конфигурации (например, app/parseconfig js ) // app/parseconfig js import parse from 'parse'; // вставьте свои учетные данные back4app здесь parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; интегрируйте parse в представление marionette например, создайте представление для получения и отображения элементов // app/views/itemsview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<h2>элементы\</h2> \<ul> <% items foreach(function(item) { %> \<li><%= item get("title") %> — <%= item get("description") %>\</li> <% }); %> \</ul> `), initialize() { this items = \[]; this fetchitems(); }, async fetchitems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; this render(); } catch (error) { console error("ошибка при получении элементов ", error); } }, serializedata() { return { items this items }; } }); вариант b использование rest или graphql если parse sdk не является вариантом, вы можете взаимодействовать с back4app, используя вызовы rest или graphql например, чтобы получить элементы через rest // example rest call to retrieve 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('retrieved items ', data results); } catch (error) { console error('error retrieving items ', error); } } fetchitems(); включите эти api вызовы в ваши представления или контроллеры marionette 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); // configure acl restrict access solely to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('created private item ', saveditem); } catch (error) { console error('error saving private item ', error); } } настройка разрешений на уровне класса (clp) в панели управления back4app настройте clp для каждой коллекции, чтобы обеспечить выполнение правил доступа по умолчанию, гарантируя, что только авторизованные пользователи могут получить доступ к конфиденциальным данным шаг 6 – аутентификация пользователя создание учетных записей пользователей back4app использует класс user от parse для управления аутентификацией в вашем приложении на marionette js обрабатывайте регистрацию и вход пользователя, как показано ниже // app/views/authview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<form id="signup form"> \<input type="text" id="username" placeholder="username" required /> \<input type="password" id="password" placeholder="password" required /> \<input type="email" id="email" placeholder="email" required /> \<button type="submit">sign up\</button> \</form> `), events { 'submit #signup form' 'handlesignup' }, async handlesignup(e) { e preventdefault(); const username = this $('#username') val(); const password = this $('#password') val(); const email = this $('#email') val(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('sign up error ' + error message); } } }); аналогичный подход можно использовать для входа и обработки сессий дополнительные функции, такие как социальный вход или сброс пароля, можно настроить через панель управления back4app шаг 7 – развертывание вашего фронтенда на marionette js с помощью веб развертывания функция веб развертывания back4app позволяет вам без проблем размещать ваш фронтенд на marionette js, связывая его с вашим репозиторием на github 7 1 – создание вашей производственной версии перейдите в каталог вашего проекта в терминале выполните команду сборки npm run build это создаст папку сборки с оптимизированными статическими файлами (html, js, css, изображения) подтвердите сборку убедитесь, что папка сборки содержит файл index html вместе с необходимыми ресурсами 7 2 – организация и загрузка вашего исходного кода ваш репозиторий должен содержать весь исходный код для вашего фронтенда на marionette js пример структуры файлов basic crud app marionettejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── app/ │ ├── app js │ ├── parseconfig js │ └── views/ │ ├── itemsview\ js │ └── authview\ js ├── package json └── readme md пример конфигурационного файла app/parseconfig js // app/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; пример файла приложения app/app js import marionette from 'backbone marionette'; import itemsview from ' /views/itemsview'; // initialize the marionette application const app = new marionette application({ region '#app' }); app on('start', function() { const itemsview = new itemsview(); app showview(itemsview); }); app start(); коммит в github инициализируйте репозиторий git (если еще не сделано) git init добавьте ваши файлы в индекс git add закоммитьте ваши изменения git commit m "первый коммит для фронтенда marionette js" создайте репозиторий на github (например, basic crud app marionettejs frontend ) отправьте ваш код git remote add origin https //github com/your username/basic crud app marionettejs frontend git git push u origin main 7 3 – интеграция вашего репозитория с веб развертыванием доступ к веб развертыванию в вашей панели управления back4app выберите ваш проект (basic crud app marionettejs) и нажмите на веб развертывание подключение к github следуйте инструкциям, чтобы связать вашу учетную запись github, чтобы back4app мог получить доступ к вашему репозиторию выбор репозитория и ветки выберите репозиторий (например, basic crud app marionettejs frontend ) и ветку (например, main ) которая содержит ваш код 7 4 – настройка вашего развертывания укажите дополнительные настройки команда сборки если отсутствует предсобранная build папка, установите команду сборки (например, npm run build ) back4app выполнит это во время развертывания каталог вывода укажите build как папку, содержащую ваши статические файлы переменные окружения укажите все необходимые переменные окружения (например, ключи api) в настройках развертывания 7 5 – докеризация вашего приложения на marionette js если вы предпочитаете docker для развертывания, контейнеризируйте ваше приложение, включив dockerfile в ваш репозиторий \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files and install dependencies copy package json / run npm install \# copy the app source code copy \# build the application run npm run build \# use nginx to serve the build files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] настройте веб развертывание для использования опции docker, если это необходимо 7 6 – развертывание вашего приложения нажмите кнопку развернуть завершите настройки развертывания и нажмите развернуть мониторинг сборки back4app заберет ваш код с github, выполнит команду сборки и развернет ваш контейнер получите ваш url после развертывания back4app предоставит url, по которому размещено ваше приложение marionette js 7 7 – проверка вашего развертывания посетите предоставленный url откройте url развертывания в вашем браузере проверьте приложение убедитесь, что приложение загружается правильно и что вся функциональность (маршруты, ресурсы) работает устраните неполадки, если необходимо используйте инструменты разработчика браузера и проверьте журналы развертывания на back4app, если возникнут проблемы шаг 8 – заключение и следующие шаги отличная работа! вы успешно создали crud приложение с использованием marionette js и back4app вы настроили проект под названием basic crud app marionettejs , создали подробные коллекции базы данных для элементов и пользователей и управляли своими данными через админ приложение вы также подключили свой фронтенд на marionette js к бэкенду и реализовали надежные меры безопасности будущие улучшения усовершенствуйте свой фронтенд добавьте функции, такие как детальные представления, возможности поиска и обновления в реальном времени расширьте функциональность бэкенда рассмотрите возможность интеграции облачных функций, сторонних api или расширенных контролей доступа на основе ролей дальнейшее обучение изучите дополнительные ресурсы в документации back4app https //www back4app com/docs для более продвинутых оптимизаций и интеграций следуя этому руководству, вы теперь обладаете знаниями для создания надежного, масштабируемого crud приложения с использованием marionette js и back4app удачного кодирования!