原文地址

   大多数web app都有一个相同的布局。这个布局可能包含一个header或者footer，甚至可能包含一个导航菜单。Go的标准库提供一个简单的方式来创建这些基本元素，通过被不同的页面重用，创建出模板页的效果。
   这个简单的例子来解释如何实现的：
   让我们来创建一个简单的包含两个view的web app，一个是 main 一个是about。这两个view都有相同的header和footer。
   header模板的代码如下： 

{{ define "header" }}

<!DOCTYPE html>

<html>

    <head>

        <title>{{.Title}}</title>

        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

        <style type="text/css">

            body {padding-bottom: 70px;}

            .content {margin:10px;}

        </style>

    </head>

    <body>

        <nav class="navbar navbar-default" role="navigation">

          <div class="navbar-header">

            <a class="navbar-brand" href="/">Go App</a>

          </div>

          <div class="collapse navbar-collapse navbar-ex1-collapse">

            <ul class="nav navbar-nav">

                <li><a href="/">Main</a></li>

                <li><a href="/about">About</a></li>

            </ul>

          </div>

        </nav>

{{ end }}

footer模板的代码如下：

{{ define "footer" }}

        <p class="navbar-text navbar-fixed-bottom">Go Rocks!</p>

        <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    </body>

</html>

{{ end }}

main 模板的代码如下：

{{define "main"}}

{{template "header" .}}

<div class="content">

    <h2>Main</h2>

    <div>This is the Main page</div>

</div>

{{template "footer" .}}

{{end}}

  about 模板的代码如下：

{{define "about"}}

{{template "header" .}}

<div class="content">

    <h2>About</h2>

    <div>This is the About page</div>

</div>

{{template "footer" .}}

{{end}}

服务器代码如下：

package main

import (

    "html/template"

    "net/http"

)

//Compile templates on start

var templates = template.Must(template.ParseFiles("header.html", "footer.html", "main.html", "about.html"))

//A Page structure

type Page struct {

    Title string

}

//Display the named template

func display(w http.ResponseWriter, tmpl string, data interface{}) {

    templates.ExecuteTemplate(w, tmpl, data)

}

//The handlers.

func mainHandler(w http.ResponseWriter, r *http.Request) {

    display(w, "main", &Page{Title: "Home"})

}

func aboutHandler(w http.ResponseWriter, r *http.Request) {

    display(w, "about", &Page{Title: "About"})

}

func main() {

    http.HandleFunc("/", mainHandler)

    http.HandleFunc("/about", aboutHandler)

    //Listen on port 8080

    http.ListenAndServe(":8080", nil)

}

每一个模板页都有一个define "name" 的命令来定义模板的名字。main和about页面通过template "name"来包含header和footer。”.” 出入上下文来命名模板。现在，不管main和about页面如何执行，他们的页面都会包含header和footer。
   两个页面的结果如下：

为Go Web App 创建一个主页面的更多相关文章

  1. Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术——不就是chrome OS吗？

    什么是Progressive Web App? Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术,由Google实现,让浏览器打开的网址像APP一样运行 ...

  2. python web编程 创建一个web服务器

    这里就介绍几个底层的用于创建web服务器的模块,其中最为主要的就是BaseHTTPServer,很多框架和web服务器就是在他们的基础上创建的 基础知识 要建立一个Web 服务,一个基本的服务器和一个 ...

  3. 使用两个 Windows 窗体 DataGridView 控件创建一个主/从窗体

    使用 DataGridView 控件的一种最常见方案是“主/详细信息”窗体,这样的窗体可显示两个数据库表之间的父/子关系.如果选择主表中的行,将导致以相应的子数据来更新详细信息表. 主/详细信息窗体很 ...

  4. 20 如何通过pycharm快速的创建一个html页面

    1.打开pycharm并且新建一个html页面,如下图所示. 2.删除html页面中默认的内容,之后在页面中输入!,之后点击tab即可完成一个html页面的框架新增.

  5. 【2】按照Django官网，创建一个web app 创建app/创建相应的数据库表

    1. Creating app $ python manage.py startapp polls That'll create a directory polls, which is laid ou ...

  6. 【1】按照Django官网，编写一个web app 创建project/配置数据库

    1. Creating a project From the command line, cd into a directory where you'd like to store your code ...

  7. 如何创建一个asp页面

    Active Server Pages(ASP)文件是以 .asp 为扩展名的文本文件,这个文本文件可以包括下列部分的任意组合: 文本 HTML 标记 ASP 脚本命令 创建 .asp 文件非常容易. ...

  8. 为APP加入一个欢迎页面

    ###添加软件闪图使用的方法: new Handler().postDelayed(new Runnable() {            @Override            public vo ...

  9. Java Web项目--显示一个静态页面

    我们可以在Eclipse中新建一个Dynamic Web Project,然后在项目的WebContent目录下新建一个Html文件page1.html,其内容如下: <!DOCTYPE htm ...

随机推荐

  1. HDU-I Hate It

    Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写 ...

  2. Android -- 简单广播接收与发送（2）--动态注册广播接收器

    1. 效果图

  3. BZOJ2453维护队列&&BZOJ2120数颜色

    2016-05-28 11:20:22 共同的思路: 维护某种颜色上一次在哪里出现pre,可以知道当pre<询问的l时更新答案 块内按照pre排序 修改的时候重新O(n)扫一遍,如果和之前的不一 ...

  4. jquery .post .get中文参数乱码解决方法详解

    jquery默认的编码为utf-8,做项目时有时处于项目需要用到ajax提交中文参数,乱码问题就很头疼了,折腾了许久终于弄出来了.为了便于传输,我们首先将需要用到的参数用javascript自带的函数 ...

  5. python中的进程、线程（threading、multiprocessing、Queue、subprocess）

    Python中的进程与线程 学习知识,我们不但要知其然,还是知其所以然.你做到了你就比别人NB. 我们先了解一下什么是进程和线程. 进程与线程的历史 我们都知道计算机是由硬件和软件组成的.硬件中的CP ...

  6. Introduction of Team Member

    1. 姓名:xx 性别:男 出生日期:1993.04.16 班级:110616班 职务:小班长 爱好:唱歌.排球 2. 姓名:xxx 性别:男 出生日期:1993.4.20 3. 姓名:xxx 性别: ...

  7. ZK 代码自动提示

    1.设置xsd 打开eclipse,Window-Preference,进行如下设置: 2.创建zul文件 (1)打开File—New—Other窗口,新建XML File文件: (2)选择新建文件所 ...

  8. AspxSpy2014 Final

    受bin牛委托修改并发布,版权归bin牛所有. Bug/建议提交:zcgonvh@rootkit.net.cn 祝各位马年大吉,财源滚滚. 免责声明: 本程序只用于管理员安全检测,使用前请注意环境与法 ...

  9. CSS3初学篇章_6(自定义动画)

    自定义动画 由于有一部分低版本的浏览器并不支持的问题,所以这个样式要多做兼容,各大浏览器兼容前缀如下: 前缀 浏览器  -webkit  chrome和safari  -moz  firefox  - ...

  10. 对Oracle数据库坏块的理解

    1.物理坏块和逻辑坏块 在数据库中有一个概念叫做数据块的一致性,Oracle的数据块的一致性包括了两个层次:物理一致性和逻辑一致性,如果一个数据块在这两个层次上存在不一致性,那就对应到了我们今天要要说 ...