Artikel, die die Systementwicklung mit Django (Python) ermöglichen _Einführung

Einführung

Die Programmierung ist vertrauter geworden als zuvor, einschließlich Python. Wenn Sie die Serviceentwicklung in Frage stellen, gibt es verschiedene Hindernisse.

** "Ich kann das Einführungsbuch oder das Tutorial nicht kopieren / einfügen" ** ** "Ich habe versucht, es mit Kopieren und Einfügen zu machen, aber ich kann es danach nicht mehr arrangieren" ** ** "Ich bin nicht sicher, ob der von mir geschriebene Code korrekt ist" **

Durch Analyse dieser kann es in ** 5 Faktoren ** zerlegt werden, wie in der folgenden Abbildung gezeigt.

In diesem Artikel konzentrieren wir uns auf die "Übungsphase" und zielen darauf ab, ein System zu entwickeln, das tatsächlich funktioniert. *** "Grundphase" ** ist auch in einem anderen Artikel organisiert, daher werde ich den Link vorstellen.

(3) Grundlagen der Programmierung: Lern-Roadmap für die Entwicklung und Veröffentlichung von Diensten von Grund auf mit Python (4) Denken Sie über das Systemdesign nach: Anforderungsdefinitionsartikel, die zu Humanressourcen werden können, die Systeme entwerfen können

Inhalt dieses Artikels

Ich habe es geschrieben, damit Sie ** "Eine Reihe von Schritten für die Systementwicklung mit Django (Python)" ** lernen können. Vom Gesamtverständnis des Entwicklungsprozesses bis zur eigentlichen Programmierung wird der Inhalt umfassend erlernt.

Die Kapitel sind wie folgt.

• ** Was ist überhaupt ein System? ** ** **
• ** Was ist das MVT-Modell von Django? ** ** **
• ** Django-Dateistruktur **
• ** Django Development Procedure_Initial Einstellung **
• ** Django Entwicklungsverfahren_Zusatz von Funktionen **

Probieren Sie nach dem Erlernen einer Reihe von Schritten selbst verschiedene Muster aus Wenn Sie sich daran gewöhnt haben, versuchen Sie es bitte mit ** Original Service Development **.

• Programmierinformationen werden auch auf SNS veröffentlicht. Wenn Sie sich gut fühlen, folgen Sie bitte Twitter "Saku731".

Lass uns anfangen.

Was ist überhaupt ein "System"?

Zunächst ist es sehr wichtig, die ** Bedeutung des Wortes "System" ** zu verstehen. Es wird wie folgt in das Wörterbuch eingeführt.

• ** System: Ein allgemeiner Zusammenhalt, der viele Dinge und eine Reihe von Aufgaben organisiert **

Konvertierung in IT-Begriffe,

• ** System: Eine Sammlung von "Programmen", die viele "Daten" und "eine Reihe von Prozessen" bestellen **

Mit anderen Worten, es ist ein Bild wie "ein Kunststoffmodell, das durch die ordnungsgemäße Montage einzelner Teile vervollständigt wird". Zu diesem Zweck sind drei Arten von Fähigkeiten erforderlich.

** ① Fähigkeit, über Teile nachzudenken, die für die Entwicklung notwendig sind ** ** ② Fertigkeiten zur Herstellung von Einzelteilen ** ** ③ Fähigkeiten, um in Ordnung zu bauen **

Davon abgesehen gibt es blinde Flecken ** "(1) Fähigkeiten, über Teile nachzudenken, die für die Entwicklung notwendig sind" ** Ich schrieb einen Artikel in "Anforderungsdefinitionsartikel, bei denen es sich um Personalressourcen handeln kann, die Systeme entwerfen können".

Und ** "② Wie man einzelne Teile macht" ** wurde bereits von denen gelernt, die Python studiert haben. Es reicht aus, ein Programm zu schreiben, das For-Anweisung / IF-Anweisung und Funktion / Klasse verwendet.

Danach können Sie das System entwickeln, wenn Sie ** "③ Organisieren und Zusammenstellen" -Fähigkeiten ** erwerben. In diesem Artikel werden wir fortfahren, damit Sie die beiden für diesen Zweck erforderlichen Fähigkeiten erwerben können.

** (1) Verstehe den "Überblick über die Systementwicklung" ** ** (2) Verstehen Sie die "Rollen der einzelnen Teile", aus denen das System besteht **

Erstens, um (1) zu löschen Lassen Sie uns ** die von Django ** verwendete Entwicklungsmethode (MTV-Modell) verstehen.

Was ist Djangos "MTV-Modell"?

Django verwendet eine Technik namens ** MTV-Modell **.

• Die Essenz ist genau die gleiche wie das ** MVC-Modell **, das in anderen Sprachen wie Ruby verwendet wird.

Bedeutung von "MTV"

MTV ist eine Abkürzung für ** die drei Hauptelemente, aus denen Django besteht **.

• M：Model
• T：Template
• V：View

Sie müssen es nicht genau verstehen, also lassen Sie uns die allgemeine Rolle verstehen.

Zunächst besteht das System als Prämisse aus drei Elementen: ** "Bildschirm, Verarbeitung, Daten" **. In Sätzen ausgedrückt sieht es so aus.

• ** Nachdem Sie "Daten" mit "Verarbeitung" versehen haben, zeigen Sie diese auf "Bildschirm" an **

Nehmen Sie zum Beispiel ein System, das Verkaufsdaten analysiert. Wie in der Abbildung gezeigt, werden ** "Bildschirme / Prozesse / Daten" ausgehend von Benutzeroperationen in Rollen ** unterteilt.

Wenn dies auf das MTV-Modell angewendet wird, kann die Rollenverteilung wie folgt organisiert werden.

• ** Ansicht (Verarbeitung) **: ** Rolle der zentralen Steuerung **
• ** Modell (Daten) **: ** Rolle zur Steuerung der Datenbank **
• ** Vorlage (Bildschirm) **: ** Rolle zur Steuerung des Bildschirms (Webseite) **

Mit anderen Worten, ** "Bildschirm", "Verarbeitung" und "Daten" sind ordnungsgemäß verknüpft **. Das System fungiert als ** Aggregat **.

• Definition von "System" (Repost) --- ** System: Eine Sammlung von "Programmen", die viele "Daten" und "eine Reihe von Prozessen" organisieren **

Mit den oben genannten Informationen sollten Sie ** "(1) Übersicht über die Systementwicklung" ** sehen können.

• Wenn Sie weitere Erklärungen benötigen, würde ich mich freuen, wenn Sie im Kommentarbereich eine Anfrage stellen könnten.

Danach, während Sie tatsächlich programmieren, während Sie das fertige Produkt herstellen ** Lassen Sie uns verstehen "(2) Rollen einzelner Teile, aus denen das System besteht" **.

Django-Dateistruktur

Um das Ziel zu kennen, organisieren Sie zunächst die ** Dateistruktur (= Teilestruktur) ** des von Django erstellten Systems. Lassen Sie uns verstehen, welche Rolle jede Datei spielt, während sie mit dem MTV-Modell verknüpft wird.

Besonders verwirrend ist "Was ist der Unterschied zwischen den folgenden Dateien **? **".

• " app_config / views.py und app_folder / views.py"
• " app_config / urls.py und app_folder / urls.py"

Der Unterschied kann wie folgt organisiert werden, aber zunächst verstehe ich den Wert der Teilung nicht.

--app_config: ** Verwalte das gesamte System ** --app_folder: ** Einzelne Funktionen verwalten ** im System

Die erste Fähigkeit, die Sie benötigen, ist "app_folder". Dies ist die Fähigkeit, bestimmte Funktionen zu entwickeln Kopieren Sie einfach app_config und fügen Sie es ein und gehen Sie davon aus, dass ** zuerst ein funktionierendes System ** erstellt wird.

Schauen wir uns nun die Dateistruktur an.

Liste der von Django verwendeten Dateien

Wenn Sie mit der Entwicklung mit Django fortfahren, erhalten Sie diese Art von Dateistruktur.

Zu diesem Zeitpunkt ist es in Ordnung, wenn Sie nicht verstehen, was darin steht Bitte beziehen Sie sich darauf, wenn Sie sich mitten in der Programmierung verlaufen. ** "Was machen Sie jetzt?" **.

• ** manage.py: Eine Sammlung von Funktionen, die für das Entwicklungsmanagement erforderlich sind und als" Verwaltungsbefehle "bezeichnet werden **
• ** app_config /: Ordner zum Speichern von Dateien mit Bezug zu globalen Einstellungen ** --views.py: ** [View] ** Schreiben Sie ein Programm, das das gesamte System steuert --urls.py: Legen Sie die zu verwendende URL fest --settings.py: Verwalten Sie verschiedene Einstellungswerte, z. B. DB-Einstellungen
• ** app_folder /: Ordner zum Speichern von Programmen, die auf dem System implementiert werden sollen ** --admin.py: Einstellungsdatei für den Verwaltungsbildschirm --views.py: ** [View] ** Beschreiben Sie einzelne Funktionen, die im System implementiert werden sollen --urls.py: Datei zum Festlegen der auf der Webseite verwendeten URL --models.py: ** [Modell] ** Beschreiben Sie die DB-Definition --forms.py: Datei, die das auf der Webseite verwendete Eingabeformular festlegt --migrations / : Ordner, in dem der Änderungsverlauf der DB-Definition verbleibt
• ** templates /: [Template] Ordner zum Speichern von HTML-Dateien ** --base.html: HTML-Code von ** "äußerer Rahmen (Seitenleiste usw.)" **, der auf allen Webseiten gemeinsam angezeigt wird
• app_folder/ --top_page.html: ** "Inside" ** HTML, das auf jeder Webseite angezeigt werden soll
• ** static /: Ordner zum Speichern von Bildern, CSS-Dateien, Javascript-Dateien ** --css /: Ordner zum Speichern von CSS-Dateien --js /: Ordner zum Speichern von JS-Dateien --images / : Ordner zum Speichern von Bilddateien

Wieder ** haben diese Dateien (= Teile) individuelle Rollen **, Durch die ordnungsgemäße Montage funktioniert das Ganze als ** "System" **.

• Definition von "System" (Repost) --- ** System: Eine Sammlung von "Programmen", die viele "Daten" und "eine Reihe von Prozessen" organisieren **

Lassen Sie uns nun mit der Entwicklung fortfahren. Von den eingangs erwähnten wesentlichen Entwicklungsfähigkeiten haben wir es mit ② und ③ zu tun.

• "(1) Über notwendige Teile nachdenken" wird weggelassen, da dies in Artikel hier behandelt wurde.

** ② Fertigkeiten zur Herstellung von Einzelteilen ** ** ③ Fähigkeiten, um in Ordnung zu bauen **

Django Development Procedure_Initial Setting

Von hier aus werde ich das Programm also in Python schreiben Ich empfehle Ihnen, einen Editor vorzubereiten.

Aufbau einer Entwicklungsumgebung

Bereiten Sie zunächst die Entwicklungsumgebung vor. Es gibt vier Optionen für die Entwicklungsumgebung, aber dieses Mal erstellen wir die beste "** virtuelle Umgebung **" für den Einstieg.

• Nebenbei bemerkt, nachdem Sie sich an das Erstellen einer virtuellen Umgebung gewöhnt haben, ist es gut, die Virtualisierung vom Containertyp zu studieren.

--PC lokale Umgebung: Nichts tun pip install ●● --Virtuelle Umgebung: Verwenden Sie venv ** ⇒ Verwenden Sie diesmal **

• Virtuelle Maschine: Verwenden Sie "VirtualBox"
• Virtualisierung vom Containertyp: Verwenden Sie "Docker"

#Erstellen Sie eine virtuelle Umgebung / verschieben Sie Ordner
$ python -m venv venv
$ cd venv

#[Für Windows & Eingabeaufforderung] Starten Sie die virtuelle Umgebung
$ Scripts/activate.bat

#[Für Windows & GitBash] Starten Sie die virtuelle Umgebung
$ source Scripts/activate
* Wenn ein Fehler auftritt, "Quellfach"/activate」

#[Für Mac] Starten Sie die virtuelle Umgebung
$ source Scripts/activate
* Wenn ein Fehler auftritt, "Quellfach"/activate」

#Installieren Sie die zu verwendende Bibliothek
$ pip install Django==2.1.5
$ pip install django-bootstrap4

#Führen Sie bei Verwendung von "MySQL" für DB auch Folgendes aus
$ pip install mysqlclient

#Entwicklungsordner erstellen / verschieben
$ cd ..
$ mkdir mysite
$ cd mysite

Starten Sie das Projekt

Führen Sie "Projekt starten" aus, um mit der Entwicklung von Django zu beginnen. Eine Reihe von Einstellungsdateien, die für die Entwicklung erforderlich sind, wird automatisch erstellt.

Sie können einen beliebigen Namen für den Teil "app_config" verwenden. Ändern Sie ihn daher, wenn Sie sich daran gewöhnt haben.

• ** Wird für den Ordnernamen verwendet, in dem Dateien gespeichert werden, die sich auf globale Einstellungen beziehen **.

$ django-admin startproject app_config .

Wenn der Vorgang abgeschlossen ist, sieht die Ordnerstruktur wie folgt aus.

• Ignorieren Sie Dateien, die unten nicht geschrieben sind.

• ** app_config /: Ordner zum Speichern von Dateien in den globalen Einstellungen ** --settings.py: Eine Datei, die verschiedene Einstellungswerte wie DB-Einstellungen verwaltet --urls.py: Datei zum Festlegen der zu verwendenden URL -- manage.py: Datei, die die für die Systemverwaltung erforderlichen Funktionen beschreibt

Einstellungsdatei

Jetzt richten wir den gesamten Django ein. Es sollte LANGUAGE_CODE und TIME_ZONE am Ende von app_config / settings.py reparieren.

• Dieses Element gibt die zu verwendende Sprache und Zeitzone an.

app_config/settings.py

#Sprach- / Zeitzoneneinstellung usw.
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'

Außerdem unterstützt Django standardmäßig ** SQLite **, sodass Sie die Datenbank mit den Standardeinstellungen verwenden können. Wenn Sie ** MySQL ** verwenden, ändern Sie DATABASES in app_config / settings.py wie folgt.

app_config/settings.py

#Ändern Sie DATABASE wie folgt
DATABASES = {
    'default': {
        'ENGINE':'django.db.backends.mysql',
        'NAME':'●●(Name der Datenbank)',
        'USER':'●● (DB-Benutzername)',
        'PASSWORD':'●● (DB-Anmeldepass)',
        'HOST':'localhost',
        'PORT':'',
    }
}

Datenbankvorbereitung (Migration)

Führen Sie zu diesem Zeitpunkt den folgenden Befehl aus. Wenn der Prozess erfolgreich abgeschlossen wurde, ist die für die Django-Entwicklung erforderliche Mindestdatenbank bereit.

$ python manage.py migrate

Versuchen Sie, das System zu starten

Lassen Sie uns das System starten, um sicherzustellen, dass die Einstellungen bis zu diesem Punkt erfolgreich sind.

$ python manage.py runserver

Versuchen Sie dann, über Ihren Browser auf "http: // localhost: 8000" zuzugreifen. Wenn Sie den Bildschirm unten sehen, sind Sie erfolgreich.

Wenn Sie dies bestätigen können, stoppen Sie das System mit "Strg + c (Befehl + c auf Mac)".

Anwendungsbezogene Dateien erstellen

Als nächstes werden wir spezifische Webanwendungsfunktionen entwickeln. Führen Sie den folgenden Befehl aus.

Sie können einen beliebigen Namen für den Teil "app_folder" verwenden.

• Es ist besser, sich nicht zu ändern, bis Sie sich an die Entwicklung gewöhnt haben.

$ python manage.py startapp app_folder

