Help us understand the problem. What is going on with this article?

眺めて覚えるGo言語 その3 web server gateway

眺めて覚えるGo言語(Wsgi編)

-Wsgi Webアプリケーションフレームワーク)を接続するための、標準化されたインタフェース定義である
image.png

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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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/>
    東京都千代田区千代田1<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

テンプレートファイルと関数を用意する。

メイン関数でルータを用意しurlと関数を関係つけする。

hiratarich
生涯プログラマ
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした