Легкий путь в Python

Интеграция Flask (Jinja2) и VueJS3 на одной странице

🔥 Друзья, всех с наступившим!🎉

Сегодня хочу поделиться интересным способом интеграции Jinja2 (шаблонизатор Flask) и VueJS3 в рамках одного приложения. При этом мы обойдемся без поднятия отдельного приложения для Vue и минимизируем конфликты между их синтаксисами.

Демонстрация на примере Flask, но с FastAPI это также работает.

🛠 Настраиваем Flask

Сначала создаем роутер для главной страницы:

@app.route('/')
def index():
    data = {
        "title": "Flask + Vue Интеграция",
        "description": "Пример комбинации Flask (Jinja2) + VueJS3 на 1 странице"
    }
    return render_template('index.html', **data)

🎨 Создаем HTML-шаблон

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
</head>
<body>
<div id="app">
    <h1>[[ message ]]</h1>
    <p>[[ description ]]</p>
    <button @click="reverseMessage">Reverse Message</button>
</div>

<script type="text/javascript">
    const app = Vue.createApp({
        delimiters: ['[[', ']]'],  // Настраиваем альтернативный синтаксис
        data() {
            return {
                message: "{{ title }}",
                description: "{{ description }}",
            };
        },
        methods: {
            reverseMessage() {
                this.message = this.message.split('').reverse().join('');
            },
        },
    });
    app.mount('#app');
</script>
</body>
</html>

✨ Как это работает

1️⃣ Flask передает данные в шаблон через render_template.
2️⃣ Мы используем Vue.js, настроив его с кастомными разделителями [[ и ]], чтобы избежать конфликта с {{ }} в Jinja2.
3️⃣ Динамическая логика Vue легко уживается с серверным рендерингом Flask.

Теперь ваше приложение объединяет преимущества серверного рендеринга с интерактивностью VueJS3 — все на одной странице без лишних сложностей. 🚀

Попробуйте сами и делитесь результатами! 🙌

2👍21🔥13❤7

2.53K viewsedited 11:18

Легкий путь в Python

Привет, друзья! 👋

Подготовил для вас новую статью на своём сайте — подробную инструкцию по работе с JavaScript-фреймворком VueJS 3. Это пошаговый гайд по настройке современного веб-приложения с использованием Vue 3, Vite и Tailwind CSS. В статье подробно разобраны:

💎 установка необходимых зависимостей,
💎 настройка проекта,
💎 интеграция с Vue Router.

Не знаю насколько вам будет интересна тема JavaScript и, в частности, VueJS3. В целом, если тема вам будет интересной то можно будет ряд вопросов разобрать более детально.

На суперпрофессионализм в мире JavaScript и VueJS3 в частности не претендую, но опыта и фишек точно накопилось, так что есть чем поделиться!😊

✨ Ссылка на статью: ЧИТАТЬ

Читаем, делимся мнением, и, конечно, не забываем о ваших вопросах — буду рад обсудить! 🙌

Please open Telegram to view this post

VIEW IN TELEGRAM

4👍27🔥10❤7👎1🥰1

2.22K views12:46

Легкий путь в Python

Решил рассказать, как быстро поднять Redis на своей локальной машине с помощью Docker. Способ подойдет даже тем, кто не имел отношения к Docker раньше.

Шаги для установки Redis:

1. Установите Docker Desktop на ваш компьютер и запустите его.
2. В терминале (BASH) введите следующую команду:

docker run -d --name redis_container -p 6379:6379 -v redis_data:/data redis:latest

3. Проверьте подключение через Python. Для этого используйте следующий код:

import redis

REDIS_HOST = 'localhost'
REDIS_PORT = 6379
REDIS_DB = 0
REDIS_PASSWORD = None
REDIS_USERNAME = None

redis_client = redis.StrictRedis(
    host=REDIS_HOST,
    port=REDIS_PORT,
    db=REDIS_DB,
    password=REDIS_PASSWORD,
    username=REDIS_USERNAME,  # Если требуется
    decode_responses=True  # Для автоматического преобразования байтов в строки
)

try:
    print(redis_client.ping())  # Проверка соединения
except redis.ConnectionError:
    print("Не удалось подключиться к Redis.")

Если соединение успешно, вы получите True. В противном случае отобразится сообщение об ошибке.

Теперь вы готовы использовать Redis в своем проекте!

1🔥22👍14❤7😎1

2.48K viewsedited 17:34

Легкий путь в Python

❤️ Приветствую, друзья ❤️

С наступающим Рождеством 🎄

🎄

В этот светлый и радостный праздник хочу пожелать вам тепла, уюта и гармонии в душе.

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

Желаю вам здоровья, счастья и успехов как в личной жизни, так и в ваших начинаниях в программировании.

Пусть Рождество принесет в ваш дом мир и любовь, а в сердца — надежду и веру в лучшее.

С праздником 🎉

🎉

Please open Telegram to view this post

VIEW IN TELEGRAM

❤34🎉13👍6🔥3🙏2☃1

2.12K views18:01

Легкий путь в Python

Не знаю, будет ли вам интересно, но я подготовил новый гайд по Vue.js 3.

В этот раз я подробно разобрал тему отслеживания событий и реакции на них. Тема достаточно сложная. Поэтому решил, что тем кто интересуется этим фреймворком будет интересно и полезно.

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

В своем примере, я показываю, как можно удалить компонент со страницы при клике на кнопку "Удалить".

Если вам это интересно, переходите по ссылке на гайд: [ССЫЛКА].

База знаний Алексея Яковенко

Инструкция по отслеживанию событий в Vue 3

Короткая и достпупная инструкция по отслеживанию событий в Vue 3 (EMIT).

3👍24❤7🔥5👎1

2.33K views18:24

Легкий путь в Python

🎄 Друзья, с Рождеством! 🎄

Праздники подходят к концу, а это значит, что пора возвращаться в боевой режим! 💪 И у меня для вас крутой анонс: стартую новый большой проект под Хабр.

Если вы читали мои статьи о разработке Telegram-ботов и FastAPI, то знаете, что раньше я создавал фронтенд либо на чистом JS + CSS + HTML, либо использовал Jinja2 для интеграции с бэкендом.

На этот раз я решил пойти дальше и полностью вынести фронтенд в отдельное приложение на Vue 3.

📌 Что за проект?

Мы будем писать Telegram-бота с MiniApp для записи в фейковую клинику. Бот сможет:

- записывать на прием к врачу,
- напоминать о визите,
- предоставлять информацию о врачах.

📌 Технологический стек:

- 🐍 FastAPI — вебхуки и API для бота,
- 🗃 SQLAlchemy — для работы с базой данных,
- 🤖 Aiogram 3 — для разработки самого бота,
- 🖥 Vue 3 — полноценный фронтенд-приложение с рядом удобных библиотек.

Будете ждать? 😉 🚀

5🔥91👍23❤10👾3

2.39K views10:47

Легкий путь в Python

Процесс разработки идет полным ходом. Уже полностью готов фронт. За завтра, если успею, подключу к фронту на VUE3 бэкенд на FastApi.

Так что должен буду успеть к концу недели выйти со статьей.

🔥44👍9❤‍🔥6🙏6

2.66K views21:33

Легкий путь в Python

У меня спрашивали "Почему именно VUE3"? Сейчас покажу на одном примере:

<script setup lang="ts">
import { useFetch } from '@vueuse/core';

// Используем useFetch для запроса данных
const { data: doctors, isFetching, error } = useFetch('http://127.0.0.1:8000/specialists')
    .post() // Метод POST
    .json(); // Автоматическое преобразование в JSON
</script>

При помощи этих строк мы:

1. Отправляем POST-запрос на указанный эндпоинт
2. Преобразуем его в json

Интересно то, что работает это реактивно.

🔥16👍6❤3

2.39K views10:46

Легкий путь в Python

0:41

This media is not supported in your browser

VIEW IN TELEGRAM

Бэкенд с фронтендом подружил. Остается последний этап - интегрировать это дело в бота)

На видео демонстрации работы сайта, разработанного с использованием VUE3, я начинаю с показа таблиц в базе данных. В данный момент в таблице пользователей содержится только одна запись, а также представлены таблицы направлений, докторов и записи, где на старте нет ни одной строки.

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

На фронтенде реализована страница выбора направления, где также добавлен реактивный поиск — это одна из особенностей VUE3. После этого мы переходим на страницу докторов по выбранному направлению, где открывается возможность записи через слоты.