Bei der Ausführung wird ein Ordner mit dem Namen "app_folder" erstellt. Direkt darunter werden verschiedene Dateien erstellt. * Ignorieren Sie Dateien, die unten nicht geschrieben sind.

• ** app_folder /: Ordner zum Speichern von Programmen, die auf dem System implementiert werden sollen ** --admin.py: Datei, die den Systemverwaltungsbildschirm festlegt --models.py: [Model] Beschreiben Sie die DB-Definition --views.py: [View] Schreiben Sie ein Programm, das hinter dem System ausgeführt werden soll

Registrieren Sie die App in der Einstellungsdatei

Seien Sie hier vorsichtig, erstellen Sie einfach den Ordner app_folder / Es wird von app_config / nicht erkannt, das das gesamte System verwaltet.

Daher müssen Sie sich in INSTALLED_APPS von app_config / settings.py registrieren. INSTALLED_APPS ist ein Element zum Registrieren von Anwendungen, die im System verwendet werden sollen.

• Sie müssen es zuerst nicht verstehen, also kopieren wir es einfach.

Der zu registrierende Name wird durch Kombinieren von drei Elementen erstellt.

1. Der zuvor angegebene App-Name "app_folder"
2. apps
3. Klassenname in app_folder / apps.py`` AppFolderConfig

Kombinieren Sie diese drei und fügen Sie " app_folder.apps.AppFolderConfig "hinzu. Dadurch wird die Anwendung erkannt, die Sie in Django entwickeln möchten.

app_config/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app_folder.apps.AppFolderConfig', #Fügen Sie diese eine Zeile hinzu
]

Bereiten Sie einen Ordner für HTML / CSS vor

Als nächstes bereiten wir einen Ordner vor, der sich auf HTML / CSS bezieht Erstellen Sie Ordner und Dateien in derselben Hierarchie wie "manage.py" wie folgt.

• ** templates /: [Template] Ordner zum Speichern von HTML-Dateien **
  • base.html
  • app_folder/
    • top_page.html
• ** static /: Ordner zum Speichern von Bildern, CSS-Dateien, Javascript-Dateien **
  • css/
  • js/
  • images/

Nach Abschluss der Erstellung ist es in Ordnung, wenn die folgende Dateistruktur eingerichtet ist.

Statische Dateizugriffseinstellungen

Fügen Sie unten in app_config / settings.py Variablen hinzu, die sich auf statische Dateien beziehen (z. B. Bilddateien). Sobald diese Einstellung vorgenommen wurde, wird das ** Einfügen von Bildern in HTML-Dateien ** und ** CSS- und JavaScript-bezogene Arbeit ** einfacher.

app_config/settings.py

#Unten wurden Einstellungen für statische Dateiaufrufe hinzugefügt
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 
PROJECT_NAME = os.path.basename(BASE_DIR)
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] 
STATIC_ROOT = '/var/www/{}/static'.format(PROJECT_NAME)

Ändern Sie in ähnlicher Weise die zweite Zeile "DIRS" von "TEMPLATES" in der Mitte von "app_config / settings.py". Dadurch werden die im Ordner ** templates / ** gespeicherten HTML-Dateien auf Ihrem System erkannt.

app_config/settings.py

#Fügen Sie eine Vorlage zu TEMPLATES hinzu (Einstellung für Vorlagenaufrufe)
TEMPLATES = [ 
    { 
        'BACKEND': 'django.template.backends.django.DjangoTemplates', 
        'DIRS': [os.path.join(BASE_DIR, 'templates')], #Fügen Sie diese Zeile hinzu
        'APP_DIRS': True, 
        'OPTIONS': { 'context_processors': [ 
            'django.template.context_processors.debug', 
            'django.template.context_processors.request', 
            'django.contrib.auth.context_processors.auth', 
            'django.contrib.messages.context_processors.messages', 
            ], 
        }, 
    }, 
]

Einstellungen für den Zugriff auf Mediendateien

• Dies wird in diesem Artikel nicht behandelt, wird aber in Zukunft nützlich sein. Machen wir es also *

Fügen Sie diesen Code auch unten in settings.py hinzu. Die Fälle, in denen diese Einstellung erforderlich ist, sind wie folgt.

• Möglichkeit zum Hochladen von ** Dateien wie Bildern **
• ** Eine Funktion zum Anzeigen der hochgeladenen Datei als Inhalt auf dem Webbildschirm **
• Möglichkeit zum Herunterladen von ** Dateien ** wie CSV

• In der Praxis verwenden wir häufig Speicher in der Cloud namens "S3" von AWS, aber jetzt ist es in Ordnung, sich dessen nicht bewusst zu sein.

app_config/settings.py

#Einstellungen für Mediendateien
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Erstellen Sie nach Abschluss der Einstellungen einen Ordner "media /" in derselben Hierarchie wie "manage.py". Der Ablauf besteht darin, Mediendateien hier hochzuladen.

• Beim Erstellen eines Datei-Uploaders wird empfohlen, [Referenz] zu überprüfen.

Erstellen einer Basisvorlage

Als Nächstes erstellen wir eine HTML-Datei, die auf dem Systembildschirm angezeigt wird. Kennen Sie alle ** Bootstrap **?

** "Ich habe mein Bestes versucht, um CSS zu lernen, aber ich kann keinen schönen Bildschirm erstellen." **

