Golang implementiert eine Fotowand-Golang-php.cn

Mit der Popularität des mobilen Internets steigt die Nachfrage der Menschen nach Fotos. Egal, ob es sich um eine Veranstaltung, eine Reise oder eine Party handelt, das Fotografieren ist unverzichtbar. Auch die Darstellung dieser Fotos ist zu einem Problem geworden. Es entstand eine Anwendung, die die Fotowandfunktion implementiert. Heute stellen wir den Prozess der Implementierung der Fotowand mithilfe der Golang-Sprache vor.

1. Funktionen der Golang-Sprache

Golang ist eine von Google entwickelte Open-Source-Sprache. Die Hauptmerkmale sind wie folgt:

Effizienz: Die Kompilierungsgeschwindigkeit von Golang ist sehr hoch und es bietet erhebliche Vorteile im Vergleich zu C++ und Java.
Speicherverwaltung: Die Speicherverwaltung von Golang wird automatisch vom Compiler abgeschlossen, und Programmierer müssen den Speicher nicht manuell verwalten.
Gleichzeitige Programmierung: Golang bietet leistungsstarke Unterstützung für gleichzeitige Programmierung, wodurch die Anwendungsleistung bei Mehrkern-CPUs oder mehreren Servern besser genutzt werden kann.
Einfachheit: Die Syntax der Golang-Sprache ist prägnant und leicht verständlich, sodass Programmierer schneller loslegen können.

2. Designideen

Bei der Implementierung der Fotowandfunktion müssen wir folgende Aspekte berücksichtigen:

Hochladen von Fotos: Benutzer müssen in der Lage sein, ihre eigenen Fotos hochzuladen, und das müssen sie auch können Markieren Sie Fotos zur einfachen Klassifizierung und Anzeige.
Fotoanzeige: Hochgeladene Fotos sollten nach Tags klassifiziert und angezeigt werden, und Benutzer können Tags zum Anzeigen auswählen.
Datenbankspeicher: Die Fotowand muss die von Benutzern hochgeladenen Fotodaten speichern, und wir müssen eine Datenbank zur Datenspeicherung verwenden.

3. Technische Umsetzung

Umgebungseinrichtung

Bevor wir beginnen, müssen wir zunächst die Umgebung vorbereiten. Wir können das Golang-Installationspaket von der offiziellen Website von Golang herunterladen. Geben Sie nach Abschluss der Installation den folgenden Code in das Terminal ein, um zu überprüfen, ob die Installation erfolgreich ist:

$ go version

Nach dem Login kopieren

Datenbankdesign

Wir müssen eine Datenbank zum Speichern entwerfen Von Benutzern hochgeladene Bilder, daher müssen wir eine Tabelle entwerfen, die die folgenden Felder enthält:

id (Foto-ID, Primärschlüssel)
Name (Fotoname)
Pfad (Fotopfad, der Pfad, in dem das Bild gespeichert ist der Server)
Tag (Tag)

Oben Das Feld enthält die Fotoinformationen, die wir speichern müssen.

Fotos hochladen

Wir müssen die Funktion zum Hochladen von Fotos auf dem Client implementieren, damit Benutzer Fotos frei hochladen und markieren können. Zuerst müssen wir die Foto-Upload-Funktion auf der Front-End-Seite implementieren, die mithilfe der HTML5-Datei-API implementiert werden kann. Das Folgende ist ein Codebeispiel:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>照片上传</title>
    </head>
    <body>
        <input type="file" id="file">
        <input type="text" id="tag">
        <button onclick="upload()">上传</button>
    </body>
    <script>
        function upload() {
            var file = document.getElementById("file").files[0];
            var tag = document.getElementById("tag").value;
            var formData = new FormData();
            formData.append("file", file);
            formData.append("tag", tag);
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/upload", true);
            xhr.onload = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    alert("上传成功");
                } else {
                    alert("上传失败");
                }
            }
            xhr.send(formData);
        }
    </script>
</html>

Nach dem Login kopieren

Auf der Serverseite müssen wir das von Golang bereitgestellte http-Paket verwenden, um die Foto-Upload-Funktion zu implementieren. Das Folgende ist der Beispielcode:

func upload(w http.ResponseWriter, r *http.Request) {
    file, handler, err := r.FormFile("file")
    if err != nil {
        fmt.Println(err)
        return
    }
    defer file.Close()
    tag := r.FormValue("tag")
    fileName := handler.Filename
    f, err := os.OpenFile("./upload/"+fileName, os.O_WRONLY|os.O_CREATE, 0666)
    if err != nil {
        fmt.Println(err)
        return
    }
    defer f.Close()
    io.Copy(f, file)
    insertData(fileName, "./upload/"+fileName, tag)
    w.Write([]byte("上传成功"))
}

Nach dem Login kopieren

Im obigen Code verwenden wir os.OpenFile(), um die hochgeladenen Fotos auf der lokalen Festplatte des Servers zu speichern und fügen dann die Fotoinformationen in die Datenbank ein.

Fotos anzeigen

Wir zeigen Fotos in Kategorien an, die auf den Tags der von Benutzern hochgeladenen Fotos basieren. Auf der Serverseite müssen wir die Datenbank abfragen, Fotos mit bestimmten Tags filtern und sie zur Anzeige an den Client zurücksenden. Das Folgende ist ein Beispielcode:

func getPhotos(w http.ResponseWriter, r *http.Request) {
    tag := r.FormValue("tag")
    var photos []Photo
    if tag == "" {
        db.Find(&photos)
    } else {
        db.Where("tag=?", tag).Find(&photos)
    }
    result := make([]string, len(photos))
    for i, photo := range photos {
        result[i] = photo.Path
    }
    jsonBytes, err := json.Marshal(result)
    if err != nil {
        fmt.Println(err)
        return
    }
    w.Write(jsonBytes)
}

Nach dem Login kopieren

Im obigen Code fragen wir zunächst die Datenbank basierend auf dem vom Benutzer angeforderten Tag ab und erhalten eine Liste von Fotopfaden, die die Bedingungen erfüllen. Konvertieren Sie dann die Fotopfadliste in das JSON-Format und geben Sie sie an den Client zurück.

Auf der Front-End-Seite können wir die Masonry.js-Bibliothek verwenden, um das Layout der Fotowand zu implementieren. Das Folgende ist der Beispielcode:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>照片墙</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
        <style>
            .photo {
                width: 200px;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <input type="text" id="tag">
        <button onclick="getPhotos()">搜索</button>
        <div id="container">
            <div class="grid-sizer"></div>
        </div>
    </body>
    <script>
        function getPhotos() {
            var tag = document.getElementById("tag").value;
            $.ajax({
                url: "/getPhotos",
                type: "GET",
                data: {"tag": tag},
                success: function (data) {
                    var html = "";
                    for (var i = 0; i < data.length; i++) {
                        html += '<div class="photo"><img src="' + data[i] + '"></div>';
                    }
                    $("#container").html(html);
                    var $container = $('#container');
                    $container.imagesLoaded(function () {
                        $container.masonry({
                            itemSelector: ".photo",
                            columnWidth: ".grid-sizer",
                            gutter: 10
                        });
                    });
                }
            });
        }
    </script>
</html>

Nach dem Login kopieren

Im Client senden wir eine Ajax-Anfrage, um die Fotoliste zu erhalten des angegebenen Tags. Anschließend wird die Fotoliste dynamisch in Fotoknoten generiert und die Masonry.js-Bibliothek verwendet, um ein Layout im Stil einer Fotowand zu implementieren.

5. Zusammenfassung

In dieser Implementierung haben wir die Golang-Sprache verwendet, um die Fotowandfunktion zu implementieren. Durch die Implementierung des Prozesses zum Hochladen und Anzeigen von Fotos haben wir erfahren, dass die Golang-Sprache Dateioperationen und Datenbankoperationen unterstützt. Als aufstrebende Programmiersprache bietet Golang nicht nur Vorteile hinsichtlich der Einfachheit und Effizienz der Syntax, sondern unterstützt auch die gleichzeitige Programmierung und nimmt seinen eigenen Platz in Anwendungsszenarien ein, die mit hoher Parallelität und großen Datenmengen zu tun haben. Auch in Zukunft können wir die Golang-Sprache weiter erlernen, erforschen und eingehend anwenden.

Das obige ist der detaillierte Inhalt vonGolang implementiert eine Fotowand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!