Sokongan penyemak imbas Golang: membina web interaktif

Pergi bina aplikasi web interaktif yang berjalan dalam penyemak imbas. Langkah: Buat projek Go dan fail main.go, tambah pengendali HTTP untuk memaparkan mesej. Tambahkan borang menggunakan HTML dan JavaScript untuk input dan penyerahan pengguna. Tambahkan pengendalian permintaan POST dalam aplikasi Go anda, terima mesej pengguna dan balas respons. Gunakan API Ambil untuk menghantar permintaan POST dan mengendalikan respons pelayan.

Bina aplikasi web interaktif dengan Go: Sokongan penyemak imbas

Go ialah bahasa pengaturcaraan serba boleh yang tidak terhad kepada pembangunan bahagian belakang. Dalam artikel ini, kami akan menunjukkan kepada anda cara membuat aplikasi web interaktif dengan mudah menggunakan Go to run dalam penyemak imbas.

Buat Aplikasi Web Go

Mula-mula, buat projek Go baharu:

go mod init myapp

Seterusnya, buat fail bernama main.go dan tambah kod berikut: 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);
    });
});

Semak imbas Aplikasi Web

Jalankan aplikasi Go menggunakan arahan berikut:

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

Kemudian, buka http://localhost:8080 dalam penyemak imbas anda. Anda seharusnya melihat mesej "Hello daripada Pergi!"

Tambah interaktiviti

Untuk menambah interaktiviti kita boleh menggunakan HTML dan JavaScript. Tambahkan yang berikut pada fail main.go, di dalam penutupan http.HandleFunc:

rrreee

Ini akan membuat borang pada halaman di mana pengguna boleh memasukkan mesej dan tekan butang "Hantar" untuk menyerahkan. 🎜🎜Seterusnya, tambahkan kod JavaScript berikut ke bahagian bawah halaman HTML, selepas teg </form>: 🎜rrreee🎜Kod JavaScript ini akan mendengar penyerahan borang, mengumpulkan mesej yang dimasukkan pengguna , dan Gunakan API Ambil untuk menghantar permintaan POST ke pelayan Go. 🎜🎜Dalam aplikasi Go anda, tambahkan kod berikut untuk mengendalikan permintaan POST: 🎜rrreee🎜Dengan perubahan ini, aplikasi web kami kini boleh menerima input daripada pengguna dan memaparkan respons kepadanya. 🎜🎜Kesimpulan🎜🎜Membina aplikasi web interaktif menggunakan Go adalah mudah dan berkuasa. Dengan menggabungkan kuasa pemprosesan bahagian belakang Go dengan keupayaan bahagian hadapan HTML dan JavaScript, anda boleh mencipta pengalaman pengguna yang kaya yang berjalan terus dalam penyemak imbas. 🎜

Atas ialah kandungan terperinci Sokongan penyemak imbas Golang: membina web interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!