Golang Echo và Echo Template
Ở bài trước, mình đã giới thiệu với các bạn một số cú pháp của GO, hay đúng hơn là chuyển qua lập trình GO từ PHP. Các bạn có thể tham khảo lại bài viết đó theo đường dẫn này: https://blog.haposoft.com/lam-quen-voi-golang-tu-php-developer/
Trong bài này, mình sẽ hướng dẫn mọi người sử dụng GO Template để tạo views cho website và sử dụng Echo Static để load các tài nguyên như css, js, image,... cho web của mình. Hãy theo dõi bài viết dưới đây nhé.
Trước tiên, hãy tạo 1 thư mục mới với tên dự án tuỳ thích do bạn đặt, hãy tạo nó trong thư mục Go/src, thông thường, thư mục Go này thường nằm trong C:/Program
Tạo 1 file main.go và chèn vào nội dung như sau để đảm bảo máy của bạn đã sẵn sàng chạy go
import "fmt"
func main() {
fmt.Println("Les't GO")
}
Thử chạy go run main.go, nếu đoạn text đã được in ra console thì chúc mừng, bạn đã sẵn sàng để đi bước kế tiếp rồi đấy.
Trong bài viết này mình sẽ sử dụng framework Echo
Cài đặt Echo và khởi chạy server
Trước tiên hãy chạy go mod init your_app_name, lúc này nó sẽ sinh ra 1 file go.mod, nội dung trong file này chứa các package mà bạn sử dụng cho hệ thống của mình
Sau khi chạy xong lệnh bên trên, thì ta đến bước cài đặt Echo bằng cách chạy lệnh
go get github.com/labstack/echo/v4Sau khi chạy xong, hệ thống sẽ sinh ra 1 file go.sum, bạn không cần quá quan tâm đến file này. Lúc này hãy chỉnh sửa nội dung của file main.go như sau:
package main
import (
"net/http"
"github.com/labstack/echo/v4"
)
func main() {
e := echo.New()
e.GET("/", func(c echo.Context) error {
return c.String(http.StatusOK, "Hello, World!")
})
e.Logger.Fatal(e.Start(":8080"))
}
Thử chạy go main.go lại 1 lần nữa xem sao. Sau khi chạy thì hãy truy cập vào địa chỉ http://localhost:8080/ bạn sẽ thấy dòng chữ Hello, World! được in ra. Với 8080 là số cổng tuỳ ý mà bạn đặt.
Vậy là đã xong bước khởi tạo để có thể chạy được dưới local, tuy nhiên, 1 trang web đâu chỉ có mỗi dòng text Hello, World được in ra như thế, nó còn là tập hợp của nhiều thành phần. Vậy thì cách import html, css, images, js, ... như thế nào ?
Import tài nguyên cho trang web
1.HTML
Tạo 1 thư mục mới đặt tên là html, trong này sẽ quản lý các mã html. Trước tiên hãy chỉ tạo 1 file html đơn giản
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HEADER</h1>
<h2>BODY</h2>
<h1>Footer</h1>
</body>
</html>Lúc này cấu trúc thư mục hiện tại của mình sẽ như sau
Tiếp đến, thêm code vào file main.go như sau:
// TemplateRenderer is a custom html/template renderer for Echo framework
type TemplateRenderer struct {
templates *template.Template
}
// Render renders a template document
func (t *TemplateRenderer) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
// Add global methods if data is a map
if viewContext, isMap := data.(map[string]interface{}); isMap {
viewContext["reverse"] = c.Echo().Reverse
}
return t.templates.ExecuteTemplate(w, name, data)
}Sửa lại hàm main với nội dung như sau:
//load template from folder
renderer := &TemplateRenderer{
templates: template.Must(template.ParseGlob("html/*.html")),
}
//render view
e.Renderer = renderer
e.GET("/index", func(c echo.Context) error {
return c.Render(http.StatusOK, "index.html", "")
})Lúc này nội dung đầy đủ của file main.go sẽ là
package main
import (
"io"
"net/http"
"text/template"
"github.com/labstack/echo/v4"
)
// TemplateRenderer is a custom html/template renderer for Echo framework
type TemplateRenderer struct {
templates *template.Template
}
// Render renders a template document
func (t *TemplateRenderer) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
// Add global methods if data is a map
if viewContext, isMap := data.(map[string]interface{}); isMap {
viewContext["reverse"] = c.Echo().Reverse
}
return t.templates.ExecuteTemplate(w, name, data)
}
func main() {
e := echo.New()
//load template from folder
renderer := &TemplateRenderer{
templates: template.Must(template.ParseGlob("html/*.html")),
}
//render view
e.Renderer = renderer
//Url
e.GET("/index", func(c echo.Context) error {
//index.html is the index.html file in html folder
// "" is the data passing to view, i am not using it yet so it is ""
return c.Render(http.StatusOK, "index.html", "")
})
//Start server
e.Logger.Fatal(e.Start(":8080"))
}
Chạy lại go run main.go và xem thành quả
2. Các tài nguyên khác
Không như các file html các tài nguyên khác của trang web sẽ được load bằng 1 cách khác. Hãy thêm 1 vài class cho index.html và load nó lên xem chuyện gì sẽ xảy ra ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="static/style.css">
</head>
<body>
<h1 class="red">HEADER</h1>
<h2>BODY</h2>
<h1 class="black">Footer</h1>
</body>
</html>Cấu trúc thư mục lúc này của mình sẽ như sau:
Hmm, không có gì thay đổi cả, nếu lúc này bạn mở console lên, nó sẽ báo là không thể load được resource, đấy là do chúng ta chưa khai báo nguồn tài nguyên cho hệ thống biết, vì thế nó sẽ mặc định bỏ qua và không load đống tài nguyên đó cho chúng ta.
Chúng ta có thể khắc phục bằng cách sử dụng hàm Static của echo. Sử dụng như sau:
e := echo.New()
e.Static("/assets", "static")với assets là địa chỉ mà hệ thống sẽ tìm đến để load tài nguyên và static là thư mục chứa các tài nguyên cho website của bạn, lúc này file html sẽ cần sửa lại 1 chút
<link rel="stylesheet" href="static/style.css">
->
<link rel="stylesheet" href="assets/style.css">Reload lại trang và xem thành quả nào
Đối với các file khác như js, images, các bạn cũng có thể cho vào thư mục static và truy cập đến nó bằng /assets/*
Trên đây là bài giới thiệu về sử dụng echo và template trong golang của mình, cảm ơn các bạn đã dành thời gian đọc bài viết của mình, chúc các bạn thực hành thành công.