Building a Basic CRUD Application with Mithril.js: A Detailed Tutorial

обзор этот гид проведет вас через создание приложения crud (создание, чтение, обновление и удаление) с использованием mithril js на протяжении этого учебника вы узнаете, как настроить проект back4app с названием basic crud app mithriljs для использования в качестве мощного бэкенда для вашего веб приложения мы разработаем эффективную схему данных, управлять ею через панель администратора back4app и интегрируем ваш фронтенд на mithril js с помощью вызовов rest api что вы узнаете как настроить систему crud, которая надежно обрабатывает данные с использованием надежного бэкенда стратегии для создания масштабируемого дизайна базы данных и связывания его с приложением на mithril js использование интуитивно понятного интерфейса администратора back4app для выполнения действий crud методы развертывания, включая контейнеризацию docker, чтобы быстро запустить ваше приложение требования перед тем как начать, пожалуйста, подтвердите, что у вас есть аккаунт back4app и активный проект для получения помощи, обратитесь к начало работы с back4app https //www back4app com/docs/get started/new parse app среда разработки mithril js вы можете включить mithril через npm или cdn убедитесь, что у вас установлен node js (v14+) основные знания javascript, mithril js и restful api для дополнительной информации, ознакомьтесь с документацией mithril js https //mithril js org/ шаг 1 – инициализация вашего проекта настройка нового проекта back4app войдите в свой аккаунт back4app нажмите кнопку создать приложение на вашей панели управления укажите имя проекта basic crud app mithriljs , и следуйте указаниям создать новый проект после настройки ваш проект будет отображаться на вашей панели управления, служа в качестве бэкенд центра для вашего приложения шаг 2 – создание схемы вашей базы данных конструирование модели данных для этого crud приложения вы создадите несколько ключевых коллекций ниже приведен план создания коллекций с их соответствующими полями для эффективного выполнения операций crud 1 сбор предметов эта коллекция содержит детали для каждого предмета поле тип цель ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название или заголовок элемента описание строка краткое резюме о предмете создано в дата время создания обновлено дата метка времени для последнего обновления 2 сбор пользователей эта коллекция управляет профилями пользователей и данными аутентификации поле тип цель ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальное имя пользователя электронная почта строка уникальный адрес электронной почты пользователя хэш пароля строка хэшированный пароль для безопасной аутентификации создано в дата время регистрации пользователя обновлено дата метка времени для любых изменений вы можете вручную добавить эти коллекции и поля через панель управления back4app, создав новые классы и определив каждую колонку соответствующим образом создать новый класс чтобы добавить поля, просто выберите соответствующий тип данных, укажите имя, установите значения по умолчанию и отметьте, если это необходимо создать колонку использование ai агента back4app для автоматизации схемы интегрированный ai агент на back4app упрощает создание схемы, автоматически генерируя ваши коллекции на основе предоставленного запроса как использовать ai агента получите доступ к ai агенту из панели управления вашим проектом опишите желаемую схему, указав коллекции и поля просмотрите сгенерированную схему и примените изменения пример запроса create the following 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) этот инструмент помогает обеспечить, чтобы ваш дизайн базы данных был как последовательным, так и оптимальным для обработки операций crud шаг 3 – активация интерфейса администратора и функциональности crud обзор интерфейса администратора интерфейс администратора back4app – это решение без кода, предназначенное для того, чтобы помочь вам легко управлять вашими данными на сервере его дизайн с функцией перетаскивания делает выполнение операций crud простым как включить интерфейс администратора перейдите в раздел дополнительно на вашей панели управления back4app нажмите на приложение администратора затем выберите включить приложение администратора настройте свои учетные данные администратора, чтобы создать своего первого администратора этот процесс также настраивает роли (такие как b4aadminuser ) и системные коллекции включить приложение администратора после активации войдите в интерфейс администратора, чтобы управлять вашими коллекциями панель управления приложения администратора выполнение операций crud через интерфейс администратора добавить новые записи используйте опцию “добавить запись” в любой коллекции (например, товары), чтобы создать записи просмотреть/изменить записи нажмите на запись, чтобы просмотреть детали или отредактировать ее поля удалить записи используйте функцию удаления, чтобы очистить устаревшие записи этот интуитивно понятный интерфейс улучшает пользовательский опыт, упрощая рутинные действия crud шаг 4 – связывание mithril js с back4app с вашим бэкендом, готовым и управляемым через интерфейс администратора, пришло время подключить ваш фронтенд mithril js к back4app с помощью вызовов rest api использование вызовов rest api с mithril js мы будем полагаться на вызовы rest api для взаимодействия с вашим бэкендом back4app пример получение и отображение товаров создайте компонент mithril, который извлекает товары из коллекции товары // src/components/itemslist js const itemslist = { items \[], loaditems async function() { 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(); itemslist items = data results; } catch (error) { console error('error retrieving items ', error); } }, oninit function() { itemslist loaditems(); }, view function() { return m('div', \[ m('h2', 'items'), m('ul', itemslist items map(item => m('li', { key item objectid }, `${item title} — ${item description}` ) ) ) ]); } }; export default itemslist; этот компонент использует метод жизненного цикла mithril oninit для загрузки данных при инициализации компонента пример добавление нового элемента вы можете интегрировать форму для отправки post запроса на добавление новых элементов // src/components/additem js const additem = { title '', description '', submititem async function() { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title additem title, description additem description }) }); const data = await response json(); console log('item added ', data); // optionally, refresh the list or redirect the user } catch (error) { console error('error adding item ', error); } }, view function() { return m('div', \[ m('h2', 'add item'), m('input\[type=text]', { placeholder 'title', oninput m withattr('value', value => additem title = value), value additem title }), m('input\[type=text]', { placeholder 'description', oninput m withattr('value', value => additem description = value), value additem description }), m('button', { onclick additem submititem }, 'add item') ]); } }; export default additem; вы также можете реализовать операции обновления и удаления, используя соответствующие http методы (put/patch для обновлений и delete для удаления) шаг 5 – укрепление безопасности бэкенда реализация контроля доступа обеспечьте безопасность ваших данных, применяя списки контроля доступа (acl) к каждому объекту например, чтобы создать элемент, который может изменять только владелец async function createsecureitem(itemdata, ownerid) { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const data = await response json(); console log('secure item created ', data); } catch (error) { console error('error creating secure item ', error); } } настройка разрешений на уровне класса (clp) в вашей панели управления back4app настройте clp для каждой коллекции, чтобы определить стандартные политики безопасности это гарантирует, что только авторизованные пользователи имеют доступ к конфиденциальной информации шаг 6 – настройка аутентификации пользователей настройка учетных записей пользователей back4app использует класс parse user для управления аутентификацией с помощью mithril js вы можете управлять регистрацией и входом через вызовы rest api ниже приведен пример регистрации пользователя // src/components/auth js const auth = { username '', email '', password '', signup async function() { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username auth username, email auth email, password auth password }) }); const data = await response json(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } }, view function() { return m('form', { onsubmit function(e) { e preventdefault(); auth signup(); } }, \[ m('input\[type=text]', { placeholder 'username', oninput m withattr('value', value => auth username = value), value auth username }), m('input\[type=email]', { placeholder 'email', oninput m withattr('value', value => auth email = value), value auth email }), m('input\[type=password]', { placeholder 'password', oninput m withattr('value', value => auth password = value), value auth password }), m('button', { type 'submit' }, 'sign up') ]); } }; export default auth; вы можете использовать аналогичный метод для входа в систему и управления сессиями шаг 7 – развертывание вашего фронтенда на mithril js функция веб развертывания back4app позволяет вам без проблем размещать ваше приложение на mithril js, связывая его с вашим репозиторием на github 7 1 создание производственной версии откройте каталог вашего проекта в терминале запустите команду сборки npm run build это создаст build папку, содержащую оптимизированные статические файлы 7 2 организация и коммит вашего кода ваша репозиторий должен иметь структуру, подобную basic crud app mithriljs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── components/ │ │ ├── itemslist js │ │ ├── additem js │ │ └── auth js │ └── app js ├── package json └── readme md пример src/index js import m from "mithril"; import itemslist from " /components/itemslist"; import additem from " /components/additem"; import auth from " /components/auth"; // define a simple routing system m route(document body, "/", { "/" { view function() { return m("div", \[ m(itemslist), m(additem), m(auth) ]); } } }); коммит и отправка в github инициализируйте git (если еще не инициализирован) git init добавьте ваши файлы git add закоммитьте изменения git commit m "initial commit of mithril js frontend" создайте репозиторий на github (например, basic crud app mithriljs frontend ) и отправьте ваш код git remote add origin https //github com/your username/basic crud app mithriljs frontend git git push u origin main 7 3 связывание github с веб развертыванием войдите в свою панель управления back4app, перейдите к вашему проекту ( basic crud app mithriljs ), и выберите веб развертывание подключите свою учетную запись github, следуя подсказкам на экране выберите свой репозиторий и ветку (например, main ), которая содержит ваш исходный код mithril js 7 4 настройка конфигураций развертывания настройте команда сборки укажите npm run build если папка сборки отсутствует выходной каталог установите это на build для указания на ваши статические ресурсы переменные окружения добавьте любые необходимые ключи api или настройки 7 5 докеризация вашего приложения (по желанию) если вы предпочитаете контейнеризацию, включите dockerfile # use an official node image for building from node 16 alpine as builder workdir /app copy package json / run npm install copy run npm run build \# serve using nginx from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 развертывание вашего приложения нажмите кнопку развернуть в разделе развертывания вашего приложения back4app следите за процессом сборки, пока back4app загружает, собирает и развертывает ваше приложение после завершения вы получите url для вашего живого приложения mithril js 7 7 проверка развертывания откройте предоставленный url в вашем браузере подтвердите, что ваше приложение загружается, навигация работает, и ресурсы обслуживаются правильно используйте инструменты разработчика браузера для устранения неполадок, если это необходимо шаг 8 – завершение и будущие направления отличная работа! вы успешно создали базовое crud приложение с mithril js, интегрированное с back4app вы настроили проект под названием basic crud app mithriljs , определили схему базы данных для элементов и пользователей и управляли своим бэкендом через интерфейс администратора кроме того, вы подключили свой фронтенд на mithril js, используя вызовы rest api, и применили меры безопасности для защиты ваших данных что дальше? улучшите фронтенд добавьте функции, такие как детальные представления, возможности поиска или обновления в реальном времени расширьте функции бэкенда изучите облачные функции, дополнительные интеграции api или разрешения на основе ролей узнайте больше углубитесь в документацию back4app https //www back4app com/docs и руководства по mithril js для продвинутых улучшений счастливого кодирования и удачи с вашим проектом!