眺めて覚えるGo言語(Wsgi編)
-Wsgi Webアプリケーションフレームワーク）を接続するための、標準化されたインタフェース定義である
views/layout.tpl
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>{{.}}</title>
</head>
<body>
<main role="main">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Boostrap4</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Content</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{{ template "content" . }}
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
だだのhtmlです。
- {{ template "content" . }}に注目
- ここに実体を流し込みます。
content.tpl
{{ define "content" }}
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p>これは、単純なマーケティングWebサイトまたは情報Webサイトのテンプレートです。ジャンボトロンと呼ばれる大きな吹き出しと、3つのサポートコンテンツが含まれています。これを基本として、よりユニークなものを作成してください。</p>
<p><a class="btn btn-primary btn-lg" href="https://getbootstrap.com/" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
</div> <!-- /container -->
{{ end }}
コンテンツの中身です。
- {{ define "content" }}.....{{ end }} に注目
- {{ template "content" . }}に流し込ませる
about.tpl
{{ define "content" }}
<div class="container mt-5">
<h2>{{.title}}</h2>
<h3>{{.message }}</h3>
<p>この領域を使用して、追加情報を提供します。</p>
</div>
{{ end }}
about用コンテンツ
contact.tpl
{{ define "content" }}
<div class="container mt-5">
<h2>{{.title}}.</h2>
<h3>{{.message}}</h3>
<address>
〒100-0001<br/>
東京都千代田区千代田１<br />
<abbr title="Phone">P:03-3213-2050</abbr>
</address>
<address>
<strong>サポート:</strong> <a href="mailto:Support@example.com">Support@example.com</a><br />
<strong>営業:</strong> <a href="mailto:Marketing@example.com">Marketing@example.com</a>
</address>
</div> <!-- /container -->
{{end}}
contact用コンテント
main.go
package main
import (
"./mux"
"html/template"
"log"
"net/http"
)
func Home(w http.ResponseWriter, r *http.Request) {
// テンプレートをパース
t := template.Must(template.ParseFiles("views/layout.tpl","views/content.tpl"))
str := "Home"
// テンプレートを描画
if err := t.ExecuteTemplate(w, "layout.tpl", str); err != nil {
log.Fatal(err)
}
}
func About(w http.ResponseWriter, r *http.Request) {
// テンプレートをパース
t := template.Must(template.ParseFiles("views/layout.tpl","views/about.tpl"))
data := map[string]string{
"title": "About",
"message": "Your application description page.",
}
// テンプレートを描画
if err := t.ExecuteTemplate(w, "layout.tpl", data); err != nil {
log.Fatal(err)
}
}
func Contact(w http.ResponseWriter, r *http.Request) {
// テンプレートをパース
t := template.Must(template.ParseFiles("views/layout.tpl","views/contact.tpl"))
data := map[string]string{
"title": "Contact",
"message": "Your contact page.",
}
// テンプレートを描画
if err := t.ExecuteTemplate(w, "layout.tpl", data); err != nil {
log.Fatal(err)
}
}
func main() {
r := mux.NewRouter()
r.HandleFunc("/", Home)
r.HandleFunc("/about", About)
r.HandleFunc("/contact", Contact)
http.Handle("/", r)
http.ListenAndServe("192.168.1.10:8080", r)
}
html描画用関数を
- Home
- About
- Contact