Разработка веб-приложений на Python с Flask: пошаговое руководство

Веб-разработка — это захватывающая область программирования, которая позволяет создавать интерактивные и динамические веб-сайты. Python, благодаря своей простоте и мощности, стал одним из самых популярных языков для веб-разработки. А Flask, легковесный и гибкий фреймворк, идеально подходит для создания веб-приложений на Python, особенно для новичков.

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

Содержание

Подготовка рабочего окружения
Установка Python
Для Windows:
Для macOS:
Установка Flask
Создание первого Flask-приложения
Добавление HTML-шаблонов
Обработка форм
Добавление стилей
Добавление базы данных
Полезные материалы по теме:

Подготовка рабочего окружения

Прежде чем мы начнем писать код, нам нужно подготовить наше рабочее окружение. Это включает установку Python и Flask.

Установка Python

Для Windows:

Перейдите на официальный сайт Python (https://www.python.org/downloads/).
Скачайте последнюю версию Python для Windows.
Запустите установщик и следуйте инструкциям. Не забудьте отметить опцию «Add Python to PATH».
Чтобы проверить установку, откройте командную строку и введите:

python --version

Для macOS:

Многие версии macOS уже имеют предустановленный Python. Проверьте это, открыв терминал и введя:

python --version

Если Python не установлен или вы хотите более новую версию, вы можете использовать Homebrew:

brew install python

Установка Flask

После установки Python, мы можем установить Flask с помощью pip (менеджер пакетов Python). Откройте командную строку (Windows) или терминал (macOS) и выполните следующую команду:

pip install flask

Создание первого Flask-приложения

Теперь, когда у нас есть все необходимые инструменты, давайте создадим наше первое Flask-приложение!

Создайте новую папку для вашего проекта и перейдите в нее.
Создайте новый файл с названием app.py и откройте его в вашем любимом текстовом редакторе.
Вставьте следующий код в app.py:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Привет, мир!'

if __name__ == '__main__':
    app.run(debug=True)

Давайте разберем этот код:

from flask import Flask: Импортируем класс Flask из модуля flask.
app = Flask(__name__): Создаем экземпляр приложения Flask.
@app.route('/'): Это декоратор, который указывает Flask, какой URL должен вызывать эту функцию.
def hello_world():: Определяем функцию, которая будет вызываться при обращении к корневому URL (‘/’).
return 'Привет, мир!': Эта функция возвращает строку, которая будет отображаться в браузере.
if __name__ == '__main__':: Это условие проверяет, запущен ли скрипт напрямую (не импортирован).
app.run(debug=True): Запускает приложение в режиме отладки.

Сохраните файл и вернитесь в командную строку или терминал.
Запустите приложение с помощью команды:

python app.py

Откройте веб-браузер и перейдите по адресу http://127.0.0.1:5000/. Вы должны увидеть сообщение «Привет, мир!».

Поздравляем! Вы только что создали и запустили свое первое Flask-приложение!

Добавление HTML-шаблонов

Возвращать простой текст — это хорошо для начала, но обычно мы хотим отображать более сложные HTML-страницы. Flask использует систему шаблонов Jinja2 для рендеринга HTML.

Создайте новую папку templates в директории вашего проекта.
Внутри папки templates создайте файл index.html со следующим содержимым:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моё Flask приложение</title>
</head>
<body>
    <h1>Добро пожаловать в моё Flask приложение!</h1>
    <p>Текущее время: {{ current_time }}</p>
</body>
</html>

Теперь изменим наш app.py, чтобы использовать этот шаблон:

from flask import Flask, render_template
from datetime import datetime

app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('index.html', current_time=datetime.now().strftime("%Y-%m-%d %H:%M:%S"))

if __name__ == '__main__':
    app.run(debug=True)

Здесь мы импортировали функцию render_template из Flask и модуль datetime для работы с датой и временем. Функция hello_world() теперь использует render_template() для отображения нашего HTML-файла, передавая текущее время в качестве параметра.

Запустите приложение снова и обновите страницу в браузере. Вы должны увидеть отформатированную HTML-страницу с текущим временем.

Обработка форм

Давайте добавим простую форму в наше приложение, чтобы пользователи могли вводить свое имя.

Измените index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моё Flask приложение</title>
</head>
<body>
    <h1>Добро пожаловать в моё Flask приложение!</h1>
    <p>Текущее время: {{ current_time }}</p>
    <form method="POST">
        <label for="name">Ваше имя:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">Отправить</button>
    </form>
    {% if name %}
        <p>Привет, {{ name }}!</p>
    {% endif %}
</body>
</html>

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

from flask import Flask, render_template, request
from datetime import datetime

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def hello_world():
    name = None
    if request.method == 'POST':
        name = request.form.get('name')
    return render_template('index.html', current_time=datetime.now().strftime("%Y-%m-%d %H:%M:%S"), name=name)

if __name__ == '__main__':
    app.run(debug=True)

Теперь наше приложение может обрабатывать как GET, так и POST запросы. Когда пользователь отправляет форму (POST запрос), мы получаем имя из формы и передаем его в шаблон.

Добавление стилей

Чтобы сделать наше приложение более привлекательным, добавим немного CSS.

Создайте папку static в корне вашего проекта.
В папке static создайте файл style.css:

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
}