1🔥35👍9🤩3❤2🙏1

2.68K viewsedited 23:47

Легкий путь в Python

Я решил, чтоб было веселее показать вам как можно написать телеграмм бота на чистом BOT API Telegram в связке с FastApi. То есть в проекте крайнем мы не будем использовать Aiogram 3, а напишем его с нуля)

🔥31👍11❤‍🔥5❤1

2.55K views08:53

Легкий путь в Python

Вот пример ответа на сообщение на чистом API (пока без ввода дополнительных переменных для понимания):

async def send_message(client, chat_id: int, text: str):
    await client.post(f"{settings.get_tg_api_url()}/sendMessage", json={
        "chat_id": chat_id,
        "text": text,
        "disable_web_page_preview": True,
        "reply_markup": {
            "inline_keyboard": [
                [{"text": "📅 Мои записи", "callback_data": "booking"}],
                [{"text": "🔖 Забронировать", "web_app": {"url": "https://2ettfx-85-175-194-59.ru.tuna.am/"}}],
                [{"text": "ℹ️ О нас", "callback_data": "about_us"}]
            ]
        }
    })

В целом, много общего со знакомым Aiogram)

🔥13👏7👍5❤1🥴1

2.65K views09:59

Легкий путь в Python

1:00

This media is not supported in your browser

VIEW IN TELEGRAM

Друзья, привет!

Я рад представить вам демонстрацию нового проекта, который полностью готов к использованию! Видео, прикрепленное к этому посту, показывает работу проекта в полном объеме.

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

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

Исходники:

🔗 Исходник бэкенда: GitHub

🔗 Исходник фронтенда: GitHub

🤖 Бот: @Vue3_FastApiBOT

Вопросы и обратная связь👇

Please open Telegram to view this post

VIEW IN TELEGRAM

10🔥61👍15❤6❤‍🔥4

2.69K viewsedited 13:40

Легкий путь в Python

Обещанные исходники:

🔗 Исходник бэкенда: GitHub

🔗 Исходник фронтенда: GitHub

🤖 Бот: @Vue3_FastApiBOT

Вопросы и обратная связь👇

Please open Telegram to view this post

VIEW IN TELEGRAM

1🔥27❤6👍4

2.49K viewsedited 15:46

Легкий путь в Python

Друзья, приветствую!

В ходе написания статьи материала получилось настолько много, что решил разбить ее на 2 части.

В первой части, которую, скорее всего, опубликую завтра утром, сосредоточился на теме создания бэкенда. В статье раскрыл следующие темы:

- Интеграция SQLAlchemy в проект: создание моделей таблиц, написание методов и миграция с помощью Alembic.
- Разработка API методов: создание и настройка эндпоинтов.
- Создание телеграм-бота: реализация без использования Aiogram 3, только с FastAPI и HTTPX.
- Интеграция APScheduler: настройка задач по расписанию в проекте.

В результате я подробно описал все аспекты, которые были реализованы в проекте бекенда: GitHub - VueBotFastApi.

Будете ждать статью?

1🔥62👍19❤7

2.46K viewsedited 13:57

Легкий путь в Python

Друзья, доброе утро! ☀️

С радостью сообщаю, что моя новая статья о создании бэкенда для телеграм-бота с использованием MiniApp для записи к докторам уже опубликована! 🎉

Темы, которые я раскрыл в статье:

- Интеграция SQLAlchemy: создание моделей таблиц, написание методов и миграция с помощью Alembic.
- Разработка API методов: создание и настройка эндпоинтов.
- Создание телеграм-бота: реализация без использования Aiogram 3, только с FastAPI и HTTPX.
- Интеграция APScheduler: настройка задач по расписанию в проекте.

В результате вы сможете подробно ознакомиться со всеми аспектами реализации бэкенда. Проект занял много времени, и я буду очень благодарен за вашу обратную связь и поддержку, особенно на Хабре. Ваш лайк и комментарий помогут продвинуть публикацию! ❤️

📖 Читайте статью по ссылке: FastAPI и Vue.js 3: телеграм-бот с MiniApp для записи и автоматических уведомлений. Пишем бэкенд.

В результате я подробно описал все аспекты, которые были реализованы в логике бекенда: GitHub - VueBotFastApi.

