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

go构建交互式web应用程序,在浏览器中运行。 步骤:创建go项目和main.go文件,添加http处理程序以显示消息。使用html和javascript添加表单,用于用户输入和提交。在go应用程序中添加对post请求的处理,接收用户消息并

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

结论

使用 Go 构建交互式 Web 应用程序既简单又强大。通过结合 Go 的后端处理能力以及 HTML 和 JavaScript 的前端功能,你可以创建丰富的用户体验,直接在浏览器中运行。

以上就是Golang 的浏览器支持:搭建交互式 Web的详细内容,更多请关注叮当号网其它相关文章!

文章来自互联网,只做分享使用。发布者:牧草,转转请注明出处:https://www.dingdanghao.com/article/314246.html

(0)
上一篇 2024-04-07 16:40
下一篇 2024-04-07 16:40

相关推荐

联系我们

在线咨询: QQ交谈

邮件:442814395@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信公众号