Créer un écran de connexion Django

La dernière fois, j'ai senti que je ne pouvais pas enregistrer un nouveau personnel parce que je n'avais pas obtenu les informations utilisateur, alors je vais créer un écran de connexion.

En vous connectant en tant que membre du personnel, nous le créerons dans l'application du personnel. Assurez-vous de charger le modèle de connexion dans urls.py.

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"),
]

Ajout de loginfunc. Ensuite, créez un funk de connexion dans Views.

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':'Nom d'employé ou mot de passe incorrect'})
    return render(request, 'staff/login.html')

Est-ce que ça va? À partir de l'écran de connexion html, entrez le nom d'utilisateur et le mot de passe saisis dans la variable nom_utilisateur mot_de_passe_utilisateur et vérifiez s'il existe le même utilisateur. Si ce n'est pas qu'il n'y a pas d'utilisateurs (c'est difficile à comprendre (rires)), connectez-vous et appelez la page nommée staffcreate avec ursl dans l'application du personnel. Devrait aller comme ça

Si l'utilisateur n'est pas trouvé, revenez à l'écran de connexion, puis transmettez le message avec une erreur.

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">Page de connexion</h1>
    {{ error }}
    <label for="text" class="sr-only">ID d'employé</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">S'identifier</button>
    <p class="mt-5 mb-3 text-muted">&copy;GK</p>
</form>
{% endblock content %}

Je viens de faire quelques modifications du modèle bootstrap. Ajoutez des paramètres à settings.py afin de pouvoir appeler des fichiers statiques

config/settings.py


STATIC_URL = '/static/'

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

Créer un dossier statique dans la même hiérarchie que les modèles Pour organiser, créez un dossier du personnel, créez-y loginstyle.css et écrivez css ici. Il s'agit également d'une copie du modèle d'amorçage, je ne peux donc pas l'écrire à partir de zéro.

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;
}

Je me demande si cela peut être fait. Enregistrez-le et démarrez le serveur.

image.png

Ce n'était pas bon staaff / login.html ??? Qu'est-ce que c'est

Beaucoup de ... vues fixes

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':'Nom d'employé ou mot de passe incorrect'})
    return render(request, 'staff/login.html')

Je vais réessayer avec ça

Que se passe-t-il! !! !! !!

image.png

L'affichage est étrange ... N'est-il pas plus sûr de ne pas le toucher depuis bootstarp?

2 heures pour faire diverses corrections et citer des choses créées dans le passé ... Après tout, je ne sais toujours pas ... Le fichier CSS ne semble pas être appelé

image.png

L'état actuel ...

python:config.settings.py


STATIC_URL = '/staic/'

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

De plus, les URL

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)

Je l'ai changé en, créé un dossier statique dans la même hiérarchie que les modèles et créé style.css directement en dessous.

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;
}

Comme ce n'est pas lu, la largeur ne change pas du tout ...

Laissons tomber un peu et commençons à faire la fonction de création

Recommended Posts

Créer un écran de connexion Django
Créer un planning Django
Créer un écran de connexion dans Django all auth
Une histoire sur l'implémentation d'un écran de connexion avec django
Créer une page d'accueil avec django
Étapes pour créer un projet Django
Créer un téléchargeur de fichiers avec Django
Créer un bot LINE avec Django
[Python] Créer un écran pour le code d'état HTTP 403/404/500 avec Django
Créez un modèle pour votre planning Django
Créer un écran de mise à jour avec Django Updateview
Tout refaire pour l'écran de connexion Django
Créez un tableau de bord pour les appareils réseau avec Django!
Créez une application Hello World avec un seul fichier avec django
Comment créer une API Rest dans Django
Jusqu'à ce que vous créiez une nouvelle application dans Django
Créer un module Python
Flux d'ajout d'écran Django2
Créer un LV amorçable
Créer un environnement Python
Démarrer un projet Django
Créer une liste Django Todo
Créer un bot slack
Créer une application Todo avec Django REST Framework + Angular
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 1 ~
Afficher un écran qui nécessite une connexion à l'affichage numérique
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 2 ~
Transition vers l'écran de mise à jour avec le Django a tag
À moi-même en tant que débutant Django (1) -Création d'un projet / application-
À moi-même en tant que débutant Django (4) --Créer une application mémo-
Créer une application Todo avec Django ⑤ Créer une fonction d'édition de tâches
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 3 ~
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 4 ~
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 5 ~
Créer un environnement django avec docker-compose (MariaDB + Nginx + uWSGI)
Créer un plugin Wox (Python)
Créer un référentiel pypi local
Créez une application de gestion de partition shogi à l'aide de Django 4 ~ Créer une vue ~
Créer une fonction en Python
Créer un dictionnaire en Python
[Python] Créez un écran de spécification de chemin de fichier et de dossier avec tkinter
Créer une API avec Django
Les débutants de Django créent des applications simples 3
Les débutants de Django créent des applications simples 1
Créer un serveur REST (simple)
Création de liste de tâches [Python Django]
[Django] Créer un menu déroulant
[Django] Créez un modèle adapté au numéro de téléphone / code postal
Créer un tableau numpy python
Créer un fichier de données factice
Les débutants de Django créent des applications simples 2
Créez votre propre middleware Django
Créez une API Web capable de fournir des images avec Django
Créer une application Todo avec Django ① Créer un environnement avec Docker
Créer une salle de classe sur Jupyterhub
Créer un serveur textlint simple