Как создать CRUD-приложение с Ember.js?

введение в этом руководстве вы научитесь создавать простое crud (создание, чтение, обновление, удаление) приложение с использованием ember js мы будем полагаться на back4app в качестве серверного решения для легкого управления вашими данными этот гид охватывает все основные операции системы crud, показывая вам, как настроить проект back4app, разработать динамическую модель данных и интегрировать операции crud в приложение ember js сначала вы создадите проект back4app с именем basic crud app ember который предоставляет надежное решение для хранения нереляционных данных для вашего приложения вы определите свою структуру данных, настроив модели и поля вручную или с помощью ai агента back4app затем вы изучите приложение back4app admin app — интерфейс без кода, который позволяет вам управлять данными с помощью простых перетаскиваний наконец, вы интегрируете ваше приложение ember js с back4app через api вызовы, реализуя при этом безопасные контроль доступа к концу этого учебника у вас будет готовое к производству приложение ember js, способное выполнять все операции crud, включая безопасную аутентификацию пользователей и эффективное управление данными основные выводы создайте приложение crud на основе ember js с надежной серверной платформой поймите, как структурировать и интегрировать масштабируемую серверную часть с фронтендом на ember js используйте интуитивно понятное приложение admin от back4app для легкого выполнения операций создания, чтения, обновления и удаления узнайте о стратегиях развертывания, включая контейнеризацию docker, для бесшовной доставки приложений предварительные требования перед тем как начать, пожалуйста, подтвердите, что у вас есть аккаунт back4app с недавно созданным проектом нужна помощь? посетите начало работы с back4app https //www back4app com/docs/get started/new parse app настройка разработки ember js установите ember cli и настройте свою среду, следуя руководствам ember js https //guides emberjs com/release/ базовое знакомство с ember js, javascript и rest api обновите свои знания по этим темам, если необходимо шаг 1 – настройка проекта инициация нового проекта back4app войдите в свою учетную запись back4app нажмите на кнопку “новое приложение” на вашей панели управления назначьте имя проекта basic crud app ember и следуйте последующим подсказкам для завершения настройки проекта создать новый проект после создания проекта он появится на вашей панели управления и станет основой для вашей конфигурации бэкенда шаг 2 – проектирование модели данных структурирование ваших моделей данных для этого crud приложения вы определите несколько моделей в вашем проекте back4app ниже приведены примеры, описывающие основные модели и их поля, необходимые для выполнения операций crud 1\ модель предметов эта модель хранит информацию о каждом предмете поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название предмета описание строка краткое резюме элемента создано дата метка времени, указывающая, когда элемент был добавлен обновлено дата метка времени, указывающая на последнее обновление 2\ модель пользователей эта модель обрабатывает аутентификацию пользователей и учетные данные поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальное имя пользователя для пользователя электронная почта строка уникальный адрес электронной почты пользователя хешпароля строка зашифрованный пароль пользователя создано дата время, когда была создана учетная запись обновлено дата время, когда аккаунт был обновлён вы можете создать эти модели и определить их поля непосредственно в панели управления back4app создать новый класс вы можете добавлять поля, выбирая тип данных, вводя имя поля, устанавливая значение по умолчанию и отмечая, является ли оно обязательным создать колонку использование ai агента back4app для генерации схемы ai агент back4app — это интеллектуальная функция в вашей панели управления, которая может автоматически настраивать вашу схему данных на основе ваших спецификаций этот инструмент упрощает инициализацию проекта, обеспечивая оптимизацию вашей модели данных для операций crud как использовать ai агента откройте ai агента войдите в свою панель управления back4app и найдите ai агента в настройках проекта укажите детали вашей модели предоставьте подробное описание моделей и полей, которые вам нужны просмотрите и подтвердите ai агент сгенерирует предложенную схему подтвердите детали, чтобы применить конфигурацию пример запроса create the following models in my back4app project 1\) model items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) model users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) этот подход с использованием ai экономит время и обеспечивает согласованность и оптимизацию вашей структуры данных шаг 3 – включение админ приложения и работа с crud операциями обзор админ приложения приложение back4app admin предоставляет удобную платформу без кода для управления вашими данными на сервере его интерфейс перетаскивания позволяет легко выполнять операции crud, такие как добавление, просмотр, обновление и удаление записей включение приложения admin перейдите в меню “дополнительно” в вашей панели управления back4app выберите “admin app” и нажмите на “включить admin app ” настройте свои учетные данные администратора создав начальную учетную запись администратора это также настроит роли (например, b4aadminuser ) и системные модели включить admin app после активации войдите в приложение admin, чтобы управлять данными вашего приложения панель управления admin app управление операциями crud через приложение admin внутри приложения admin вы можете вставить записи нажмите кнопку “добавить запись” в модели (например, товары), чтобы ввести новые данные просмотреть/изменить записи выберите любую запись, чтобы просмотреть ее детали или отредактировать ее поля удалить записи удалите записи, которые больше не нужны этот упрощенный интерфейс значительно повышает эффективность управления данными шаг 4 – подключение вашего приложения ember js к back4app с настроенным сервером пришло время подключить ваше приложение ember js к back4app использование api вызовов в ember js ember js использует ember data для обработки операций с данными в этом учебном пособии вы будете использовать rest адаптер для взаимодействия с вашим бэкендом back4app 1\ настройка rest адаптера создайте или обновите адаптер вашего приложения (например, app/adapters/application js ) с следующей конфигурацией import restadapter from '@ember data/adapter/rest'; export default class applicationadapter extends restadapter { host = 'https //parseapi back4app com'; headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; } 2\ определение моделей ember data создайте модель ember для item (например, app/models/item js ) import model, { attr } from '@ember data/model'; export default class itemmodel extends model { @attr('string') title; @attr('string') description; @attr('date') createdat; @attr('date') updatedat; } аналогично для user (например, app/models/user js ) import model, { attr } from '@ember data/model'; export default class usermodel extends model { @attr('string') username; @attr('string') email; @attr('string') passwordhash; @attr('date') createdat; @attr('date') updatedat; } 3\ реализация операций crud используйте сервис хранилища ember data для выполнения операций crud например, чтобы получить все элементы, вы можете создать маршрут, похожий на import route from '@ember/routing/route'; export default class itemsroute extends route { model() { return this store findall('item'); } } вы также можете добавлять, обновлять или удалять записи, используя методы api ember data альтернатива использование нативного fetch для api вызовов если вы предпочитаете не использовать ember data, вы можете использовать нативные вызовы fetch например, чтобы получить элементы async function fetchitems() { try { let response = await fetch('https //parseapi back4app com/classes/items', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); let data = await response json(); console log('fetched items ', data); } catch (error) { console error('error fetching items ', error); } } интегрируйте эти api вызовы в ваши компоненты или сервисы ember по мере необходимости шаг 5 – укрепление безопасности вашего бэкенда реализация контроля доступа защитите ваши данные, настроив списки контроля доступа (acl) для каждого объекта например, при создании элемента, который должен быть виден только его владельцу, вы можете настроить параметры acl через ваши api вызовы разрешения на уровне класса (clp) в панели управления back4app настройте clp, чтобы гарантировать, что только аутентифицированные пользователи имеют доступ к определённым моделям это добавляет дополнительный уровень безопасности, применяя правила доступа по умолчанию шаг 6 – реализация аутентификации пользователей в ember js настройка учетных записей пользователей back4app использует модель пользователя parse для обработки аутентификации в вашем приложении ember js вы можете создать сервисы для управления регистрацией и входом пользователя через api вызовы например, создайте сервис аутентификации ( app/services/auth js ) import service from '@ember/service'; export default class authservice extends service { async register(username, password, email) { try { let 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({ username, password, email }) }); let result = await response json(); console log('user registered successfully ', result); } catch (error) { console error('registration error ', error); } } async login(username, password) { try { let response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); let result = await response json(); console log('user logged in ', result); } catch (error) { console error('login error ', error); } } } этот сервис можно внедрить в ваши маршруты или компоненты для управления сессиями, сброса паролей и других задач, связанных с аутентификацией шаг 7 – развертывание вашего приложения ember js back4app поддерживает различные стратегии развертывания вы можете развернуть ваше приложение ember js, используя такие методы, как контейнеризация docker 7 1 создание вашего ember приложения создайте ваше приложение запустите следующую команду в вашем терминале ember build environment=production проверьте вывод убедитесь, что dist/ папка содержит ваши готовые к производству ресурсы 7 2 обзор структуры проекта типичный проект ember js может быть организован следующим образом basic crud app ember/ \| app/ \| | adapters/ \| | | application js \| | models/ \| | | item js \| | | user js \| | routes/ \| | | items js \| | services/ \| | auth js \| config/ \| | environment js \| public/ \| tests/ \| ember cli build js \| package json \| readme md 7 3 докеризация вашего ember приложения если вы предпочитаете контейнерное развертывание, включите dockerfile в корень вашего проекта \# use an official node js image as the base from node 16 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application code copy \# build the ember application run npm run build environment=production \# use a lightweight web server to serve static files from nginx\ stable alpine copy from=0 /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 развертывание через back4app web deployment подключите ваш репозиторий github размещайте ваш проект ember js на github настройте параметры развертывания в вашей панели управления back4app перейдите в web deployment , свяжите ваш репозиторий (например, basic crud app ember ), и выберите нужную ветку установите команды сборки определите вашу команду сборки (например, ember build environment=production ) и укажите выходной каталог разверните ваше приложение нажмите deploy и следите за логами, пока ваше приложение не станет доступным шаг 8 – заключение и следующие шаги отличная работа! вы теперь создали приложение crud на основе ember js, интегрированное с back4app в этом учебном пособии вы настроили проект под названием basic crud app ember , разработали модели для элементов и пользователей и управляли своим бэкендом через приложение администратора back4app вы также подключили свое приложение ember js с помощью api вызовов и реализовали надежные практики безопасности следующие шаги улучшите свое приложение рассмотрите возможность добавления таких функций, как расширенный поиск, детализированные представления или обновления в реальном времени расширьте возможности бэкенда изучите облачные функции, интегрируйте сторонние api или настройте контроль доступа на основе ролей углубите свои знания посетите документацию back4app https //www back4app com/docs и другие ресурсы ember js для более продвинутых тем счастливого кодирования и удачи в вашем пути с ember js!