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

в этом учебном пособии вы создадите приложение список дел, используя vue, и подключите его к управляемому бэкенд сервису этот гид идеально подходит для вас, если вы хотите освоить основные операции crud (создание, чтение, обновление, удаление) и создать интуитивно понятный пользовательский интерфейс к концу урока ваше приложение будет полностью взаимодействовать с бэкендом, работающим на back4app разработка полнофункционального приложения может включать в себя сложные настройки бэкенда, управление базами данных и аутентификацию пользователей чтобы вы могли сосредоточиться на создании выдающегося фронтенда на vue, мы будем использовать back4app для легкого управления бэкендом back4app предоставляет готовую к использованию базу данных, аутентификацию, cloud code для пользовательской серверной логики и sdk для интеграции с вашим приложением это позволяет вам разрабатывать масштабируемые приложения без хлопот по обслуживанию серверов основные выводы следуя этому учебному пособию, вы настроите современный проект vue, используя стандартные инструменты отрасли бесшовно интегрируете бэкенд сервис для обработки данных вашего приложения реализуете основные операции crud для динамического списка дел развернете ваше полностью функциональное приложение через контейнеризованные рабочие процессы на back4app предварительные требования перед тем как начать, убедитесь, что у вас есть node js и npm установлены на вашем компьютере проверьте установки с помощью node v и npm v базовые знания vue , включая компоненты, реактивные данные и обработку событий знание composition api vue 3 будет полезным аккаунт back4app для управления вашими бэкенд сервисами зарегистрируйтесь на back4app https //www back4app com/ если вы еще этого не сделали с этими условиями вы готовы настроить ваш проект настройка проекта начните с подготовки вашей локальной среды разработки и инициализации вашего проекта vue с помощью vite для быстрой и современной сборки убедитесь, что у вас установлен node js (lts версия) если нет, скачайте его с nodejs org https //nodejs org/ создайте ваш проект vue, выполнив npm create vite\@latest todo app 3 перейдите в каталог вашего проекта cd todo app 4 установите зависимости npm install 5 запустите сервер разработки, чтобы убедиться, что все работает npm run dev откройте предоставленный url в вашем браузере когда ваш фронтенд на vue готов, следующим шагом будет настройка вашего бэкенда на back4app создание бэкенда для задач back4app предлагает полностью управляемый бэкенд сервис на базе parse , с nosql базой данных, аутентификацией пользователей, cloud code и автоматической генерацией api следуйте этим шагам, чтобы создать бэкенд войдите в вашу панель управления back4app https //www back4app com/ и нажмите "создать новое приложение " назовите ваше приложение (например, todoapp ) и выберите nodejs/parse в качестве типа бэкенда перейдите в "база данных" > "браузер" , нажмите "создать класс" , и выберите "пользовательский" назовите класс task и установите разрешения для публичного чтения и записи (вы можете уточнить их позже) в классе task добавьте следующие поля title (строка) – заголовок задачи description (строка) – подробности о задаче completed (булевый) – статус выполнения задачи duedate (дата) – когда задача должна быть выполнена нажмите "сохранить" для создания схемы интеграция back4app с vue вы будете использовать parse javascript sdk для связи между вашим фронтендом vue и бэкендом back4app установите parse sdk npm install parse настройте sdk, отредактировав src/main js импортируйте sdk и инициализируйте его с вашим application id и javascript key из панели управления back4app (находится в разделе app settings > security & keys ) import { createapp } from 'vue'; import app from ' /app vue'; 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; createapp(app) mount('#app'); теперь, когда ваш бэкенд подключен, вы можете создать интерфейс списка дел и интегрировать операции crud разработка фронтенда ваше приложение vue будет состоять из компонентов для добавления, отображения, обновления и удаления задач вы будете использовать реактивность vue для управления состоянием и обеспечения плавных обновлений структурирование ваших компонентов создайте components папку внутри src для размещения ваших компонентов vue mkdir src/components touch src/components/taskform vue src/components/tasklist vue src/components/taskitem vue taskform vue этот компонент обрабатывает добавление новых задач он использует контролируемую форму для захвата ввода пользователя \<template> \<form @submit prevent="handlesubmit"> \<input type="text" placeholder="task title" v model="title" required /> \<input type="text" placeholder="description" v model="description" required /> \<button type="submit">add task\</button> \</form> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskform', props \['fetchtasks'], data() { return { title '', description '' }; }, methods { async handlesubmit() { try { const task = parse object extend('task'); const task = new task(); task set('title', this title); task set('description', this description); task set('completed', false); await task save(); this fetchtasks(); this title = ''; this description = ''; } catch (error) { console error('error adding task ', error); } } } }; \</script> tasklist vue этот компонент отображает список задач и интегрирует действия с задачами \<template> \<div> \<p v if="!tasks length">no tasks available\</p> \<taskitem v for="task in tasks" \ key="task id" \ task="task" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import taskitem from ' /taskitem vue'; export default { name 'tasklist', components { taskitem }, props \['tasks', 'fetchtasks'] }; \</script> taskitem vue этот компонент представляет собой отдельную задачу и включает действия для отметки как завершенной или удаления \<template> \<div \ class="\['task item', { completed task completed }]"> \<div> \<h3>{{ task title }}\</h3> \<p>{{ task description }}\</p> \</div> \<div> \<button @click="handlecomplete"> {{ task completed ? 'undo' 'complete' }} \</button> \<button @click="handledelete">delete\</button> \</div> \</div> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskitem', props \['task', 'fetchtasks'], methods { async handlecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(this task id); tasktoupdate set('completed', !this task completed); await tasktoupdate save(); this fetchtasks(); } catch (error) { console error('error updating task ', error); } }, async handledelete() { try { const query = new parse query('task'); const tasktodelete = await query get(this task id); await tasktodelete destroy(); this fetchtasks(); } catch (error) { console error('error deleting task ', error); } } } }; \</script> управление состоянием в app vue в вашем основном компоненте вы будете управлять списком задач, используя реактивные данные vue и хуки жизненного цикла \<template> \<div class="container"> \<h1>to do list\</h1> \<taskform \ fetchtasks="fetchtasks" /> \<tasklist \ tasks="tasks" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import { ref, onmounted } from 'vue'; import parse from 'parse/dist/parse min js'; import taskform from ' /components/taskform vue'; import tasklist from ' /components/tasklist vue'; export default { name 'app', components { taskform, tasklist }, setup() { const tasks = ref(\[]); const fetchtasks = async () => { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks value = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } }; onmounted(fetchtasks); return { tasks, fetchtasks }; } }; \</script> стилизация приложения создайте файл styles css в src для добавления базовой стилизации 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; } 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; } } импортируйте таблицу стилей в main js import ' /styles css'; развертывание фронтенда на back4app web deployment back4app web deployment позволяет вам контейнеризировать ваше vue приложение для продакшена с помощью docker настройка vite для продакшена настройте vite config js для правильной установки базового пути для контейнеризованной среды import { defineconfig } from 'vite'; import vue from '@vitejs/plugin vue'; export default defineconfig({ plugins \[vue()], base ' /', }); сгенерируйте сборку для продакшена npm run build создание dockerfile создайте dockerfile в корневом каталоге # stage 1 build the vue app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using nginx from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] тестирование контейнера docker локально соберите свой образ docker docker build t todo frontend запустите контейнер docker run p 8080 80 todo frontend перейдите по адресу http //localhost 8080 чтобы убедиться, что ваше приложение vue обслуживается правильно развертывание на back4app инициализируйте репозиторий git, добавьте свои файлы и сделайте коммит 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 для доступа к вашему репозиторию и выберите dockerfile deployment подтвердите настройки сборки и нажмите "развернуть" чтобы запустить первую сборку мониторинг вашего развертывания после развертывания используйте панель управления back4app для просмотр логов для отладки мониторинг использования ресурсов и перезапусков контейнеров повторное развертывание на новых коммитах с помощью "trigger build" опции настройка пользовательских доменов при необходимости получите доступ к живому приложению по адресу https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ тестирование и отладка после развертывания убедитесь, что ваш фронтенд на vue правильно взаимодействует с бэкендом back4app проверка api вызовов откройте инструменты разработчика вашего браузера (f12 → сеть), чтобы проверить запросы api добавление и получение задач используйте интерфейс приложения для добавления задач и проверьте браузер базы данных back4app crud операции проверьте выполнение и удаление задач, затем подтвердите изменения на сервере краевые случаи проверьте вводимые данные формы и смоделируйте медленные сетевые условия (используя инструменты разработчика chrome), чтобы оценить производительность устранение распространенных проблем ошибки cors обновите разрешенные заголовки и домены в back4app (панель управления > настройки приложения > безопасность и ключи), чтобы включить ваш url фронтенда ошибки аутентификации (401) убедитесь, что ваш идентификатор приложения и ключ javascript правильные проблемы с развертыванием на сервере проверьте журналы контейнера в панели управления back4app и перезапустите контейнер, если это необходимо лучшие практики использования back4app с vue чтобы оптимизировать ваше приложение эффективные запросы данных используйте пакетные запросы для нескольких операций const tasks = \[task1, task2, task3]; parse object saveall(tasks); оптимизация запросов запрашивайте только необходимые поля query select('title', 'completed'); переменные окружения храните конфиденциальные ключи в файле env vite parse app id=your app id vite parse js key=your js key безопасность используйте acl для ограничения доступа task setacl(new parse acl(parse user current())); облачный код перенесите сложную логику на серверные функции, чтобы уменьшить воздействие api заключение вы успешно создали полнофункциональное приложение to do list, настроив фронтенд на vue, интегрировав его с бэкендом back4app и развернув его через контейнеризованные рабочие процессы этот учебник продемонстрировал упрощенный путь от локальной разработки до облачного развертывания, обеспечивая плавное взаимодействие между вашим интерфейсом vue и бэкенд сервисами смотрим в будущее, рассмотрите улучшения, такие как расширенное управление пользователями, обновления в реальном времени и интеграция сторонних сервисов для получения дополнительной информации посетите документация back4app https //www back4app com/docs и изучите ресурсы сообщества