Gin-Go學習筆記七：Gin-Web架構布局頁面

模闆使用

頁面布局

1> 一個html頁面由:head部分,body部分,内部css,内部js,外聯css,外聯的js這幾部分組成。是以，一個布局檔案也就需要針對這些進行拆分。

2> 建立一個layout.go的控制器。編寫一個引用布局檔案的執行個體。具體代碼如下:

package controllers

import (
	"fmt"
	"log"
	"html/template"
	"github.com/gin-gonic/gin"
	"net/http"
)

/**内容頁面**/
func Contenthtml(c *gin.Context){

    //模闆檔案的拼接
	t, err := template.ParseFiles("views/layout.html", "views/head.tpl", 
		"views/content.html","views/sidebar.tpl","views/scripts.tpl")
	//備注:參數1》模闆頁面；參數2》css部分；參數3》内容部分；
	//參數4》底部版權資訊部分;參數5》頁面中使用到的js部分
    if err != nil {
        log.Fatal(err)
    }
	fmt.Println(t)
	//渲染html檔案
	c.HTML(http.StatusOK,"layout.html", gin.H{
		"title": "布局頁面",
	})
}

3> 建立布局頁面，具體的如下圖所示

4> 在路由器中添加代碼，編譯運作項目，修訂錯誤，檢視運作的效果

package routers

import (
  "github.com/gin-gonic/gin"
  . "GinLearn/GinLearn/apis" //api部分
  . "GinLearn/GinLearn/controllers" //constroller部分
 )
 
func InitRouter() *gin.Engine{
  router := gin.Default()
  //Hello World
  router.GET("/", IndexApi)
  //渲染html頁面
  router.LoadHTMLGlob("views/*")

  router.GET("/home/index", ShowHtmlPage)
  //清單頁面
  router.GET("/home/list", ListHtml)
  router.POST("/home/PageData", GetDataList)
  router.POST("/home/PageNextData", PageNextData)

  //新增頁面
  router.GET("/home/add", AddHtml)
  router.POST("/home/saveadd", AddPersonApi)
  
   //編輯頁面
   router.GET("/home/edit", EditHtml)
   router.POST("/home/saveedit", EditPersonApi)

    //删除
    router.POST("/home/delete", DeletePersonApi)

    //Bootstrap布局頁面
    router.GET("/home/bootstrap", Bootstraphtml)

    //檔案的上傳和下載下傳 
    router.GET("/home/fileopt", Fileopthtml)
    router.POST("/home/fileuplaod", Fileupload)
    router.GET("/home/filedown", Filedown)

    //檔案的建立删除和讀寫
    router.GET("/home/filerw", Filerwhtml)
    router.POST("/home/addfile", FilerCreate)//建立檔案
    router.POST("/home/writefile", FilerWrite)//寫入檔案
    router.POST("/home/readfile", FilerRead)//讀取檔案
    router.POST("/home/deletefile", FilerDelete)//删除檔案
    
    //api調用的部分
    router.GET("/home/api", GetApiHtml) 
    router.GET("/api/jsondata", GetJsonData) 
    router.GET("/api/xmldata", GetXmlData) 
    router.GET("/api/yamldata", GetYamlData) 
    router.GET("/api/paramsdata", GetParamsJsonData) 

    //布局頁面
    router.GET("/home/content", Contenthtml)
    
    return router
 }

5> 運作效果如下:

6> Layout.html具體的代碼如下:

<!DOCTYPE html>
<html>
<head>
    <title>{{ .title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap-theme.min.css"/>
    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script> 
    <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script> 
    <!--CSS樣式檔案-->
    {{template "header"}}
</head>
<body>
    <!--内容部分-->
    <div class="container">       
        {{template "content"}}
    </div>
    <!--底部版權部分-->
    <div class="sidebar">        
       {{template "sidebar"}} 
    </div>
    <!--頁面JS的引用-->
    {{template "jsfile"}} 
</body>
</html>

7> head.tpl的代碼如下:

{{define "header"}}

<style>
     body{
         widith:100%;
         height:100%;
         border:none;
     }
     h1 {
        color: red;
        text-align:center; 
     }
     .bodydiv{
        widith:100%;
        height:100%;
        text-align:center;  
        font-size:14px;
        color:#0f0;
     }
     .sidebar{
        widith:100%;
        height:100%;
        text-align:center;  
        font-size:14px;
        color:#000; 
     }
</style>
{{end}}

8>content.html的代碼如下:

{{ define "content" }}

    <h1>
        内容部分AAAAAAA
    </h1>

{{end}}

9>scripts.tpl的代碼如下:

{{define "jsfile"}}
   <script type="text/javascript">
    //頁面的初始化
    $(document).ready(function() {
        console.log('頁面的初始化')        
    });
    console.log('這是JS檔案')
</script>
{{end}}

10>sidebar.tpl的代碼如下:

{{define "sidebar"}}
    版權的使用期:2017-12-12~2027-12-12
{{end}}

11>下一周進行修整，不寫部落格了！　　

Gin-Go學習筆記七：Gin-Web架構 布局頁面

Gin-Go學習筆記七：Gin-Web架構布局頁面