В мире веб-разработки фреймворк Flask на Python выделяется своей простотой и гибкостью, особенно когда речь идет о управлении представлениями и запросах XMLHttpRequest (XHR). В этой статье рассматривается эффективная работа с представлениями в Flask и интеграция запросов XHR, завершаясь практическим мини-проектом для закрепления обсуждаемых концепций.

Управление представлениями в Flask

Представления в Flask — это по сути функции, отвечающие на запросы к маршрутам. Они играют ключевую роль в определении того, какой контент будет представлен пользователю в зависимости от URL запроса.

Настройка базового представления

Для настройки базового представления в Flask начните с импорта Flask и инициализации вашего приложения:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')

def home():

return render_template('home.html')

В этом примере функция home связана с корневым URL (‘/’) и будет отображать home.html при доступе.

Динамическая маршрутизация

Flask поддерживает динамическую маршрутизацию, позволяя использовать переменные части в URL маршрута. Это особенно полезно для создания профилей пользователей или доступа к определенным ресурсам:

@app.route('/user/<username>')

def show_user_profile(username):

# Показать профиль пользователя для этого пользователя

return 'User %s' % escape(username)

Этот маршрут будет динамически адаптироваться к вводу, например, /user/john, и отображать соответствующий контент.

ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
  • Где и как применять? Потестируем модель после установки на разных задачах
  • Как дообучить модель под себя?
Участвовать бесплатно

Обработка запросов XHR

Запросы XHR или AJAX-запросы позволяют обновлять части веб-страницы без перезагрузки всей страницы. Flask может без труда обрабатывать эти запросы через свои функции представлений.

Настройка конечной точки для XHR

Для обработки XHR-запроса определите маршрут, который будет действовать как конечная точка для AJAX-запросов:

from flask import request, jsonify

@app.route('/api/data', methods=['POST'])

def get_data():

data = request.json

# Обработать данные

return jsonify({'status': 'success', 'data': processed_data})

В этом примере функция представления get_data предназначена для приема POST-запросов, содержащих JSON-данные, обработки данных и возврата JSON-ответа.

JavaScript для XHR

На стороне клиента запрос XHR может быть инициирован с использованием JavaScript:

function fetchData() {

fetch('/api/data', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

},

body: JSON.stringify({ key: 'value' })

})

.then(response => response.json())

.then(data => console.log(data));

}

Этот скрипт отправляет данные на конечную точку /api/data и записывает ответ от сервера.

Мини-проект: Список задач на Flask с использованием XHR

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

Настройка бэкенда

Сначала определите Flask-приложение и маршрут для отображения списка задач:

# app.py

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

tasks = []

@app.route('/')

def index():

return render_template('index.html', tasks=tasks)

@app.route('/add', methods=['POST'])

def add_task():

task = request.form['task']

tasks.append(task)

return jsonify({'task': task})

Реализация на стороне клиента

Затем создайте шаблон index.html с формой для добавления задач и скриптом для обработки XHR-запроса:

<!-- index.html -->

<!DOCTYPE html>

<html>

<head>

<title>Список задач на Flask</title>

</head>

<body>

<h2>Список задач</h2>

<form id="taskForm">

<input type="text" name="task" id="taskInput" placeholder="Добавить новую задачу">

<button type="submit">Добавить задачу</button>

</form>

<ul id="taskList">

<!-- Задачи будут добавляться здесь динамически -->

</ul>

<script>

document.getElementById('taskForm').addEventListener('submit', function(e) {

e.preventDefault();

const taskInput = document.getElementById('taskInput');

const task = taskInput.value;

fetch('/add', {

method: 'POST',

headers: {

'Content-Type': 'application/x-www-form-urlencoded',

},

body: 'task=' + encodeURIComponent(task)

})

.then(response => response.json())

.then(data => {

const li = document.createElement('li');

li.textContent = data.task;

document.getElementById('taskList').appendChild(li);

taskInput.value = ''; // Очистить поле ввода

});

});

</script>

</body>

</html>

Заключение

Обработка XHR-запросов улучшит приложение. AJAX и маршрутизация помогут создать высокоэффективные и удобные для пользователя интерфейсы. Предоставленный мини-проект предлагает основное понимание, позволяя вам исследовать более сложные реализации и адаптировать их к своим конкретным потребностям.

Большой практикум
ЗАМЕНИ ВСЕ НЕЙРОСЕТИ НА ОДНУ — PERPLEXITY
ПОКАЖЕМ НА КОНКРЕТНЫХ КЕЙСАХ
  • Освой Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
  • УЧАСТВОВАТЬ ЗА 0 РУБ.
  • Расскажем, как получить подписку (240$) бесплатно
Участвовать бесплатно
ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
Участвовать бесплатно