質問: ![環境](https://teratail.storage.googleapis.com/uploads/contributed_images/53ed0add84c4c04a5c5c07ffc94d7312.png) これは、mattnさんのコードの `"views/*.html"` の部分を `"views/html/*.html"` に変更しただけのコードです。staticには今の所何も入っていません。 これで実行して、http://localhost:8989/loginにアクセスしたところ、 ![login](https://teratail.storage.googleapis.com/uploads/contributed_images/c83c0345e68391439c963fe76a843c1a.png) このようにまったくcssが適用されていないものが表示されました。 htmlには ``` ``` こう記述してあります。 原因として考えられるものは ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/556e981402730610ba85b68f02efea21.png) ここがUnexpected tokensとなっていることです。 を削除して実行して見ましたが、結果は同じでした。 echoを介さず、そのままhtmlファイルをブラウザに落とし込んだところ、しっかり表示されました。
回答: echo と繋げるところ ============= SPA(シングルページアプリケーション) にするかどうかで大きく変わりますが、まずは簡単な SPA では無い物から始めると良いです。 まずは簡単なアプリケーションを書きます。 ``` package main import ( "net/http" "github.com/labstack/echo" ) func main() { e := echo.New() e.GET("/", func(c echo.Context) error { return c.String(http.StatusOK, "Hello World") }) e.Logger.Fatal(e.Start(":8989")) } ``` これを動かして http://localhost:8989/ にアクセスすると「Hello World」と表示されるページが表示されます。 作られたログイン画面を表示させる事になるのですが、(SPA でない場合は)画面毎に異なる URL となります。今回のケースだと以下の様になると思います。 | URL | 詳細 | | --- | --- | | / | 発言一覧画面 | | /page/123 | 個別発言画面 | | /login | ログインページ画面 | これをコードで書くには以下の様に変更します。 ``` package main import ( "net/http" "github.com/labstack/echo" ) // テンプレートのレンダラ―を作る type Renderer struct { templates *template.Template } func (r *Renderer) Render(w io.Writer, name string, data interface{}, c echo.Context) error { return r.templates.ExecuteTemplate(w, name, data) } func main() { e := echo.New() // views/* を読ませる仕組み e.Renderer = &Renderer{ templates: template.Must(template.ParseGlob("views/*.html")), } e.GET("/login", func(c echo.Context) error { // views/login.html がサーブされる return c.Render(http.StatusOK, "login", nil) }) e.GET("/", func(c echo.Context) error { // views/index.html がサーブされる return c.Render(http.StatusOK, "index", nil) }) // 画像などを assets の下に置くと /static/xxx として見える e.Static("/static", "assets") e.Logger.Fatal(e.Start(":8989")) } ``` この `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 の値が得られます。 ``` e.GET("/page/:id", func(c echo.Context) error { // c.Param("id") で id が取れる }) ``` クエリパラメータ(Query Parameter)については認識の通りで良いです。