5 шагов для начинающих по разработке системы входа пользователей с помощью Flask

Добро пожаловать в захватывающее путешествие по миру Flask. Приготовьтесь объединить программирование с творчеством, пока мы создаем систему регистрации и входа пользователей. Все на борт экспресса к Flask Mastery! 🚂

Что такое Фласк?

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

Когда использовать флягу?

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

Для каких типов приложений вы можете использовать Flask?

📒 Блоги: Flask идеально подходит для создания личного блога или общей базы знаний.
🛍️ Электронная коммерция Lite: вы можете создать легкий сайт электронной коммерции с помощью Flask. Хотите продать волшебные зелья? Фласк прикроет твою спину!
🤔 Прототипы. Если вы хотите протестировать концепцию и создать прототип, Flask отлично подходит для этого. Хотите знать, станет ли ваша идея «Создатель кошачьих мемов» следующей большой вещью? Попробуйте с Flask!
🧑‍🔬 Веб-API: Flask отлично подходит для создания веб-API, выступая в роли волшебного посредника между вашими данными и внешним интерфейсом.

Давайте прыгать прямо в! 🏄‍♀️

Часть 1: PyCharm и Flask

В этом путешествии предполагается, что вы уже установили Python и готовы к работе. Если нет, вот ссылка на официальный сайт: Скачать Python.

Далее следует платформа для разработки.PyCharm — это мощная интегрированная среда разработки (IDE), адаптированная для Python, которая упрощает создание кода с помощью утилит отладки, параметров тестирования и контроля версий. .

Вы можете загрузить PyCharm Community Edition (бесплатно) с официального веб-сайта JetBrains.

Посетите страницу загрузки PyCharm
Нажмите кнопку «Скачать» в разделе «Сообщество».
После загрузки установщика запустите его и следуйте инструкциям по установке PyCharm.

Создайте новый проект в PyCharm

Откройте PyCharm.
Нажмите «Создать новый проект» на экране приветствия.
Введите название вашего проекта.
PyCharm автоматически создает виртуальную среду для каждого проекта. Это автономная среда Python, привязанная к конкретному проекту. Убедитесь, что выбран параметр «Новая среда», а в качестве базового интерпретатора выбран «Virtualenv».
Нажмите «Создать».

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

Откройте терминал внутри PyCharm (обычно он находится внизу IDE).
Убедитесь, что ваш терминал находится в виртуальной среде вашего проекта (venv). Если вы нигде не видите (venv), введите эту команду в терминал и нажмите Enter:

.\venv\Scripts\activate

Запустите следующие команды (в терминале введите следующую команду и нажмите Enter):

pip install flask

затем

pip install flask-sqlalchemy

Теперь у нас есть инструменты! 🛠️

Создать новый файл `app.py`

В PyCharm — нажмите «Файл», «Создать», «Файл Python», введите имя: app.py и нажмите Enter. Убедитесь, что app.py указан в папке venv.

Начать кодирование

Пришло время настроить Flask, Flask-SQLAlchemy и SQLite (простая файловая система баз данных, идеально подходящая для небольших приложений).

