Как приложение получает информацию с базы данных?

Архитектура получения данных

Приложение не может напрямую обратиться к базе данных - между ними всегда находится бэкенд-сервер. Frontend общается с БД только через API, выполняемые на сервере.

Процесс выглядит так:

1. Frontend отправляет HTTP-запрос к бэкенду
2. Бэкенд подключается к БД, выполняет SQL-запрос
3. БД возвращает данные на бэкенд
4. Бэкенд отправляет ответ во frontend в формате JSON
5. Frontend обрабатывает и отображает данные

Запрос данных со стороны Frontend

На JavaScript/TypeScript фронтенд использует Fetch API или библиотеку типа Axios:

// Использование Fetch API
async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer token_here'
      }
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    return data; // Данные с БД, упакованные в JSON
  } catch (error) {
    console.error('Ошибка при получении данных:', error);
  }
}

Обработка ответа от БД в React

import { useEffect, useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        const response = await fetch(`/api/users/123`);
        const userData = await response.json();
        setUser(userData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, []);

  if (loading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка: {error}</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

Ограничения Frontend

Frontend НЕ может:

• Подключиться напрямую к БД
• Выполнить SQL запрос
• Получить данные без интернета
• Обойти авторизацию на бэкенде

Frontend может только:

• Отправить HTTP запрос к API
• Обработать JSON ответ
• Отобразить данные пользователю
• Валидировать входные данные локально

Запомни: Frontend -> API -> Бэкенд -> БД -> Бэкенд -> API -> Frontend. Это фундаментальная архитектура веб-приложений.