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:
2. Designideen
Bei der Implementierung der Fotowandfunktion müssen wir folgende Aspekte berücksichtigen:
3. Technische Umsetzung
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
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:
Oben Das Feld enthält die Fotoinformationen, die wir speichern müssen.
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>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("上传成功"))
}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.
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)
}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>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!
Was ist der Unterschied zwischen Datenbankansichten und Tabellen?
Der Unterschied zwischen Zugangs- und Trunk-Ports
Wie funktioniert ein Schalter?
Was ist Lawine?
HTML-Bildcode-Sammlung
Verwendung der ubound-Funktion
Aus welchen Komponenten besteht ein Linux-System?
Was ist besser, zuerst zu lernen, C-Sprache oder C++?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