Начало кода с комментариями (Примечание: символ # используется для создания однострочных комментариев в Python):

#imports specific modules and functions from Python libraries: 
from flask import Flask, render_template, redirect, request
from flask_sqlalchemy import SQLAlchemy
from werkzeug.security import generate_password_hash
from werkzeug.security import check_password_hash

#initializes Flask web application
app = Flask(__name__)

#the application app is being configured to set up the connection 
#to a SQLite database named users.db through SQLAlchemy
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'

#creates an instance of the SQLAlchemy class and initialized with 
#the Flask application instance app
db = SQLAlchemy(app)

Начальный код безкомментариев:

from flask import Flask, render_template, redirect, request
from flask_sqlalchemy import SQLAlchemy
from werkzeug.security import generate_password_hash
from werkzeug.security import check_password_hash

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

Часть 2: Модель базы данных

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

В частности, этот блок кода определяет класс User, который расширяет класс db.Model. Класс User представляет таблицу пользователей в нашей базе данных SQLite.

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    password = db.Column(db.String(120), nullable=False)

    def __repr__(self):
        return '<User %r>' % self.username

У каждого пользователя есть уникальные username и password. Метод __repr__ — это способ представить нашего пользователя в более удобном для человека формате.

Добавьте эту строку в конец вашего файла, чтобы создать базу данных:

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

Часть 3: Регистрация

Во-первых, нам нужен базовый HTML-дизайн страницы регистрации для отображения Flask:

Создайте новый каталог Templates в том же каталоге, что и ваш файл app.py. Затем создайте новый файл HTML с именем signup.html и добавьте в него этот код:

<!-- setup.html (this page) shows a '404: Page Not Found' error
upon clicking submit. This means your username and password were
successfully added to the database. If it shows anything else
then your information IS ALREADY IN THE DATABASE (database
is saved every time you Stop 'app' and rerun it). -->
<!DOCTYPE html>
<html>
<head>
    <title>Sign Up</title>
</head>
<body>
    <h1>Sign Up</h1>
    <form method="post" action="/signup">
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" required><br>

        <label for="password">Password:</label>
        <input type="password" name="password" id="password" required><br>

        <input type="submit" value="Sign Up">
    </form>
    <p>Already have an account? <a href="login" target="_blank">Login</a></p>
</body>
</html>

Теперь вернемся к yourapp.py, создайте маршрут, отображающий форму регистрации:

@app.route('/signup', methods=['GET'])
def signup():
    return render_template('signup.html')

Затем создадим маршрут, который обрабатывает форму:

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

def signup_post():
    username = request.form.get('username')
    password = request.form.get('password')
    hashed_password = generate_password_hash(password, method='sha256')
    
    new_user = User(username=username, password=hashed_password)
    db.session.add(new_user)
    db.session.commit()
    return redirect('/')

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

Часть 4: Вход

Подобно созданию функции регистрации, сначала нам нужно создать login.html и поместить его в папку Templates, созданную выше.

Добавьте этот код в login.html:

<!-- Login.html (this page) reloads if login info is INCORRECT
or shows a '404: Page Not Found' error if login info is CORRECT. -->
<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
</head>
<body>
    <h1>Login</h1>
    <form method="post" action="/login">
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" required><br>

        <label for="password">Password:</label>
        <input type="password" name="password" id="password" required><br>

        <input type="submit" value="Login">
    </form>
    <p>New user? <a href="signup" target="_blank">Signup here</a></p>
</body>
</html>

Теперь, возвращаясь к app.py, давайте создадим функциональность входа в систему, включая отображение root при успешном входе в систему, обычное отображение login.htmlи, наконец, маршрут:

@app.route('/login', methods=['GET'])
def login():
    return render_template('login.html')

@app.route('/login', methods=['POST'])
def login_post():
    username = request.form.get('username')
    password = request.form.get('password')
    user = User.query.filter_by(username=username).first()
    
    if not user or not check_password_hash(user.password, password):
        return redirect('/login')
    
    return redirect('/')

Система входа проверяет, существует ли имя пользователя и соответствует ли пароль хешу, хранящемуся в базе данных.

Часть 5. Запуск приложения

Наконец, давайте добавим пользовательскую страницу ошибок для обработки ошибок 404 и 500 (с ней будет проще и чище работать по мере дальнейшей разработки приложения):

@app.errorhandler(404)
def page_not_found(e):
    return "404: Page Not Found", 404

Наконец, в конце app.py добавьте:

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

Этот последний фрагмент кода запускает приложение. В частности, этот код гласит: «Если этот скрипт запускается напрямую (а не импортируется как модуль), запустите сервер разработки Flask в режиме отладки».

Теперь запустите app.py (в PyCharm: щелкните правой кнопкой мыши app.py и выберите Запустить приложение). Откройте новый веб-браузер. Перейдите к localhost:5000/signup, чтобы увидеть страницу регистрации, и localhost:5000/login, чтобы увидеть страницу входа.

Следующие шаги

И вот оно, народ! Вы отправились в дикую поездку на экспрессе Flask 🚂 и оказались на другой стороне с функциональной системой регистрации и входа пользователей. Всем пятерки! ✋

Теперь у вас есть возможность расширить эту систему и создать великолепные приложения Flask. Будете ли вы создавать блог, чтобы делиться своими приключениями в программировании 📒? Возможно, это сайт электронной коммерции, продающий кофейные зерна радужного единорога🦄☕? Может быть прототип следующего приложения на миллиард долларов 🤔💰?

Счастливого Flask-инга! 🥳

Дополнительные руководства для начинающих:

5-минутное руководство по CSS Flexbox для начинающих

5-минутное руководство для начинающих по структуре данных связанных списков в Java