Implementierungscode zum Speichern von Bildern in der MySQL-Datenbank und deren Anzeige auf der Front-End-Seite

Inhaltsverzeichnis

1. Erstellen Sie zunächst mit pycharm ein Django-Projekt und konfigurieren Sie die entsprechende Umgebung
2. Erstellen Sie eine Tabelle
3. Bild-Upload-Funktion
4. Bildanzeigefunktion
5. Bild löschen Funktion

Der Editor verwendet das Django-Framework in Python, um es zu vervollständigen!

1. Erstellen Sie zunächst mit pycharm ein Django-Projekt und konfigurieren Sie die entsprechende Umgebung

Hier erstellt der Editor ein Standardprojekt

Zwei Konfigurationen, die in settings.py geändert werden müssen

DATENBANKEN = {
    'Standard': {
        # "ENGINE": "django.db.backends.sqlite3",
        # 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),

        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'Fotos',
        'HOST': '127.0.0.1',
        'PORT': '3306',
        'BENUTZER': 'root',
        'PASSWORT': '201314',

    }
}


STATIC_URL = "/statisch/"

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

2. Erstellen Sie eine Tabelle

① Drücken Sie zuerst die Taste Win+S auf der Tastatur, geben Sie dann cmd ein, drücken Sie zweimal die Eingabetaste für die chinesische Eingabemethode und einmal die Eingabetaste für die englische Eingabemethode, um das DOS-Fenster aufzurufen.

② Geben Sie das Kennwort mysql -uroot -p ein und drücken Sie die Eingabetaste, um die MySQL-Datenbank aufzurufen. Geben Sie dann den Namen der Datenbanktabelle „create database table“ ein. Drücken Sie eine kleine Eingabetaste, um die Datenbank zu erstellen 🆗

Bildbeschreibung hier einfügen

③Erstellen Sie die Tabellenstruktur in models.py unter App

Modelle.py

aus django.db Modelle importieren

# Erstellen Sie hier Ihre Modelle.


Klasse Bilder(Modelle.Modell):
    img = models.ImageField(upload_to='static/pictures/') # upload_to='static/pictures/' gibt den Ordnernamen für die Bildspeicherung an. Er wird nach dem Hochladen der Datei automatisch erstellt. img_name = models.CharField(max_length=32)
    Erstellungszeit = Modelle.DateTimeField(auto_now_add=True)

④Migration der Datenbank

Führen Sie die folgenden beiden Anweisungen im Terminal unter pycharm der Reihe nach aus

python manage.py makemigrations

python manage.py migrieren

Bildbeschreibung hier einfügen

3. Bild-Upload-Funktion

urls.py

aus django.conf.urls URL importieren
von django.contrib importiere admin
aus app01 Ansichten importieren

URL-Muster = [
    url(r'^admin/$', admin.site.urls),

    url(r'^upload/$', Ansichten.upload, Name='upload'),

]

Ansichten.py

von django.shortcuts Render importieren, umleiten
aus app01 Modelle importieren


# Erstellen Sie hier Ihre Ansichten.


def hochladen (Anfrage):
    Fehler = ''
    wenn request.method == 'POST':
        img = Anfrage.DATEIEN.get('img')
        Bildname = Bildname
        wenn Bildname.split('.')[-1] == 'mp4':
            Fehler = 'Das Hochladen von Bildern in diesem Format wird noch nicht unterstützt! ! ! '
        anders:
            Modelle.Bilder.Objekte.Erstellen(Bildname=Bildname, Bild=Bild)
            Umleitung zurückgeben('anzeigen')
    returniere Render(Anfrage, 'upload.html', Einheimische())

Frontend-Uploadseite upload.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Fotos hochladen</title>
</Kopf>
<Text>
<div Stil="Höhe: 160px">
    <Formularaktion="" Methode="posten" enctype="multipart/form-data">
        {% csrf_token %}
        <h1>Bildseite hochladen</h1>
        <table cellpadding="5px">
            <tr>
                <td>Bilder hochladen</td>
                <td><input Typ="Datei" Name="img"></td>
            </tr>
            <tr>
                <td>
                    <button>Hochladen</button>
                </td>
                <td><strong style="color: red">{{ Fehler }}</strong></td>
            </tr>
        </Tabelle>
    </form>
