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框架 布局页面的更多相关文章
- python 学习笔记十五 web框架
python Web程序 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. Python的WEB框架分为两类: 自己写socket,自 ...
- tornado 学习笔记9 Tornado web 框架---模板（template）功能分析
Tornado模板系统是将模板编译成Python代码. 最基本的使用方式: t = template.Template("<html>{{ myv ...
- go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer)
目录 go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer) demo demo server demo client 池 dao service p2c ro ...
- python3.4学习笔记(七) 学习网站博客推荐
python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...
- Go语言笔记[实现一个Web框架实战]——EzWeb框架(一)
Go语言笔记[实现一个Web框架实战]--EzWeb框架(一) 一.Golang中的net/http标准库如何处理一个请求 func main() { http.HandleFunc("/& ...
- ASP.NET MVC Web API 学习笔记---第一个Web API程序
http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...
- Spring实战第八章学习笔记————使用Spring Web Flow
Spring实战第八章学习笔记----使用Spring Web Flow Spring Web Flow是一个Web框架,它适用于元素按规定流程运行的程序. 其实我们可以使用任何WEB框架写流程化的应 ...
- Spring实战第五章学习笔记————构建Spring Web应用程序
Spring实战第五章学习笔记----构建Spring Web应用程序 Spring MVC基于模型-视图-控制器(Model-View-Controller)模式实现,它能够构建像Spring框架那 ...
- （转）Qt Model/View 学习笔记 (七)——Delegate类
Qt Model/View 学习笔记 (七) Delegate 类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...
随机推荐
- 201871010104-陈园园 《面向对象程序设计（java）》第十二周学习总结
201871010104-陈园园 <面向对象程序设计(java)>第十二周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...
- csp 201409-3 字符串匹配
问题描述: 很简单,判断给定串是否在目标串中出现.分区分大小写和不区分大小写两种情况. csp特点: csp的第三题一般是字符串的处理,c++的string类虽然不好用,但是掌握的话在考试的时候可能能 ...
- 多线程(五)多线程同步_Event事件
事件和互斥体同样属于内核同步对象,它和互斥体以及临界区在功能上有以下区别 前面的互斥体和临界区主要作用在于确保控制多个线程之间对共享资源访问,保证共享资源的完整性 事件主要作用是通知其它线程一个操作己 ...
- Python运维中20个常用的库和模块
1.psutil是一个跨平台库(https://github.com/giampaolo/psutil) 能够实现获取系统运行的进程和系统利用率(内存,CPU,磁盘,网络等),主要用于系统监控,分析和 ...
- opencv旋转图像
#include <opencv2\opencv.hpp> /* @param o The customer origin @param x The customer x @Note Th ...
- Nginx虚拟主机配置（三）
虚拟主机就是使用特殊的软硬件技术,把一台计算机主机分成多台“虚拟”的主机,每一台虚拟主机都具有独立的域名和IP地址(或共享的IP地址),具有完整的Internet服务器功能.在同一台硬件.同一个操作系 ...
- 批处理教程之cls、pause命令
cls 命令 清除屏幕.执行该命令后,屏幕上的所有信息都被清除,光标重新定位至屏幕左上角. REM 和 :: REM为注释命令,一般用来给程序加上注解,该命令后的内容不被执行,但能回显. 其次 ...
- web框架--tornado框架之模板引擎继承
使用模板的继承可以重复使用相同结构的模板, 可以大大减少代码量 入门实例 一.demo目录结构 注解: master.html为模板内容,被index.html,account.html引用 二.各文 ...
- oracle--sqlplus格式化输出
01,日期格式化输出 SQL> alter session set NLS_DATE_FORMAT='YYYY-MM-DD HH24:mi:ss'; SQL> select sysdate ...
- Java 性能调优小技巧
1.在知道必要之前不要优化系统 这可能是最重要的性能调整技巧之一.你应该遵循常见的最佳实践做法并尝试高效地实现用例.但是,这并不意味着在你证明必要之前,你应该更换任何标准库或构建复杂的优化. 在大多数 ...