Rumah > Artikel > pembangunan bahagian belakang > Seni Bina Hibrid Rendering menggunakan Astro dan Go Fiber
Seni Bina Hibrid Rendering menggunakan Astro dan Go Fiber
- WBOYasal
- 2024-07-17 00:16:10357semak imbas
Dalam seni bina ini, Astro bertanggungjawab untuk penjanaan tapak statik dan pengoptimuman aset, mencipta fail HTML, CSS dan JavaScript yang dipra-render untuk prestasi tinggi dan penyampaian yang cekap. Go Fiber mengendalikan pemprosesan data dinamik, penyepaduan API dan menyediakan fail statik, menyediakan kemas kini data masa nyata dan penghalaan bahagian pelayan dan pengurusan perisian tengah yang cekap. Gabungan ini memanfaatkan kekuatan kedua-dua teknologi untuk mencipta aplikasi web yang berprestasi dan berskala.
Contoh Penuh Seni Bina Hibrid Rendering menggunakan Astro dan Go Fiber
Berikut ialah panduan langkah demi langkah untuk mencipta aplikasi web menggunakan Seni Bina Hibrid Rendering dengan Astro dan Go Fiber.
1. Sediakan Projek Astro
- Pasang Astro dan buat projek baharu:
npm create astro@latest cd my-astro-site
- Buat halaman di Astro:
Buat src/pages/index.astro:
---
export const prerender = true;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{Astro.props.title}</title>
<link rel="stylesheet" href="/assets/style.css">
</head>
<body>
<h1>{Astro.props.title}</h1>
<p>{Astro.props.message}</p>
<script src="/assets/script.js"></script>
</body>
</html>
- Tambah fail CSS dan JS:
Buat src/assets/style.css:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
Buat src/assets/script.js:
document.addEventListener('DOMContentLoaded', () => {
console.log('Astro and Go Fiber working together!');
});
- Bina projek Astro:
npm run build
2. Sediakan Projek Go Fiber
- Buat projek Go baharu dan pasang kebergantungan:
go mod init mysite go get github.com/gofiber/fiber/v2
- Buat fail Go utama:
Buat main.go:
package main
import (
"log"
"github.com/gofiber/fiber/v2"
"path/filepath"
"encoding/json"
"io/ioutil"
"bytes"
"os/exec"
"net/http"
)
// Function to render Astro template
func renderAstroTemplate(templatePath string, data map[string]interface{}) (string, error) {
cmd := exec.Command("astro", "build", "--input", templatePath)
// Pass data to template via stdin
jsonData, err := json.Marshal(data)
if err != nil {
return "", err
}
cmd.Stdin = bytes.NewBuffer(jsonData)
output, err := cmd.CombinedOutput()
if err != nil {
return "", fmt.Errorf("failed to execute astro build: %s", string(output))
}
// Read generated file
outputPath := filepath.Join("dist", "index.html")
content, err := ioutil.ReadFile(outputPath)
if err != nil {
return "", err
}
return string(content), nil
}
func main() {
app := fiber.New()
// Serve static files from the dist directory
app.Static("/", "./my-astro-site/dist")
app.Get("/", func(c *fiber.Ctx) error {
data := map[string]interface{}{
"title": "My Astro Site",
"message": "Welcome to my site built with Astro and Go Fiber!",
}
htmlContent, err := renderAstroTemplate("./my-astro-site/src/pages/index.astro", data)
if err != nil {
return c.Status(http.StatusInternalServerError).SendString(err.Error())
}
return c.Type("html").SendString(htmlContent)
})
log.Fatal(app.Listen(":3000"))
}
3. Jalankan Aplikasi
- Mulakan pelayan Go Fiber:
go run main.go
- Akses tapak web:
Buka penyemak imbas anda dan navigasi ke http://localhost:3000.
Ringkasan
Dalam contoh ini, Astro mengendalikan penjanaan tapak statik, mencipta fail HTML, CSS dan JavaScript yang dioptimumkan. Go Fiber menyediakan fail statik ini dan menyuntik data secara dinamik ke dalam templat, membolehkan kemas kini data masa nyata. Seni bina rendering hibrid ini memanfaatkan kekuatan kedua-dua teknologi untuk mencipta aplikasi web yang berprestasi dan berskala.
Atas ialah kandungan terperinci Seni Bina Hibrid Rendering menggunakan Astro dan Go Fiber. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!