#はじめに

という質問をしました。
僕自身、何でもかんでも質問するつもりはなかったのですが、web自体初めて扱うため、バックエンドの基本用語すらわからず、頭が?でいっぱいです...すみません。

#やりたいこと
掲示板を作りたいです。
とりあえずhtml,css,jsで適当にログインフォームを作りました。

#まずフロントとechoをつなげるところから

で、とりあえずデータベース云々というよりまずバックエンドについてを理解しようと思い、echoをgo getしてexampleコードを実行して確認しました。

これだと確かにhttp://localhost:1323にアクセスした時にHello, Workdが表示されるのですが、ローカルのhtmlのフォームからのHTTPリクエストをうけつけたりする方法がわかりません。

最終的には、ログインページで、ユーザー名とパスワードをPOSTして、それをechoで受け取って処理する(DBの情報と照合するなど？)などをすると思うのですが...

とにかく、htmlからsubmitしたものをgoのコンソールで表示するようなことをするコード等の書き方を教えていただきたいです。

別件

exampleコード
ここで、

Routing
path parameters
Query Parameters

という単語が出てきました。
Query Parametersはおそらく、URLの後の?hoge=piyo
というクエリのことだと思うのですが、他の二つの単語の意味が調べてもよくわかりませんでした。よければ参考サイト等くださると嬉しいです。

#最後に
いちいち質問してしまい申し訳なく思っています。お時間取らせてすみません。

#追記

これは、mattnさんのコードの
"views/*.html"
の部分を
"views/html/*.html"
に変更しただけのコードです。staticには今の所何も入っていません。
これで実行して、http://localhost:8989/loginにアクセスしたところ、

このようにまったくcssが適用されていないものが表示されました。
htmlには

html
1<link rel="stylesheet" href="../css/login.css">

こう記述してあります。

原因として考えられるものは

ここがUnexpected tokensとなっていることです。

<!DOCTYPE html>を削除して実行して見ましたが、結果は同じでした。

echoを介さず、そのままhtmlファイルをブラウザに落とし込んだところ、しっかり表示されました。

行動規範の内容に同意します

回答2件

ベストアンサー

echo と繋げるところ

SPA(シングルページアプリケーション) にするかどうかで大きく変わりますが、まずは簡単な SPA では無い物から始めると良いです。

まずは簡単なアプリケーションを書きます。

go
1package main
2
3import (
4	"net/http"
5
6	"github.com/labstack/echo"
7)
8
9func main() {
10	e := echo.New()
11	e.GET("/", func(c echo.Context) error {
12		return c.String(http.StatusOK, "Hello World")
13	})
14	e.Logger.Fatal(e.Start(":8989"))
15}

これを動かして http://localhost:8989/ にアクセスすると「Hello World」と表示されるページが表示されます。

作られたログイン画面を表示させる事になるのですが、(SPA でない場合は)画面毎に異なる URL となります。今回のケースだと以下の様になると思います。

URL	詳細
/	発言一覧画面
/page/123	個別発言画面
/login	ログインページ画面

これをコードで書くには以下の様に変更します。

go
1package main
2
3import (
4	"net/http"
5
6	"github.com/labstack/echo"
7)
8
9// テンプレートのレンダラ―を作る
10type Renderer struct {
11	templates *template.Template
12}
13
14func (r *Renderer) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
15	return r.templates.ExecuteTemplate(w, name, data)
16}
17
18func main() {
19	e := echo.New()
20
21	// views/* を読ませる仕組み
22	e.Renderer = &Renderer{
23		templates: template.Must(template.ParseGlob("views/*.html")),
24	}
25
26	e.GET("/login", func(c echo.Context) error {
27		// views/login.html がサーブされる
28		return c.Render(http.StatusOK, "login", nil)
29	})
30	e.GET("/", func(c echo.Context) error {
31		// views/index.html がサーブされる
32		return c.Render(http.StatusOK, "index", nil)
33	})
34	// 画像などを assets の下に置くと /static/xxx として見える
35	e.Static("/static", "assets")
36	e.Logger.Fatal(e.Start(":8989"))
37}

この views/login.html を作った物で置き換えて下さい。画像などは assets の下に置き、/static/foo.jpg の様に見えるよう変更して下さい。

view/login.html は以下の様に記述して下さい。

{{define "login"}}
ページの中身
{{end}}

この define "login" が c.Render で指定するテンプレートの名前です。今は理解出来てなくても後から何故必要なのか分かってくると思います。

ここまで出来たら、次はサブミット時のアクションを作る事になりますが、そこはまた勉強頂き、分からなければ質問されると良いかと思います。

別件

ウェブ用語でルーティング(Routing)とは、上記の /login や /page/123、/ といったパスに対して処理を割り当てる事を言います。

パスパラメータ(Path Parameter)とは、上記の /page/123 の可変部 123 をアプリケーションから取れる様にした仕組みもしくは得られた値の事を言います。echo の場合、パスに :id と書く事で c.Param("id") から id の値が得られます。

go
1e.GET("/page/:id", func(c echo.Context) error {
2	// c.Param("id") で id が取れる
3})

クエリパラメータ(Query Parameter)については認識の通りで良いです。

投稿2017/09/08 03:30

編集2017/09/08 03:32

mattn

総合スコア5030

退会済みユーザー

2017/09/08 05:13 編集

いつも回答ありがとうございます???? たまにブログ拝見させて頂きますが、難しくて殆ど分かりませんwですがteratailの回答はとてもわかりやすく、ややこしいことは省いて下さるので大変助かります。コード上ではviews/*.htmlと書いてあり、その後の解説でview/login.htmlと言われているのはミスですかね...？ディレクトリ構造 echo.go assetsー画像群 viewsーlogin.html | ーlogin.css こうですかね。あと、views/login.htmlを {{define "login"}} <html> <head>something</head> <body>something</body> </html> {{end}} こういう風に書けということですね。帰宅したらやってみます。ルーティング等の説明も付けてくださりありがとうございました。(別件と見出しを付けましたが、別件ではないですねw寝ぼけてました。)

mattn

2017/09/08 04:18

>ミスですかね...？ミスではないです。実際にコードでも views/*.html と書きます。今後 views/index.html や view/statuses.html という物が増えてくるかと思います。

退会済みユーザー

2017/09/09 13:47 編集

"html/template" と "io" をimportし忘れていらっしゃるようです

mattn

2017/09/08 14:26

あ、すみません。

退会済みユーザー

2017/09/09 12:02

追加でわからない部分を追記させていただきました...

mattn

2017/09/09 12:29 編集

↑の回答に書かせてもらった通り、静的ファイルは assets の中に纏めているので assets/css/xxx.css に置いて /static/css/xxx.css で参照できる様に修正して頂くか e.Static("/static", "assets") ここを e.Static("/css", "css") に変えて貰う必要があります。だたしこの場合 js や image など他も対応しなければならなくなるので、面倒になります。Unexpected Token の警告が出ているのは、HTML の中に go のテンプレート記法が書かれているのが理由なので、特に問題ではないです。

退会済みユーザー

2017/09/09 13:47

あー、ナルホド！ e.Static("/static", "assets") にしたのち、 <link rel="stylesheet" href="/static/css/login.css"> のように参照すればうまくできました！とりあえず、これ以降はまた別の質問として出そうと思います。ありがとうございました。

行動規範の内容に同意します