Golang のブラウザ サポート: インタラクティブな Web の構築

Go は、ブラウザーで実行される対話型 Web アプリケーションを構築します。手順: Go プロジェクトと main.go ファイルを作成し、メッセージを表示するための HTTP ハンドラーを追加します。ユーザー入力と送信用に HTML と JavaScript を使用してフォームを追加します。 Go アプリケーションに POST リクエストの処理を追加し、ユーザー メッセージを受信して​​応答を返します。 Fetch API を使用して POST リクエストを送信し、サーバーの応答を処理します。

Go でインタラクティブな Web アプリケーションを構築: ブラウザのサポート

Go は、バックエンド開発に限定されない多用途のプログラミング言語です。この記事では、Go を使用してブラウザーで実行するインタラクティブな Web アプリケーションを簡単に作成する方法を説明します。

Go Web アプリケーションの作成

まず、新しい Go プロジェクトを作成します:

go mod init myapp

次に、main.go ファイルという名前のプロジェクトを作成し、次のコード:

package main

import (
    "fmt"
    "net/http"
)

func main() {
    // 定义一个处理程序函数，它将在浏览器中渲染一个简单的消息
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        fmt.Fprintf(w, "Hello from Go!")
    })

    // 启动 HTTP 服务器侦听端口 8080 上的请求
    http.ListenAndServe(":8080", nil)
}

Browse Web Application

次のコマンドを使用して Go アプリケーションを実行します:

go run main.go

次に、http://localhost:8080# を開きます。 ##。ページに「Hello from Go!」というメッセージが表示されるはずです。

インタラクティブ性の追加

インタラクティブ性を追加するには、HTML と JavaScript を使用できます。

main.go ファイルの http.HandleFunc クロージャ内に次のコードを追加します。

    // 创建一个简单表单，包含一个输入字段和一个提交按钮
    fmt.Fprintf(w, "<form method='POST'><input type='text' name='message'/><input type='submit' value='Send'/></form>")

これにより、ユーザーが入力できるフォームがページ上に作成されます。メッセージを入力し、「送信」ボタンを押して送信してください。

次に、次の JavaScript コードを HTML ページの下部、

タグの後に追加します。

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
    e.preventDefault();
    const message = e.target.querySelector('input[name="message"]').value;

    // 使用 Fetch API 发送 POST 请求
    fetch('/', {
        method: 'POST',
        body: JSON.stringify({ message }),
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(res => res.json())
    .then(data => {
        // 处理服务器响应
        console.log(data);
    })
    .catch(error => {
        // 处理错误
        console.log(error);
    });
});

この JavaScript コードはフォームをリッスンします。ユーザーが入力したメッセージを収集し、Fetch API を使用して Go サーバーに POST リクエストを送信します。

Go アプリケーションで、POST リクエストを処理する次のコードを追加します。

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        if r.Method == "POST" {
            // 解析 JSON 请求正文
            var msg Message
            decoder := json.NewDecoder(r.Body)
            if err := decoder.Decode(&msg); err != nil {
                http.Error(w, err.Error(), http.StatusBadRequest)
                return
            }

            // 处理消息并返回响应
            fmt.Fprintf(w, "Got your message: %s", msg.Message)
        } else {
            // 处理其他请求方法
        }
    })

    // 定义一个用于保存消息的类型
    type Message struct {
        Message string `json:"message"`
    }

    http.ListenAndServe(":8080", nil)
}

これらの変更により、Web アプリケーションはユーザーからの入力を受け取り、それに対する応答を表示できるようになりました。

結論

Go を使用したインタラクティブな Web アプリケーションの構築は簡単かつ強力です。 Go のバックエンド処理能力と HTML および JavaScript のフロントエンド機能を組み合わせることで、ブラウザーで直接実行されるリッチなユーザー エクスペリエンスを作成できます。

以上がGolang のブラウザ サポート: インタラクティブな Web の構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。