</div>
<div Stil="Textausrichtung: Mitte;Farbe: #2b542c;Schriftgröße: 20px;">
    <a href="{% url 'show' %}" rel="external nofollow" >Zurück</a>
</div>
</body>
</html>

Bildbeschreibung hier einfügen

4. Bildanzeigefunktion

urls.py

"""
aus django.conf.urls URL importieren
von django.contrib importiere admin
aus app01 Ansichten importieren

URL-Muster = [
    url(r'^admin/$', admin.site.urls),

    url(r'^upload/$', Ansichten.upload, Name='upload'),
    url(r'^show/$', Ansichten.show, Name='show'),

]

Ansichten.py

von django.shortcuts Render importieren, umleiten
aus app01 Modelle importieren


# Erstellen Sie hier Ihre Ansichten.


def hochladen (Anfrage):
    Fehler = ''
    wenn request.method == 'POST':
        img = Anfrage.DATEIEN.get('img')
        Bildname = Bildname
        wenn Bildname.split('.')[-1] == 'mp4':
            Fehler = 'Das Hochladen von Bildern in diesem Format wird noch nicht unterstützt! ! ! '
        anders:
            Modelle.Bilder.Objekte.Erstellen(Bildname=Bildname, Bild=Bild)
            Umleitung zurückgeben('anzeigen')
    returniere Render(Anfrage, „upload.html“, Einheimische())


def show(Anfrage):
    alle_Bilder = Modelle.Bilder.Objekte.alle()
    # für i in allen_Bildern:
    # drucken(i.img)
    returniere Render(Anfrage, 'show.html', Einheimische())

Frontend-Anzeige show.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Fotos anzeigen</title>
</Kopf>
<Text>
{% für Bild in all_images %}
    <img src="/{{ image.img }}" style="Breite: 240px;Höhe: 240px;">
{% endfor %}
<br/>
<p style="text-align: center;color: #2b542c;font-size: 20px;">
    <a href="{% url 'upload' %}" rel="external nofollow" rel="external nofollow" >Zurück</a>
</p>
</body>
</html>

Bildbeschreibung hier einfügen

5. Bild löschen Funktion

urls.py

aus django.conf.urls URL importieren
von django.contrib importiere admin
aus app01 Ansichten importieren

URL-Muster = [
    url(r'^admin/$', admin.site.urls),

    url(r'^upload/$', Ansichten.upload, Name='upload'),
    url(r'^show/$', Ansichten.show, Name='show'),
    url(r'^löschen/$', Ansichten.löschen, Name='löschen'),

]

Ansichten.py

von django.shortcuts Render importieren, umleiten
aus app01 Modelle importieren


# Erstellen Sie hier Ihre Ansichten.


def hochladen (Anfrage):
    Fehler = ''
    wenn request.method == 'POST':
        img = Anfrage.DATEIEN.get('img')
        Bildname = Bildname
        wenn Bildname.split('.')[-1] == 'mp4':
            Fehler = 'Das Hochladen von Bildern in diesem Format wird noch nicht unterstützt! ! ! '
        anders:
            Modelle.Bilder.Objekte.Erstellen(Bildname=Bildname, Bild=Bild)
            Umleitung zurückgeben('anzeigen')
    returniere Render(Anfrage, 'upload.html', Einheimische())


def show(Anfrage):
    alle_Bilder = Modelle.Bilder.Objekte.alle()
    # für i in allen_Bildern:
    # drucken(i.img)
    returniere Render(Anfrage, „show.html“, Einheimische())


def löschen(Anfrage):
    pk = Anfrage.GET.get('pk')
    Modelle.Bilder.Objekte.Filter(id=pk).Löschen()
    Umleitung zurückgeben('anzeigen')

anzeigen.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Fotos anzeigen</title>
</Kopf>
<Text>
{% für Bild in all_images %}
    <img src="/{{ image.img }}" style="Breite: 240px;Höhe: 240px;">
    <a href="/delete/?pk={{ image.id }}" rel="external nofollow" >Löschen</a>
{% endfor %}
<br/>
<p style="text-align: center;color: #2b542c;font-size: 20px;">
    <a href="{% url 'upload' %}" rel="external nofollow" rel="external nofollow" >Zurück</a>
</p>
</body>
</html>

Bildbeschreibung hier einfügen

6. Demonstrieren Sie das Ganze

Bildbeschreibung hier einfügen

Aufgrund der knappen Zeit wird es so einfach wie möglich implementiert, ohne schöne Seiten und Stile hinzuzufügen. Freunde, die Schönheit mögen, können auf die offizielle Bootstrap-Website oder zu jq22 gehen, um es selbst hinzuzufügen! ! !

Dies ist das Ende dieses Artikels über das Speichern von Bildern in der MySQL-Datenbank und deren Anzeige auf der Front-End-Seite. Weitere relevante Bilder, die in der MySQL-Datenbank gespeichert und auf der Front-End-Seite angezeigt werden, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Lösen Sie das Problem des MySQL-Datenverlusts, wenn Docker Redis neu startet
Lösung für das Problem des Datenverlusts bei Verwendung der Ersetzungsoperation in MySQL
Mehrere Lösungen zur Vermeidung von MySQL-Datenverlust bei einem Serverausfall
Warum der Speicherplatz nach dem Löschen von Daten in MySQL nicht freigegeben wird
Python-Grundlagen: Bedienung einer MySQL-Datenbank
Erfahren Sie, wie Sie den Fehler beim Speichern chinesischer Schriftzeichen in der MySQL-Datenbank beheben können
Django speichert Bilder in der MySQL-Datenbank und zeigt sie auf der Front-End-Seite an
MyBatis Batch-Einfügen/Ändern/Löschen von MySql-Daten
Zusammenfassung der MySQL-Datenmigration
Golang implementiert die Übermittlung und das Rollback von MySQL-Datenbanktransaktionen
Detaillierte Erläuterung der Rolle der Standarddatenbank nach der MySQL-Installation
Ursachen und Lösungen für MySQL-Datenverlust

<<: Sieben Prinzipien eines guten Designers (1): Schriftdesign

>>: Ist das Tag „li“ ein Blockelement?

JavaScript Array Methoden - Systematische Zusammenfassung und ausführliche Erklärung

Implementierungscode zum Speichern von Bildern in der MySQL-Datenbank und deren Anzeige auf der Front-End-Seite

Inhaltsverzeichnis

1. Erstellen Sie zunächst mit pycharm ein Django-Projekt und konfigurieren Sie die entsprechende Umgebung

2. Erstellen Sie eine Tabelle

3. Bild-Upload-Funktion

4. Bildanzeigefunktion

5. Bild löschen Funktion

JavaScript Array Methoden - Systematische Zusammenfassung und ausführliche Erklärung

Win10 Installation von MySQL 5.7 MSI-Version des Tutorials mit Bildern und Text

Webstandards – Lernen Sie die Trennung von Struktur und Präsentation zu verstehen

Detaillierte Erklärung von Promises in JavaScript

Lösung für EF (Entity Framework)-Einfüge- oder Aktualisierungsfehler

Zehn wichtige Fragen zum Erlernen der Grundlagen von Javascript

Linux: Beispiel für das Bearbeiten des Start-, Stopp- und Neustartskripts für Springboot-JAR-Pakete

Beispielcode zur Implementierung einer schwebenden Seitenbox basierend auf JS

Füllen Sie die Suchfunktion auf der HTML-Seite aus

Details zu den Überwachungseigenschaften der Uhr in Vue

Artikel empfehlen

Verwendung und Verständnis von MySQL-Triggern

Detaillierte Zusammenfassung von MySQL und verbindungsbezogenen Timeouts

Beheben Sie den Fehler bei der Installation von VMware Tools unter Ubuntu 18.04

Erläuterung zum Lastenausgleich und Reverseproxy von Nginx

Mysql aktualisiert bestimmte Felder einer anderen Tabelle basierend auf Daten aus einer Tabelle (SQL-Anweisung)

Schreiben Sie eine dynamische Uhr auf einer Webseite in HTML

Vue + Element UI realisiert Ankerpositionierung

Verwenden von CSS3 zum Implementieren eines Schriftfarbverlaufs

Kleine Details der Web-Frontend-Entwicklung

So erstellen Sie mit virtualenv eine virtuelle Umgebung unter Windows (zwei Möglichkeiten)

So ändern Sie das MySQL-Passwort auf dem XAMPP-Server (mit Bildern)

Detailliertes Beispiel zum Ändern des Linux-Kontokennworts

Sie müssen wirklich die Verwendung von CSS-Variablen var() verstehen

Beispiel für die Implementierung eines globalen Wasserzeichens in Vue

Einige Referenzen zu Farben in HTML