Building a CRUD App with Inferno.js: A Comprehensive Walkthrough

обзор этот гид покажет вам, как создать полнофункциональное crud (создание, чтение, обновление, удаление) приложение с использованием inferno js вы научитесь обрабатывать основные операции с данными, разрабатывая систему crud, которая эффективно манипулирует и обновляет информацию наша серверная основа работает на back4app, где вы создадите проект под названием basic crud app infernojs для бесшовного управления вашими данными сначала вы настроите свой проект на back4app и разработаете масштабируемую схему базы данных, определив классы и поля — вручную или с помощью ai assistant от back4app этот процесс гарантирует, что ваши структуры данных достаточно надежны для всех задач crud после этого вы воспользуетесь интерфейсом администратора back4app, инструментом без кода с функцией перетаскивания, который упрощает управление данными наконец, вы свяжете свой фронтенд на inferno js с back4app, используя либо sdk (если это подходит для вашей настройки), либо через api вызовы, при этом применяя строгие меры контроля доступа для безопасности к концу этого учебника у вас будет веб приложение уровня производства с функциями аутентификации пользователей, динамической обработки данных и отзывчивым интерфейсом основные идеи освойте функции crud с надежным бэкендом на back4app поймите, как спроектировать масштабируемую схему базы данных и интегрировать ее с вашим фронтендом на inferno js изучите визуальный инструмент управления для легкого выполнения операций создания, чтения, обновления и удаления изучите стратегии развертывания, включая контейнеризацию с docker требования аккаунт back4app и новый созданный проект если вам нужна помощь, ознакомьтесь с началом работы с back4app https //www back4app com/docs/get started/new parse app настройка разработки inferno js используйте ваш любимый стартер или шаблон inferno убедитесь, что установлен node js (версии 14 или новее) базовое понимание javascript, inferno js и принципов rest api для получения дополнительных деталей обратитесь к документации inferno https //infernojs org/docs/introduction перед тем как начать, пожалуйста, убедитесь, что у вас есть шаг 1 – инициализация вашего проекта запуск нового проекта back4app войдите в свою учетную запись back4app выберите опцию “новое приложение” на вашей панели управления назовите ваш проект basic crud app infernojs и следуйте инструкциям на экране для завершения создания создать новый проект после создания ваш проект появится на вашей панели управления, предоставляя надежную платформу для вашего приложения шаг 2 – создание схемы базы данных определение вашей модели данных для этого crud приложения вы создадите несколько классов ниже приведены примеры двух основных классов с их полями, настроенные для поддержки операций crud 1\ класс предметов поле тип детали ид идентификатор объекта автоматически сгенерированный первичный ключ название строка название элемента описание строка краткое объяснение предмета создано в дата метка времени, указывающая, когда элемент был создан обновлено дата метка времени для самого последнего обновления 2\ класс пользователей поле тип детали ид идентификатор объекта автоматически сгенерированный первичный ключ имя пользователя строка уникальный идентификатор для пользователя электронная почта строка уникальный адрес электронной почты пользователя хэш пароля строка зашифрованный пароль для безопасной аутентификации создано в дата метка времени для создания аккаунта обновлено дата метка времени для последнего обновления аккаунта создайте эти классы вручную на панели управления back4app, выбрав "новый класс" и добавив необходимые столбцы создать новый класс вы можете определить каждое поле, выбрав тип данных, указав имя и установив значения по умолчанию или требования создать колонку использование ai assistant back4app для настройки схемы ai assistant back4app упрощает создание схемы, автоматически генерируя классы на основе ваших описаний как использовать ai assistant получите доступ к ai assistant войдите в свою панель управления back4app и найдите ai assistant в настройках опишите свою модель данных введите полное описание классов и полей, которые вам нужны просмотрите и примените ассистент предложит определения классов подтвердите и примените эти настройки пример запроса create the following classes in my back4app app 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto set) \ updated at date (auto update) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto set) \ updated at date (auto update) использование ai assistant упрощает вашу настройку, обеспечивая согласованность и эффективность шаг 3 – активация интерфейса администратора и функций crud представляем интерфейс администратора интерфейс администратора back4app – это мощный инструмент без кода, который предлагает опыт перетаскивания для управления вашим бэкендом он позволяет вам без труда выполнять операции crud активация интерфейса администратора перейдите в раздел “дополнительно” в вашей панели управления back4app нажмите “admin app” и затем нажмите “включить admin app ” настройте свою учетную запись администратора создав своего первоначального администратора этот процесс автоматически настраивает роли и основные системные классы включить admin app после включения войдите в интерфейс администратора, чтобы управлять своими данными панель управления admin app выполнение crud через интерфейс администратора внутри интерфейса администратора вы можете создание записей используйте опцию “добавить запись” в классе (например, элементы), чтобы вставить новые данные чтение/изменение записей нажмите на любую запись, чтобы просмотреть или обновить ее детали удаление записей используйте функцию удаления, чтобы очистить ненужные записи этот интерфейс значительно улучшает удобство использования, упрощая все задачи crud шаг 4 – подключение inferno js к back4app с вашим бэкендом, настроенным через интерфейс администратора, пришло время интегрировать ваш фронтенд на inferno js вариант a использование parse sdk установите parse sdk npm install parse инициализируйте parse в вашем приложении inferno создайте файл конфигурации (например, src/parseconfig js ) // src/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 в компоненте inferno например, создайте компонент для получения и отображения элементов // src/components/itemslist js import { component } from 'inferno'; import parse from ' /parseconfig'; class itemslist extends component { constructor(props) { super(props); this state = { items \[] }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("ошибка загрузки элементов ", err); } } render() { return ( \<div> \<h2>элементы\</h2> \<ul> {this state items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); } } export default itemslist; вариант b использование rest или graphql api если sdk parse не идеален для вашего сценария, вы можете выполнять действия crud через rest или graphql например, чтобы получить элементы с помощью rest // rest api call to retrieve items const fetchitems = async () => { 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('items retrieved ', data results); } catch (err) { console error('error fetching items ', err); } }; fetchitems(); встраивайте эти вызовы api в ваши компоненты inferno по мере необходимости шаг 5 – укрепление вашего бэкенда реализация списков контроля доступа (acl) обеспечьте безопасность данных, назначив acl например, чтобы создать приватный элемент async function createprivateitem(itemdata, owner) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl so only the owner has access const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (err) { console error('error creating item ', err); } } настройка разрешений на уровне класса (clp) в вашей панели управления back4app настройте clp для каждого класса, чтобы обеспечить соблюдение стандартных политик доступа, гарантируя, что только авторизованные пользователи могут взаимодействовать с конфиденциальными данными шаг 6 – управление аутентификацией пользователей создание учетных записей пользователей back4app использует класс пользователей (через parse) для обработки аутентификации в вашем приложении inferno js реализуйте функции регистрации и входа, как показано ниже // src/components/auth js import { component } from 'inferno'; import parse from ' /parseconfig'; export class signup extends component { constructor(props) { super(props); this state = { username '', password '', email '' }; } handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', this state username); user set('password', this state password); user set('email', this state email); try { await user signup(); alert('registration successful!'); } catch (err) { alert('sign up error ' + err message); } }; render() { return ( \<form onsubmit={this handlesignup}> \<input type="text" placeholder="username" value={this state username} oninput={e => this setstate({ username e target value })} /> \<input type="password" placeholder="password" value={this state password} oninput={e => this setstate({ password e target value })} /> \<input type="email" placeholder="email" value={this state email} oninput={e => this setstate({ email e target value })} /> \<button type="submit">sign up\</button> \</form> ); } } аналогичная стратегия применяется для входа в систему и управления сессиями дополнительные функции, такие как социальная аутентификация, проверка электронной почты и восстановление пароля, могут быть настроены в панели управления back4app шаг 7 – развертывание вашего фронтенда на inferno js опция веб развертывания back4app позволяет вам без труда разместить ваш фронтенд на inferno js, связав его с вашим репозиторием на github 7 1 сборка для продакшена откройте каталог вашего проекта в терминале запустите команду сборки для продакшена npm run build эта команда компилирует ваше приложение в build папку, содержащую оптимизированные статические ресурсы подтвердите сборку убедитесь, что build папка включает файл index html и другие папки с ресурсами 7 2 организация и загрузка вашего кода ваш репозиторий должен включать полный исходный код вашего фронтенда на inferno js пример структуры каталогов basic crud app infernojs frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parseconfig js \| ` components/ \| | itemslist js \| ` auth js \| package json ` readme md пример файлов src/parseconfig js // src/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; src/app js // src/app js import { component } from 'inferno'; import parse from ' /parseconfig'; class app extends component { constructor(props) { super(props); this state = { items \[], newtitle "", newdescription "", editid null, edittitle "", editdescription "" }; } componentdidmount() { this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this setstate({ items results }); } catch (err) { console error("error loading items ", err); } } handleadd = async () => { const items = parse object extend("items"); const item = new items(); item set("title", this state newtitle); item set("description", this state newdescription); try { await item save(); this setstate({ newtitle "", newdescription "" }); this loaditems(); } catch (err) { console error("error adding item ", err); } } handledelete = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (err) { console error("error deleting item ", err); } } startedit = (item) => { this setstate({ editid item id, edittitle item get("title"), editdescription item get("description") }); } handleupdate = async () => { try { const items = parse object extend("items"); const item = new items(); item id = this state editid; item set("title", this state edittitle); item set("description", this state editdescription); await item save(); this setstate({ editid null, edittitle "", editdescription "" }); this loaditems(); } catch (err) { console error("error updating item ", err); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this state newtitle} oninput={e => this setstate({ newtitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={this state newdescription} oninput={e => this setstate({ newdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleadd}>add item\</button> \</div> \<h2>items list\</h2> \<ul> {this state items map(item => ( \<li key={item id} style={{ marginbottom '1rem' }}> {this state editid === item id ? ( \<div> \<input type="text" value={this state edittitle} oninput={e => this setstate({ edittitle e target value })} style={{ marginright '0 5rem' }} /> \<input type="text" value={this state editdescription} oninput={e => this setstate({ editdescription e target value })} style={{ marginright '0 5rem' }} /> \<button onclick={this handleupdate}>save\</button> \<button onclick={() => this setstate({ editid null })} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => this handledelete(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } } export default app; загрузка вашего кода на github инициализируйте git в вашей папке проекта git init подготовьте ваши файлы git add зафиксируйте ваши изменения git commit m "первоначальный коммит для фронтенда inferno js" создайте репозиторий на github назовите его basic crud app infernojs frontend загрузите ваш проект git remote add origin https //github com/your username/basic crud app infernojs frontend git git push u origin main 7 3 подключение github к веб развертыванию back4app перейдите к веб развертыванию войдите в back4app, выберите свой проект ( basic crud app infernojs ), и нажмите на функцию веб развертывание интеграция с github следуйте инструкциям, чтобы связать свою учетную запись github, позволяя back4app получить доступ к вашему репозиторию выберите свой репозиторий и ветку выберите репозиторий (например, basic crud app infernojs frontend ) и ветку (обычно main ), которая содержит ваш код 7 4 настройки развертывания введите дополнительные настройки команда сборки если в вашем репозитории отсутствует предварительно собранная build папка, укажите команду, такую как npm run build back4app выполнит это во время развертывания папка вывода установите вывод в build так, чтобы back4app знал, где находятся ваши статические файлы переменные окружения добавьте любые необходимые переменные (такие как ключи api) в настройки конфигурации 7 5 докеризация вашего приложения если вы выберете контейнеризацию, включите dockerfile в ваш репозиторий, аналогичный следующему \# use an official node image for the build stage 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 remaining files and build the app copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] выберите развертывание docker в back4app, если вы выбрали этот метод 7 6 запуск вашего приложения нажмите развернуть после настройки всех параметров нажмите кнопку развернуть смотрите сборку back4app получит ваш код, соберет ваш проект и развернет его в контейнере доступ к вашему приложению после развертывания back4app предоставляет url, по которому ваше приложение inferno js доступно 7 7 подтверждение развертывания посетите предоставленный url откройте url в вашем браузере проверьте функциональность убедитесь, что приложение загружается, все маршруты работают правильно, а ресурсы (css, js, изображения) отображаются как ожидалось устранение неполадок используйте инструменты разработчика для проверки ошибок если возникают проблемы, проверьте журналы back4app и убедитесь в правильности настроек github шаг 8 – завершение и будущие направления поздравляем! вы создали полноценное crud приложение с inferno js и back4app вы настроили проект basic crud app infernojs , разработали свои классы данных и использовали интуитивно понятный интерфейс администратора для управления данными ваш фронтенд теперь подключен и защищен надежными контролями доступа следующие шаги улучшите интерфейс расширьте свое приложение на inferno js с помощью детализированных представлений, возможностей поиска и живых уведомлений добавьте больше функций рассмотрите возможность реализации дополнительных функций на стороне сервера (таких как cloud code), интеграции сторонних api или введения ролевого доступа изучите дальше погрузитесь в документацию back4app https //www back4app com/docs и дополнительные учебные пособия по оптимизации производительности и пользовательским интеграциям счастливого кодирования и удачи в ваших будущих проектах!