Инструкция

0

Введение

Для выполнения этой работы вам понадобятся навыки работы с терминалом Konsole и текстовым редактором nano.

Чтобы открыть Konsole, используйте сочетание клавиш Ctrl + Alt + T или найдите его в меню приложений.

Не забывайте нажимать Enter после ввода каждой команды.

1

Подготовка API

Убедитесь, что ваше API из предыдущей лабораторной работы запущено и доступно.

systemctl --user status myapi

2

Создание HTML-страницы

В директории вашего сайта создайте файл client.html.

nano ~/example.com/html/client.html

Добавьте базовую разметку и кнопку для вызова API:

<button id="loadData">Загрузить данные</button>
<div id="result"></div>

3

Написание JavaScript

Добавьте скрипт для обработки нажатия кнопки и выполнения запроса. Обратите внимание на полный URL (http://localhost:5500...), так как API и сайт работают на разных портах.

document.getElementById('loadData').addEventListener('click', () => {
    // Используем полный адрес API, порт 5500
    fetch('http://localhost:5500/api/hello')
        .then(response => response.json())
        .then(data => {
            document.getElementById('result').textContent = data.message;
        })
        .catch(error => console.error('Error:', error));
});

4

Настройка CORS (в app.py)

Так как HTML открывается отдельно от API, браузер может блокировать запросы. Нужно разрешить CORS в Flask.

Установите расширение:

source ~/myapi/venv/bin/activate
pip install flask-cors

Обновите ~/myapi/app.py:

from flask import Flask, jsonify
from flask_cors import CORS # Импорт

app = Flask(__name__)
CORS(app) # Разрешаем все источники

@app.route('/api/hello', methods=['GET'])
# ... остальной код ...

Перезапустите сервис API:

systemctl --user restart myapi

5

Запуск локального сервера для HTML

Просто открыть файл в браузере недостаточно для корректной работы fetch. Запустим временный сервер.

cd ~/example.com/html
python3 -m http.server 8000

Теперь откройте в браузере: http://localhost:8000/client.html

6

Проверка работы

Нажмите кнопку "Загрузить данные" и убедитесь, что ответ от API отображается.

7

Дополнительное задание

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

fetch('http://localhost:5500/api/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({ key: 'value' }),
})

Пошаговая инструкция