Bina aplikasi web responsif menggunakan fungsi Golang-Golang-php.cn

Bina aplikasi web responsif menggunakan fungsi Golang

PHPz

Lepaskan： 2024-05-02 12:12:01

asal

1032 orang telah melayarinya

Jawapan: Anda boleh menggunakan fungsi Golang untuk membina aplikasi web responsif yang menyediakan kandungan dinamik dan antara muka interaktif. Penerangan terperinci: Buat fungsi Go yang mentakrifkan pengendali HTTP untuk membalas permintaan. Jalankan aplikasi untuk memulakan pelayan HTTP. Tambahkan kandungan responsif yang mengubah saiz berdasarkan peranti menggunakan pakej html/templat. Cipta kes praktikal dan paparkan senarai dinamik. Jalankan aplikasi dan tonton halaman secara automatik melaraskan agar sesuai dengan lebar tetingkap penyemak imbas.

Bina aplikasi web responsif menggunakan fungsi Golang

Membina aplikasi web responsif menggunakan fungsi Golang

Membina aplikasi web responsif menggunakan fungsi Golang membolehkan anda membuat aplikasi dengan cepat dan cekap dengan kandungan dinamik dan antara muka interaktif. Tutorial ini akan membimbing anda langkah demi langkah untuk membina aplikasi mudah.

1. Buat fungsi Go

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

Salin selepas log masuk

2. 运行应用程序

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

go run main.go

Salin selepas log masuk

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

Salin selepas log masuk

在 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>

Salin selepas log masuk

5. 测试响应式内容

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

实战案例：动态列表

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

修改 main.go 如下：

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

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

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

Salin selepas log masuk

在 index.html

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

Salin selepas log masuk

2. Jalankan aplikasi

Jalankan arahan berikut untuk memulakan Permohonan anda:

rrreee

🎜3 Untuk menguji aplikasi 🎜🎜🎜 buka http://localhost:8080 dalam penyemak imbas anda. Anda sepatutnya melihat mesej: "Hello, World!". 🎜🎜🎜4. Tambah Kandungan Responsif 🎜🎜🎜Untuk membuat aplikasi bertindak balas kepada perubahan saiz peranti, kami akan menggunakan pakej html/template. Tambahkan kod berikut pada main.go: 🎜rrreee🎜Buat fail bernama index.html dalam direktori templates dan tambahkan kod berikut : 🎜rrreee🎜🎜5. Uji kandungan responsif🎜🎜🎜Jalankan semula apl. Anda akan melihat halaman diubah saiz secara automatik kepada lebar tetingkap penyemak imbas anda. 🎜🎜🎜 Contoh Praktikal: Senarai Dinamik 🎜🎜🎜 Sekarang, mari kita bina contoh praktikal yang lebih kompleks - aplikasi yang memaparkan senarai dinamik. 🎜🎜Ubah suai main.go seperti berikut: 🎜rrreee🎜Tambahkan kod berikut dalam index.html untuk memaparkan senarai: 🎜rrreee🎜🎜Kesimpulan🎜🎜🎜Beginilah caranya untuk menggunakan Fungsi Golang untuk membina aplikasi web responsif. Dengan mengikuti tutorial ini, anda telah memperoleh alatan dan kemahiran yang anda perlukan untuk membina aplikasi interaktif yang berkuasa. 🎜

Atas ialah kandungan terperinci Bina aplikasi web responsif menggunakan fungsi Golang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!