模板使用
頁面布局
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>下一周進行修整，不寫博客了！