ホームページ バックエンド開発 Golang Golang がフォトウォールを実装

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

May 13, 2023 am 10:36 AM

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

1. Golang 言語の特徴

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

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

2. デザインのアイデア

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

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

3. 技術的な実装

  1. 環境セットアップ

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

$ go version
ログイン後にコピー
  1. Database Design

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

    #id ​​(写真 ID、主キー)
  • name (写真の名前)
  • path (写真のパス、サーバー上の写真の保存パス)
  • tag (タグ)
上記のフィールドは次のとおりです。保存する必要がある写真情報。

    写真のアップロード
ユーザーが自由に写真をアップロードしてタグ付けできるように、クライアントに写真をアップロードする機能を実装する必要があります。まず、フロントエンド ページに写真のアップロード機能を実装する必要があります。これは 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Debian OpenSSLの脆弱性は何ですか Debian OpenSSLの脆弱性は何ですか Apr 02, 2025 am 07:30 AM

OpenSSLは、安全な通信で広く使用されているオープンソースライブラリとして、暗号化アルゴリズム、キー、証明書管理機能を提供します。ただし、その歴史的バージョンにはいくつかの既知のセキュリティの脆弱性があり、その一部は非常に有害です。この記事では、Debian SystemsのOpenSSLの共通の脆弱性と対応測定に焦点を当てます。 Debianopensslの既知の脆弱性:OpenSSLは、次のようないくつかの深刻な脆弱性を経験しています。攻撃者は、この脆弱性を、暗号化キーなどを含む、サーバー上の不正な読み取りの敏感な情報に使用できます。

Go's Crawler Collyのキュースレッドの問題は何ですか? Go's Crawler Collyのキュースレッドの問題は何ですか? Apr 02, 2025 pm 02:09 PM

Go Crawler Collyのキュースレッドの問題は、Go言語でColly Crawler Libraryを使用する問題を調査します。 �...

GOの浮動小数点番号操作に使用されるライブラリは何ですか? GOの浮動小数点番号操作に使用されるライブラリは何ですか? Apr 02, 2025 pm 02:06 PM

GO言語の浮動小数点数操作に使用されるライブラリは、精度を確保する方法を紹介します...

フロントエンドからバックエンドの開発に変身すると、JavaやGolangを学ぶことはより有望ですか? フロントエンドからバックエンドの開発に変身すると、JavaやGolangを学ぶことはより有望ですか? Apr 02, 2025 am 09:12 AM

バックエンド学習パス:フロントエンドからバックエンドへの探査の旅は、フロントエンド開発から変わるバックエンド初心者として、すでにNodeJSの基盤を持っています...

Goでは、Printlnとstring()関数を備えた文字列を印刷すると、なぜ異なる効果があるのですか? Goでは、Printlnとstring()関数を備えた文字列を印刷すると、なぜ異なる効果があるのですか? Apr 02, 2025 pm 02:03 PM

Go言語での文字列印刷の違い:printlnとstring()関数を使用する効果の違いはGOにあります...

Debianの下のPostgreSQL監視方法 Debianの下のPostgreSQL監視方法 Apr 02, 2025 am 07:27 AM

この記事では、Debianシステムの下でPostgreSQLデータベースを監視するためのさまざまな方法とツールを紹介し、データベースのパフォーマンス監視を完全に把握するのに役立ちます。 1. PostgreSQLを使用して監視を監視す​​るビューPostgreSQL自体は、データベースアクティビティを監視するための複数のビューを提供します。 PG_STAT_REPLICATION:特にストリームレプリケーションクラスターに適した複製ステータスを監視します。 PG_STAT_DATABASE:データベースサイズ、トランザクションコミット/ロールバック時間、その他のキーインジケーターなどのデータベース統計を提供します。 2。ログ分析ツールPGBADGを使用します

Redisストリームを使用してGO言語でメッセージキューを実装する場合、user_idタイプの変換の問題を解決する方法は? Redisストリームを使用してGO言語でメッセージキューを実装する場合、user_idタイプの変換の問題を解決する方法は? Apr 02, 2025 pm 04:54 PM

redisstreamを使用してGo言語でメッセージキューを実装する問題は、GO言語とRedisを使用することです...

Beego ormのモデルに関連付けられているデータベースを指定する方法は? Beego ormのモデルに関連付けられているデータベースを指定する方法は? Apr 02, 2025 pm 03:54 PM

Beegoormフレームワークでは、モデルに関連付けられているデータベースを指定する方法は?多くのBEEGOプロジェクトでは、複数のデータベースを同時に操作する必要があります。 Beegoを使用する場合...

See all articles