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

в этом руководстве вы создадите приложение список дел, используя blitz js, и подключите его к управляемой серверной части на back4app этот пошаговый учебник предназначен для того, чтобы помочь вам реализовать основные операции crud и создать динамический пользовательский интерфейс с использованием blitz js создание полнофункционального приложения может быть сложным, если вам нужно управлять как фронтенд, так и бэкенд системами используя back4app, вы можете упростить управление серверной частью через масштабируемый baas , позволяя вам сосредоточиться на создании привлекательного интерфейса blitz js back4app предоставляет набор серверных услуг, включая готовую к использованию nosql базу данных, аутентификацию, облачные функции и api конечные точки эти функции позволяют вам быстро разрабатывать и развертывать ваше приложение без бремени обслуживания сервера основные выводы к концу этого учебника вы сможете настроить современный проект blitz js, используя стандартные инструменты отрасли интегрировать серверную часть back4app с вашим приложением blitz js, используя parse sdk реализовать операции crud для управления вашим списком дел контейнеризировать и развернуть ваше приложение blitz js, используя веб развертывание back4app предварительные требования перед тем как начать, убедитесь, что у вас есть следующее node js и npm установлены на вашем компьютере проверьте установку с помощью node v и npm v в вашем терминале базовые знания blitz js , включая маршрутизацию, запросы и мутации знание react будет полезным, так как blitz js строится на его основе аккаунт back4app для настройки и управления вашими бэкенд сервисами зарегистрируйтесь на back4app https //www back4app com/ если вы еще этого не сделали с выполнением этих предварительных условий вы готовы инициализировать ваш проект blitz js и интегрировать его с надежным бэкендом настройка проекта начните с настройки вашего приложения blitz js blitz js предоставляет упрощенный опыт разработки, сочетая мощь next js с фреймворком полного стека запустите следующую команду, чтобы создать новый проект blitz js замените todo app на выбранное вами имя проекта npx blitz new todo app перейдите в каталог вашего проекта cd todo app запустите ваш сервер разработки, чтобы убедиться, что все настроено правильно npm run dev перейдите по url, отображаемому в вашем терминале, чтобы подтвердить, что ваше приложение blitz js работает настройка бэкенда todo на back4app back4app предлагает управляемый бэкенд parse, который упрощает управление данными для вашего приложения в этом разделе вы создадите модель данных для хранения задач вашего списка дел создание вашего бэкенд приложения войдите в свою панель управления back4app https //www back4app com/ и нажмите "создать новое приложение " укажите имя для вашего приложения (например, todoblitzapp ) и выберите nodejs/parse в качестве типа бэкенда в разделе "база данных" > "обозреватель" нажмите "создать класс" и выберите "пользовательский " назовите класс task и установите разрешения на уровне класса, чтобы разрешить публичное чтение и запись (вы можете изменить эти настройки позже) добавьте следующие поля в класс task title (строка) – название задачи description (строка) – подробности о задаче completed (булевый) – завершена ли задача duedate (дата) – срок выполнения задачи нажмите "сохранить" для создания схемы интеграция back4app с blitz js чтобы подключить ваше приложение blitz js к back4app, установите parse javascript sdk npm install parse затем настройте parse sdk в вашем проекте blitz js создайте новый файл конфигурации (например, src/parseclient js ) и инициализируйте parse, как показано ниже замените заполнители вашими учетными данными back4app из настройки приложения > безопасность и ключи // src/parseclient js 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; export default parse; теперь вы можете импортировать эту конфигурацию в ваши запросы и мутации blitz js, чтобы взаимодействовать с вашим бэкендом создание фронтенда с blitz js с настроенным бэкендом пришло время создать интерфейс списка дел в blitz js вы будете использовать встроенные запросы и мутации blitz js для выполнения операций crud структурирование ваших страниц и api вызовов в blitz js страницы находятся в директории src/pages откройте src/pages/index tsx и добавьте следующий код для настройки страницы, запроса задач из back4app и определения мутаций для добавления, переключения и удаления задач // src/pages/index tsx import layout from "src/core/layouts/layout" import { blitzpage } from "@blitzjs/next" import { usequery } from "@tanstack/react query" import parse from " /parseclient" import { usestate } from "react" const fetchtasks = async () => { const task = parse object extend("task") const query = new parse query(task) const results = await query find() return results map((task) => ({ id task id, task tojson() })) } const addtask = async (title string, description string) => { 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() } const toggletask = async (id string, currentstatus boolean) => { const task = parse object extend("task") const query = new parse query(task) const task = await query get(id) task set("completed", !currentstatus) await task save() } const deletetask = async (id string) => { const task = parse object extend("task") const query = new parse query(task) const task = await query get(id) await task destroy() } const home blitzpage = () => { const { data tasks, refetch, isloading } = usequery(\["tasks"], fetchtasks) const \[title, settitle] = usestate("") const \[description, setdescription] = usestate("") if (isloading) return \<div>loading \</div> return ( \<layout title="home"> \<div classname="container"> \<h1>to do list\</h1> \<form onsubmit={async (e) => { e preventdefault() await addtask(title, description) settitle("") setdescription("") await refetch() }} classname="form" \> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> \<div classname="tasks"> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<div key={task id} classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={async () => { await toggletask(task id, task completed) await refetch() }} \> {task completed ? "undo" "complete"} \</button> \<button onclick={async () => { await deletetask(task id) await refetch() }} \> delete \</button> \</div> )) )} \</div> \</div> \</layout> ) } export default home эта страница использует хуки запросов tanstack для получения задач и обработки действий пользователя, обеспечивая бесшовную интеграцию с вашим бэкендом back4app чтобы убедиться, что usequery работает, вам нужно обернуть ваше приложение в queryclientprovider вы делаете это в файле src/pages/ app tsx замените код в файле src/pages/ app tsx на блок кода ниже // src/pages/ app tsx import { errorfallbackprops, errorcomponent, errorboundary, appprops } from "@blitzjs/next" import react from "react" import { withblitz } from "src/blitz client" import { queryclient, queryclientprovider } from "@tanstack/react query" const queryclient = new queryclient() function rooterrorfallback({ error } errorfallbackprops) { return ( \<errorcomponent statuscode={(error as any)? statuscode || 400} title={error message || error name} /> ) } function myapp({ component, pageprops } appprops) { const getlayout = component getlayout || ((page) => page) return ( \<queryclientprovider client={queryclient}> \<errorboundary fallbackcomponent={rooterrorfallback}> {getlayout(\<component { pageprops} />)} \</errorboundary> \</queryclientprovider> ) } export default withblitz(myapp) добавление глобальных стилей чтобы определить базовые стили вашего приложения, добавьте блок кода в файл css по адресу src/styles/globals css / src/styles/globals css / 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; 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; } tasks p { font size 1rem; } task item { display flex; flex direction column; align items 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; } } импортируйте ваши глобальные стили, добавив следующую строку в src/pages/ app tsx (или в файл вашего пользовательского компонента app) / src/pages/ app tsx / import " /styles/globals css"; ваше приложение blitz js теперь отображает полностью функциональный интерфейс списка дел, интегрированный с back4app контейнеризация и развертывание вашего приложения blitz js на back4app развертывание в вебе back4app предоставляет контейнеризированную среду, которая упрощает процесс развертывания вы упакуете ваше приложение blitz js в контейнер docker и развернете его без проблем подготовка вашего приложения blitz js к производству сначала соберите ваше приложение blitz js для продакшена blitz build создание dockerfile создайте dockerfile в корневом каталоге вашего проекта со следующим содержимым from node 18 arg database url arg port=3000 env database url ${database url} workdir /usr/src/app copy package json / run npm install run npm install g blitz copy run blitz build expose 3000 cmd \["blitz", "start", " p", "3000"] этот dockerfile собирает ваш проект blitz js и подготавливает образ для продакшена, используя легковесный node js runtime после создания вашего dockerfile создайте файл dockerignore и скопируйте в него содержимое вашего файла gitignore сборка и тестирование вашего docker контейнера соберите docker образ локально docker build t todo blitz frontend запустите контейнер для его тестирования docker run p 3000 3000 todo blitz frontend посетите http //localhost 3000 в вашем браузере, чтобы убедиться, что ваше приложение blitz js работает правильно развертывание вашего приложения через back4app web deployment отправьте ваш проект на 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 https //www back4app com/containers и выполните следующие шаги нажмите "создать новое приложение" и введите данные вашего проекта выберите github repository и авторизуйте back4app выберите ваш todo blitz репозиторий выберите dockerfile deployment и проверьте настройки сборки нажмите "развернуть" для начала процесса развертывания после развертывания используйте панель управления back4app для мониторинга журналов, управления сборками и настройки пользовательских доменов, если это необходимо тестирование и отладка вашего приложения после развертывания убедитесь, что ваше приложение работает как ожидалось, выполнив следующие действия проверка подключения к api используйте инструменты разработчика вашего браузера, чтобы убедиться, что запросы api на добавление, переключение и удаление задач успешны проверка сохранности данных добавьте задачи через интерфейс и обновите страницу, чтобы подтвердить, что они сохранены в базе данных back4app тестирование операций crud убедитесь, что задачи могут быть переключены и удалены, и проверьте консоль на наличие ошибок обработка крайних случаев попробуйте отправить недопустимые данные, чтобы протестировать надежность ваших проверок лучшие практики и советы по оптимизации рассмотрите следующие рекомендации для безопасного и эффективного приложения оптимизация запросов к api используйте пакетную обработку и ограничьте запрашиваемые поля, чтобы уменьшить сетевые накладные расходы безопасные переменные окружения храните конфиденциальные учетные данные (id приложения и ключ javascript) в безопасном env файле реализация контроля доступа используйте динамические acl, чтобы гарантировать, что только авторизованные пользователи могут изменять данные использование облачного кода перенесите сложную логику в облачный код back4app для повышения производительности и безопасности заключение теперь вы создали полнофункциональное приложение to do list, используя blitz js, интегрированное с бэкендом back4app этот учебник провел вас через инициализацию проекта, интеграцию бэкенда и контейнерное развертывание по мере продвижения вперед, рассмотрите возможность расширения вашего приложения такими функциями, как расширенное управление пользователями, обновления в реальном времени и интеграции с третьими сторонами для получения дополнительных сведений изучите документацию back4app https //www back4app com/docs и ресурсы blitz js