Créez des applications Web réactives à l'aide des fonctions Golang-Golang-php.cn

Créez des applications Web réactives à l'aide des fonctions Golang

PHPz

Libérer： 2024-05-02 12:12:01

original

1033 Les gens l'ont consulté

Réponse : Vous pouvez utiliser les fonctions Golang pour créer des applications Web réactives qui fournissent un contenu dynamique et des interfaces interactives. Description détaillée : Créez une fonction Go qui définit un gestionnaire HTTP pour répondre aux requêtes. Exécutez l'application pour démarrer le serveur HTTP. Ajoutez du contenu réactif qui se redimensionne en fonction de l'appareil à l'aide du package html/template. Créez un cas pratique et affichez une liste dynamique. Exécutez l'application et regardez la page s'ajuster automatiquement pour s'adapter à la largeur de la fenêtre du navigateur.

Créez des applications Web réactives à laide des fonctions Golang

Créez des applications Web réactives à l'aide des fonctions Golang

Créer des applications Web réactives à l'aide des fonctions Golang vous permet de créer rapidement et efficacement des applications avec un contenu dynamique et des interfaces interactives. Ce didacticiel vous guidera étape par étape dans la création d'une application simple.

1. Créez une fonction Go

Créez un fichier nommé main.go et ajoutez le code suivant : main.go 的文件，并添加以下代码：

package main

import (
    "fmt"
    "net/http"
)

func main() {
    // 定义一个 HTTP 请求处理函数
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        fmt.Fprintf(w, "Hello, World!")
    })

    // 监听端口 8080
    http.ListenAndServe(":8080", nil)
}

Copier après la connexion

2. 运行应用程序

运行以下命令来启动您的应用程序：

go run main.go

Copier après la connexion

3. 测试应用程序

在浏览器中打开 http://localhost:8080。您应该会看到一条消息：“Hello, World!”。

4. 添加响应式内容

为了使应用程序响应设备大小的变化，我们将使用 html/template 包。添加以下代码到 main.go：

import "html/template"

var tpl *template.Template

func init() {
    tpl = template.Must(template.ParseFiles("index.html"))
}

func main() {
    // ...同上。

    // 渲染 index.html 模板
    tpl.Execute(w, nil)
}

Copier après la connexion

在 templates 目录中创建一个名为 index.html 的文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Web App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Copier après la connexion

5. 测试响应式内容

重新运行应用程序。您会看到页面会根据浏览器窗口的宽度自动调整大小。

实战案例：动态列表

现在，让我们构建一个更复杂的实战案例 - 一个显示动态列表的应用程序。

修改 main.go 如下：

func main() {
    // ...同上。

    // 创建一个列表
    list := []string{"Item 1", "Item 2", "Item 3"}

    // 将列表传递给模板
    tpl.Execute(w, list)
}

Copier après la connexion

在 index.html

<ul>
  {{ range $index, $item := . }}
    <li>{{ $index + 1 }}. {{ $item }}</li>
  {{ end }}
</ul>

Copier après la connexion

2. Exécutez l'application

Exécutez la commande suivante pour démarrer. Votre application :

rrreee

🎜3. Pour tester l'application 🎜🎜🎜 ouvrez http://localhost:8080 dans votre navigateur. Vous devriez voir un message : « Hello, World ! » 🎜🎜🎜4. Ajouter du contenu réactif 🎜🎜🎜Pour que l'application réponde aux changements de taille de l'appareil, nous utiliserons le package html/template. Ajoutez le code suivant à main.go : 🎜rrreee🎜Créez un fichier nommé index.html dans le répertoire templates et ajoutez le code suivant : 🎜rrreee🎜🎜5. Testez le contenu réactif🎜🎜🎜Réexécutez l'application. Vous verrez la page se redimensionner automatiquement à la largeur de la fenêtre de votre navigateur. 🎜🎜🎜 Exemple pratique : liste dynamique 🎜🎜🎜 Maintenant, construisons un exemple pratique plus complexe : une application qui affiche une liste dynamique. 🎜🎜Modifiez main.go comme suit : 🎜rrreee🎜Ajoutez le code suivant dans index.html pour afficher la liste : 🎜rrreee🎜🎜Conclusion🎜🎜🎜Voici comment utiliser les fonctions Golang pour créer des applications Web réactives. En suivant ce didacticiel, vous avez acquis les outils et les compétences dont vous avez besoin pour créer une application puissante et interactive. 🎜

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!