FastAPI + Vue.js: Создаем веб-проект (Урок 7)

Разработка клиентской части

Написание клиентской части – это отдельная задача, относящаяся к front-end разработке и отвечающая за внешний вид веб-проекта. Для этого можно использовать различные технологии: чистый JavaScript, фреймворки React, Vue, Angular, Svelte и другие. В этом уроке используется Vue.js из-за его простоты и функциональности.

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

1. Создайте папку (например, Public) для клиентской части.
2. Откройте терминал, перейдите в эту папку (cd Public).
3. Создайте проект Vue.js: vue create . (При ошибке скачайте Vue CLI с официального сайта).
4. Выберите третью версию Vue.js.
5. Установите Axios: npm install axios. Эта библиотека позволяет обращаться к серверному приложению по URL-адресу для получения данных (пользователей, записей и т.д.).
6. Запустите локальный сервер: npm run serve.

После сборки отобразится URL-адрес приложения. В папке Public находится множество файлов, но мы сосредоточимся на папке src. Рекомендуется использовать Visual Studio Code для работы с Vue.js.

Редактирование файлов Vue.js

Отредактируем app.vue, содержащий HTML-разметку, стили и функциональность приложения.

Файл app.vue

Удалим существующий код и добавим компонент HouseComponent (components/HouseComponent.vue). Этот компонент отображает форму регистрации/авторизации или сообщение об успешной авторизации в зависимости от значения переменной isHouse.

<template>
  <div id="app">
    <HouseComponent v-if="!isHouse" :handleHouse="handleHouse"/>
    <div v-else>Вы авторизованы</div>
  </div>
</template>

<script>
import HouseComponent from './components/HouseComponent.vue';

export default {
  name: 'App',
  components: {
    HouseComponent
  },
  data() {
    return {
      isHouse: false
    };
  },
  methods: {
    handleHouse() {
      this.isHouse = true;
    }
  }
};
</script>

Файл components/HouseComponent.vue

Компонент содержит две формы: регистрацию и авторизацию.

<template>
  <div>
    <h2>Регистрация</h2>
    <form @submit.prevent="register">
      <label>Имя: <input type="text" id="registerName" v-model="registerName"></label><br>
      <label>Возраст: <input type="text" id="registerAge" v-model="registerAge"></label><br>
      <button type="submit">Зарегистрироваться</button>
    </form>

    <h2>Авторизация</h2>
    <form @submit.prevent="login">
      <label>Имя: <input type="text" id="loginName" v-model="loginName"></label><br>
      <button type="submit">Авторизоваться</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'HouseComponent',
  data() {
    return {
      registerName: '',
      registerAge: '',
      loginName: ''
    };
  },
  methods: {
    async register() {
      const response = await axios.post('/users/', { name: this.registerName, age: Number(this.registerAge) });
      console.log('register Success', response.data);
      this.$emit('handleHouse');
    },
    async login() {
      const response = await axios.get(`/users/${this.loginName}`);
      if (response.data) {
        this.$emit('handleHouse');
      } else {
        alert('Пользователь не найден');
      }
    }
  }
};
</script>

Настройка CORS в FastAPI

Для решения ошибки CORS (Cross-Origin Resource Sharing) добавим middleware в main.py:

from fastapi import FastAPI, HTTPException, Depends
from fastapi.middleware.cors import CORSMiddleware
from .models import User, Base, engine
from .database import SessionLocal, engine
from sqlalchemy.orm import Session

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:8080", "http://127.0.0.1:8080"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# ... остальной код ...

Добавление функции авторизации на сервер

Добавим в main.py эндпоинт для авторизации:

@app.get("/users/{name}")
async def read_user(name: str, db: Session = Depends(get_db)):
    db_user = db.query(User).filter(User.name == name).first()
    if db_user is None:
        raise HTTPException(status_code=404, detail="User not found")
    return db_user

Домашнее задание

Реализуйте вывод всех постов с сервера на клиентскую сторону.

В этом уроке создана клиентская часть веб-приложения на Vue.js, налажено взаимодействие с сервером FastAPI, реализованы регистрация и авторизация пользователей. Домашнее задание позволит закрепить полученные знания и продолжить разработку проекта.