Как создать фронтенд на Preact и подключить его к бэкенду?

в этом учебном пособии вы создадите приложение список дел, используя preact, и подключите его к надежному бэкенду, предоставляемому back4app этот гид идеально подходит для начала, так как охватывает основные операции crud (создание, чтение, обновление, удаление) и проводит вас через создание чистого, функционального пользовательского интерфейса к концу вы получите полностью рабочее приложение, которое покажет вам, как интегрировать управляемый бэкенд, используя preact для легкого и быстрого фронтенда создание полнофункционального приложения может быть сложным, особенно когда дело касается настройки бэкенда, управления базами данных, аутентификации и развертывания чтобы упростить эти задачи, мы используем back4app — масштабируемое backend as a service (baas) решение, чтобы вы могли сосредоточиться на разработке своего фронтенда, пока он обрабатывает хостинг, базы данных и api back4app предоставляет комплексные услуги бэкенда, включая готовую к использованию базу данных, аутентификацию, cloud code для серверной логики и sdk для плавной интеграции он также поддерживает контейнеризированные развертывания, что делает его отличным выбором для современных полнофункциональных приложений с этими ресурсами вы можете быстро разрабатывать и развертывать приложения, не обременяя себя управлением серверной инфраструктурой основные выводы следуя этому руководству, вы научитесь инициализировать современный проект preact с использованием vite интегрировать серверную службу для управления данными вашего приложения реализовать основные операции crud для интерактивного пользовательского интерфейса развернуть полностью функциональное приложение to do list с использованием контейнеризованных рабочих процессов на back4app предварительные требования перед началом убедитесь, что у вас есть следующее node js и npm установите последнюю lts версию node js с nodejs org https //nodejs org/ и проверьте, выполнив node v и npm v в вашем терминале базовые знания preact ожидается знакомство с функциональными компонентами, хуками (такими как usestate и useeffect ), а также синтаксисом jsx если вы новичок в preact, рассмотрите возможность предварительного изучения его основ аккаунт back4app зарегистрируйтесь на back4app https //www back4app com/ для настройки и управления вашими серверными службами с этими предварительными требованиями вы готовы настроить ваш проект и начать разработку настройка проекта начните с настройки вашей локальной среды разработки и инициализации вашего проекта preact с использованием vite для упрощенного процесса разработки подтвердите, что node js (lts версия) установлен если необходимо, загрузите и установите его с nodejs org https //nodejs org/ проверьте, выполнив node v npm v инициализируйте ваш проект preact с использованием vite выполните следующую команду в вашем терминале (замените todo app на предпочитаемое имя проекта) npm create vite\@latest todo app template preact перейдите в каталог вашего проекта cd todo app установите необходимые зависимости npm install запустите сервер разработки, чтобы проверить вашу настройку npm run dev ваше приложение preact теперь должно работать локально откройте предоставленный url в вашем браузере, чтобы подтвердить далее вы настроите ваш бэкенд на back4app для управления хранением данных и взаимодействиями с api создание бэкенда todo back4app предлагает полностью управляемый бэкенд сервис на базе parse , который предоставляет nosql базу данных, аутентификацию, cloud code и автоматически сгенерированные api из коробки этот раздел проведет вас через создание task модели данных для хранения ваших задач и подключения ее к вашему фронтенду на preact настройка вашего бэкенд приложения войдите в вашу панель управления back4app https //www back4app com/ и нажмите "создать новое приложение " назовите ваше приложение (например, todopreactapp ) и выберите nodejs/parse в качестве типа бэкенда после создания приложения перейдите в "база данных" > "обозреватель" нажмите "создать класс" и выберите "пользовательский" назовите класс task и установите разрешения на уровне класса для разрешения публичного чтения и записи (вы можете изменить эти настройки позже) в классе task добавьте следующие поля title (строка) – заголовок задачи description (строка) – подробности о задаче completed (булевый) – указывает, завершена ли задача duedate (дата) – срок выполнения задачи нажмите "сохранить" для завершения настройки вашей схемы интеграция back4app с preact интегрируйте back4app в ваш проект preact, используя parse javascript sdk установите sdk через npm npm install parse настройте sdk, инициализировав его с вашим application id и javascript key получите эти учетные данные на вашей панели управления back4app в разделе app settings > security & keys в вашем src/main jsx , импортируйте и настройте parse следующим образом import { render } from 'preact' import ' /index css' import app from ' /app jsx' import parse from 'parse/dist/parse min js' const parse app id = "your application id"; const parse js key = "your javascript key"; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; render(\<app />, document getelementbyid('app')) с подключенным бэкендом вы готовы создать интерфейс списка дел в preact и реализовать операции crud разработка фронтенда с preact теперь, когда ваш бэкенд настроен, создайте пользовательский интерфейс для вашего приложения список дел, используя preact вы создадите компоненты для добавления, отображения, обновления и удаления задач, управляя состоянием с помощью хуков организация ваших компонентов ваше приложение будет включать следующие ключевые компоненты taskform jsx – управляет добавлением новых задач tasklist jsx – отображает все задачи и предоставляет элементы управления для их завершения или удаления taskitem jsx – представляет отдельную задачу с действиями для переключения завершения или удаления задачи создайте components папку внутри src и добавьте эти файлы mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx управление состоянием с помощью хуков используйте хуки preact ( usestate и useeffect ) для управления состоянием и побочными эффектами начните с настройки состояния в app jsx import { usestate, useeffect } from "preact/hooks"; import taskform from " /components/taskform jsx"; import tasklist from " /components/tasklist jsx"; import parse from "parse/dist/parse min js"; function app() { const \[tasks, settasks] = usestate(\[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map(task => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; useeffect(() => { fetchtasks(); }, \[]); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; создание компонента формы задач в taskform jsx , создайте управляемую форму для добавления задач используйте usestate для управления значениями ввода и отправки данных в back4app import { usestate } from "preact/hooks"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title); task set("description", description); task set("completed", false); await task save(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} oninput={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} oninput={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; отображение списка задач в tasklist jsx , отобразите список задач, пройдя по массиву задач и используя компонент taskitem import taskitem from " /taskitem jsx"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; создание компонента задачи в taskitem jsx , создайте компонент, который позволяет вам отметить задачу как выполненную или удалить её import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div class={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; стилизация вашего приложения добавьте следующие стили в файл index css в папке src / container styling / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } container p { font size 1rem; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } импортируйте этот css в ваш src/main jsx import " /index css"; завершение пользовательского интерфейса ваше приложение preact to do list теперь имеет динамичный интерфейс, интегрированный с back4app и с пользовательскими стилями приложение позволяет вам добавлять, отображать, обновлять и удалять задачи, обеспечивая эффективное взаимодействие между фронтендом и бэкендом далее вы развернете ваше приложение preact, используя платформу веб развертывания back4app развертывание фронтенда на back4app web deployment back4app web deployment предоставляет полностью управляемую, контейнеризованную среду для развертывания ваших приложений с развертываниями на основе docker вы можете упаковать свой фронтенд на preact и развернуть его без усилий настройка vite для продакшена проекты preact, созданные с помощью vite, по умолчанию работают в режиме разработки для продакшена создайте статическую версию и обслуживайте ее с помощью легковесного веб сервера, такого как nginx обновите ваш vite config js чтобы установить правильный базовый путь import { defineconfig } from 'vite'; import preact from '@preact/preset vite'; export default defineconfig({ plugins \[preact()], base ' /', // ensures asset paths are correct in a containerized environment }); сгенерируйте файлы, готовые к продакшену npm run build создание dockerfile для вашего приложения создайте dockerfile в корневом каталоге, чтобы определить ваш контейнер # build stage using a lightweight node js image from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# production stage using nginx to serve static files from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] тестирование контейнера локально перед развертыванием соберите и протестируйте ваш docker контейнер локально docker build t todo preact frontend запустите контейнер docker run p 8080 80 todo preact frontend посетите http //localhost 8080 в вашем браузере, чтобы подтвердить, что ваше приложение работает правильно публикация на github и развертывание через back4app запушьте ваш проект на github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main затем разверните с помощью back4app web deployment войдите в back4app web deployment https //www back4app com/containers нажмите "создать новое приложение" , укажите имя и выберите github repository авторизуйте back4app для доступа к вашему репозиторию и выберите репозиторий todo preact выберите dockerfile deployment и подтвердите настройки сборки нажмите "развернуть" для начала процесса сборки мониторинг и управление развертываниями после развертывания используйте панель управления back4app для просмотра журналов для устранения неполадок мониторинга производительности контейнера и использования ресурсов запуска переразвертывания при новых коммитах настройки пользовательских доменов при необходимости тестирование и отладка вашего приложения после развертывания тщательно протестируйте ваше приложение preact проверьте подключение к api откройте консоль разработчика вашего браузера (f12 → сеть), чтобы отслеживать вызовы api во время выполнения задач добавление и получение задач используйте интерфейс для добавления задач, затем обновите страницу, чтобы проверить сохранение в браузере базы данных back4app тестирование операций crud убедитесь, что завершение задач и удаление правильно отражаются на сервере обработка крайних случаев проверьте вводимые данные формы и смоделируйте медленные сетевые условия с помощью инструментов разработчика если вы столкнулись с проблемами, просмотрите журналы back4app или проверьте конфигурацию вашего api лучшие практики использования сервисов back4app улучшите производительность и безопасность вашего приложения, следуя этим лучшим практикам оптимизируйте вызовы api используйте пакетные запросы для нескольких операций и выбирайте только необходимые поля в ваших запросах защита конфиденциальных данных храните учетные данные, такие как идентификатор приложения и ключ javascript, в переменных окружения с vite создайте env файл vite parse app id=your app id vite parse js key=your js key включите автоматическое масштабирование активируйте автоматическое масштабирование в развертывании back4app для управления высоким трафиком улучшите безопасность ограничьте разрешения на уровне классов (clp), чтобы контролировать изменения данных, и настройте acl по мере необходимости используйте облачный код перенесите сложную логику в облачный код для повышения производительности и уменьшения воздействия api заключение теперь вы создали полнофункциональное приложение to do list, используя preact для фронтенда и надежные бэкенд сервисы back4app этот учебник провел вас через инициализацию проекта preact, интеграцию parse sdk и развертывание вашего приложения с использованием контейнеризованных рабочих процессов на back4app по мере продолжения разработки рассмотрите возможность добавления таких функций, как расширенная аутентификация пользователей, обновления в реальном времени и интеграции с третьими сторонами для получения дополнительных деталей и поддержки обратитесь к документация back4app https //www back4app com/docs