Erste Schritte mit Python Django (4)

Einführung in Bootstrap

Bevor wir erklären, wie man mit Django eine CRUD erstellt, wollen wir Bootstrap vorstellen.

Das HTML, das wir Ingenieure erstellen, wird in Bezug auf das Design langweilig sein. Deshalb habe ich mich für Bootstrap entschieden, ein CSS-Framework.

Die Dokumentation ist in englischer Sprache, aber mit Beispielen finden Sie, was Sie tun möchten.

Bootstrap

Laden Sie es von den folgenden Versionen herunter, einschließlich der für Bootstrap erforderlichen jQuery.

Bootstrap-http://getbootstrap.com/(v4.0.0)
jQuery-http://jquery.com/(v3.4.1)

Erstellen Sie ein Verzeichnis mit dem Namen mybook / cms / static / cms / und platzieren Sie die heruntergeladene Datei wie folgt.

.map-Dateien sind Browser-Entwickler-Tools, die beim Debuggen von JavaScript oder beim Betrachten von HTML-Elementen zur Validierung von CSS die ursprünglichen Zeilennummern bereitstellen. Es funktioniert ohne es.

bootstrap.bundle.min.js enthält (Bundles) Popper.js.

mybook
└── cms
    └── static
        └── cms
            ├── css
            │   ├── bootstrap.min.css
            │   └── bootstrap.min.css.map
            └── js
                ├── bootstrap.bundle.min.js
                ├── bootstrap.bundle.min.js.map
                ├── jquery-3.4.1.min.js
                └── jquery-3.4.1.min.map

Der Grund, warum es mybook / cms / static / cms / ist

Django sucht nach einem statischen Verzeichnis für jede Anwendung (cms) unter dem Projekt (mybook) (mybook / cms / static)
Da das statische Verzeichnis jeder Anwendung als eines interpretiert wird, fügen Sie zur Identifizierung Ihren eigenen Anwendungsnamen (cms) hinzu. (Mybook / cms / static / cms)

Diese ähneln der späteren Suche nach Vorlagen, dienen jedoch der unabhängigen Wiederverwendung der Anwendung. Du musst es jetzt nicht wissen. Denken Sie so darüber nach.

django-bootstrap4

Schreiben Sie für Listen-HTML die für Bootstrap erforderliche Klasse von Hand und verwenden Sie für die Registrierung / Änderung von HTML ein Python-Modul namens django-bootstrap4.

django-bootstrap4 - https://github.com/zostera/django-bootstrap4

Die Installation erfolgt mit dem Befehl pip.

Wenn Sie mit python manage.py runserver arbeiten, stoppen Sie mit Strg + c, bevor Sie fortfahren. (env1) Es wird davon ausgegangen, dass Sie sich in einer virtuellen Umgebung befinden.

Leider scheint das von mir verwendete django-bootstrap-Formular in Bootstrap3 nicht mehr aktualisiert zu werden und unterstützt 4 nicht. Also habe ich zu diesem gewechselt.

$ pip install django-bootstrap4

Im Moment ist 1.1.1 enthalten.

$ pip freeze -l
asgiref==3.2.3
beautifulsoup4==4.8.2
Django==3.0.2
django-bootstrap4==1.1.1
pytz==2019.3
soupsieve==1.9.5
sqlparse==0.3.0

Wenn Sie es bestätigen können, starten wir es erneut mit "python manage.py runserver".

Fügen Sie 'Bootstrap4' zu INSTALLED_APPS in mybook / settings.py hinzu.

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'cms.apps.CmsConfig',   #CMS-Anwendung
    'bootstrap4',           # django-bootstrap4
)

Django CRUD

Machen Sie ungefähr eine Ansicht

Wir benötigen die Funktionen zum Auflisten, Registrieren, Ändern und Löschen. Erstellen Sie daher eine Vorlage in "cms / views.py". Registrierungen und Korrekturen werden als Änderungen zusammengefasst. (Registrieren Sie sich, wenn book_id nicht angegeben ist, korrigieren Sie, falls vorhanden)

Wenn Sie als Code-Stil nicht zwei Zeilen vor def öffnen, werden Wellenlinien angezeigt und es ist verrauscht.

from django.shortcuts import render
from django.http import HttpResponse


def book_list(request):
    """Liste der Bücher"""
    return HttpResponse('Liste der Bücher')


def book_edit(request, book_id=None):
    """Buchbearbeitung"""
    return HttpResponse('Buchbearbeitung')


