模板使用

页面布局

1>     一个html页面由:head部分,body部分,内部css,内部js,外联css,外联的js这几部分组成。因此，一个布局文件也就需要针对这些进行拆分。

2>     新建一个layout.go的控制器。编写一个引用布局文件的实例。具体代码如下:

  1. package controllers
  2.  
  3. import (
  4. 	"fmt"
  5. 	"log"
  6. 	"html/template"
  7. 	"github.com/gin-gonic/gin"
  8. 	"net/http"
  9. )
  10.  
  11. /**内容页面**/
  12. func Contenthtml(c *gin.Context){
  13.  
  14.     //模板文件的拼接
  15. 	t, err := template.ParseFiles("views/layout.html", "views/head.tpl",
  16. 		"views/content.html","views/sidebar.tpl","views/scripts.tpl")
  17. 	//备注:参数1》模板页面；参数2》css部分；参数3》内容部分；
  18. 	//参数4》底部版权信息部分;参数5》页面中使用到的js部分
  19.     if err != nil {
  20.         log.Fatal(err)
  21.     }
  22. 	fmt.Println(t)
  23. 	//渲染html文件
  24. 	c.HTML(http.StatusOK,"layout.html", gin.H{
  25. 		"title": "布局页面",
  26. 	})
  27. }

　　

3>     新建布局页面，具体的如下图所示

4>     在路由器中添加代码，编译运行项目，修订错误，查看运行的效果

  1. package routers
  2.  
  3. import (
  4.   "github.com/gin-gonic/gin"
  5.   . "GinLearn/GinLearn/apis" //api部分
  6.   . "GinLearn/GinLearn/controllers" //constroller部分
  7.  )
  8.  
  9. func InitRouter() *gin.Engine{
  10.   router := gin.Default()
  11.   //Hello World
  12.   router.GET("/", IndexApi)
  13.   //渲染html页面
  14.   router.LoadHTMLGlob("views/*")
  15.  
  16.   router.GET("/home/index", ShowHtmlPage)
  17.   //列表页面
  18.   router.GET("/home/list", ListHtml)
  19.   router.POST("/home/PageData", GetDataList)
  20.   router.POST("/home/PageNextData", PageNextData)
  21.  
  22.   //新增页面
  23.   router.GET("/home/add", AddHtml)
  24.   router.POST("/home/saveadd", AddPersonApi)
  25.  
  26.    //编辑页面
  27.    router.GET("/home/edit", EditHtml)
  28.    router.POST("/home/saveedit", EditPersonApi)
  29.  
  30.     //删除
  31.     router.POST("/home/delete", DeletePersonApi)
  32.  
  33.     //Bootstrap布局页面
  34.     router.GET("/home/bootstrap", Bootstraphtml)
  35.  
  36.     //文件的上传和下载
  37.     router.GET("/home/fileopt", Fileopthtml)
  38.     router.POST("/home/fileuplaod", Fileupload)
  39.     router.GET("/home/filedown", Filedown)
  40.  
  41.     //文件的创建删除和读写
  42.     router.GET("/home/filerw", Filerwhtml)
  43.     router.POST("/home/addfile", FilerCreate)//创建文件
  44.     router.POST("/home/writefile", FilerWrite)//写入文件
  45.     router.POST("/home/readfile", FilerRead)//读取文件
  46.     router.POST("/home/deletefile", FilerDelete)//删除文件
  47.  
  48.     //api调用的部分
  49.     router.GET("/home/api", GetApiHtml)
  50.     router.GET("/api/jsondata", GetJsonData)
  51.     router.GET("/api/xmldata", GetXmlData)
  52.     router.GET("/api/yamldata", GetYamlData)
  53.     router.GET("/api/paramsdata", GetParamsJsonData) 
  54.  
  55.     //布局页面
  56.     router.GET("/home/content", Contenthtml)
  57.  
  58.     return router
  59.  }

　　

5>     运行效果如下:

6>     Layout.html具体的代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>{{ .title }}</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7.     <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"/>
  8.     <link rel="stylesheet" href="/static/bootstrap/css/bootstrap-theme.min.css"/>
  9.     <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script> 
  10.     <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script> 
  11.     <!--CSS样式文件-->
  12.     {{template "header"}}
  13. </head>
  14. <body>
  15.     <!--内容部分-->
  16.     <div class="container">
  17.         {{template "content"}}
  18.     </div>
  19.     <!--底部版权部分-->
  20.     <div class="sidebar">
  21.        {{template "sidebar"}}
  22.     </div>
  23.     <!--页面JS的引用-->
  24.     {{template "jsfile"}}
  25. </body>
  26. </html>

　　

