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

обзор в этом руководстве вы разработаете приложение crud (создание, чтение, обновление и удаление) с использованием preact мы проведем вас через создание системы, которая обрабатывает основные операции с данными, начиная с инициализации проекта back4app под названием basic crud app preact , до легкого управления данными этот проект предоставляет надежный бэкенд и стильный, минималистичный фронтенд, построенный с помощью preact мы начнем с настройки нового проекта на back4app, затем создадим эффективную схему базы данных — либо вручную, либо с помощью ai assistant от back4app этот дизайн поддержит все основные функции crud затем мы представим приложение администратора back4app, интерфейс перетаскивания, который упрощает управление данными вы можете быстро добавлять, изменять или удалять записи с помощью этого инструмента наконец, вы подключите свой фронтенд preact к back4app, используя rest/graphql, обеспечивая безопасность вашего бэкенда с помощью продвинутых правил доступа к концу этого учебника у вас будет готовое к производству веб приложение с функцией аутентификации пользователей и надежным управлением данными — все это построено с помощью preact и поддерживается back4app основные идеи освойте создание приложений crud, которые эффективно управляют данными с использованием надежного бэкенда научитесь разрабатывать масштабируемую модель данных и интегрировать ее с фронтендом preact для оптимального пользовательского опыта узнайте, как приложение администратора back4app с функцией перетаскивания упрощает операции создания, чтения, обновления и удаления поймите стратегии развертывания, включая контейнеризацию с помощью docker, чтобы быстро запустить ваше приложение предварительные требования перед началом убедитесь, что у вас есть учетная запись back4app и инициализированный проект для получения инструкций ознакомьтесь с начало работы с back4app https //www back4app com/docs/get started/new parse app среда разработки preact используйте такие инструменты, как preact cli https //github com/preactjs/preact cli , убедившись, что установлен node js (версии 14 или выше) базовые знания javascript, preact и rest api при необходимости обратитесь к документации preact https //preactjs com/guide/v10/ шаг 1 – настройка вашего проекта инициализация проекта back4app войдите в свою учетную запись back4app выберите опцию “новое приложение” на вашей панели управления назовите ваш проект basic crud app preact , и следуйте инструкциям по настройке создать новый проект после создания ваш проект будет виден на вашей панели управления back4app, закладывая основу для конфигурации бэкенда шаг 2 – создание схемы вашей базы данных структурирование вашей модели данных для нашего crud приложения вам потребуется несколько коллекций ниже приведены примеры, которые описывают коллекции и поля, необходимые для поддержки операций 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 операциями представляем приложение admin приложение admin от back4app предоставляет интерфейс без кода для управления вашими данными на сервере без усилий его функция перетаскивания позволяет вам выполнять операции crud без проблем активация приложения admin перейдите в меню “дополнительно” на вашей панели управления back4app выберите “admin app” и нажмите “включить admin app ” настройте вашего первого администратора, который также настроит роли, такие как b4aadminuser и системные коллекции включить admin app после активации войдите в приложение admin, чтобы управлять вашими данными панель управления приложением admin выполнение действий crud с приложением admin в интерфейсе вы можете добавить записи используйте опцию “добавить запись” в любой коллекции (например, элементы), чтобы создать новые записи просмотреть и редактировать записи выберите запись, чтобы увидеть ее детали или изменить ее поля удалить записи удалите записи, которые больше не нужны этот интуитивно понятный инструмент улучшает пользовательский опыт, упрощая управление данными шаг 4 – подключение вашего preact фронтенда к back4app с установленным бэкендом пришло время интегрировать ваш preact фронтенд вариант a использование parse sdk установите parse sdk npm install parse настройте parse в вашем проекте preact создайте файл (например, 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; интегрируйте parse в компонент preact например, создайте компонент для получения и отображения элементов // src/components/itemslist js import { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; вариант b использование rest или graphql если sdk parse не подходит, используйте rest или graphql для операций crud например, чтобы получить элементы через rest // sample rest 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('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); интегрируйте эти api вызовы в ваши компоненты preact по мере необходимости шаг 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 only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } разрешения на уровне класса (clp) в панели управления back4app настройте clp для каждой коллекции, чтобы ограничить доступ только для аутентифицированных или авторизованных пользователей шаг 6 – реализация аутентификации пользователей настройка учетных записей пользователей back4app использует класс user от parse для управления аутентификацией в вашем приложении preact управление регистрацией и входом пользователей осуществляется следующим образом // src/components/auth js import { h } from 'preact'; import { usestate } from 'preact/hooks'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user registration successful!'); } catch (error) { alert('registration error ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; аналогичный метод можно использовать для входа и управления сессиями дополнительные функции, такие как социальная аутентификация и восстановление пароля, можно настроить через панель управления back4app шаг 7 – запуск вашего фронтенда preact с помощью веб развертывания функция веб развертывания back4app позволяет вам размещать ваше приложение preact, связывая его с репозиторием github в этой части вы подготовите вашу производственную сборку, зафиксируете ваш код, интегрируетесь с веб развертыванием и развернете ваш сайт 7 1 создайте ваши производственные файлы откройте каталог вашего проекта в терминале запустите команду сборки npm run build это генерирует build папку с оптимизированными статическими ресурсами (html, js, css, изображения) 3\ подтвердите, что build папка включает файл index html и необходимые ресурсы 7 2 организуйте и зафиксируйте ваш исходный код ваш репозиторий должен содержать полный исходный код фронтенда preact пример структуры каталога basic crud app preact 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'; // enter your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; коммит вашего кода в github инициализируйте репозиторий git (если это еще не сделано) git init подготовьте ваши исходные файлы git add зафиксируйте ваши изменения git commit m "initial commit of preact frontend source code" создайте новый репозиторий на github, например, basic crud app preact frontend отправьте ваш код git remote add origin https //github com/your username/basic crud app preact frontend git git push u origin main 7 3 подключение вашего репозитория к веб развертыванию перейдите в раздел развертывания в вашем back4app панели управления, откройте ваш проект ( basic crud app preact ) и выберите web deployment свяжите свою учетную запись github, как указано, чтобы back4app мог получить доступ к вашему репозиторию выберите репозиторий (например, basic crud app preact frontend ) и выберите соответствующую ветку (например, main ) 7 4 конфигурация развертывания укажите дополнительные настройки команда сборки если папка build отсутствует, установите команду сборки (например, npm run build ) back4app выполнит эту команду во время развертывания выходной каталог определите выходную папку как build так, чтобы back4app мог идентифицировать статические файлы переменные окружения добавьте любые необходимые ключи api или настройки, требуемые вашим приложением 7 5 контейнеризация вашего приложения preact с помощью docker если вы предпочитаете docker, включите dockerfile в ваш репозиторий, аналогичный # use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files copy package json / \# install dependencies run npm install \# copy the source code copy \# build the app 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, по которому размещено ваше приложение 7 7 проверка вашего развертывания посетите предоставленный url, чтобы увидеть ваш живой сайт проверьте все функции, чтобы убедиться, что каждая функция, включая маршруты и ресурсы, загружается правильно если возникнут проблемы, проверьте журналы консоли браузера и журналы развертывания в back4app шаг 8 – завершение и будущие направления отличная работа! вы успешно разработали полное crud приложение с использованием preact и back4app вы создали проект под названием basic crud app preact , определили надежные коллекции базы данных и использовали admin app для эффективного управления данными затем вы подключили свой фронтенд на preact к бэкенду и реализовали строгие контроль доступа что дальше? улучшите свое приложение preact дополнительными функциями, такими как детализированные представления, возможности поиска и обновления в реальном времени внедрите более сложную логику бэкенда, такую как облачные функции или интеграции с api сторонних разработчиков консультируйтесь с документацией back4app https //www back4app com/docs и другими ресурсами для более глубокого понимания оптимизации и пользовательских конфигураций следуя этому руководству, вы приобрели навыки для создания масштабируемого, безопасного crud бэкенда для ваших приложений preact с использованием back4app удачного кодирования и изучения новых функций!