def book_del(request, book_id):
    """Bücher löschen"""
    return HttpResponse('Bücher löschen')

URL-Schema-Design

Die Datei cms / urls.py existiert nicht, erstellen Sie also eine neue.

Klicken Sie mit der rechten Maustaste auf cms links und geben Sie unter Neu> Python-Datei urls.py an.

Dabei werden die URL und die Funktion der Ansicht verknüpft.

Die URL und der Funktionsname müssen nicht übereinstimmen. Dieser Bereich ist kostenlos.

from django.urls import path
from cms import views

app_name = 'cms'
urlpatterns = [
    #Bücher
    path('book/', views.book_list, name='book_list'),   #Aufführen
    path('book/add/', views.book_edit, name='book_add'),  #Anmeldung
    path('book/mod/<int:book_id>/', views.book_edit, name='book_mod'),  #Fix
    path('book/del/<int:book_id>/', views.book_del, name='book_del'),   #Löschen
]

Fügen Sie dann "cms / urls.py" für das gesamte Projekt in "mybook / urls.py" ein.

from django.contrib import admin
from django.urls import path, include   # ←,add include

urlpatterns = [
    path('cms/', include('cms.urls')),   #← Hier hinzufügen
    path('admin/', admin.site.urls),
]

Die endgültige URL sieht folgendermaßen aus: Bitte erkundigen Sie sich bei Ihrem Browser.

http://127.0.0.1:8000/cms/book/
http://127.0.0.1:8000/cms/book/add/
http://127.0.0.1:8000/cms/book/mod/5/
http://127.0.0.1:8000/cms/book/del/7/

Listenansicht

Schreiben wir die Ansicht, in der die Liste richtig angezeigt wird. Ändern Sie def book_list in cms / views.py wie folgt:

from django.shortcuts import render
from django.http import HttpResponse

from cms.models import Book


def book_list(request):
    """Liste der Bücher"""
    # return HttpResponse('Liste der Bücher')
    books = Book.objects.all().order_by('id')
    return render(request,
                  'cms/book_list.html',     #Vorlage zu verwenden
                  {'books': books})         #Daten, die an die Vorlage übergeben werden sollen

Erstellen Sie eine Listenvorlage

Erstellen Sie eine Vorlage mit dem Namen book_list.html zur Verwendung in der cms-Anwendung des mybook-Projekts. Die Position ist wie folgt.

mybook/cms/templates/cms/book_list.html

Vorher erstellen wir eine Vorlage namens base.html, die davon erbt.

Klicken Sie mit der rechten Maustaste links auf cms und geben Sie "Vorlagen" unter "Neu"> "Verzeichnis" an Klicken Sie mit der rechten Maustaste auf> Vorlage und geben Sie unter Neu> Verzeichnis cms an Klicken Sie mit der rechten Maustaste auf cms und geben Sie "Base.html" in "Neu"> "HTML-Datei" an.

mybook/cms/templates/cms/base.html

Der Inhalt von base.html lautet wie folgt.

