[PYTHON] Erstellen Sie einen Django-Anmeldebildschirm
Beim letzten Mal hatte ich das Gefühl, dass ich keinen neuen Mitarbeiter registrieren konnte, weil ich die Benutzerinformationen nicht erhalten habe. Daher werde ich einen Anmeldebildschirm erstellen.
Wenn Sie sich als Mitarbeiter anmelden, erstellen wir es in der Mitarbeiter-App. Stellen Sie sicher, dass Sie die Anmeldevorlage in urls.py laden.
python:staff.urls.py
from django.urls import path, include
from .views import StaffCreate, loginfunc
urlpatterns = [
path('login/', loginfunc, name='login'),
path('create/', StaffCreate.as_view(), name = "staffcreate"),
]
Loginfunc hinzugefügt. Erstellen Sie als Nächstes einen Anmelde-Funk in Ansichten.
python:staff.views.py
def loginfunc(request):
if request.method == 'POST':
user_name = request.POST['username']
user_password = request.POST['password']
user = authenticate(request, username=user_name, password=user_password)
if user is not None:
login(request, user)
return redirect('staff:staffcreate')
else:
return render(request, 'staff/login.html', {'error':'Falscher Name oder Passwort des Mitarbeiters'})
return render(request, 'staff/login.html')
Ist das in Ordnung? Geben Sie im HTML-Anmeldebildschirm den eingegebenen Benutzernamen und das eingegebene Kennwort in die Variable Benutzername Benutzername ein und überprüfen Sie, ob es denselben Benutzer gibt. Wenn es keine Benutzer gibt (es ist schwer zu verstehen (lacht)), melden Sie sich an und rufen Sie die Seite staffcreate with ursl in der Mitarbeiter-App auf. Sollte so gehen
Wenn der Benutzer nicht gefunden wird, kehren Sie zum Anmeldebildschirm zurück, übergeben Sie die Nachricht jedoch mit einem Fehler.
templates/staff/login.html
{% extends 'staff/base.html' %}
{% load static %}
{% block customcss %}
<link rel='stylesheet' type='text/css' href="{% static 'style.css' %}">
{% endblock customcss %}
{% block header %}
{% endblock header %}
{% block content %}
<form class="form-signin" method="POST" action="">{% csrf_token %}
<img class="mb-4" src="/docs/4.5/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Loginseite</h1>
{{ error }}
<label for="text" class="sr-only">Mitarbeiter-ID</label>
<input type="text" name="username" placeholder="username" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" name="password" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Einloggen</button>
<p class="mt-5 mb-3 text-muted">©GK</p>
</form>
{% endblock content %}
Ich habe gerade einige Änderungen an der Bootstrap-Vorlage vorgenommen. Fügen Sie settings.py Einstellungen hinzu, damit Sie statische Dateien aufrufen können
config/settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Erstellen Sie einen statischen Ordner in derselben Hierarchie wie Vorlagen Erstellen Sie zum Organisieren einen Mitarbeiterordner, erstellen Sie darin die Datei loginstyle.css und schreiben Sie hier CSS. Dies ist auch eine Kopie der Bootstrap-Vorlage, daher kann ich sie nicht von Grund auf neu schreiben.
static/staff/loginstylecss
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
Ich frage mich, ob das möglich ist. Speichern Sie es und starten Sie den Server.
Es war nicht gut staaff / login.html ??? Was ist das?
Viele ... Feste Ansichten
python:staff/login.views.py
def loginfunc(request):
if request.method == 'POST':
user_name = request.POST['username']
user_password = request.POST['password']
user = authenticate(request, username=user_name, password=user_password)
if user is not None:
login(request, user)
return redirect('staff:staffcreate')
else:
return render(request, 'staff/login.html', {'error':'Falscher Name oder Passwort des Mitarbeiters'})
return render(request, 'staff/login.html')
Ich werde es noch einmal versuchen
Was zur Hölle! !! !! !!
Das Display ist seltsam ... Ist es nicht sicherer, es nicht von Bootstarp aus zu berühren?
2 Stunden, um verschiedene Korrekturen vorzunehmen und Dinge zu zitieren, die in der Vergangenheit erstellt wurden ... Immerhin weiß ich immer noch nicht ... CSS-Datei scheint nicht aufgerufen zu werden
Der aktuelle Zustand ...
python:config.settings.py
STATIC_URL = '/staic/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Darüber hinaus URLs
python:config.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('staff/',include('staff.urls') ),
path('admin/', admin.site.urls),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Ich habe es in geändert, einen statischen Ordner in derselben Hierarchie wie Vorlagen erstellt und style.css direkt darunter erstellt.
static/style.css
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
Da dies nicht gelesen wird, ändert sich die Breite überhaupt nicht ...
Lassen Sie uns ein wenig aufgeben und die Erstellungsfunktion ausführen
Recommended Posts