How to Create a Basic CRUD App with StencilJS? A Comprehensive Tutorial

обзор в этом руководстве вы узнаете, как создать базовое crud (создание, чтение, обновление и удаление) приложение с использованием stenciljs этот учебник проведет вас через создание веб приложения, которое выполняет основные операции для эффективного управления данными мы начнем с запуска проекта back4app под названием basic crud app stenciljs , который будет служить вашим надежным бэкендом после этого вы создадите масштабируемую базу данных, определив коллекции и поля — либо вручную, либо с помощью ai агента back4app этот шаг гарантирует, что ваша база данных будет настроена для надежной поддержки всех операций crud затем вы воспользуетесь приложением back4app admin app, интуитивно понятным интерфейсом перетаскивания, чтобы без проблем управлять вашими коллекциями этот инструмент без кода упрощает обработку действий crud наконец, вы подключите свой фронтенд stenciljs к back4app через rest/graphql api хотя sdk parse доступен, мы сосредоточимся на интеграциях api, которые идеально подходят для stenciljs, обеспечивая безопасность вашего бэкенда с помощью продвинутых средств управления доступом к концу этого учебника у вас будет готовое к производству веб приложение, которое поддерживает основные функции crud вместе с аутентификацией пользователей и надежным управлением данными основные сведения освойте процесс создания crud приложений с надежной серверной системой поймите, как спроектировать масштабируемую серверную часть и соединить ее с фронтендом на stenciljs научитесь использовать инструмент администрирования без кода (приложение back4app admin) для эффективных операций с данными изучите стратегии развертывания, включая контейнеризацию docker, для быстрого запуска вашего веб приложения предварительные требования перед тем как начать, убедитесь, что у вас есть аккаунт back4app с активным проектом нужна помощь? ознакомьтесь с началом работы с back4app https //www back4app com/docs/get started/new parse app настройка разработки stenciljs используйте официальную документацию stenciljs https //stenciljs com/docs/introduction для настройки вашей среды убедитесь, что установлен node js (версии 14 или выше) базовые знания javascript, веб компонентов и rest api при необходимости освежите знания о концепциях stenciljs https //stenciljs com/docs шаг 1 – инициация вашего проекта запуск нового проекта back4app войдите в свою учетную запись back4app выберите опцию “новое приложение” на вашей панели управления назовите ваш проект basic crud app stenciljs и следуйте инструкциям на экране, чтобы завершить настройку создать новый проект после настройки ваш проект будет виден на панели управления, обеспечивая надежную основу для вашей конфигурации бэкенда шаг 2 – создание схемы вашей базы данных определение модели данных для этого crud приложения вам нужно будет настроить несколько коллекций ниже приведены образцы коллекций вместе с их полями и типами данных, чтобы помочь вам структурировать вашу базу данных для эффективных операций crud 1\ коллекция элементы эта коллекция содержит детали для каждого элемента поле тип данных детали ид идентификатор объекта автоматически сгенерированный первичный ключ название строка название или заголовок элемента описание строка краткое описание предмета создано в дата время создания элемента обновлено дата метка времени для последнего обновления 2\ сбор пользователи эта коллекция управляет профилями пользователей и аутентификацией поле тип данных детали ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальный идентификатор для пользователя электронная почта строка уникальный адрес электронной почты хэш пароля строка зашифрованный пароль для аутентификации создано в дата время создания аккаунта обновлено дата последнее обновление временной метки для учетной записи пользователя вы можете добавить эти коллекции вручную в панели управления back4app, создав новый класс для каждой и добавив столбцы с соответствующими типами данных создать новый класс следуйте инструкциям, чтобы выбрать тип данных, указать имя поля, установить значения по умолчанию и отметить, является ли поле обязательным создать колонку использование ai агента back4app для создания схемы ai агент back4app — это инновационный инструмент, доступный в вашей панели управления, который автоматизирует создание схемы вашей базы данных на основе простого запроса эта функция ускоряет настройку проекта и гарантирует, что ваша схема соответствует потребностям вашего приложения как использовать ai агента получите доступ к ai агенту откройте панель управления back4app и найдите ai агента в меню или в настройках проекта введите требования к вашей схеме предоставьте подробный запрос, описывающий коллекции и поля, которые вам нужны просмотрите и подтвердите после обработки вашего запроса ai агентом просмотрите сгенерированные предложения схемы и примените их к вашему проекту пример запроса 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 управление действиями crud через admin app в этом интерфейсе вы можете добавить записи нажмите на опцию “добавить запись” в любой коллекции (например, элементы), чтобы создать новые записи просмотреть и редактировать записи выберите запись, чтобы просмотреть или изменить ее поля удалить записи используйте функцию удаления, чтобы устранить устаревшие записи этот упрощенный инструмент улучшает пользовательский опыт, упрощая задачи управления данными шаг 4 – связывание stenciljs с back4app с вашим бэкендом, настроенным и управляемым через admin app, следующим шагом является подключение вашего фронтенда stenciljs к back4app вариант a использование rest или graphql api для stenciljs мы сосредоточимся на интеграциях api, чтобы упростить процесс пример получение данных через rest // example 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 (error) { console error('error retrieving items ', error); } }; fetchitems(); интегрируйте эти вызовы api в ваши компоненты stenciljs по мере необходимости вариант b использование parse sdk (если необходимо) если вы предпочитаете использовать parse sdk, вы все равно можете интегрировать его в ваш проект stenciljs, так как это библиотека javascript однако наш пример здесь сосредоточен на вызовах api шаг 5 – укрепление вашего бэкенда реализация списков контроля доступа (acl) обеспечьте безопасность данных, установив acl на ваши объекты например, чтобы создать приватный элемент async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl restrict read/write access 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('secure item created ', saveditem); } catch (error) { console error('error creating item ', error); } } настройка разрешений на уровне класса (clp) в панели управления back4app установите clp для каждой коллекции, чтобы гарантировать, что только авторизованные пользователи могут получить доступ к конфиденциальным данным шаг 6 – управление аутентификацией пользователей создание учетных записей пользователей back4app использует класс user от parse для управления аутентификацией в вашем проекте stenciljs реализуйте регистрацию и вход пользователей следующим образом // example component for user signup import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app auth', styleurl 'app auth css', shadow true, }) export class appauth { @state() username string = ''; @state() password string = ''; @state() email string = ''; async handlesignup(event event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } } render() { return ( \<form onsubmit={(e) => this handlesignup(e)}> \<input type="text" placeholder="username" value={this username} oninput={(e any) => this username = e target value} /> \<input type="password" placeholder="password" value={this password} oninput={(e any) => this password = e target value} /> \<input type="email" placeholder="email" value={this email} oninput={(e any) => this email = e target value} /> \<button type="submit">register\</button> \</form> ); } } аналогичная структура может быть применена для входа в систему и управления сессиями вы также можете включить такие функции, как социальный вход, проверка электронной почты и сброс пароля непосредственно из панели управления back4app шаг 7 – запуск вашего фронтенда stenciljs с помощью веб развертывания функция веб развертывания back4app позволяет вам размещать ваше приложение stenciljs, развертывая код непосредственно из репозитория github 7 1 создание вашего производственного пакета откройте каталог вашего проекта в терминале выполните команду сборки npm run build это создаст папку www с оптимизированными статическими ресурсами подтвердите сборку убедитесь, что папка www содержит файл index html вместе с необходимыми файлами css, js и изображениями 7 2 организация и загрузка вашего исходного кода ваш репозиторий должен включать все исходные файлы для вашего приложения stenciljs пример структуры может быть следующим basic crud app stenciljs frontend/ ├── node modules/ ├── www/ │ └── index html ├── src/ │ ├── components/ │ │ ├── app auth tsx │ │ └── app items tsx │ ├── global/ │ └── parseconfig ts ├── stencil config ts ├── package json └── readme md пример исходного файла src/parseconfig ts // src/parseconfig ts 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/components/app items tsx import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app items', styleurl 'app items css', shadow true, }) export class appitems { @state() items any\[] = \[]; @state() newtitle string = ''; @state() newdescription string = ''; @state() editingid string | null = null; @state() editingtitle string = ''; @state() editingdescription string = ''; async componentwillload() { await this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error('error fetching items ', error); } } async additem() { const items = parse object extend("items"); const item = new items(); item set("title", this newtitle); item set("description", this newdescription); try { await item save(); this newtitle = ''; this newdescription = ''; this loaditems(); } catch (error) { console error('error adding item ', error); } } async deleteitem(id string) { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (error) { console error('error deleting item ', error); } } startedit(item any) { this editingid = item id; this editingtitle = item get("title"); this editingdescription = item get("description"); } async updateitem() { try { const items = parse object extend("items"); const item = new items(); item id = this editingid!; item set("title", this editingtitle); item set("description", this editingdescription); await item save(); this editingid = null; this editingtitle = ''; this editingdescription = ''; this loaditems(); } catch (error) { console error('error updating item ', error); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this newtitle} oninput={(e any) => this newtitle = e target value} /> \<input type="text" placeholder="description" value={this newdescription} oninput={(e any) => this newdescription = e target value} /> \<button onclick={() => this additem()}>add item\</button> \</div> \<ul> {this items map(item => \<li key={item id}> {this editingid === item id ? ( \<div> \<input type="text" value={this editingtitle} oninput={(e any) => this editingtitle = e target value} /> \<input type="text" value={this editingdescription} oninput={(e any) => this editingdescription = e target value} /> \<button onclick={() => this updateitem()}>save\</button> \<button onclick={() => this editingid = null}>cancel\</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)}>edit\</button> \<button onclick={() => this deleteitem(item id)}>delete\</button> \</div> )} \</li> )} \</ul> \</div> ); } } коммит вашего кода в github инициализируйте репозиторий git в каталоге вашего проекта (если это еще не сделано) git init добавьте ваши файлы в индекс git add зафиксируйте ваши изменения git commit m "первоначальный коммит кода фронтенда stenciljs" создайте новый репозиторий на github назовите его как нибудь вроде basic crud app stenciljs frontend отправьте ваш код на github git remote add origin https //github com/your username/basic crud app stenciljs frontend git git push u origin main 7 3 подключение вашего репозитория через веб развертывание доступ к веб развертыванию войдите в свою панель управления back4app, выберите свой проект ( basic crud app stenciljs ), и нажмите на раздел веб развертывание интеграция с github подключите свою учетную запись github, следуя предоставленным инструкциям это позволит back4app получить доступ к вашему репозиторию выберите репозиторий и ветку выберите свой репозиторий (например, basic crud app stenciljs frontend ) и выберите соответствующую ветку (например, main ) 7 4 настройка вашего развертывания введите дополнительные детали развертывания команда сборки если ваш репозиторий не содержит предварительно собранной www папки, укажите команду сборки (например, npm run build ) back4app выполнит это во время развертывания каталог вывода установите каталог вывода на www так, чтобы back4app знал, где находить ваши статические файлы переменные окружения добавьте любые необходимые переменные окружения (например, ключи api) в настройках развертывания 7 5 контейнеризация вашего проекта stenciljs с помощью docker если вы предпочитаете docker для развертывания, включите dockerfile в ваш репозиторий, аналогичный следующему \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy source code copy \# build the app run npm run build \# use nginx to serve the app from nginx\ stable alpine copy from=build /app/www /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] включите этот файл в ваш репозиторий и выберите развертывание docker в back4app 7 6 развертывание вашего приложения инициализируйте развертывание нажмите кнопку развернуть после настройки ваших параметров следите за процессом сборки back4app получит ваш код из github, выполнит команду сборки (если установлена) и развернет ваше контейнеризованное приложение получите доступ к вашему приложению после развертывания back4app предоставит url, по которому ваше приложение stenciljs будет доступно 7 7 проверка вашего развертывания посетите url откройте предоставленный url в вашем веб браузере проверьте функциональность убедитесь, что приложение загружается правильно, маршруты работают корректно, и все ресурсы (css, js, изображения) обслуживаются без проблем отладьте при необходимости используйте инструменты разработчика браузера для проверки любых ошибок проверьте логи back4app и убедитесь в правильности конфигураций github и сборки, если возникают проблемы шаг 8 – резюме и будущие направления отлично сделано! вы успешно создали полное crud приложение с использованием stenciljs и back4app вы настроили проект под названием basic crud app stenciljs , разработали коллекции для элементов и пользователей и управляли данными с помощью admin app кроме того, вы подключили свой фронтенд stenciljs к бэкенду и реализовали надежные меры безопасности следующие шаги улучшите фронтенд рассмотрите возможность расширения вашего приложения stenciljs с помощью расширенных функций, таких как детальные представления элементов, возможности поиска и уведомления в реальном времени добавьте больше функциональности интегрируйте сложную логику бэкенда (например, облачные функции), интеграции с api третьих сторон или реализуйте разрешения на основе ролей углубите свои знания изучите документацию back4app https //www back4app com/docs и другие учебные материалы для получения дополнительных сведений о настройке производительности и пользовательских интеграциях следуя этому руководству, вы приобрели навыки, необходимые для создания надежного