實作 index 頁面的 router -> controller -> view -> template 流程

先把我們這次需要的路徑加入 router

# lib/blog_web/router.ex
  scope "/", BlogWeb do
    pipe_through :browser
    resources "/notes", NoteController
    resources "/posts", PostController # 加入這行

    get "/", PageController, :index
  end

我們先做 /posts 會連到的 PostController

自己做這些如果沒有頭緒的時候可以參考之前用生產器產生出來的 notes

我們在 lib/blog_web/controllers 資料夾裡面建立 page_controller.ex
裡面加上

defmodule BlogWeb.PostController do
  use BlogWeb, :controller

  def index(conn, _params) do
    render(conn, :index)
  end
end

打開伺服器在瀏覽器前往 http://localhost:4000/posts 看看吧

mix phx.server

馬上遇到錯誤啦
但從錯誤訊息(module BlogWeb.PostView is not available) 中可以得知，
原來 render 預設會去找與目前 Controller 對應名字的 View 模組，
我們的是 BlogWeb.PostController 所以他會去找 BlogWeb.PostView，
那我們就按照慣例建立一個 lib/blog_web/view/posts_view.ex

# 這個檔案路徑是 lib/blog_web/view/posts_view.ex
defmodule BlogWeb.PostView do
  use BlogWeb, :view
end

再打開 http://localhost:4000/posts 又遇到錯誤啦

這個錯誤訊息滿清楚的，他在 lib/blog_web/templates/post/ 這個資料夾裡面找不到 "index.html"
那我們就幫他建立一個，在這邊注意的是要建立的有 post 資料夾與裡面的 template 檔案 index.html.heex

這個檔案路徑是 lib/blog_web/templates/post/index.html.heex

<h1>顯示 post 的 index 頁面</h1>
等一下要列出所有的 posts

再重新整理一次，這次總算有啦

帶入資料

雖然頁面顯示了，但是應該要顯示目前所有的 post 才對啊

打開 PostController 來更改一下 index 方法

defmodule BlogWeb.PostController do
  use BlogWeb, :controller
  alias Blog.Posts # alias 我們會用到的 Posts context

  def index(conn, _params) do
    posts = Posts.list_posts() # 呼叫我們在 context 寫好的方法

    # 把得到的 posts 裝進 map 放到 render 的第三個變數裡
    render(conn, :index, %{posts: posts}) 
  end
end

這樣子我們就可以在 template 裡面用 @posts 拿到所有的 posts

更改一下 index.html.heex 來顯示

<h1>顯示所有的文章</h1>
<%= for post <- @posts do %>
  <article>
    <h2><%= post.title %></h2>
    <p><%= post.body %></p>
  </article>
<% end %>

eex 裡面可以用 <% %> 在 html 嵌入 elixir 程式
我們現在使用的 heex 是 eex 的加強版，有一些專屬 phoenix 的功能，之後會在 Liveview 的章節用到
<%= "中間 Elixir 程式碼會被執行並顯示" %>
<%= "中間 Elixir 程式碼會被執行不顯示" %>

舉例

<h1>3 + 3 = <%= 3 + 3 %><h1>

顯示時會變成

<h1>3 + 3 = 6<h1>

到瀏覽器重新整理來看看最後顯示的樣子吧