** Bootstrap **, entwickelt von Twitter, ist effektiv, um solche Probleme zu lösen. ** Sie können eine stilvolle Website ohne Designkenntnisse erstellen ** Sie ist ausgezeichnet.

• Weitere Informationen finden Sie unter [Bootstrap-Referenzartikel].

Die Einrichtung zur Verwendung von "BootStrap" ist sehr einfach. Fügen Sie einfach bootstrap4 zu INSTALLED_APPS in app_config / settings.py hinzu und los geht's.

app_config/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app_folder.apps.AppNameConfig',
    'bootstrap4', #Fügen Sie diese eine Zeile hinzu
]

Als nächstes erstellen wir eine HTML-Datei (** Basisvorlage **). Sie können die Menge des zu schreibenden Codes reduzieren, indem Sie die Vorlage in zwei Typen codieren.

-① ** "Außerhalb" ** Teil, der allen Seiten gemeinsam ist: templates / base.html -② Anzeige auf jeder Seite ** "Inside" -Inhalt **: templates / app_folder / top_page.html etc.

Die Figur ist wie folgt.

Bereiten Sie zuerst die Basisvorlage für ** "①Outside" ** vor. Wir haben ein Design erstellt, das einer gewissen Verwendung standhält. Kopieren Sie es daher und verwenden Sie es so, wie es ist.

Darüber hinaus ist im Teil von ** "↓↓ Inhaltskörper ↓↓" ** unten, Der Mechanismus ist so, dass die HTML-Datei, die den Inhalt von ** "② Inside" ** enthält, wiedergegeben wird.

template/base.html

<!DOCTYPE html>

{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='slim' %}
{% load static %}

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type='text/css' href="{% static 'css/style.css'%}">
    <link rel="stylesheet" href="https://cccabinet.jpn.org/bootstrap4/css/style.css">
    <title>Django Entwicklungsbeispiel</title>

    {% block extra_css %}{% endblock %}

</head>

  <body>
    <!--↓ ↓ Obere Navigationsleiste ↓ ↓-->
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <nav class="navbar navbar-expand-lg fixed-top navbar-dark bs-navbar" style='background-color:cadetblue;' id="bs-navbar">
            <a class="navbar-brand mr-md-2" href="/app_folder/top_page">
Beispielentwicklungsbildschirm
            </a>
              <!--↓ ↓ Dummy zum Anpassen des Layouts ↓ ↓-->
              <ul class="navbar-nav mr-auto">
                <li class="nav-item"><a class="nav-link" href="#">   </a></li>
                <li class="nav-item"><a class="nav-link" href="#">   </a></li>
              </ul>
              <!--↑↑ Dummy bis hierher ↑↑-->                            

              <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="/#" >Probe 1</a></li>
                <li class="nav-item"><a class="nav-link" href="/#" >Probe 2</a></li>
                <li class="nav-item"><a class="nav-link" href="/#" >Probe 3</a></li>
                <li class="nav-item"><a class="nav-link" href="/accounts/login" >Einloggen</a></li>
                <li class="nav-item"><a class="nav-link" href="/accounts/logout" >Ausloggen</a></li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>


    <!--"Seitenleiste" und "Inhaltskörperteil"-->
    <div id="content" class="container-fluid">
      <div class="row flex-xl-nowrap">

        <!--↓ ↓ Seitenleiste ↓ ↓-->
        <div id="sidemenu" class="col-2 d-none d-md-block bg-light sidebar align-self-start">
          <div class="sidebar-sticky">
            <ul class="nav flex-column">

              <li class="nav-item">
                <nav class="navbar navbar-light bg-light">
                  <a class="navbar-brand" href="/#">
                    <span data-feather=""></span>Oberste Seite
                  </a>
                </nav>
              </li>
              <li class="nav-item">
                <nav class="navbar navbar-light bg-light">
                  <a class='navbar-brand' href='/#'>
                    <span data-feather=""></span>Seitenleiste 1
                  </a>
                </nav>
              </li>
              <li class="nav-item">
                <nav class="navbar navbar-light bg-light">
                  <a class='navbar-brand' href='/#'>
                    <span data-feather=""></span>Seitenleiste 2
                  </a>
                </nav>
              </li>         
              <li class="nav-item">
                <nav class="navbar navbar-light bg-light">
                  <a class='navbar-brand' href='/#'>
                    <span data-feather=""></span>Seitenleiste 3
                  </a>
                </nav>
              </li>         
              <li class="nav-item">
                <nav class="navbar navbar-light bg-light">
                  <a class='navbar-brand' href='/#'>
                    <span data-feather=""></span>Seitenleiste 4
                  </a>
                </nav>
              </li>         
              <li class="nav-item">
                <nav class="navbar navbar-light bg-light">
                  <a class='navbar-brand' href='/#'>
                    <span data-feather=""></span>Seitenleiste 5
                  </a>
                </nav>
              </li>         
            </ul>
          </div>
        </div id="sidemenu">
        <!--↑↑ Seitenleiste bis hierher ↑↑-->

        <!--↓ ↓ Inhaltskörper ↓ ↓-->
        <div class="col-10">
          {% block contents %}
          {% endblock %}
        </div>
        <!--↑↑ Inhaltskörper bis hierher ↑↑-->
      </div>
    </div>
    </div>
  </body>
</html>

<!--Symbol für die Seitenleiste-->
<!--Liste der verfügbaren Symbole: https://voyager-jp.com/blog/javascript/feather/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
<script>feather.replace()</script>

