概要
Go言語を使って簡単なWEBページを作成する
※dockerとgolangの動作環境が準備済みである事
目次
1. dockerコンテナとgo言語環境ソースファイルのファイル構成
2. WEBサーバー構築
3. htmlファイルの作成
1. dockerコンテナとgo言語環境ソースファイルのファイル構成
go言語の環境構築については下記記事参照
windowsでGo言語を使ったWEBアプリケーション作成の環境を構築する
docker
+---web-app
| docker-compose.yml
+---images
+---golang-api
DockerFile
go
+---web-app
| go.mod
| go.sum
| main.go
+---views
MainPage.html
MainPage2.html
DetailPage.html
ローカルで作成したgo言語環境をdockerコンテナにバインドさせてAPIサーバーを作成する
dockerコンテナの作成については以前の記事参照
go言語(echo)APIサーバーの構築手順(+reactとの接続設定手順)
2. WEBサーバー構築
main.goを下記のように記述する
html表示用のhtml/templateパッケージを使用してWEB画面を表示する
package main
import (
/* サーバー起動用のパッケージ */
"net/http"
/* テンプレート用パッケージ */
"html/template"
/* 入出力を扱うパッケージ */
"io"
/* ミドルウェア用パッケージ */
"github.com/labstack/echo/middleware"
/* メインのフレームワークにechoを使用 */
"github.com/labstack/echo"
)
type Template struct {
templates *template.Template
}
func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
return t.templates.ExecuteTemplate(w, name, data)
}
/* 共通使用するデータ用の構造体 */
type CommonData struct {
/* field名は大文字で始める */
Title string
}
/* メインページ表示 */
func viewMainPage(c echo.Context) error {
/* テンプレートに渡す値をセット */
var common = CommonData{
"メインページ",
}
data := struct {
/* field名は大文字で始める */
CommonData
ContentString string
}{
CommonData: common,
ContentString: "文章",
}
/* Renderでhtmlを表示 */
return c.Render(http.StatusOK, "mainPage", data)
}
/* メインページ表示2 */
func viewMainPage2(c echo.Context) error {
/* テンプレートに渡す値をセット */
var common = CommonData{
"メインページ2",
}
data := struct {
/* field名は大文字で始める */
CommonData
}{
CommonData: common,
}
/* Renderでhtmlを表示 */
return c.Render(http.StatusOK, "mainPage", data)
}
/* 遷移先ページ */
func viewDetailPage(c echo.Context) error {
/* QueryParamでクエリの値を取得する */
code := c.QueryParam("code")
/* テンプレートに渡す値をセット */
var common = CommonData{
"遷移先ページ",
}
data := struct {
/* field名は大文字で始める */
CommonData
Code string
}{
CommonData: common,
Code: code,
}
/* Renderでhtmlを表示 */
return c.Render(http.StatusOK, "detailPage", data)
}
func main() {
/* echoのインスタンス作成 */
e := echo.New()
/* テンプレートの設定(viewsフォルダの.htmlファイルが対象) */
t := &Template{
templates: template.Must(template.ParseGlob("views/*.html")),
}
e.Renderer = t
/* ミドルウェア類 */
e.Use(middleware.Logger())
e.Use(middleware.Recover())
/* メインページ表示 */
e.GET("/main", viewMainPage)
/* メインページ2表示 */
e.GET("/main2", viewMainPage2)
/* メインページ2からの遷移先ページ */
e.GET("/dtlPage", viewDetailPage)
/* サーバー起動 */
e.Logger.Fatal(e.Start(":1323"))
}
3. htmlファイルの作成
MainPage.html,MainPage2.html,DetailPage.htmlを下記の様に記述する
templeteパッケージの記述方法については下記参照
Go言語(golang) テンプレートの使い方
{{define "mainPage"}}
{{template "header" .}}
<blockquote>
{{if eq .CommonData.Title "メインページ"}}
<div>{{.ContentString}}</div>
{{else}}
<div><input id="code" type="text" /></div>
<div><button onclick="movePage()">test</button></div>
<script>
function movePage() {
var code = document.getElementById("code").value;
window.location.href = 'http://127.0.0.1:1323/dtlPage?code='+code;
}
</script>
{{end}}
</blockquote>
{{end}}
{{define "header"}}
<h1>{{.CommonData.Title}}</h1>
{{end}}
{{define "detailPage"}}
<div>{{.Code}}</div>
{{end}}
dokoerコンテナを起動(goサーバー起動)し
WEBブラウザでhttp://127.0.0.1:1323/main とURLを入力すると下記画面が表示される
main.goのviewMainPage関数が呼ばれる
→templeteのdefineで定義された"mainPage"にdataを渡して表示される
func viewMainPage(c echo.Context) error {
/* テンプレートに渡す値をセット */
var common = CommonData{
"メインページ",
}
data := struct {
/* field名は大文字で始める */
CommonData
ContentString string
}{
CommonData: common,
ContentString: "文章",
}
/* Renderでhtmlを表示 */
return c.Render(http.StatusOK, "mainPage", data)
}
WEBブラウザでhttp://127.0.0.1:1323/main2 とURLを入力すると下記画面が表示される
main.goのviewMainPage2関数が呼ばれる
→templeteのdefineで定義された"mainPage"にdataを渡して表示される
func viewMainPage2(c echo.Context) error {
/* テンプレートに渡す値をセット */
var common = CommonData{
"メインページ2",
}
data := struct {
/* field名は大文字で始める */
CommonData
}{
CommonData: common,
}
/* Renderでhtmlを表示 */
return c.Render(http.StatusOK, "mainPage", data)
}
入力欄に任意の文字を入力、testボタンをクリックすると
下記画面が表示される
mainPage.htmlに記載されたjavascriptの画面遷移処理でhttp://127.0.0.1:1323/dtlPage?code=[入力した文字] が呼ばれる
→main.goのviewDetailPage関数が呼ばれる
→templeteのdefineで定義された"detailPage"にdataを渡して表示される
func viewDetailPage(c echo.Context) error {
/* QueryParamでクエリの値を取得する */
code := c.QueryParam("code")
/* テンプレートに渡す値をセット */
var common = CommonData{
"遷移先ページ",
}
data := struct {
/* field名は大文字で始める */
CommonData
Code string
}{
CommonData: common,
Code: code,
}
/* Renderでhtmlを表示 */
return c.Render(http.StatusOK, "detailPage", data)
}
⬇
