Gin(三):配合模板 tmpl

時間 2019-12-05

標籤 gin 配合模板 tmpl 简体版

原文原文鏈接

添加模板

咱們仍舊是在上一章節的項目中進行修改。java

首先新建一個 templates 文件夾，用於存放咱們的模板文件，在文件夾中新創建 index.tmpl。而且編寫咱們的模板。jquery

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gin Hello</title>
</head>
<body>
<main>{{ .title }}</main>
</body>
</html>
複製代碼

小提示 GoLand 如今還未對 tmpl 有高亮顯示語法，咱們能夠將 .tmpl 後綴文件添加到 go Template 模板。方法以下：File-settings-Editor-File Types。(或者咱們直接使用 *.gohtml 作爲模板也是能夠的)如圖:git

咱們能夠經過 LoadHTMLGlob 和 LoadHTMLFiles 兩個方法來對咱們的模板進行加載。其中 LoadHTMLGlob 方法能夠將一個目錄下全部的模板進行加載，而LoadHTMLFiles只會加載一個文件，他的參數爲可變長參數，須要咱們一個一個的手動將模板文件填寫。這裏咱們使用 LoadHTMLGlob 方法。github

router.LoadHTMLGlob("templates/*")
複製代碼

此時咱們須要修改咱們的 / 路由了，再也不是讓它返回一個字符串，而是返回咱們的頁面模板。bootstrap

在 handler 中新創建一個 indexHandler.go ，用來處理咱們的 / 路由。瀏覽器

func Index(context *gin.Context) {
	context.HTML(http.StatusOK, "index.tmpl", gin.H{
		"title": "hello gin " + strings.ToLower(context.Request.Method) + " method",
	})
}
複製代碼

此時在訪問咱們的頁面，仍舊是 hello gin get method,可是這和咱們以前返回的字符串是不一樣的。框架

打開 瀏覽器-Network 就能夠看到這兩個頁面的不一樣，一個是 text 一個是 html函數

寫完具體功能，咱們須要改造一下咱們的單元測試，針對新的接口邏輯原有的單元測試已經行不通了。

從新修改單元測試。

func TestIndexHtml(t *testing.T) {
	router := initRouter.SetupRouter()
	w := httptest.NewRecorder()
	req, _ := http.NewRequest(http.MethodGet, "/", nil)
	router.ServeHTTP(w, req)
	assert.Equal(t, http.StatusOK, w.Code)
}
複製代碼

進行單元測試的時候，發現報錯了，報錯緣由是居然是找不到 html。

--- FAIL: TestIndexGetRouter (0.00s)
panic: html/template: pattern matches no files: `templates/*` [recovered]
	panic: html/template: pattern matches no files: `templates/*`
複製代碼

此時就感到很奇怪了，爲何網頁上能夠很好的訪問到，在測試中卻沒法訪問呢？

查了不少資料沒有找到緣由，不少解決方法是將 templates 寫成全路徑，這顯然不是很好的解決方法。官方對於單元測試介紹少的可憐。

這裏我介紹一種方法：

咱們須要修改方法，經過判斷不一樣的模式(debug,release,test)來加載不一樣路徑下的 templates。

initRouter.go

// 省略部分代碼 
    if mode := gin.Mode(); mode == gin.TestMode {
		router.LoadHTMLGlob("./../templates/*")
	} else {
		router.LoadHTMLGlob("templates/*")
	}
複製代碼

同時，也須要修改 test，咱們要寫個 init 方法，這裏的 init 方法就比如 java 中 Junit 中的 @Before

package test

import (
	"GinHello/initRouter"
	"github.com/gin-gonic/gin"
	"github.com/stretchr/testify/assert"
	"net/http"
	"net/http/httptest"
	"testing"
)

var router *gin.Engine

func init() {
	gin.SetMode(gin.TestMode)
	router = initRouter.SetupRouter()
}

func TestIndexHtml(t *testing.T) {
	w := httptest.NewRecorder()
	req, _ := http.NewRequest(http.MethodGet, "/", nil)
	router.ServeHTTP(w, req)
	assert.Equal(t, http.StatusOK, w.Code)
	assert.Contains(t,w.Body.String(),"hello gin get method","返回的HTML頁面中應該包含 hello gin get method")
}
複製代碼

這樣完善了單元測試，方便往後的功能更改。

添加靜態資源

當網頁能夠正常顯示的時候，咱們能夠添加一些靜態資源來使咱們的頁面更加美觀。我在這裏選擇了 Bootstrap 4 作爲一個 UI 界面框架。Bootstrap 4 下載

同時還要引入 Jquery 和 Popper。

咱們新建一個 statics 文件夾，將咱們 Bootstrap 解壓，將 js 和 css 複製到 statics 目錄下。

在咱們的 initRouter 中，對靜態資源進行添加。

router.Static("/statics","./statics")
複製代碼

新建 header.tmpl

{{ define "header" }}
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Gin Hello</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">主頁 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">文章列表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " href="#" tabindex="-1" aria-disabled="true">關於</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
            </form>
            <ul class="navbar-nav ">
                <li class="nav-item">
                    <a class="nav-link" href="#">登陸</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">註冊</a>
                </li>
            </ul>
        </div>
    </nav>
{{end}}
複製代碼

並在咱們的 index.tmpl 上進行添加

<body>
<header>
    {{template "header"}}
</header>
<main>
    {{ .title }}
</main>
</body>
複製代碼

此時運行咱們的網站，出現下圖樣式。

添加網站圖標

萬事俱備，只欠一個 icon。

網站此時還缺乏網站的圖標，網站圖標也是經過 Gin 給定的函數設置。咱們將 .ico 圖片放到項目根目錄下，而後在 initRouter 中設置。

router.StaticFile("/favicon.ico","./favicon.ico")
複製代碼

再次運行咱們的網站，此時就會發現網站的左上角標籤頁中出現了設置好的圖標。

本章節代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。