Генератор QR-кодов в Django

Создание виртуальной среды

python3.10 -m venv .

Вход в полноэкранный режим Выход из полноэкранного режима

Активировать среду

source bin/activate

Войти в полноэкранный режим Выход из полноэкранного режима

Установите Django, Pillow и qrcode

pip install Django Pillow qrcode

Войти в полноэкранный режим Выйти из полноэкранного режима

Запустите проект Django

django-admin startproject core .

Войти в полноэкранный режим Выйти из полноэкранного режима

Создать приложение

python manage.py startapp qrcodeapp

Войти в полноэкранный режим Выйти из полноэкранного режима

Откройте файл settings.py и добавьте созданное приложение в список установленных приложений.

# settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'qrcodeapp', # add qrcodeapp app
]

Войти в полноэкранный режим Выйти из полноэкранного режима

Создайте каталог media для сохранения всех сгенерированных изображений QR-кодов. Этот медиа каталог должен быть создан в корневом каталоге.

Теперь в файле settings.py укажите каталог мультимедиа следующим образом.

# settings.py

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь откройте файл views.py из qrcodeapp, чтобы написать логику для генерации QR-кода, а затем отобразить его на шаблоне.

# qrcodeapp/views.py

from django.shortcuts import render
from django.conf import settings
from qrcode import *
import time

def qr_gen(request):
    if request.method == 'POST':
        data = request.POST['data']
        img = make(data)
        img_name = 'qr' + str(time.time()) + '.png'
        img.save(settings.MEDIA_ROOT + '/' + img_name)
        return render(request, 'index.html', {'img_name': img_name})
    return render(request, 'index.html')

Войти в полноэкранный режим Выход из полноэкранного режима

Создайте каталог templates в корневом каталоге и укажите путь к нему в settings.py, как показано ниже.

# settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [ BASE_DIR / 'templates' ], # this
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Войти в полноэкранный режим Выйти из полноэкранного режима

Откройте файл index.html и добавьте следующий код

<!-- templates/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR code generator</title>

    <style>
        *{
            box-sizing: border-box;
            font-family: sans-serif;
        }
        main{
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }

        input{
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button{
            width: 100%;
            max-width: 200px;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #eee;

        }

        button:hover{
            background-color: #ddd;
        }

        .qr-img{
            width: 100%;
            max-width: 300px;
            margin: 0 auto;
        }

        .qr-img img{
            width: 100%;
        }
    </style>
</head>
<body>
    <main>
        <h1>
            QR code generator
        </h1>
        <form method="post">
            {% csrf_token %}
            <input type="text" name="data" id="data" placeholder="write something or enter url">
            <button>Generate</button>
        </form>

        <div class="qr-img">
            {% if img_name %}
                <img src="/media/{{ img_name }}" alt="qr code">
            {% endif %}
        </div>
    </main>
</body>
</html>

Войти в полноэкранный режим Выйти из полноэкранного режима

Создайте новый файл urls.py в каталоге qrcodeapp и добавьте следующий код

# qrcodeapp/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.qr_gen, name='qr_gen'),
]

Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь включите этот путь в urls.py основного проекта.

# core/urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('qrcodeapp.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Войти в полноэкранный режим Выйти из полноэкранного режима

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

python manage.py runserver

Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь просто откройте http://127.0.0.1:8000 в браузере, введите что-нибудь и сгенерируйте ваш qr-код.

Спасибо 🙂

Исходный код: GitHub

Найти меня в Twitter: awwarpit

Генератор QR-кодов в Django

Рекомендуем почитать: