Golang 的浏览器支持：搭建交互式 Web-Golang-PHP中文网

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

WBOY

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

原创

853 人浏览过

Go构建交互式Web应用程序，在浏览器中运行。步骤：创建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 应用程序现在可以接收用户的输入并向其显示一个响应。