form {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    background: #333;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background: #444;
}

Обновите index.html, чтобы подключить CSS:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моё Flask приложение</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Добро пожаловать в моё Flask приложение!</h1>
    <p>Текущее время: {{ current_time }}</p>
    <form method="POST">
        <label for="name">Ваше имя:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">Отправить</button>
    </form>
    {% if name %}
        <p>Привет, {{ name }}!</p>
    {% endif %}
</body>
</html>

Теперь наше приложение выглядит гораздо лучше!

Добавление базы данных

Для хранения данных мы будем использовать SQLite, так как он не требует дополнительной настройки и идеально подходит для небольших проектов.

Установите Flask-SQLAlchemy:

pip install flask-sqlalchemy

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

from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///visitors.db'
db = SQLAlchemy(app)

class Visitor(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    visited_at = db.Column(db.DateTime, default=datetime.utcnow)

    def __repr__(self):
        return f'<Visitor {self.name}>'

with app.app_context():
    db.create_all()

@app.route('/', methods=['GET', 'POST'])
def hello_world():
    if request.method == 'POST':
        name = request.form.get('name')
        new_visitor = Visitor(name=name)
        db.session.add(new_visitor)
        db.session.commit()
        return redirect(url_for('hello_world'))
    
    visitors = Visitor.query.order_by(Visitor.visited_at.desc()).limit(5).all()
    return render_template('index.html', current_time=datetime.now().strftime("%Y-%m-%d %H:%M:%S"), visitors=visitors)

if __name__ == '__main__':
    app.run(debug=True)

Обновите index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моё Flask приложение</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Добро пожаловать в моё Flask приложение!</h1>
    <p>Текущее время: {{ current_time }}</p>
    <form method="POST">
        <label for="name">Ваше имя:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">Отправить</button>
    </form>
    <h2>Последние посетители:</h2>
    <ul>
        {% for visitor in visitors %}
            <li>{{ visitor.name }} ({{ visitor.visited_at.strftime('%Y-%m-%d %H:%M:%S') }})</li>
        {% endfor %}
    </ul>
</body>
</html>

Теперь наше приложение сохраняет имена посетителей в базу данных и отображает список последних посетителей.

«Веб-разработка с использованием Flask — это увлекательное путешествие в мир создания интерактивных веб-приложений. Мы начали с простого «Hello, World!» и постепенно добавили HTML-шаблоны, обработку форм, стили и даже базу данных. Это только начало — Flask предоставляет множество возможностей для создания сложных и масштабируемых веб-приложений. Продолжайте экспериментировать, изучать новые библиотеки и создавать удивительные проекты!»