Golang의 브라우저 지원: 대화형 웹 구축

브라우저에서 실행되는 대화형 웹 애플리케이션을 구축해 보세요. 단계: Go 프로젝트 및 main.go 파일을 생성하고 HTTP 핸들러를 추가하여 메시지를 표시합니다. 사용자 입력 및 제출을 위해 HTML 및 JavaScript를 사용하여 양식을 추가합니다. Go 애플리케이션에 POST 요청 처리를 추가하고 사용자 메시지를 수신하고 응답을 반환합니다. Fetch API를 사용하여 POST 요청을 보내고 서버 응답을 처리합니다.

Go로 대화형 웹 애플리케이션 구축: 브라우저 지원

Go는 백엔드 개발에만 국한되지 않는 다목적 프로그래밍 언어입니다. 이 기사에서는 Go를 사용하여 브라우저에서 실행되는 대화형 웹 애플리케이션을 쉽게 만드는 방법을 보여줍니다.

Go 웹 애플리케이션 만들기

먼저 새 Go 프로젝트를 만듭니다.

go mod init myapp

다음으로 main.go라는 파일을 만들고 다음 코드를 추가합니다. 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);
    });
});

웹 애플리케이션 찾아보기

다음 명령을 사용하여 Go 애플리케이션을 실행하세요.

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

그런 다음 브라우저에서 http://localhost:8080를 엽니다. 페이지에 "Hello from Go!" 메시지가 표시되어야 합니다.

상호작용 추가

상호작용을 추가하려면 HTML과 JavaScript를 사용할 수 있습니다. http.HandleFunc 클로저 내부의 main.go 파일에 다음을 추가합니다.

rrreee

이렇게 하면 사용자가 메시지를 입력하고 키를 누를 수 있는 페이지에 양식이 생성됩니다. "보내기" 버튼을 눌러 제출하세요. 🎜🎜다음으로 HTML 페이지 하단의 </form> 태그 뒤에 다음 JavaScript 코드를 추가하세요. 🎜rrreee🎜이 JavaScript 코드는 양식 제출을 수신하고 사용자가 입력한 메시지를 수집합니다. , Fetch API를 사용하여 Go 서버에 POST 요청을 보냅니다. 🎜🎜Go 애플리케이션에 다음 코드를 추가하여 POST 요청을 처리하세요. 🎜rrreee🎜이러한 변경 사항을 통해 웹 애플리케이션은 이제 사용자로부터 입력을 받고 이에 대한 응답을 표시할 수 있습니다. 🎜🎜결론🎜🎜Go를 사용하여 대화형 웹 애플리케이션을 구축하는 것은 쉽고 강력합니다. Go의 백엔드 처리 능력과 HTML 및 JavaScript의 프런트엔드 기능을 결합하면 브라우저에서 직접 실행되는 풍부한 사용자 경험을 만들 수 있습니다. 🎜

위 내용은 Golang의 브라우저 지원: 대화형 웹 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!