Avec la popularité de l’Internet mobile, la demande de photos augmente. Qu'il s'agisse d'un événement, d'un voyage ou d'une fête, prendre des photos est indispensable. La manière d’afficher ces photos est également devenue une préoccupation. Une application qui implémente la fonction de mur de photos a vu le jour. Aujourd'hui, nous allons présenter le processus de mise en œuvre du mur de photos en utilisant le langage Golang.
1. Caractéristiques du langage golang
golang est un langage open source développé par Google. Les principales caractéristiques sont les suivantes :
2. Idées de conception
Lors de la mise en œuvre de la fonction de mur de photos, nous devons prendre en compte les aspects suivants :
3. Mise en œuvre technique
Avant de commencer, nous devons d'abord préparer l'environnement. Nous pouvons télécharger le package d'installation de Golang depuis le site officiel de Golang. Une fois l'installation terminée, entrez le code suivant dans le terminal pour vérifier si l'installation a réussi :
$ go version
Nous devons concevoir une base de données à stocker. images téléchargées par les utilisateurs, nous devons donc concevoir un tableau contenant les champs suivants :
Ci-dessus Le champ contient les informations sur la photo que nous devons stocker.
Nous devons implémenter la fonction de téléchargement de photos sur le client afin que les utilisateurs puissent télécharger librement des photos et les étiqueter. Tout d’abord, nous devons implémenter la fonction de téléchargement de photos sur la page frontale, qui peut être implémentée à l’aide de l’API de fichier HTML5. Voici un exemple de code :
<!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>Côté serveur, nous devons utiliser le package http fourni par golang pour implémenter la fonction de téléchargement de photos. Voici l'exemple de code :
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("上传成功"))
}Dans le code ci-dessus, nous utilisons os.OpenFile() pour enregistrer les photos téléchargées sur le disque local du serveur, puis insérons les informations sur les photos dans la base de données.
Nous affichons les photos dans des catégories en fonction des balises des photos téléchargées par les utilisateurs. Côté serveur, nous devons interroger la base de données, filtrer les photos avec des balises spécifiques et les renvoyer au client pour affichage. Voici un exemple de code :
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)
}Dans le code ci-dessus, nous interrogeons d'abord la base de données en fonction de la balise demandée par l'utilisateur et obtenons une liste de chemins de photos qui remplissent les conditions. Convertissez ensuite la liste des chemins de photos au format json et renvoyez-la au client.
Sur la page front-end, nous pouvons utiliser la bibliothèque Masonry.js pour implémenter la disposition du mur de photos. Voici l'exemple de code :
<!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>Dans le client, nous envoyons une requête ajax pour obtenir la liste des photos. de la balise spécifiée. Ensuite, la liste de photos est générée dynamiquement en nœuds de photos et la bibliothèque Masonry.js est utilisée pour implémenter une disposition de style mur de photos.
5. Résumé
Dans cette implémentation, nous avons utilisé le langage Golang pour implémenter la fonction de mur de photos. En mettant en œuvre le processus de téléchargement et d'affichage de photos, nous avons découvert la prise en charge du langage Golang pour les opérations sur les fichiers et les bases de données. En tant que langage de programmation émergent, Golang présente non seulement des avantages en termes de simplicité et d'efficacité de la syntaxe, mais il prend également en charge la programmation simultanée et a sa propre place dans les scénarios d'application traitant d'une concurrence élevée et de grandes quantités de données. À l’avenir, nous pourrons continuer à apprendre, explorer et appliquer la langue golang en profondeur.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Que veut dire Kol ?
La différence entre xdata et data
Comment utiliser la commande find pour rechercher des fichiers sous Linux
Méthodes courantes en cours de mathématiques
La fonction de la balise span
Où puis-je me procurer le costume Douyin Little Fire Man ?
qu'est-ce que le World Wide Web
Comment ouvrir un fichier mdf
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
