Maison > développement back-end > Golang > Prise en charge du navigateur Golang : créer un Web interactif

Prise en charge du navigateur Golang : créer un Web interactif

WBOY
Libérer: 2024-04-07 16:03:01
original
857 Les gens l'ont consulté

Allez créer des applications Web interactives qui s'exécutent dans le navigateur. Étapes : Créez un projet Go et un fichier main.go, ajoutez un gestionnaire HTTP pour afficher les messages. Ajoutez des formulaires utilisant HTML et JavaScript pour la saisie et la soumission des utilisateurs. Ajoutez la gestion des requêtes POST dans votre application Go, recevez les messages des utilisateurs et renvoyez les réponses. Utilisez l'API Fetch pour envoyer des requêtes POST et gérer les réponses du serveur.

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

Créez des applications Web interactives avec Go : prise en charge du navigateur

Go est un langage de programmation polyvalent qui ne se limite pas au développement back-end. Dans cet article, nous allons vous montrer comment créer facilement des applications Web interactives en utilisant Go pour les exécuter dans le navigateur.

Créer une application Web Go

Tout d'abord, créez un nouveau projet Go :

go mod init myapp
Copier après la connexion

Ensuite, créez un fichier appelé main.go et ajoutez le code suivant : 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)
}
Copier après la connexion

浏览 Web 应用程序

使用以下命令运行 Go 应用程序:

go run main.go
Copier après la connexion

然后,在浏览器中打开 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>")
Copier après la connexion

这将在页面上创建一个表单,用户可以在其中输入消息并按 "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);
    });
});
Copier après la connexion

Parcourez l'application Web

Lancez l'application Go à l'aide de la commande suivante :

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)
}
Copier après la connexion
Ensuite, ouvrez http://localhost:8080 dans votre navigateur. Vous devriez voir le message « Hello from Go ! » affiché sur la page.

Ajouter de l'interactivité

Pour ajouter de l'interactivité, nous pouvons utiliser HTML et JavaScript. Ajoutez ce qui suit au fichier main.go, à l'intérieur de la fermeture http.HandleFunc :

rrreee

Cela créera un formulaire sur la page où l'utilisateur pourra saisir un message et appuyer sur le bouton "Envoyer" pour soumettre. 🎜🎜Ensuite, ajoutez le code JavaScript suivant au bas de la page HTML, après la balise </form> : 🎜rrreee🎜Ce code JavaScript écoutera les soumissions de formulaire et collectera les messages saisis par l'utilisateur. et utilisez l'API Fetch pour envoyer des requêtes POST au serveur Go. 🎜🎜Dans votre application Go, ajoutez le code suivant pour gérer les requêtes POST : 🎜rrreee🎜Avec ces changements, notre application Web peut désormais recevoir les entrées de l'utilisateur et y afficher une réponse. 🎜🎜Conclusion🎜🎜Créer des applications Web interactives à l'aide de Go est simple et puissant. En combinant la puissance de traitement backend de Go avec les capacités frontend de HTML et JavaScript, vous pouvez créer des expériences utilisateur riches qui s'exécutent directement dans le navigateur. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal