Разработка бэкенда на Vue.js 3 с использованием API на Flask

В предыдущей статье мы создали бэкенд блога на Flask с использованием Flask-RESTful и SQLAlchemy для работы с базой данных. Теперь мы рассмотрим, как использовать этот бэкенд вместе с Vue.js 3, чтобы создать мощный фронтенд для нашего блога.

Создание проекта Vue.js 3

Перед тем, как мы начнем, нам нужно создать новый проект Vue.js 3. Мы можем сделать это, используя Vue CLI. Запустите следующую команду в терминале:

vue create blog-frontend

Эта команда создаст новый проект Vue.js 3 и установит все необходимые зависимости.

Установка зависимостей

Чтобы использовать наше API на Flask внутри нашего проекта Vue.js, мы должны установить несколько зависимостей. Мы будем использовать Axios для выполнения HTTP-запросов к нашему API.

Для установки Axios введите следующую команду в терминале:

npm install axios

Создание компонентов Vue.js

Далее мы создадим компоненты Vue.js для отображения постов и деталей поста. Мы начнем с создания компонента «Posts»:

<template>
  <div>
    <h1>Posts</h1>
    <div v-for="post in posts" :key="post.id">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
    };
  },
  mounted() {
    axios.get('http://localhost:5000/posts').then((response) => {
      this.posts = response.data.posts;
    });
  },
};
</script>

Здесь мы создали компонент «Posts», который получает список постов с нашего API и отображает их в виде списка. Мы импортировали Axios и использовали метод «get» для получения данных с адреса «/posts» на нашем API. После получения ответа мы установили свойство «posts» в полученный список постов.

Затем мы можем создать компонент «Post» для отображения деталей конкретного поста:

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.body }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      post: {},
    };
  },
  mounted() {
    axios.get(`http://localhost:5000/posts/${this.$route.params.id}`).then((response) => {
      this.post = response.data.post;
    });
  },
};
</script>

Здесь мы создали компонент «Post», который получает данные о конкретном посте с нашего API и отображает их на странице. Мы использовали параметр «id» из маршрута для получения идентификатора поста и использовали его в запросе к нашему API. После получения ответа мы установили свойство «post» в полученные данные о посте.

Создание маршрутов

Теперь мы можем создать маршруты для наших компонентов Vue.js. Для этого мы можем использовать Vue Router. Мы начнем с создания маршрута для компонента «Posts»:

import { createRouter, createWebHistory } from 'vue-router';
import Posts from './components/Posts.vue';
import Post from './components/Post.vue';

const routes = [
  {
    path: '/',
    component: Posts,
  },
  {
    path: '/posts/:id',
    component: Post,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Здесь мы импортировали компоненты «Posts» и «Post» и создали два маршрута: «/» для компонента «Posts» и «/posts/:id» для компонента «Post». Мы использовали параметр «:id» для передачи идентификатора поста в компонент «Post».

Подключение маршрутов и запуск приложения

Наконец, мы можем подключить маршруты и запустить наше приложение. Для этого мы можем использовать файл «main.js»:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

Здесь мы импортировали компонент «App», создали экземпляр приложения Vue.js, подключили маршруты и запустили приложение на элементе с идентификатором «app» в нашем HTML-файле.

Заключение

В этой статье мы рассмотрели, как использовать наш API на Flask с Vue.js 3, чтобы создать мощный фронтенд для нашего блога. Мы создали компоненты Vue.js для отображения списка постов и деталей конкретного поста, создали маршруты с использованием Vue Router и подключили их в нашем приложении Vue.js. Теперь мы можем использовать наш бэкенд на Flask в сочетании с Vue.js 3 для создания полноценного блога.