แสดงหน้า HTML ด้วย Gin
ตัวอย่างง่ายๆ ที่แสดงวิธีการแสดงหน้าเทมเพลต HTML โดยใช้เว็บเฟรมเวิร์กยอดนิยม Gin ของภาษา Go (Golang)
Gin เป็นหนึ่งในเว็บเฟรมเวิร์กยอดนิยมสำหรับ Go ก่อนหน้านี้ฉันได้เขียนเกี่ยวกับวิธีการแสดงหน้า HTML โดยใช้แพ็คเกจเทมเพลต Go พื้นฐาน การแสดงเทมเพลต HTML นั้นง่ายยิ่งขึ้นด้วย Gin
ในการทำให้เวิร์กโฟลว์ราบรื่นยิ่งขึ้นและลองใช้แนวคิดใหม่ๆ และแก้ปัญหา ฉันยังตัดสินใจใช้ยูทิลิตี้การโหลดอัตโนมัติที่เรียกว่า Gin โดย Codegangsta
ข้อกำหนดเบื้องต้น
ข้อกำหนดสำหรับบทความนี้คือ คุณควรได้ทำตามบทความ ติดตั้ง Go บน Mac มาก่อน
สร้างโปรเจค gin-html
สร้างโปรเจคใหม่ ในตัวอย่างชื่อ gin-html สร้างไฟล์ main.go เปิดเทอร์มินัลแล้วใช้คำสั่ง
go mod init gin-htmlคำสั่งนี้จะสร้างไฟล์ go.mod
การติดตั้ง Gin
การติดตั้งเฟรมเวิร์กเว็บ Gin HTTP นั้นตรงไปตรงมา เช่นเดียวกับแพ็คเกจ Go ส่วนใหญ่ (แต่ไม่ใช่ทั้งหมด):
go get -u github.com/gin-gonic/gin
ไฟล์ main.go
package main
import (
"github.com/gin-gonic/gin"
"html/template"
"net/http"
"strings"
)
func main() {
router := gin.Default()
router.SetFuncMap(template.FuncMap{
"upper": strings.ToUpper,
})
router.Static("/assets", "./assets")
router.LoadHTMLGlob("templates/*.html")
router.GET("/", func(c *gin.Context) {
c.HTML(http.StatusOK, "index.html", gin.H{
"content": "This is an index page...",
})
})
router.GET("/about", func(c *gin.Context) {
c.HTML(http.StatusOK, "about.html", gin.H{
"content": "This is an about page...",
})
})
router.Run("localhost:8080")
}
The imports
ในบรรทัดที่ 4–7 เรานำเข้าบางแพ็คเกจ:
- แพ็คเกจสำหรับเฟรมเวิร์กเว็บ Gin HTTP
- แพ็คเกจพื้นฐานของ Go html/template สำหรับการนำเข้าฟังก์ชัน FuncMap() สิ่งนี้จำเป็นเมื่อใช้ฟังก์ชันภายในเทมเพลต
- แพ็คเกจพื้นฐาน Go net/http สำหรับใช้กับ Gin
- แพ็คเกจพื้นฐานของสตริง (strings) สำหรับฟังก์ชันระดับบนใน FuncMap
ฟังก์ชัน main()
ในบรรทัดที่ 11 เราสร้างเราเตอร์ Gin เริ่มต้นที่เรียกว่าเราเตอร์ เราเตอร์ Gin เริ่มต้นใช้มิดเดิลแวร์สำหรับบันทึกและกู้คืน นอกเหนือจากฟังก์ชันพื้นฐาน
ในบรรทัดที่ 12–14 จะใช้ SetFuncMap() เพื่อสร้างการแมปฟังก์ชันเพื่อใช้ในเทมเพลต ที่นี่เราเพียงแค่เพิ่มฟังก์ชันเทมเพลตอย่างง่ายที่เรียกว่า upper ซึ่งใช้ฟังก์ชัน strings.ToUpper() เพื่อตั้งค่าอักขระทั้งหมดในสตริงเป็นตัวพิมพ์ใหญ่
ในบรรทัดที่ 15 เราทำให้เราเตอร์ Gin ทราบว่าเราได้บันทึกทรัพย์สินแบบคงที่บางส่วนไว้ในไดเร็กทอรี ./assets Gin สามารถเข้าถึงทรัพย์สินแบบคงที่ในลักษณะนี้
ฉันได้ใส่เวอร์ชันย่อของไลบรารี Bulma CSS ในไดเร็กทอรีนั้นสำหรับตัวอย่างนี้ เมื่อใช้ฟังก์ชัน Static() เทมเพลต HTML จะถูกเปิดใช้งานเพื่อเข้าถึงไลบรารีนี้
คุณสามารถอ่านเอกสารสำหรับไลบรารี Bulma CSS ได้ ที่นี่
ในบรรทัดที่ 16 เทมเพลตทั้งหมดที่ตรงตามรูปแบบ template/*.html จะถูกโหลดโดยฟังก์ชัน LoadHTMLGlob() รูปแบบนี้หมายความว่าไฟล์เทมเพลตควรมีนามสกุล .html และอยู่ในไดเร็กทอรี /template
ในบรรทัดที่ 18–22 เราบอกให้เราเตอร์ Gin ยอมรับคำขอวิธี HTTP GET ที่เส้นทาง URL / เมื่อได้รับคำขอ Gin จะส่งข้อความสถานะ HTTP OK และแสดงผลเทมเพลต index.html พร้อมข้อมูลที่ให้ไว้ในวงเล็บปีกกา gin.H{} ในกรณีนี้ ข้อมูลจะประกอบด้วยคู่คีย์/ค่าเพียงคู่เดียว โดยมีคีย์เรียกว่าเนื้อหา
ในบรรทัดที่ 24–28 คล้ายคลึงกันข้างต้น เราบอกให้เราเตอร์ Gin ยอมรับคำขอเมธอด HTTP GET ที่พาธ /about คราวนี้มีการแสดงผลเทมเพลต about.html
ในบรรทัดที่ 29 เราบอกให้ Gin เรียกใช้เว็บเซิร์ฟเวอร์ที่พอร์ต localhost 8080
เทมเพลตและโครงสร้างไดเร็กทอรี
ด้านล่างนี้ คุณจะพบเทมเพลตสี่แบบที่ใช้ในตัวอย่างนี้ สิ่งเหล่านี้ต้องอยู่ในไฟล์ของตนเอง ชื่อไฟล์ถูกกล่าวถึงก่อนโค้ดแต่ละส่วน
ไวยากรณ์ของเทมเพลตเหมือนกับแพ็คเกจฐาน html/template คุณสามารถอ่านเพิ่มเติมเกี่ยวกับไวยากรณ์ในเทมเพลตได้ ที่นี่
ไฟล์ header.html
{{define "header.html"}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/assets/bulma.min.css">
<title></title>
</head>
<body>
<div class="container">
<br><br>
{{end}}
ไฟล์ footer.html
{{define "footer.html"}}
</div>
</body>
</html>
{{end}}
ไฟล์ index.html
{{template "header.html"}}
<h1 class="title">
INDEX PAGE
</h1>
<p>{{ .content }}</p>
{{template "footer.html"}}
ไฟล์ about.html
{{template "header.html"}}
<h1 class="title">
ABOUT PAGE
</h1>
<p>{{ .content | upper}}</p>
{{template "footer.html"}}
โหลด Gin อัตโนมัติ (Auto-reloading Gin)
ตามที่กล่าวไว้ก่อนหน้านี้ ฉันกำลังใช้ยูทิลิตี้ codegangsta/gin สำหรับการรีโหลด gin อัตโนมัติเมื่อทำการพัฒนา ทำให้ง่ายต่อการตรวจสอบผลลัพธ์ของโค้ดของเราในเบราว์เซอร์ เราสามารถทำได้โดยไม่ต้องหยุดโปรแกรมเรียกทำงานปัจจุบัน และสร้างใหม่ และเรียกใช้เมื่อเราเปลี่ยนโค้ด
นี่คือคำอธิบายของยูทิลิตี้จากหน้า Github:
gin เป็นยูทิลิตี้บรรทัดคำสั่งอย่างง่ายสำหรับการรีโหลดแอปพลิเคชันเว็บ Go แบบสด เพียงเรียกใช้ gin ในไดเร็กทอรีแอปของคุณ และเว็บแอปของคุณจะได้รับบริการโดยมี gin เป็นพร็อกซี่ gin จะคอมไพล์โค้ดของคุณใหม่โดยอัตโนมัติเมื่อตรวจพบการเปลี่ยนแปลง แอปของคุณจะรีสตาร์ทในครั้งต่อไปที่ได้รับคำขอ HTTP
ติดตั้ง codegangsta/gin
go get github.com/codegangsta/gin
การตรวจสอบผลลัพธ์ในเว็บเบราว์เซอร์
go run main.go
พิมพ์ข้อมูลต่อไปนี้ในช่อง URL ของเบราว์เซอร์ของคุณเพื่อตรวจสอบผลลัพธ์ของโค้ด
localhost:8080
…สำหรับหน้า index และ…
localhost:8080/about
สำหรับหน้า about
