ログってなんぼ

エンジニアのメモです

トップ > golang > Go言語のWebフレームワークRevelで遊んでみる

Go言語のWebフレームワークRevelで遊んでみる

golang

公式サイトのチュートリアルを写経

Revel公式サイトが頼り

Getting Started | Tutorial | Revel - A Web Application Framework for Go!

GOPATH通せと

Set up your GOPATH If you did not create a GOPATH as part of installation, do so now. The GOPATH is a directory tree where all of your Go code will live. Here are the steps to do that: Make a directory: mkdir ~/gocode Tell Go to use that as your GOPATH: export GOPATH=~/gocode Save your GOPATH so that it will apply to all future shell sessions: echo export GOPATH=$GOPATH >> ~/.bash_profile Now your Go installation is complete. 引用元:Getting Started | Tutorial | Revel - A Web Application Framework for Go!

GOROOTはGoのインストール時に設定したけど、GOPATHも別途指定せよって意味か？いまのところよくわからない。

試しにgo getしてみる

$ go get
go install: no install location for directory /Users/okisanjp outside GOPATH

go getを使うにはGOPATHが必要（GOROOTは使わない）ととりあえず解釈して次へすすもう・・いちいち止まっていたら何も習得できないのでGOROOTとGOPATHの違いを調べるタスクをOmnifocus2に登録してとりあえず先へ進む。

f:id:Okisanjp:20160715122020p:plain

export PATH=$PATH:/usr/local/opt/go/libexec/bin
export GOPATH=~/gocode
export PATH=$PATH:$GOPATH/bin

Goインストール後に追加したパスと合わせてこのような感じに。もうちょっと整理したほうがいいけど・・まあ先に進む

Revelをインストール

$ go get github.com/revel/revel

Revel command line tool

$ go get github.com/revel/cmd/revel

$GOPATH/binにパスを通す

export PATH="$PATH:$GOPATH/bin"

これも~/.bash_profileあたりに入れておいたほうがいいんだろうな・・とりあえず入れとく

revelコマンドを確認

$GOPATH/binにパスが通っていればrevelコマンドが使えるようになる

$ revel help
~
~ revel! http://revel.github.io
~
usage: revel command [arguments]

The commands are:

    new         create a skeleton Revel application
    run         run a Revel application
    build       build a Revel application (e.g. for deployment)
    package     package a Revel application (e.g. for deployment)
    clean       clean a Revel application's temp files
    test        run all tests from the command-line

Use "revel help [command]" for more information.

新しいアプリケーションを作ってみる

$ revel new gotest
~
~ revel! http://revel.github.io
~
Your application is ready:
   /Users/okisanjp/gocode/src/gotest

You can run it with:
   revel run gotest

~/gocode/src/gotest にできたっぽい。

確認してみる

$ tree ~/gocode/src/gotest/
/Users/okisanjp/gocode/src/gotest/
├── README.md
├── app
│   ├── controllers
│   │   └── app.go
│   ├── init.go
│   └── views
│       ├── App
│       │   └── Index.html
│       ├── debug.html
│       ├── errors
│       │   ├── 404.html
│       │   └── 500.html
│       ├── flash.html
│       ├── footer.html
│       └── header.html
├── conf
│   ├── app.conf
│   └── routes
├── messages
│   └── sample.en
├── public
│   ├── css
│   │   └── bootstrap.css
│   ├── img
│   │   ├── favicon.png
│   │   ├── glyphicons-halflings-white.png
│   │   └── glyphicons-halflings.png
│   └── js
│       └── jquery-1.9.1.min.js
└── tests
    └── apptest.go

12 directories, 19 files

おお、なんか出来てる

動かしてみる

$ revel run gotest
~
~ revel! http://revel.github.io
~
INFO  2015/06/02 22:20:48 revel.go:329: Loaded module static
INFO  2015/06/02 22:20:48 revel.go:329: Loaded module testrunner
INFO  2015/06/02 22:20:48 revel.go:206: Initialized Revel v0.12.0 (2015-03-25) for >= go1.3
INFO  2015/06/02 22:20:48 run.go:57: Running gotest (gotest) in dev mode
INFO  2015/06/02 22:20:48 harness.go:165: Listening on :9000

