当前位置：首页 > 文章列表 > Golang > Go教程 > Golang 的浏览器支持：搭建交互式 Web

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

2024-04-07 15:53:29 0浏览收藏

你在学习Golang相关的知识吗？本文《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)
}

浏览 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 页面的底部，在标记之后：

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 应用程序现在可以接收用户的输入并向其显示一个响应。