Elixir/Phoenixで遊ぶ 3 - Phoenixを動かしてみる -

Phoenix ページ追加

静的ページ追加

---

前回で作成したプロジェクトを使って公式サイトのドキュメントを参考に静的ページを追加してみる

• プロジェクトのディレクトリ構造

|--_build
|--config
|--deps
|--lib
|--priv
|--test
|--node_modules
|--web
|  |--channels
|  |--controllers
|  |  |--page_controller.ex
|  |--models
|  |--router.ex
|  |--static
|  |  |--css
|  |  |  |--app.scss
|  |  |--js
|  |  |  |--app.js
|  |  |--vendor
|  |  |  |--phoenix.js
|  |--templates
|  |  |--layout
|  |  |  |--application.html.eex
|  |  |--page
|  |  |  |--index.html.eex
|  |--views
|  |  |--error_view.ex
|  |  |--layout_view.ex
|  |  |--page_view.ex
|  |--web.ex

• routeに新規パスを追加
  http://localhost:4000/helloにアクセスするとhello phoenix.と表示するようにしてみる

defmodule SamplePhoenix.Router do
  use SamplePhoenix.Web, :router

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_flash
    plug :protect_from_forgery
  end

  pipeline :api do
    plug :accepts, ["json"]
  end

  scope "/", SamplePhoenix do
    pipe_through :browser # Use the default browser stack

    get "/", PageController, :index
    get "/hello", HelloController, :index
  end

  # Other scopes may use custom stacks.
  # scope "/api", SamplePhoenix do
  #   pipe_through :api
  # end
end

web/router.exのscope "/"ブロックにget "/hello", HelloController, :indexを追加

• コントローラ追加

web/controllers/hello_controller.exを以下内容で作成する

defmodule SamplePhoenix.HelloController do
  use SamplePhoenix.Web, :controller

  plug :action

  def index(conn, _params) do
    render conn, "index.html"
  end
end

indexメソッドの引数

• coon ・・・リクエストに関するデータ
• _params ・・・リクエストパラメータ

indexメソッドの処理
render conn, “index.html”の処理によってPhoenixフレームワークはindex.html.eexを web/templates/コントローラ名※から探す

※今回の場合はweb/templates/hello

• Viewの作成

web/views/hello_view.exを以下内容で作成する

defmodule SamplePhoenix.HelloView do
  use SamplePhoenix.Web, :view
end

• テンプレートの作成

phoenixフレームワークでのデフォルトのテンプレートエンジンはeex

web/templates/hello/index.html.eexを以下内容で作成する

<div class="jumbotron">
  <h2>Hello Phoenix!!</h2>
</div>

ここまできたらmix phoenix.serverで確認してみる。 サーバを起動しhttp://localhost:4000/helloにアクセス

上記の画面が表示されていればOK