ポート9000でサーバーが立ち上がった模様

ブラウザで確認してみる

f:id:Okisanjp:20160715122214p:plain

おお。動いた模様

templateを弄ってみる

/gocode/src/gotest/app/views/App/Index.html

{{set . "title" "Home"}}
{{template "header.html" .}}

<header class="hero-unit" style="background-color:#A9F16C">
  <div class="container">
    <div class="row">
      <div class="hero-text">
        <h1>It works!</h1>
        <p>Goへようこそ！俺！
      </div>
    </div>
  </div>
</header>

<div class="container">
  <div class="row">
    <div class="span6">
      {{template "flash.html" .}}
    </div>
  </div>
</div>

{{template "footer.html" .}}

確認

ブラウザをリロード

f:id:Okisanjp:20160715122226p:plain

変更がすぐに反映されました

Revel watches - see config): All go code under app/ All templates under app/views/ The routes file: conf/routes

引用元:The Request Flow | Tutorial | Revel - A Web Application Framework for Go!

上記ディレクトリを監視しているようです

エラーを出してみる

チュートリアルに従ってエラー画面を確認してみる

app/controllers/app.go

return c.Render()



to



return c.Renderx()

存在しないメソッドを呼んでみます

f:id:Okisanjp:20160715122235p:plain

おー親切。

viewに変数を渡してみる

app/controllers/app.go

return c.Renderx()



to



greeting := "Aloha World"
return c.Render(greeting)

viewも変更

app/views/App/Index.html

<h1>{{.greeting}}</h1>

f:id:Okisanjp:20160715122242p:plain

Formを使ったアプリを作る

チュートリアル参照しながら。写経写経。

フォームを追加する

flash.htmlをインクルードしている行の直下に以下のフォームを追加

app/views/App/Index.html

<form action="/App/Hello" method="GET">
    <input type="text" name="myName" /><br/>
    <input type="submit" value="Say hello!" />
</form>

f:id:Okisanjp:20160715122249p:plain

Form出た。

サブミットしてみる

このままポチッとSubmit

f:id:Okisanjp:20160715122255p:plain

HelloなんてActionねえよとエラー

Hello Action追加

app/controllers/app.go

func (c App) Hello(myName string) revel.Result {
    return c.Render(myName)
}

対応するViewも作る

app/views/App/Hello.html

{{set . "title" "Home"}}
{{template "header.html" .}}



<h1>Hello {{.myName}}</h1>
<a href="/">Back to form</a>



{{template "footer.html" .}}

再度Submit

f:id:Okisanjp:20160715122305p:plain

validationを実装する

validation moduleというものを使って簡単なバリデーションを実装

app/controllers/app.go

func (c App) Hello(myName string) revel.Result {
    c.Validation.Required(myName).Message("Your name is required!")
    c.Validation.MinSize(myName, 3).Message("Your name is not long enough!")



if c.Validation.HasErrors() {
    c.Validation.Keep()
    c.FlashParams()
    return c.Redirect(App.Index)
}

return c.Render(myName)




}

myNameは必須かつ3文字以上必要というルール

f:id:Okisanjp:20160715122314p:plain

f:id:Okisanjp:20160715122320p:plain

文字数が少ない場合にもエラーがちゃんと出ました。が、入力値がフォームに残っていません

バリデーションを通せるデータが来た場合

f:id:Okisanjp:20160715122328p:plain

動いた

入力値を再度出力する

app/views/App/Index.html

<form action="/App/Hello" method="GET">
  {{with $field := field "myName" .}}
      <input type="text" name="{{$field.Name}}" value="{{$field.Flash}}"/><br/>
  {{end}}
  <input type="submit" value="Say hello!" />
</form>

上記のように書き換える

f:id:Okisanjp:20160715122338p:plain

入力値がフォームに出力されました

何冊か本買おう