Golang 的瀏覽器支援：建立互動式 Web-Golang-PHP中文網

Golang 的瀏覽器支援：建立互動式 Web

WBOY

發布： 2024-04-07 16:03:01

原創

883 人瀏覽過

Go建立互動式網頁應用程序，在瀏覽器中運行。步驟：建立Go專案和main.go文件，新增HTTP處理程序以顯示訊息。使用HTML和JavaScript新增表單，用於使用者輸入和提交。在Go應用程式中加入對POST請求的處理，接收用戶訊息並回傳回應。使用Fetch API發送POST請求並處理伺服器回應。

Golang 的浏览器支持：搭建交互式 Web

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

登入後複製

瀏覽Web 應用程式

使用以下命令執行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>")

登入後複製

這將在頁面上建立表單，使用者可以在其中輸入訊息並按"Send" 按鈕提交。

接下來，加入以下JavaScript 程式碼到HTML 頁面的底部，在</form> 標籤之後：

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 發送POST 請求到Go 伺服器。

在 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 應用程式現在可以接收使用者的輸入並向其顯示回應。