HTMX と Golang を使用したファイルのアップロード-Golang-php.cn

もちろん、HTMX の素晴らしさについてはすでに聞いたことがあるでしょう (まだ聞いたことがないのですか? ここに来て良かったですか?)

今日は、HTMX のシンプルさと Golang の機能を組み合わせて、ファイルをサーバーにアップロードします。そうですね、私たちは HTMX と Go を使って別のエキサイティングな Web 機能を構築するつもりです。

ところで、HTMX を使用したフルスタックアプリケーションの構築に関する実践的なプロジェクトベースのガイドが本当に必要な場合は、私の HTMX + Go: Build Fullstack Applications with Golang and HTMX コース [割引あり] をチェックしてください。

それでは、始めましょう。

Go プロジェクトのセットアップ

最初のステップは、単純な Go プロジェクトをセットアップすることです。これを行うには、フォルダーを作成し、そのフォルダーに移動し、以下のコマンドを使用して Go プロジェクトとして初期化します。

mkdir go-htmx-file-uploads
cd go-htmx-file-uploads
go mod init go-htmx-file-uploads

ログイン後にコピー

プロジェクトを初期化したら、プロジェクト内で必要となる依存関係をいくつかインストールしましょう。

これは、アップロードフォームを含む単一のページと、ファイルのアップロードに使用されるエンドポイントを含む単純なサーバーになります。

ルーティングには、Gorilla Mux ルーティングライブラリを使用しますが、お好みのルーティングソリューションを自由に使用してください。また、Google の Go 用 UUID ライブラリを使用して、ファイルをアップロードするときにファイルのランダムな名前を生成します。さまざまな方法でファイル名を生成できるため、これは個人的な好みです。

以下のコマンドを使用してこれら 2 つをインストールします:

ゴリラマックス

go get -u github.com/gorilla/mux

ログイン後にコピー

Google UUID

go get github.com/google/uuid

ログイン後にコピー

これら 2 つがインストールされると、プロジェクトは完全にセットアップされ、次のステップに進むことができます。

テンプレートの作成

この小さなプロジェクト用に 2 つの HTML テンプレートを作成します。

最初のテンプレートは、サーバーからクライアントに送信できる文字列メッセージのスライスを単に取得する HTML フラグメントです。

このフラグメントは、メッセージのこのスライスを取得し、それをループして、クライアントに返される HTML リストを作成します (HTMX がハイパーメディア API とどのように連携するかを覚えていますか。とてもすばらしいですね)。

それでは、まずそれを作成しましょう。

Go プロジェクトのルートに、まずテンプレートフォルダーを作成します。このフォルダー内にすべてのテンプレートを保存します。

次に、テンプレートフォルダー内にファイルmessages.htmlを作成し、次のコードをそれに追加します。

{{define "messages"}}
<ul>
    {{range .}}
        <li>{{ . }}</li>
    {{end}}
</ul>
{{end}}

ログイン後にコピー

これはメッセージテンプレートを定義し、文字列メッセージの受信スライスをループして HTML リストを形成します。

次のテンプレートでは、ファイルアップロードページ自体を作成します。

テンプレートフォルダー内に新しいファイル Upload.html を作成し、以下のコードを貼り付けます。

{{define "upload"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://unpkg.com/htmx.org@1.9.12"></script>
    <title>Upload File</title>
</head>
<body>

    <div class="row">
        <div class="col-md-6 p-5 mt-5">
            <h4>Upload File</h4>
            <form  class="form">
                <div id="messages"></div>
                <div class="mb-3">
                    <label for="avatarInput" class="form-label">Select Image</label>
                    <input type="file" class="form-control" id="avatarInput" name="avatar" required>
                </div>
                <button 
                    hx-post="/upload" 
                    hx-encoding="multipart/form-data" 
                    hx-target="#messages" 
                    type="submit" class="btn btn-primary">Upload</button>
            </form>
        </div>
    </div>



</body>
</html>
{{end}}

ログイン後にコピー

完璧です!

次に、このファイルのコードを見てみましょう。

まず、upload という名前でテンプレートを定義しました。これは、後でルートハンドラーで参照するために使用する名前です。

head セクションには定型的な HTML コードがいくつかありますが、ここでは 2 つの重要なライブラリを含めています (まあ、本当に重要なのは 1 つだけで、もう 1 つは CSS の雰囲気のためだけです)。

HTMLMX ライブラリは

人気のチュートリアル

詳細>