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

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

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?

Artikel empfehlen

Tiefgreifendes Verständnis der Erstellung und Implementierung von Servlets in Tomcat

1. Was ist ein Servlet 1.1. Erklären Sie in offiz...

Was ist eine HTML-Datei? So öffnen Sie eine HTML-Datei

HTML steht für Hypertext Markup Language. Heutzut...

So installieren Sie die MySQL 8.0-Datenbank auf dem M1-Chip (Bild und Text)

1. Herunterladen Zunächst möchte ich einen inländ...

Vue+Vant implementiert die obere Suchleiste

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Bereitstellung des Alibaba Cloud Servers (grafisches Tutorial)

Ich habe vor Kurzem Front-End- und Back-End-Techn...

So öffnen Sie Ports zur Außenwelt in Alibaba Cloud Centos7.X

Kurz gesagt: Wenn Sie einen Cloud-Server eines be...

Detaillierte Erläuterung der Konfigurationsmethode „Groß-/Kleinschreibung ignorieren“ für MySQL-Tabellennamen

Standardmäßig unterscheidet MySQL unter Linux zwi...

Detaillierte Erklärung der referenziellen Integrität in SQL (eins-zu-eins, eins-zu-viele, viele-zu-viele)

1. Referenzielle Integrität Referenzielle Integri...

Verwenden Sie thead, tfoot und tbody, um eine Tabelle zu erstellen

Manche Leute verwenden diese drei Tags auf pervers...

Tutorial zur Installation und Nutzungskonfiguration von Docker+nacos+seata1.3.0

Ich habe vorher einen Tag damit verbracht. Obwohl...

Das CSS3-Diamantpuzzle realisiert die Funktion, nur das Div zu drehen und das Hintergrundbild nicht zu drehen

Nachfragehintergrund Das Projekt wurde mit Vue er...

Detaillierte Erklärung der drei Möglichkeiten zum Festlegen von Rahmen in HTML

Drei Möglichkeiten zum Festlegen von Rahmen in HT...

Mysql Master-Slave-Synchronisation Last_IO_Errno:1236 Fehlerlösung

Was ist der Grund für den Fehler Last_IO_Errno:12...

Implementierung des Wasserfall-Layouts im Uni-App-Projekt

GitHub-Adresse, Sie können es mit einem Stern mar...

MySQLs Methode zum Umgang mit doppelten Daten (Verhindern und Löschen)

Einige MySQL-Tabellen können doppelte Datensätze ...