Golang がフォトウォールを実装-Golang-php.cn

Golang がフォトウォールを実装

WBOY

リリース： 2023-05-13 10:36:07

オリジナル

551 人が閲覧しました

モバイルインターネットの普及に伴い、写真に対する人々の需要が高まっています。イベントでも旅行でもパーティーでも写真撮影は欠かせません。これらの写真をどのように展示するかも悩みの種となっている。フォトウォール機能を実装するアプリができましたので、今回はgolang言語を使ってフォトウォールを実装する手順を紹介します。

1. Golang 言語の特徴

golang は、Google によって開発されたオープンソース言語です。主な機能は次のとおりです:

効率: Golang のコンパイル速度は非常に速く、C や Java と比較して大きな利点があります。
メモリ管理: Golang のメモリ管理はコンパイラによって自動的に完了するため、プログラマが手動でメモリを管理する必要はありません。
同時プログラミング: golang は同時プログラミングの強力なサポートを提供し、マルチコア CPU または複数のサーバーの場合にアプリケーションのパフォーマンスを向上させることができます。
シンプルさ: golang 言語の構文は簡潔で理解しやすいため、プログラマーはより早く作業を開始できます。

2. デザインのアイデア

フォトウォール機能を実装するときは、次の点を考慮する必要があります:

写真のアップロード: ユーザーは次のことを行う必要があります。自分の写真をアップロードするときは、簡単に分類して表示できるように写真にタグを付けることもできる必要があります。
写真の表示: アップロードされた写真はタグに従って分類して表示され、ユーザーはタグを選択して表示できます。
データベースストレージ: フォトウォールにはユーザーがアップロードした写真データを保存する必要があり、データストレージにはデータベースを使用する必要があります。

3. 技術的な実装

環境セットアップ

始める前に、まず環境を準備する必要があります。 golang の公式 Web サイトから golang インストールパッケージをダウンロードできます。インストールが完了したら、ターミナルに次のコードを入力して、インストールが成功したかどうかを確認します:

$ go version

ログイン後にコピー

Database Design

ユーザーがアップロードした写真を保存するデータベースを設計する必要があるため、次のフィールドを含むテーブルを設計する必要があります:

上記のフィールドは次のとおりです。保存する必要がある写真情報。

ユーザーが自由に写真をアップロードしてタグ付けできるように、クライアントに写真をアップロードする機能を実装する必要があります。まず、フロントエンドページに写真のアップロード機能を実装する必要があります。これは HTML5 ファイル API を使用して実装できます。以下はコード例です:

<!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>

ログイン後にコピー

サーバー側では、golang が提供する http パッケージを使用して写真アップロード機能を実装する必要があります。以下はサンプルコードです。

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

ログイン後にコピー

上記のコードでは、os.OpenFile() を使用して、アップロードされた写真をサーバーのローカルディスクに保存し、その写真情報をデータベースに挿入します。

ユーザーがアップロードした写真のタグに基づいて写真を分類して表示します。サーバー側では、データベースにクエリを実行し、特定のタグで写真をフィルタリングし、表示するためにクライアントに返す必要があります。以下はサンプルコードです。

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

ログイン後にコピー

上記のコードでは、まずユーザーが要求したタグに基づいてデータベースにクエリを実行し、条件を満たす写真パスのリストを取得します。次に、写真パスのリストを json 形式に変換し、クライアントに返します。

フロントエンドページでは、Masonry.js ライブラリを使用してフォトウォールのレイアウトを実装できます。サンプルコードは次のとおりです:

<!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>

ログイン後にコピー

クライアントでは、指定されたラベルの写真リストを取得するための ajax リクエスト。次に、写真リストが写真ノードに動的に生成され、Masonry.js ライブラリを使用してフォトウォールスタイルのレイアウトが実装されます。

5. まとめ

今回の実装では、golang言語を使用してフォトウォール機能を実装しました。写真をアップロードして表示するプロセスを実装することで、golang 言語がファイル操作とデータベース操作をサポートしていることを学びました。新興のプログラミング言語である golang は、構文の単純さと効率という点で利点があるだけでなく、同時プログラミングもサポートしており、高い同時実行性と大量のデータを処理するアプリケーションシナリオで独自の役割を果たしています。将来的には、golang 言語をさらに深く学習、探索、応用し続けることができます。

以上がGolang がフォトウォールを実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。