为Go Web App 创建一个主页面

大多数web 都有一个相同的布局。这个布局可能包含一个header或者footer,甚至可能包含一个导航菜单。Go的标准库提供一个简单的方式来创建这些基本元素,通过被不同的页面重用,创建出模板页的效果。

这个简单的例子来解释如何实现的:

让我们来创建一个简单的包含两个view的web ,一个是 main 一个是about。这两个view都有相同的header和footer。

header模板的代码如下:

{{ define "header" }}
<!DOCTYPE html>
<html>
    <head>
        <title>{{.Title}}</title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://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="http://www.toutiao.com/">Go </a>
 </div>
 <div class="collapse navbar-collapse navbar-ex1-collapse">  
 <ul class="nav navbar-nav">
 <li><a href="http://www.toutiao.com/">Main</a></li>
 <li><a href="http://www.toutiao.com/about">About</a></li>
 </ul>
 </div>
        </nav>
{{ end }}

footer模板的代码如下:

{{ define "footer" }}
        <p class="navbar-text navbar-fixed-bottom">Go Rocks!</p>    
        <script src="http://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)
}

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

两个页面的结果如下:

为Go Web  创建一个主页面

为Go Web  创建一个主页面

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值

举报

选择你想要举报的内容(必选)
  • 内容涉黄
  • 政治相关
  • 内容抄袭
  • 涉嫌广告
  • 内容侵权
  • 侮辱谩骂
  • 样式问题
  • 其他
点击体验
DeepSeekR1满血版
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回顶部

登录后您可以享受以下权益:

×