Jede Vorlage erstellen

Erstellen Sie nach dem Erstellen der Basisvorlage eine HTML-Datei, die ** "innerhalb" des Inhalts ** ist. Wir werden später Inhalte hinzufügen. Kopieren Sie also zuerst Folgendes und erstellen Sie eine Datei.

templates/app_folder/top_page.html

{% extends 'base.html' %}
{% block contents %}

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center mt-5 border-bottom">
    <h1 class="h2">oberste Seite</h1>
</div>

<div>
    <h4>Beschreiben Sie den Inhalt hier</h4>
</div>

{% endblock %}

Es gibt nur einen Punkt und am Anfang und am Ende sind drei "{% ~%}" beschrieben. Es ist ein Mechanismus, den Sie ** "" innerhalb des "Inhaltsteils" ** in die Basisvorlage einfügen können.

• Achten Sie daher darauf, es nicht zu löschen, auch wenn Sie einen Fehler machen.

• {% extends 'base.html' %}
• {% block contents %}
• {% endblock %}

Damit ist die Vorlagenvorbereitung abgeschlossen.

Da nichts durch Erstellen einer Vorlage (HTML-Datei) auf dem Bildschirm angezeigt werden kann Als Nächstes erstellen wir eine Ansicht, die das interne System steuert.

Erstellen Sie eine Ansicht, die das Innere des Systems steuert

Wie eingangs erwähnt, gibt es zwei Arten von Ansichten.

--app_config / views.py: ** Kontrolliere das Ganze ** ungefähr ** --app_folder / views.py: ** Einzelne Funktionen steuern **

Erstellen Sie zunächst app_config / views.py aus der einfachsten. Erstellen Sie views.py im Ordner app_config und beschreiben Sie den Inhalt wie folgt.

app_config/views.py

from django.shortcuts import render, redirect, reverse  
from django.views import View  
  
class index(View):
    def get(self, request, *args, **kwargs):
        return redirect(reverse('app_folder:top_page'))
index = index.as_view()

Dies ist eine Einstellung wie ** "Wenn Zugriff auf das System besteht, springen Sie zur obersten Seite" **. Es ist in Ordnung, wenn Sie jedes Mal das gleiche schreiben.

Öffnen Sie dann "app_folder / views.py", das die spezifischen Funktionen des Systems steuert, und kopieren Sie Folgendes Dies schreibt eine Funktion, die "top_page.html" anzeigt, wenn auf die oberste Seite zugegriffen wird ".

app_folder/views.py

from django.shortcuts import render  
from django.views import View  
  
class SampleView(View):  
	def get(self, request, *args, **kwargs):  
		return render(request, 'app_folder/top_page.html')
top_page = SampleView.as_view()

Nachdem wir die Mindestansicht erstellt haben, fahren wir fort.

• Spezifische Funktionen werden später hinzugefügt.

Erstellen eines URL-Dispatchers

Legen Sie hier die URL fest, die für den Zugriff auf das System über den Webbildschirm erforderlich ist. Beispiel: "http: // localhost: 8000 / my_app / top_page". Sie können das folgende "https: //" frei festlegen.

• Es gibt eine Einschränkung, dass Sonderzeichen wie "!" Und "?" Nicht verwendet werden, aber es gibt kein Problem, wenn sie ** Kleinbuchstaben ** oder ** Unterstriche ** sind.

Es gibt zwei Arten von Dateien, die geändert werden müssen.

--app_config / urls.py: Systemweites URL-Design --app_folder / urls.py: URL-Design innerhalb einzelner Apps

Die Beziehung zwischen den beiden wirkt sich auf die Reihenfolge aus, in der die URLs erstellt werden. ** http: // localhost: 8000 / <URL-Einstellung von app_config / urls.py> / <URL-Einstellung von app_folder / urls.py> ** URLs werden in dieser Reihenfolge konfiguriert.

Zuerst ist app_config / urls.py.

app_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
from . import views

#Gesamtdesign der URL
urlpatterns = [
    #Die App "App" soll diesmal erstellt werden_URL für den Zugriff auf "Ordner"
    path('app_folder/', include('app_folder.urls')),
    #Wenn Sie keine URL angeben (App_config/views.Mit py "App" automatisch_(Bereits für den Zugriff auf "Ordner" eingestellt)
    path('', views.index, name='index'),
    #URL für den Zugriff auf die Verwaltungssite
    path('admin/', admin.site.urls),
]

#URL-Einstellung zum Veröffentlichen von Mediendateien
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Erstellen Sie als Nächstes urls.py im Ordner app_folder / und schreiben Sie wie folgt.

Da noch nur die oberste Seite (top_page /) vorbereitet ist, ist urlpatterns eine Zeile, Die Anzahl der zu registrierenden URLs erhöht sich, wenn verschiedene Funktionen hinzugefügt werden.

app_folder/urls.py

from django.urls import path
from . import views

app_name = 'app_folder'
urlpatterns = [
    path('top_page/', views.top_page, name='top_page')
]

Um zu verstehen, ** http: // localhost: 8000 / <URL-Einstellung von app_config / urls.py> / <URL-Einstellung von app_folder / urls.py> **

Gemäß den hier festgelegten URL-Einstellungsregeln lautet die URL für den Zugriff auf die oberste Seite http://localhost:8000/app_folder/top_page Und so weiter. So funktioniert der URL-Dispatcher.

Versuchen Sie, das System zu starten

