Hur skapar man en inloggningssida i Flask

• Python: Du behöver ha Python installerat på din dator. Flask är byggt på Python, så detta steg är oundvikligt.
• Flask: Installationen av Flask krävs för att kunna skapa applikationen. Du kommer att lära dig hur man installerar det i nästa steg.
• Grundläggande kunskaper i HTML/CSS: En viss förståelse för markup-språket och hur formulär fungerar är användbar.
• En textredigerare: För att skriva och redigera din kod. Det kan vara allt från Notepad till mer avancerade alternativ som VS Code eller PyCharm.

Steg 1: Installera Flask

För att installera Flask, öppna din terminal eller kommandoprompt och kör kommandot:

pip install Flask

Detta kommer att ladda ner och installera Flask och dess beroenden. Kom ihåg att du kan behöva använda pip3 om du har både Python 2 och 3 installerat på din maskin.

Steg 2: Skapa grundläggande app

När Flask är installerat, är det dags att skapa din grundläggande Flask-app. Skapa en ny fil, till exempel app.py, och skriv följande kod:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Välkommen till inloggningssidan!"

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

För att köra appen, använd kommandot python app.py i terminalen. Du kan sedan öppna din webbläsare och gå till http://127.0.0.1:5000 för att se din app i aktion.

Steg 3: Skapa databasmodell

Nu är det dags att skapa vår databasmodell. Du kan använda SQLAlchemy, ett bibliotek som fungerar bra med Flask för att hantera databaser. Installera det med följande kommando:

pip install Flask-SQLAlchemy

Nästa steg är att konfigurera databasen i din appfil. Här är ett exempel på hur du kan sätta upp en databas:

from flask_sqlalchemy import SQLAlchemy

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

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(200), nullable=False)

Kom ihåg att köra db.create_all() för att skapa databasen först!

Steg 4: Skapa inloggningssidan

Nu när vi har vår databasmodell, är det dags att bygga inloggningssidan. Vi kommer att använda Flask-WTF för att skapa formulär. Installera det med:

pip install Flask-WTF

Skapa en ny fil som heter forms.py och definiera ditt formulär:

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired

class LoginForm(FlaskForm):
    username = StringField('Användarnamn', validators=[DataRequired()])
    password = PasswordField('Lösenord', validators=[DataRequired()])
    submit = SubmitField('Logga in')

Steg 5: Hantera användarautentisering

För att hantera användarautentisering, måste vi först lägga till en ruta för att hantera inloggningen i vår app. Här är ett exempel på hur det kan se ut:

from flask import render_template, redirect, url_for, flash, request

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        user = User.query.filter_by(username=form.username.data).first()
        if user and user.password == form.password.data:  # Här behöver vi använda hashning i realiteten
            return redirect(url_for('home'))
        else:
            flash('Inloggning misslyckades. Kontrollera dina uppgifter och försök igen.')
    return render_template('login.html', form=form)

Steg 6: Skapa formulär för inloggning

Nu är det dags att skapa vår inloggningssida exempel. Skapa en ny fil som heter login.html i din mallkatalog:

    


    
    

        {{ form.hidden_tag() }}
        

            {{ form.username.label }}

            {{ form.username(size=32) }}

            {% for error in form.username.errors %}
                [{{ error }}]
            {% endfor %}
        
        

            {{ form.password.label }}

            {{ form.password(size=32) }}

            {% for error in form.password.errors %}
                [{{ error }}]
            {% endfor %}
        


        
{{ form.submit() }}
    
    
Tillbaka

Steg 7: Återkoppling och felhantering

Att ge återkoppling till användaren är viktigt för att skapa en bra användarupplevelse. Använd Flask's flash meddelanden för att informera användaren om inloggningsstatus:

Vi har redan lagt till ett flash-meddelande i hantera användarautentisering steget. Kom ihåg att lägga till en plats i din HTML-mall för att visa dessa meddelanden, till exempel:

{% with messages = get_flashed_messages() %}
    {% if messages %}
        

        {% for message in messages %}
            
{{ message }}
        {% endfor %}
        
    {% endif %}
{% endwith %}

Steg 8: Testa inloggningssidan

Nu när vi har byggt vår inloggningssida exempel, är det dags att testa den. Kör din Flask-app och gå till /login. Försök logga in med olika användarnamn och lösenord för att se om allt fungerar som det ska. Om du har följt stegen rätt bör du kunna logga in utan problem.

Slutsats

Att skapa en inloggningssida i Flask är en utmärkt övning för att förstå webbutveckling och användarhantering. Genom att följa stegen i denna artikel har du lärt dig hur man installerar Flask, sätter upp en databas, skapar en inloggningssida, hanterar autentisering och ger användaråterkoppling. Du har också sett hur man kan använda flask formulär för att skapa inmatningsformulär på ett enkelt sätt. Med de kunskaper du nu har, är du välförberedd för att skapa mer komplexa webbapplikationer i Flask.

Resurser och vidare läsning

• Flask Dokumentation
• WTForms Dokumentation
• Flask-SQLAlchemy Dokumentation
• Flask-WTF Dokumentation

Genom att studera och experimentera med Flask kan du fördjupa dina kunskaper och bli mer bekväm med webbutveckling. Om du har några frågor eller vill diskutera dina framsteg, tveka inte att lämna en kommentar.

Tack för att du läste vår artikel, du kan se alla artiklar i våra webbkartor eller i Sitemaps