🔗 Исходник фронтенда: GitHub

🤖 Бот: @Vue3_FastApiBOT

Заранее спасибо за вашу поддержку и обратную связь! 🙌

Please open Telegram to view this post

VIEW IN TELEGRAM

Хабр

FastAPI и Vue.js 3: телеграм-бот с MiniApp для записи и автоматических уведомлений. Пишем бэкенд

Приветствую, друзья! Сегодня я рад представить вам новый крупный проект, в рамках которого мы разберем технологии и подходы, которые ранее не освещались в моих статьях. На этот раз мы создадим...

3👍36🔥24❤‍🔥4❤3🙏1

2.58K views05:34

Легкий путь в Python

Надежно поднимаем PostgreSQL 1 командой 🚀

Хотите быстро и надежно поднять PostgreSQL в Docker? Вот команда, которая сделает всё за вас:

docker run --name container_postgres \
  -e POSTGRES_DB=my_db \
  -e POSTGRES_USER=admin \
  -e POSTGRES_PASSWORD=super_password \
  -p 5432:5432 \
  -v $(pwd)/postgres_data:/var/lib/postgresql/data \
  -d postgres

Разбор команды:

- Имя контейнера: --name container_postgres. Удобно для управления контейнером.

- Данные для подключения: задаём имя базы (my_db), пользователя (admin) и пароль (super_password).

- Порт: -p 5432:5432. Сопоставляем порт на хосте и контейнере.

- Сохранение данных: -v $(pwd)/postgres_data:/var/lib/postgresql/data. Пробрасываем локальную папку, чтобы данные базы не пропали при перезапуске контейнера.

После запуска база данных будет доступна по порту 5432, а данные сохранятся в папке postgres_data. Просто и надёжно!

👍25🔥9❤6

2.5K viewsedited 08:18

Легкий путь в Python

Ещё решил поделиться универсальным скриптом bash. Основная суть скрипта в том, чтоб:

1. Создать виртуальное окружение под Python если оно не существует
2. Активировать виртуальное окружение
3. Установить зависимости с файла requirements.txt
4. Запустить проект

Полезно будет для быстрого разворачивания проекта или для запуска в комплексе с systemd.

Вот полный код скрипта:

#!/bin/bash

# Название виртуального окружения
VENV_NAME="venv"

# Проверяем, существует ли уже виртуальное окружение
if [ ! -d "$VENV_NAME" ]; then
    echo "Создаем виртуальное окружение..."
    python3 -m venv $VENV_NAME
else
    echo "Виртуальное окружение уже существует. Пропускаем создание."
fi

# Активируем виртуальное окружение
echo "Активируем виртуальное окружение..."
source $VENV_NAME/bin/activate

# Устанавливаем зависимости
echo "Устанавливаем зависимости из requirements.txt..."
if [ -f "requirements.txt" ]; then
    pip install -r requirements.txt
else
    echo "Файл requirements.txt не найден! Пожалуйста, проверьте наличие файла."
    deactivate
    exit 1
fi

# Команда для запуска скрипта
echo "Запускаем скрипт..."
python3 main.py

# Деактивация виртуального окружения (опционально, если нужно после выполнения)
echo "Завершаем работу..."
deactivate

Сохранить код нужно в файл с расширением .sh и положить его в корень проекта (рядом с файлом requirements.txt)

Пару важных уточнений.

1. Убедитесь что у вас на сервере установлен Python и Python venv
2. Для того чтоб появилась возможность сделать файл исполняемым, нужно выполнить команду:

chmod +x имя_файла.sh

Эта команда добавляет право на выполнение файла для текущего пользователя.

3. После этого вы можете запустить скрипт, используя команду:

./имя_файла.sh

4. Если вы хотите использовать этот скрипт с systemd, убедитесь, что в файле сервиса указан полный путь к скрипту в параметре ExecStart.

5. Не забудьте заменить 'main.py' в скрипте на имя вашего основного Python файла, который нужно запустить или на команду для запуска скрипта.

Этот скрипт значительно упрощает процесс настройки и запуска Python проектов, особенно при развертывании на новых системах или при автоматизации запуска через systemd.

👍28🔥10❤4🎉1

3.13K viewsedited 09:25

About

Blog

Apps

Platform