Nachdem Sie alle Einstellungen vorgenommen haben, starten wir das System.

$ python manage.py runserver

Wenn es kein Problem gibt, wird das Terminal wie folgt angezeigt.

Als nächstes starten wir den Browser und greifen auf "http: // localhost: 8000 / app_folder / top_page" zu.

Wenn der folgende Bildschirm angezeigt wird, ist er erfolgreich und in dem Teil, in dem die Beispielzeichen vorübergehend eingegeben werden Sie können verschiedene Dienste erstellen, indem Sie ** selbst Inhalte hinzufügen **.

Nachdem die Ersteinrichtung abgeschlossen ist, fügen wir nur eine einfache Funktion hinzu.

Django-Entwicklungsverfahren_Entwickeln Sie zusätzliche Funktionen

Erhalten Sie die Suchbedingung ** aus dem ** Eingabeformular, das auf dem Webbildschirm angezeigt wird. ** Rufen Sie die in der Datenbank gespeicherten Daten ab. ** Lassen Sie uns zusätzliche Funktionen entwickeln.

Der Verarbeitungsablauf ist wie folgt.

• Zeigen Sie das Eingabeformular auf dem Bildschirm an --Erhalten Sie die vom Benutzer eingegebenen Suchkriterien
• Abrufen von Informationen aus der Datenbank basierend auf den Suchbedingungen
• Zeigen Sie die abgerufenen Informationen auf dem Bildschirm an

Datenbankaufbau

Definieren wir zunächst eine Datenbank zum Speichern der Daten.

Um models.py zu verstehen, sind ** Kenntnisse der Datenbank ebenfalls erforderlich ** Nach dem Studium dieses Artikels empfehle ich Ihnen, mit etwas Django Primer im Detail zu studieren.

app_folder/models.py

from django.db import models

class SampleDB(models.Model):
    class Meta:
        db_table = 'sample_table' #In DB verwendeter Tabellenname
        verbose_name_plural = 'sample_table' #Tabellenname, der auf der Admion-Site angezeigt werden soll
    sample1 = models.IntegerField('sample1', null=True, blank=True) #Speichern Sie Nummern
    sample2 = models.CharField('sample2', max_length=255, null=True, blank=True) #String speichern

Führen Sie dann den folgenden Befehl aus, um die Einstellungen in der Datenbank widerzuspiegeln.

$ python manage.py makemigrations
$ python manage.py migrate

Wenn es im Terminal so aussieht, ist es erfolgreich.

Administrator-Benutzerregistrierung

Registrieren Sie nach dem Einrichten der Datenbank den Benutzer, der das System verwaltet. Geben Sie zunächst den folgenden Befehl ein.

$ python manage.py createsuperuser

Als nächstes werden die Fragen in der folgenden Reihenfolge gestellt. Geben Sie sie daher in der angegebenen Reihenfolge ein. Aus Sicherheitsgründen wird das Kennwort bei der Eingabe nicht angezeigt, ist jedoch in Ordnung. (Ich bin zuerst überrascht, aber keine Sorge)

• Nutzername
• Mail Adresse --Passwort (1. Mal)
• Zur Passwortbestätigung)

Wenn nach der Eingabe "Superuser erfolgreich erstellt" angezeigt wird, ist die Administrator-Benutzerregistrierung erfolgreich.

Bau der Verwaltungsstelle

Nachdem Sie sich als Administrator registriert haben, erstellen wir eine ** Verwaltungssite **.

Was ist eine Management-Site?

• Ursprünglich müssen Sie sich an ** MySQL ** usw. erinnern, um DB zu betreiben ――Ich kann MySQL nicht ausführen, obwohl Python (Django) voll ist. .. --Sie, ** Lassen Sie uns die DB auf dem Bildschirm von der Verwaltungsseite aus bedienen **!

Es ist eine praktische Website. Lassen Sie uns also zunächst lernen, wie Sie die Datenbank bedienen, anstatt sie in Worten zu verstehen. Nehmen Sie die Einstellungen vor, um sofort eine Verwaltungssite zu erstellen.

app_folder/admin.py

from django.contrib import admin
from .models import SampleDB # models.Klassenname angegeben durch py

admin.site.register(SampleDB) # models.Klassenname angegeben durch py

Damit sind die Einstellungen für die Verwaltungssite abgeschlossen. Greifen wir auf localhost: 8000 / admin zu, nachdem wir den folgenden Befehl ausgeführt haben.

$ python manage.py runserver

Nachdem Sie sich mit dem zuvor erstellten Benutzernamen und Passwort angemeldet haben Wenn Sie einen solchen Bildschirm sehen, sind Sie erfolgreich.

Versuchen wir, uns in der Datenbank zu registrieren. Die Registrierung erfolgt in 3 Schritten.

-①: Klicken Sie auf "Samplle_table"