{% load i18n static %}
<!DOCTYPE html>{% get_current_language as LANGUAGE_CODE %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{% static 'cms/css/bootstrap.min.css' %}">
{% block extra_css %}{% endblock %}
<title>{% block title %}My books{% endblock %}</title>
</head>
<body>
  <div class="container">
    {% block content %}
      {{ content }}
    {% endblock %}
  </div>
<script src="{% static 'cms/js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'cms/js/bootstrap.bundle.min.js' %}"></script>
{% block extra_js %}{% endblock %}
</body>
</html>

Lassen Sie uns nun diese base_html erben und mybook / cms / templates / cms / book_list.html erstellen. Hier werden nur die notwendigen Teile geschrieben.

Die für class angegebene Klasse ist die von Bootstrap benötigte Klasse.

{% extends "cms/base.html" %}

{% block title %}Liste der Bücher{% endblock title %}

{% block content %}
    <h4 class="mt-4 border-bottom">Liste der Bücher</h4>
    <a href="{% url 'cms:book_add' %}" class="btn btn-primary btn-sm my-3">hinzufügen</a>
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Buchtitel</th>
          <th scope="col">der Herausgeber</th>
          <th scope="col">Seitenzahl</th>
          <th scope="col">Operation</th>
        </tr>
      </thead>
      <tbody>
        {% for book in books %}
        <tr>
          <th scope="row">{{ book.id }}</th>
          <td>{{ book.name }}</td>
          <td>{{ book.publisher }}</td>
          <td>{{ book.page }}</td>
          <td>
            <a href="{% url 'cms:book_mod' book_id=book.id %}" class="btn btn-outline-primary btn-sm">Fix</a>
            <a href="{% url 'cms:book_del' book_id=book.id %}" class="btn btn-outline-danger btn-sm">Löschen</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
{% endblock content %}

Lassen Sie es uns mit einem Browser überprüfen.

http://127.0.0.1:8000/cms/book/

Ergänzungs- / Korrekturformular

Erstellen Sie eine Datei mit dem Namen "cms / forms.py" und schreiben Sie wie folgt. Hier erstellen wir ein Basisformular zum Hinzufügen und Ändern von Buchmodellen in cms / models.py.

from django.forms import ModelForm
from cms.models import Book


class BookForm(ModelForm):
    """Buchform"""
    class Meta:
        model = Book
        fields = ('name', 'publisher', 'page', )

Ansicht von Ergänzungen und Änderungen

Ändern Sie def book_edit in cms / views.py wie folgt:

from django.shortcuts import render, get_object_or_404, redirect
from django.http import HttpResponse

from cms.models import Book
from cms.forms import BookForm

  :

def book_edit(request, book_id=None):
    """Buchbearbeitung"""
    # return HttpResponse('Buchbearbeitung')
    if book_id:   # book_ID wird angegeben(Zum Zeitpunkt der Korrektur)
        book = get_object_or_404(Book, pk=book_id)
    else:         # book_ID nicht angegeben(Zum Zeitpunkt der Hinzufügung)
        book = Book()

    if request.method == 'POST':
        form = BookForm(request.POST, instance=book)  #Erstellen Sie ein Formular aus POST-Anforderungsdaten
        if form.is_valid():    #Formularvalidierung
            book = form.save(commit=False)
            book.save()
            return redirect('cms:book_list')
    else:    #Zum Zeitpunkt von GET
        form = BookForm(instance=book)  #Erstellen Sie ein Formular aus einer Buchinstanz

    return render(request, 'cms/book_edit.html', dict(form=form, book_id=book_id))

Vorlagen zum Hinzufügen und Ändern

Erstellen Sie mybook / cms / templates / cms / book_edit.html, indem Sie von mybook / templates / base_html erben.

{% extends "cms/base.html" %}
{% load bootstrap4 %}

{% block title %}Buchbearbeitung{% endblock title %}

{% block content %}
    <h4 class="mt-4 mb-5 border-bottom">Buchbearbeitung</h4>
    {% if book_id %}
    <form action="{% url 'cms:book_mod' book_id=book_id %}" method="post">
    {% else %}
    <form action="{% url 'cms:book_add' %}" method="post">
    {% endif %}
      {% csrf_token %}
      {% bootstrap_form form layout='horizontal' %}
      <div class="form-group row">
        <div class="offset-md-3 col-md-9">
          <button type="submit" class="btn btn-primary">Senden</button>
        </div>
      </div>
    </form>
    <a href="{% url 'cms:book_list' %}" class="btn btn-secondary btn-sm">Rückkehr</a>
{% endblock content %}

Übergeben Sie die in BookForm von cms / forms.py definierten Elemente an die Vorlage mit einer Variablen namens form in cms / views.py und schreiben Sie{% bootstrap_form form layout = 'horizontal'%} `` form Der-Teil erweitert den Inhalt des Formulars in HTML.

Hier verwenden wir auch das Tag "bootstrap_form", um es in das Bootstrap-Format zu konvertieren.

Die Registrierungsseite für das Buch lautet wie folgt.

Ansicht löschen

Ändern Sie def book_del in cms / views.py wie folgt:

def book_del(request, book_id):
    """Bücher löschen"""
    # return HttpResponse('Bücher löschen')
    book = get_object_or_404(Book, pk=book_id)
    book.delete()
    return redirect('cms:book_list')

Versuchen Sie nun, das Buch zu löschen, indem Sie auf der Buchlistenseite auf die Schaltfläche "Löschen" klicken.

Es ist plötzlich ausgeschaltet, aber es ist eigentlich besser, den Bootstrap-Modaldialog aufzurufen und eine Bestätigungsmeldung zu erhalten. Dies wird später angesprochen.

Fahren Sie mit [Einführung in Python Django (5)] fort (http://qiita.com/kaki_k/items/ebc8d8b07434e1721756).