7>  head.tpl的代码如下:

  1. {{define "header"}}
  2.  
  3. <style>
  4.      body{
  5.          widith:100%;
  6.          height:100%;
  7.          border:none;
  8.      }
  9.      h1 {
  10.         color: red;
  11.         text-align:center;
  12.      }
  13.      .bodydiv{
  14.         widith:100%;
  15.         height:100%;
  16.         text-align:center;
  17.         font-size:14px;
  18.         color:#0f0;
  19.      }
  20.      .sidebar{
  21.         widith:100%;
  22.         height:100%;
  23.         text-align:center;
  24.         font-size:14px;
  25.         color:#000;
  26.      }
  27. </style>
  28. {{end}}

8>content.html的代码如下:

  1. {{ define "content" }}
  2.  
  3.     <h1>
  4.         内容部分AAAAAAA
  5.     </h1>
  6.  
  7. {{end}}

　　

9>scripts.tpl的代码如下:

  1. {{define "jsfile"}}
  2.    <script type="text/javascript">
  3.     //页面的初始化
  4.     $(document).ready(function() {
  5.         console.log('页面的初始化')
  6.     });
  7.     console.log('这是JS文件')
  8. </script>
  9. {{end}}

　　

10>sidebar.tpl的代码如下:

  1. {{define "sidebar"}}
  2.     版权的使用期:2017-12-12~2027-12-12
  3. {{end}}

　　

11>下一周进行修整，不写博客了！　　

Gin-Go学习笔记七：Gin-Web框架 布局页面的更多相关文章

  1. python 学习笔记十五 web框架

    python Web程序 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. Python的WEB框架分为两类: 自己写socket,自 ...

  2. tornado 学习笔记9 Tornado web 框架---模板（template）功能分析

            Tornado模板系统是将模板编译成Python代码.         最基本的使用方式: t = template.Template("<html>{{ myv ...

  3. go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer)

    目录 go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer) demo demo server demo client 池 dao service p2c ro ...

  4. python3.4学习笔记(七) 学习网站博客推荐

    python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...

  5. Go语言笔记[实现一个Web框架实战]——EzWeb框架(一)

    Go语言笔记[实现一个Web框架实战]--EzWeb框架(一) 一.Golang中的net/http标准库如何处理一个请求 func main() { http.HandleFunc("/& ...

  6. ASP.NET MVC Web API 学习笔记---第一个Web API程序

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...

  7. Spring实战第八章学习笔记————使用Spring Web Flow

    Spring实战第八章学习笔记----使用Spring Web Flow Spring Web Flow是一个Web框架,它适用于元素按规定流程运行的程序. 其实我们可以使用任何WEB框架写流程化的应 ...

  8. Spring实战第五章学习笔记————构建Spring Web应用程序

    Spring实战第五章学习笔记----构建Spring Web应用程序 Spring MVC基于模型-视图-控制器(Model-View-Controller)模式实现,它能够构建像Spring框架那 ...

  9. （转）Qt Model/View 学习笔记 (七)——Delegate类

    Qt Model/View 学习笔记 (七) Delegate  类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...

随机推荐

  1. 第14节_BLE协议ATT层

    下面这个图是BLE协议各层跟医院的各个科室的类比图: 跟医院类比,ATT层就是化验室,通过它可以得到各种检查结果──属性.这些检查结果之间有什么联系,它们组合起来体现了什么,化验室是不知道的,这些得由 ...

  2. 201777010217-金云馨《面向对象程序设计（java）》第十三周学习

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  3. 201871010124-王生涛《面向对象程序设计（java）》第十五周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...

  4. LG5201 「USACO2019JAN」Shortcut 最短路树

    \(\mathrm{Shortcut}\) 问题描述 LG5201 题解 最短路树. 显然奶牛的路径就是从\(1\)走到各个草地,于是从\(1\)跑最短路,构建最短路树. 为了保证字典序,从\(1\) ...

  5. Fedora增加rc-local服务开机自启项

      最近新装了一台Fedora 30系统,服务已经正常运行起来了,但是偶然发现当我的系统重启后,写在rc.local配置文件里的命令居然没生效,导致我系统重启,但是服务却没有正常运行,后来经过一番查阅 ...

  6. [BZOJ1040][CODEVS1423][ZJOI2008]骑士

    题目描述 Description Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬.最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略 ...

  7. myeclipse开发工具的简单使用

    一.使用eclipse.myeclipse开发JAVA程序 将程序开发环境和调试环境集合在一起,提高开发效率 1.创建java项目2.创建程序包3.编写JAVA源程序4.运行JAVA程序 二.程序移植 ...

  8. 原生js-input框全选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. [LeetCode] 119. Pascal's Triangle II 杨辉三角之二

    Given a non-negative index k where k ≤ 33, return the kth index row of the Pascal's triangle. Note t ...

  10. oracle--CRS-0215 : Could not start resource 'ora.node2.ons'.

    01,问题描述 安装10G+RAC集群,在node2进行vipca操作的时候发现这个问题 02,问题解决 原因是少了host的回环地址,当时删除错了 添加进去即可 127.0.0.1 localhos ...