-②: Klicken Sie auf `Add SAMPLE_DB``

--③: Füllen Sie die Elemente aus und klicken Sie auf "Speichern".

Damit ist die Registrierung in der Datenbank abgeschlossen.

Ansichts- / Vorlagenänderungen

Nachdem Sie die Informationen in der Datenbank registriert haben, erhalten Sie die Daten. Fahren Sie danach mit der Anzeige der Daten auf dem Webbildschirm fort.

• Empfangen Sie Suchbedingungen aus dem Eingabeformular auf dem Bildschirm
• Daten aus der Datenbank basierend auf den Suchbedingungen abrufen
• Übergeben Sie die erfassten Daten an die Vorlage (Bildschirm)

** [Suchbedingungen vom Eingabeformular auf dem Bildschirm empfangen] ** Erstellen Sie zunächst page01.html, um ein Eingabeformular zu erstellen.

templates/app_folder/page01.html

{% extends 'base.html' %}
{% block contents %}

<h4 class="mt-5 mb-4 border-bottom">Geben Sie die Suchbedingungen ein</h4>
<form  action="{% url 'app_folder:top_page' %}" method="post">
<div class="container-fluid">
  <div class="row">
    <div class="col-2">
      <input class="form-control" type="text" name="input_data" maxlength="255">
    </div>
    <div class="col-2">
      <div class="text-left align-bottom">
          <button type="submit" name="button" class="btn btn-info">
Suche
          </button>
      </div>
    </div>
  </div>
</div>
{% csrf_token %}
</form>

{% endblock %}

** [Daten aus der Datenbank basierend auf den Suchbedingungen abrufen] ** Bearbeiten Sie dann views.py, um die Daten vom Eingabeformular zu erhalten

• Es ist besser, den gesamten Originalinhalt zu löschen und Folgendes neu einzufügen.

app_folder/views.py

from django.shortcuts import render  
from django.views import View  
from .models import SampleDB

class SampleView(View):  
	def get(self, request, *args, **kwargs):  
		return render(request, 'app_folder/page01.html')

	def post(self, request, *args, **kwargs):  
		input_data = request.POST['input_data']
		result = SampleDB.objects.filter(sample1=input_data)
		result_sample1 = result[0].sample1
		result_sample2 = result[0].sample2
		context={'result_sample1':result_sample1, 'result_sample2':result_sample2}
		return render(request, 'app_folder/page02.html', context=context,)
		
top_page = SampleView.as_view()

** [Übergeben Sie die erfassten Daten an die Vorlage (Bildschirm)] ** Erstellen Sie abschließend eine neue page02.html, um die von der DB erhaltenen Daten anzuzeigen.

templates/app_folder/page02.html

{% extends 'base.html' %}
{% block contents %}

<h4 class="mt-5 mb-4 border-bottom">DB-Suchergebnisse anzeigen</h4>
<div class="container-fluid">
  <div class="row">
    <div class="col-4">
      <p>sample1：{{result_sample1}}</p>
      <p>sample2：{{result_sample2}}</p>
    </div>
  </div>
</div>

{% endblock %}

Funktionsprüfung

Wenn Sie fertig sind, starten Sie das System erneut Gehen Sie zu "http: // localhost: 8000 / app_folder / top_page /".

$ python manage.py runserver

Wenn Sie einen Bildschirm wie diesen erhalten, funktioniert er.

Nachdem Sie ** "1" ** in das Eingabeformular eingegeben und auf die Suchschaltfläche geklickt haben Wenn das zuvor in der Datenbank registrierte ** "1. Beispiel" ** angezeigt wird, ist es erfolgreich.

Damit ist die Ersteinrichtung von Django und eine Reihe einfacher Schritte zum Hinzufügen von Funktionen abgeschlossen. ** Diese Dateien bilden die Grundlage für die Django-Entwicklung **. Speichern Sie sie also und speichern Sie sie.

schließlich

In diesem Artikel werden nach der Organisation der fünf Probleme bei der Systementwicklung Ich habe mich mit (1) und (2) mit Zahlen befasst.

(1) Das Gesamtbild der Systementwicklung ist nicht sichtbar (2) Die Rollen der einzelnen Teile, aus denen das System besteht, sind nicht sichtbar (3) Ich habe nicht die Grundlagen, um die Entwicklung herauszufordern (4) Ich habe nicht die Fähigkeiten, aus Ideen über Systemdesign nachzudenken (5) Was machen? (Idee) kommt nicht heraus

Nachdem Sie die ** Systemdefinition ** organisiert haben, Ich denke, dass ich tatsächlich (2) und (3) der drei erforderlichen Fähigkeiten durch Programmierung verstehen konnte.

** System: Eine Sammlung von "Programmen", die viele "Daten" und "eine Reihe von Prozessen" organisieren **

Benötigte Fähigkeiten: ① Fähigkeit, über Teile nachzudenken, die für die Entwicklung erforderlich sind ② Fähigkeiten zur Herstellung von Einzelteilen ③ Fähigkeiten, um ordentlich aufzubauen

Da ich es mit der Richtlinie "Mach etwas, das zuerst funktioniert" ** geschrieben habe, gibt es außerdem einige Teile, in denen die Erklärung weggelassen wird. Wenn Sie etwas nicht verstehen, verwenden Sie bitte die verfügbaren Einführungsbücher und Tutorials, um dies auszugleichen.

Wir hoffen, dass jeder, der den Artikel liest, einen guten Service entwickelt. Bis zum Ende Danke fürs Lesen.

Wie der Titel schon sagt, wurde dieser Artikel als ** "Einführung" ** geschrieben. Freuen Sie sich also auf die Fortsetzung.

【P.S.】 Auf SNS werden auch verschiedene Informationen veröffentlicht. Wenn Sie also der Meinung sind, dass es in Ordnung ist, den Artikel zu lesen Ich wäre Ihnen dankbar, wenn Sie Twitter-Konto "Saku731" folgen könnten.