Как создать бэкэнд для Vue.js?
Эта статья представляет собой исчерпывающее руководство по созданию бэкенда для Vue.js. В ней будет представлен обзор Vue.js, преимущества и ограничения, доступные методы развертывания, а также пошаговое руководство по созданию и размещению приложения Vue.js.
Vue – это JavaScript-фреймворк для создания гибких и производительных пользовательских интерфейсов (UI) и одностраничных приложений (SPA).
Vue известен своей прогрессивной природой, что означает, что его можно постепенно внедрять в существующие проекты. Vue также имеет декларативный синтаксис, который позволяет вам описать желаемое состояние пользовательского интерфейса и позволить Vue управлять логикой и обновлениями.
Помимо прогрессивной природы и декларативного синтаксиса, Vue использует виртуальный DOM, который является облегченным представлением реального DOM. Это помогает ему эффективно рендерить и обновлять пользовательский интерфейс.
При разработке приложений Vue интеграция платформы Backend as a Service (BaaS), такой как Back4app, может предложить ряд преимуществ, таких как хранение данных и аутентификация пользователей, что может значительно упростить разработку и сэкономить время. В этой статье вы познакомитесь с Vue и узнаете, как создать приложение на Vue с помощью Back4app.
Contents
Преимущества Vue
Vue продолжает набирать популярность благодаря своим многочисленным преимуществам, среди которых можно выделить следующие.
Легкая кривая обучения
Vue имеет относительно легкую кривую обучения, что делает его подходящим для разработчиков разного уровня подготовки. Синтаксис шаблонов основан на привычном HTML, что позволяет разработчикам быстро освоить основы и работать с Vue без проблем.
Благодаря четкому и последовательному дизайну API, Vue упрощает процесс создания приложений, предоставляя логичные и интуитивно понятные шаблоны для создания компонентов, использования директив и применения крючков жизненного цикла.
Чтобы еще больше облегчить процесс обучения, Vue предлагает исчерпывающую документацию, наполненную хорошо написанными объяснениями и практическими примерами. Более того, поддерживающее сообщество Vue с готовностью предоставляет помощь, сотрудничество и множество обучающих ресурсов через форумы и онлайн-сообщества.
Легкий каркас
Vue имеет небольшой размер файла: основная библиотека занимает всего около 20 КБ после минификации и gzipped. Небольшой размер Vue позволяет ускорить начальную загрузку, повышая производительность и улучшая пользовательский опыт.
Кроме того, благодаря модульной конструкции вы можете выборочно импортировать только необходимые функции, что еще больше сокращает размер файла и оптимизирует производительность.
Архитектура на основе компонентов
В Vue приложения создаются путем создания многократно используемых и самодостаточных компонентов. Компоненты в Vue – это самодостаточные блоки, в которых заключена логика HTML, CSS и JavaScript, что упрощает управление ими и их понимание. Их можно повторно использовать во всех приложениях, что экономит время и силы на разработку.
Архитектура, основанная на компонентах, позволяет создавать компоненты один раз и повторно использовать их во всем приложении или в нескольких проектах. Такая возможность повторного использования уменьшает количество избыточного кода и способствует повышению модульности кода.
Каждый компонент можно разрабатывать, тестировать и обновлять независимо, не затрагивая другие части приложения. Это, в свою очередь, упрощает отладку, рефакторинг и добавление новых функций в приложение.
Реактивная система данных
Реактивные данные – это данные, которые автоматически изменяются при изменении базового значения. Vue достигает реактивности, оборачивая реактивные объекты в прокси. Это позволяет Vue отслеживать свойства, к которым осуществляется доступ.
При обращении к свойству Vue добавляет его в список зависимостей. При изменении значения зависимости Vue автоматически обновляет представление.
Реактивная система данных Vue выгодна тем, что вам не нужно вручную обновлять представление при изменении данных, поскольку Vue делает это автоматически. Это облегчает написание декларативного кода и позволяет сосредоточиться на описании желаемого результата, а не на шагах, необходимых для его достижения.
Ограничения Vue
Хотя Vue обладает множеством преимуществ, необходимо учитывать и недостатки разработки веб-приложений с помощью Vue. Среди этих недостатков можно назвать следующие.
Меньшая экосистема
Vue имеет меньшую экосистему по сравнению с другими фронтенд-фреймворками, такими как Angular и React. Меньшая экосистема Vue означает, что для него может быть доступно не так много библиотек и инструментов, как для Angular и React.
Из-за такой небольшой экосистемы Vue оказывается в невыгодном положении при разработке больших сложных приложений, требующих обширных библиотек и инструментов. Это приводит к тому, что разработчикам часто приходится создавать собственные решения под конкретные требования, поскольку уже готовые решения либо ограничены, либо не поддерживаются широко.
Ограниченная корпоративная поддержка
В отличие от React и Angular, Vue имеет ограниченную корпоративную поддержку. В то время как Angular и React поддерживаются Google и Facebook соответственно, Vue – это проект с открытым исходным кодом и небольшой командой сопровождающих.
Такая ограниченная корпоративная поддержка может стать недостатком с точки зрения разработки новых функций, исправления ошибок и обновления безопасности. Кроме того, это вызывает опасения у организаций, отдающих предпочтение фреймворкам с надежной корпоративной поддержкой и стабильностью для долгосрочных проектов.
Создание бэкенда для приложения Vue
Внутренняя часть приложения Vue отвечает за хранение данных, аутентификацию, интеграцию с API и логические задачи на стороне сервера. Она служит основой для функциональности приложения, облегчая взаимодействие между фронтендом и внешними сервисами или базами данных.
При создании задней части приложения Vue можно использовать несколько вариантов, включая:
Традиционные технологии на стороне сервера
Традиционные бэкенд-фреймворки, такие как Laravel (PHP), Ruby on Rails, Node.js и ASP.NET (C#), предлагают комплексные решения для создания бэкенда приложения Vue.
Эти фреймворки имеют зрелые и устоявшиеся позиции, большие сообщества и обширную документацию, что обеспечивает стабильность и проверенные практики для разработки масштабируемых и безопасных приложений.
Они предоставляют готовые компоненты, генераторы кода и инструменты для создания лесов, которые ускоряют разработку, выполняя общие задачи бэкенда, позволяя вам сосредоточиться на создании специфических функций приложения.
Кроме того, традиционные фреймворки предлагают надежные инструменты объектно-реляционного отображения (ORM), упрощающие работу с базами данных и обеспечивающие целостность данных с помощью объектно-ориентированного кода.
Однако традиционные бэкенд-фреймворки могут требовать больше настроек и конфигураций по сравнению с другими вариантами, что может оказаться сложным для новичков или разработчиков с ограниченным опытом работы с бэкендом. Кроме того, кривая обучения для этих фреймворков может быть более крутой из-за их обширных наборов функций и условностей.
Backend-as-a-Service (BaaS)
Платформы Backend-as-a-Service (BaaS), такие как Back4app, предлагают удобное решение для создания бэкенда приложений Vue. Платформы BaaS абстрагируют от сложностей инфраструктуры бэкенда, предоставляя готовые бэкенд-сервисы и API, которые разработчики могут легко интегрировать в свои приложения Vue.
Платформы BaaS ускоряют разработку, предлагая широкий спектр готовых бэкэнд-сервисов, таких как хранение данных, аутентификация пользователей, хранение файлов и push-уведомления. Эти сервисы можно быстро интегрировать в приложения Vue, что сокращает время и усилия на разработку.
Платформы Backend-as-a-Service (BaaS) предлагают удобство и масштабируемость, но при этом следует учитывать несколько моментов. Одним из недостатков является потенциальная привязка к поставщику, поскольку платформы BaaS могут жестко привязывать ваш бэкэнд-код к их специфическим сервисам и API.
Настройки и контроль над бэкендом также могут быть ограничены, что может стать проблемой для приложений с уникальными требованиями.
Создание приложения для блога на Vue
Чтобы создать приложение Vue, выполните следующую команду в терминале каталога проекта:
npm create vue@latest
Этот код выдаст запрос, в котором вы можете назвать приложение Vue и выбрать функции, которые вы будете использовать в приложении Vue.
Назвав приложение и выбрав Vue Router для работы с маршрутами в вашем приложении, зайдите в приложение и выполните команду npm install для установки зависимостей.
В каталоге views вашего приложения Vue blog создайте два представления: CreatePosts.vue и ReadPosts.vue.
После создания представлений добавьте приведенный ниже блок кода в файл index.js в директории router:
//index.js
import { createRouter, createWebHistory } from 'vue-router'
import CreatePosts from '../views/CreatePosts.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'post',
component: CreatePosts
},
{
path: '/readposts',
name: 'read-posts',
component: () => import('../views/ReadPosts.vue')
}
]
})
export default router
Приведенный выше блок кода устанавливает экземпляр Vue Router с двумя маршрутами: '/', связанный с компонентом CreatePosts, и '/readposts', связанный с динамически импортируемым компонентом ReadPosts. Этот экземпляр маршрутизатора управляет навигацией внутри вашего приложения Vue.
Затем добавьте в файл App.vue заголовок, содержащий маршруты, вложенные в HTML-теги кнопок, чтобы пользователи приложения могли переходить к нужным маршрутам.
Например, так:
<!-- App.vue -->
<script setup>
import { RouterLink, RouterView } from 'vue-router';
</script>
<template>
<header>
<h1>Vue Blog</h1>
<nav>
<RouterLink to="/" class="link"><button>Create Posts</button></RouterLink>
<RouterLink to="/readposts" class="link"><button>Read Posts</button></RouterLink>
</nav>
</header>
<RouterView />
</template>
Блок кода выше устанавливает маршрутизацию в приложении для блога. Он импортирует компоненты RouterLink и RouterView из библиотеки vue-router. Он импортирует эти компоненты в блоке настройки сценария (функция Vue 3) файла App.vue.
Блок шаблона содержит HTML-разметку для файла App.vue. Он включает в себя заголовок “Vue Blog” и панель навигации с двумя кнопками, обернутыми в компонент RouterLink, который ссылается на соответствующий маршрут. Компонент RouterView используется для отображения содержимого текущего маршрута.
После настройки маршрутизации придайте стиль заголовку и ссылкам маршрута, добавив приведенный ниже блок стилей в файл App.vue:
<style lang= "scss" scoped>
header{
padding: 1rem 0;
display: flex;
justify-content: space-between;
nav{
display: flex;
gap: 1rem;
.link{
text-decoration: none;
color: inherit;
}
}
}
</style>
Интеграция Back4app в ваше приложение для блога Vue
Начните с настройки вашего приложения Vue, а затем создайте экземпляр на Back4app, чтобы установить соединение с вашим приложением Vue. Для этого вам потребуется учетная запись Back4app.
Если вы еще не являетесь пользователем Back4app, выполните следующие простые шаги, чтобы зарегистрироваться:
- Перейдите на веб-сайт Back4app.
- Найдите кнопку “Регистрация” на главной странице и нажмите ее.
- Заполните регистрационную форму, указав свои данные, и отправьте ее.
После того как ваш аккаунт будет успешно создан, войдите в Back4app. Найдите опцию NEW APP, расположенную в правом верхнем углу, и выберите ее. Это приведет вас к форме, где вам нужно указать название вашего приложения. После ввода названия нажмите на кнопку CREATE, чтобы завершить процесс.
После нажатия кнопки “CREATE” ваша заявка будет создана, и вы попадете на панель управления заявкой.
Подключение приложения Vue Blog к Back4app
Чтобы подключить ваше приложение Vue к Back4app, сначала нужно установить Parse JavaScript SDK.
Чтобы установить SDK, выполните одну из следующих команд в зависимости от того, какой менеджер пакетов вы используете:
#using npm
npm install parse
or
#using yarn
yarn add parse
Далее вам нужно будет настроить SDK, используя два учетных данных вашего приложения Back4app – Application ID и Javascript KEY.
Получите идентификатор приложения и ключ JavaScript от Back4app, перейдя в раздел “Безопасность и ключи”, выбрав “Настройки приложения” на панели управления.
Хранение ключей приложения в виде обычного текста представляет собой риск для безопасности, поскольку злоумышленники могут получить доступ к вашему приложению. Поэтому храните учетные данные приложения в безопасном виде, используя переменные окружения или предпочитаемый вами способ хранения конфиденциальных ключей.
Затем импортируйте минифицированную версию Parse из пакета parse, который вы установили, в файл main.js. Затем вызовите метод initialize объекта Parse и передайте в качестве аргументов идентификатор приложения и ключ JavaScript.
Наконец, установите для свойства Parse.serverURL значение‘https://parseapi.back4app.com/’.
Например:
import Parse from 'parse/dist/parse.min.js';
Parse.initialize(VUE_APP_PARSE_APPLICATION_ID, VUE_APP_PARSE_JAVASCRIPT_KEY);
Parse.serverURL = '<https://parseapi.back4app.com>';
Ваш файл main.js должен быть похож на блок кода ниже после добавления блока кода выше:
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Parse from 'parse/dist/parse.min.js';
import './assets/main.css';
const app = createApp(App)
app.use(router)
Parse.initialize(VUE_APP_PARSE_APPLICATION_ID, VUE_APP_PARSE_JAVASCRIPT_KEY);
Parse.serverURL = '<https://parseapi.back4app.com>';
app.mount('#app')
Добавление данных в Back4app
Чтобы получить данные от пользователя блога, необходимо создать форму. После отправки формы приложение Vue запустит функцию submitPost(), которая выполнит логику, необходимую для сохранения данных в экземпляре Back4app.
Добавьте приведенный ниже блок кода в файл CreatePosts.vue, чтобы создать форму:
<!-- CreatePosts.vue -->
<script setup>
import { ref } from 'vue';
import { Parse } from 'parse/dist/parse.min.js';
const blog = ref({
title: "",
post: "",
})
function submitPost() {
try {
const Post = new Parse.Object("Post");
Post.set("title", blog.value.title);
Post.set("body", blog.value.post);
Post.save().then(() => {
console.log("New Post added successfully");
});
} catch (error) {
console.log(error);
}
blog.value.title = ''
blog.value.post = ''
}
</script>
<template>
<form @submit.prevent="submitPost">
<input id="blog-title" v-model="blog.title" placeholder="Title"/>
<textarea id="blog-post" v-model="blog.post" placeholder="Post" rows="20"></textarea>
<button>Submit Post</button>
</form>
</template>
Приведенный выше блок кода – это компонент, позволяющий пользователям отправлять записи в блог. Он использует API композиции Vue и импортирует функцию ref из библиотеки Vue.
Функция submitPost создает новый объект Parse Post и устанавливает свойства title и body этого объекта Post в значения свойств blog.title и blog.post с помощью метода set.
Затем объект Post сохраняется в Back4App с помощью метода save. В случае успеха или неудачи код выводит сообщение в консоль. После отправки сообщения значения title и post в объекте blog сбрасываются в пустую строку, очищая поля формы.
Блок этого файла определяет элемент формы со слушателем события @submit.prevent, который запускает функцию submitPost при отправке формы.
Внутри формы находятся элементы input и textarea, привязанные к свойствам объекта блога(blog.title и blog.post) с помощью v-model. Это обеспечивает двустороннюю привязку данных, гарантируя, что изменения в элементах формы будут обновлять объект блога.
Стилизуйте представление CreatePosts для более привлекательного пользовательского интерфейса, добавив приведенный ниже блок кода в файл CreatePosts.vue:
<style lang= "scss" scoped>
form{
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
input{
padding: 1rem;
background-color: #f2f2f2;
font-family: 'Poppins', sans-serif;
border: none;
border-radius: 12px;
inline-size: 70%;
&::placeholder{
color: #e3e3e3;
font-weight: bold;
font-family: 'Poppins', sans-serif;
}
}
textarea{
padding: 1rem;
border: none;
background-color: #f2f2f2;
font-family: 'Poppins', sans-serif;
border-radius: 12px;
inline-size: 70%;
&::placeholder{
color: #e3e3e3;
font-weight: bold;
font-family: 'Poppins', sans-serif;
}
}
}
</style>
Чтение данных из Back4app
Чтобы отобразить в своем приложении данные, сохраненные в экземпляре Back4app, вы должны сначала иметь возможность читать их из экземпляра Back4app.
Чтобы прочитать данные из экземпляра Back4app, вам нужно создать запрос Parse для класса, из которого вы хотите получить данные. Затем вы можете использовать хук жизненного цикла Vue onBeforeMount для получения данных и отображения их в вашем приложении.
Например:
<!-- ReadPosts.vue -->
<script setup>
import { onBeforeMount, ref } from 'vue';
import Parse from 'parse/dist/parse.min.js';
const postList = ref([])
onBeforeMount( async () => {
try {
const query = new Parse.Query("Post");
const post = await query.find();
console.log('Posts to be read displayed')
postList.value = post;
console.log(postList.value)
} catch (error) {
console.log(error);
}
})
</script>
<template>
<div>
<ul class="postlist">
<div class="post" v-for="(post, index) in postList">
<div>
<h2>{{ post.get('title') }}</h2>
<p>{{ post.get('body') }}</p>
</div>
</div>
</ul>
</div>
</template>
Файл ReadPosts.vue получает и отображает сообщения из Back4app. Скрипт импортирует хук onBeforeMount и функцию ref из пакета vue. Хук выполняет асинхронную функцию перед монтированием приложения Vue.
Функция ищет объект “Post” в базе данных вашего приложения Back4app с помощью метода Parse.Query(). Затем она возвращает массив, содержащий результаты запроса, вызывая метод Parse find на результат вызова Parse.Query(). Наконец, он присваивает возвращенный массив переменной postList.
В блоке шаблона директива v-for циклически просматривает массив postList и генерирует новый элемент div для каждого поста в массиве postList. Метод post.get() извлекает значения атрибутов title и body из вашей базы данных Back4App.
Теперь вы можете придать стиль файлу ReadPosts.vue, добавив следующий Scss-код в блок стилей:
<style lang= "scss" scoped>
.postlist{
display: flex;
flex-direction: column;
gap: 2rem;
.post{
display: flex;
justify-content: space-between;
padding: 1rem;
h2{
margin-block-end: 1rem;
text-transform: uppercase;
}
p{
opacity: 0.4;
font-weight: bold;
font-size: 13px;
margin-block-end: 0.5rem;
}
}
}
</style>
Модификация приложения Vue для добавления функции удаления сообщений
Еще одна важная функция, которую вы можете добавить в свой блог App, – это возможность удалять записи. Чтобы реализовать эту функцию, используйте метод destroy, доступный в Parse SDK.
Например, так:
<!-- ReadPosts.vue -->
<script setup>
import { onBeforeMount, ref } from 'vue';
import Parse from 'parse/dist/parse.min.js';
const postList = ref([])
onBeforeMount( async () => {
try {
const query = new Parse.Query("Post");
const post = await query.find();
console.log('Posts to be read displayed')
postList.value = post;
console.log(postList.value)
} catch (error) {
console.log(error);
}
})
const deletePost = async (id) => {
try {
const Post = Parse.Object.extend("Post");
const todo = new Post();
todo.id = id;
await todo.destroy();
const newPostList = postList.value.filter( (item) => item.id !== id )
postList.value = newPostList;
} catch (error) {
console.log(error);
}
}
</script>
Этот скрипт является обновлением файла ReadPosts.vue, который работает с функцией удаления. Функция deletePost создает новый объект Post с помощью метода Parse.Object.extend. Затем она устанавливает свойство id объекта Post в параметр id, переданный в функцию.
Затем он вызывает метод destroy объекта Post, чтобы удалить пост с заданным идентификатором из базы данных Back4app. Затем он фильтрует массив postList и возвращает новый массив newPostList, содержащий все посты, кроме удаленного. Массив newPostList затем присваивается переменной postList.
Затем вы можете привязать функцию deletePost к событию click на элементе button в блоке шаблонов файла ReadPosts.vue.
Например, так:
<template>
<div>
<ul class="postlist">
<div class="post" v-for="(post, index) in postList">
<div>
<h2>{{ post.get('title') }}</h2>
<p>{{ post.get('body') }}</p>
</div>
<button @click="deletePost(post.id)">Delete</button>
</div>
</ul>
</div>
</template>
Наконец, добавьте несколько глобальных стилей для оформления кнопок и тела вашего Vue APP в каталог assets:
/* main.css */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
inline-size: 90%;
margin: auto;
font-family: 'Poppins', sans-serif;
}
button{
border: none;
padding: 0.5rem 0.8rem;
background-color: inherit;
font-family: 'Poppins', sans-serif;
font-size: small;
font-weight: bold;
color: #333333;
border-radius: 12px;
}
button:hover{
color: #e2e2e2;
background-color: #333333;
}
Тестирование приложения для блога на Vue с интегрированным Back4app
Теперь, когда вы собрали и интегрировали Back4app в свое приложение Vue. Вы можете запустить команду npm в терминале вашего проекта, чтобы протестировать приложение:
npm run dev
Эта команда компилирует приложение и размещает его на определенном локальном сервере http://localhost:5173/.
Когда приложение запустится, вы должны увидеть вид CreatePosts для создания постов в качестве основного маршрута:
После заполнения полей ввода, нажатие кнопки Submit Post добавит введенные значения в базу данных Back4app. Проверьте приборную панель приложения Back4app или перейдите к представлению ReadPosts, чтобы подтвердить это.
Нажатие на кнопку удаления приведет к удалению сообщения. Например, удалите “ВТОРОЙ ПОСТ”, нажав на его кнопку удаления:
Заключение
Vue предоставляет разработчикам надежное и масштабируемое решение для создания современных веб-приложений благодаря реактивной привязке данных, архитектуре на основе компонентов и экосистеме библиотек.
Интеграция Vue с Back4app позволяет разработчикам легко управлять бэкендом своих приложений. Back4app снижает сложность, традиционно связанную с разработкой бэкенда, позволяя разработчикам создавать веб-приложения полного стека.
