Golang met en œuvre un mur de photos-Golang-php.cn

Golang met en œuvre un mur de photos

WBOY

Libérer： 2023-05-13 10:36:07

original

558 Les gens l'ont consulté

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 :

Efficacité : la vitesse de compilation de Golang est très rapide et présente des avantages significatifs par rapport à C++ et Java.
Gestion de la mémoire : la gestion de la mémoire de Golang est automatiquement complétée par le compilateur et les programmeurs n'ont pas besoin de gérer manuellement la mémoire.
Programmation simultanée : golang fournit un support puissant pour la programmation simultanée, qui peut mieux exercer les performances des applications dans le cas de processeurs multicœurs ou de plusieurs serveurs.
Simplicité : la syntaxe du langage Golang est concise et facile à comprendre, permettant aux programmeurs de démarrer plus rapidement.

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 :

Téléchargement de photos : les utilisateurs doivent pouvoir télécharger leurs propres photos, et ils doivent également pouvoir le faire. étiquetez les photos pour une classification et un affichage faciles.
Affichage des photos : les photos téléchargées doivent être classées et affichées en fonction des balises, et les utilisateurs peuvent sélectionner les balises à afficher.
Stockage de base de données : le mur de photos doit stocker les données photo téléchargées par les utilisateurs, et nous devons utiliser une base de données pour le stockage des données.

3. Mise en œuvre technique

Configuration de l'environnement

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

Copier après la connexion

Conception de la base de données

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 :

id (photo d'identité, clé primaire)
name (nom de la photo)
path (chemin de la photo, le chemin où l'image est stockée sur le serveur)
tag (tag)

Ci-dessus Le champ contient les informations sur la photo que nous devons stocker.

Télécharger des photos

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>

Copier après la connexion

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("上传成功"))
}

Copier après la connexion

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.

Afficher les photos

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)
}

Copier après la connexion

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>

Copier après la connexion

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!