iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Modern Web

連線網頁卡牌遊戲(Elixir, Phoenix, Liveview)系列 第 16

16 安裝 Phoenix,產出新專案

儘管我們的遊戲還是有漏洞,寫法也還不太滿意,
因為篇幅的關西,還是先記著進到下個階段好了。

安裝 phoenix

phoenix 在前幾天升到 1.6 版了,
我們在這裡就直接用新的

phoenix 官網
裡面的 guide 裡面有完整的安裝教學,
另外要注意的是,我們這一次不會使用資料庫,
所以可以跳過安裝 postgresql 的部分

先裝最新的 phoenix 進去電腦的 hex package

終端機

mix archive.install hex phx_new

在建立新的專案之前,我們可以先看看有什麼選項可以用

mix help phx.new

我們這次要使用的是 --no-ecto

mix phx.new card --no-ecto

card 是這個專案名稱,可以改成你想要的
送出就開始幫我們產生新的 phoenix 專案

在遇到 Fetch and install dependencies? [Yn] 的時候選Y

完成之後所有的東西都會裝在 card 資料夾裡
我們 cd 進去 card 資料夾後

執行

mix phx.server

開啟瀏覽器 打開 http://localhost:4000
就可以看到 phoenix 的預覽畫面。

https://ithelp.ithome.com.tw/upload/images/20210930/20141054JgErEQWSbM.png

來把它換掉吧 XD

新增一個頁面

每次向這個 phoenix 網頁伺服器送出要求的時候
都會先到 router.ex 這個檔案

  scope "/", CardWeb do
    pipe_through :browser

    get "/", PageController, :index
  end

在這一區有看到,我們把目前連到 "/" 的要求都導到 PageController 的 :index 方法
這個寫法是傳統的 MVC 寫法,這邊應該是沒空題,不過有用過類似網頁框架的話應該會滿快就懂的。

沒關係 我們這次直接使用新的 liveview 做法,兩者之間沒有太大的關聯。

我們把

  get "/", PageController, :index

改成

  live "/", PageLive.Index, :index

再去網頁看看
https://ithelp.ithome.com.tw/upload/images/20210930/20141054Ym3kOES2If.png

會看到他抱怨 module CardWeb.PageLive.Index is not available
我們就幫他建一個
我們在lib/card_web/底下,新增一個叫 live 的資料夾,
並在底下再新增 page_live 資料夾
路徑變成 lib/card_web/live/page_live
再給他一個 index.ex 檔案

按照他想要的在裡面新增 CardWeb.PageLive.Index module

defmodule CardWeb.PageLive.Index do

end

存檔在看頁面就發現他抱怨的東西改成只有 function CardWeb.PageLive.Index.live/0 is undefined

因為我們在 router 用 live 來連到這個 module
自然他會在這裡面找 liveview 的東西,

defmodule CardWeb.PageLive.Index do
  use CardWeb, :live_view

end

使用 use CardWeb, :live_view 幫他加上 liveview 的方法之後,
抱怨的東西變成 render/1 was not implemented

https://ithelp.ithome.com.tw/upload/images/20210930/201410544AiVBhd0Se.png

下面還給我們範例,我還不複製貼上,

好拉改一下裡面的字

defmodule CardWeb.PageLive.Index do
  use CardWeb, :live_view

  def render(assigns) do
    ~H"""
    我的第一個烘培機
    """
  end
end

https://ithelp.ithome.com.tw/upload/images/20210930/201410547g3VIv0Cba.png
就寫好了,但這樣好像沒什麼意義
我們明天來做的互動的按鈕之類的來練一下 liveview 整個流程


上一篇
15 修bug兼整理
下一篇
17 Liveview 練習
系列文
連線網頁卡牌遊戲(Elixir, Phoenix, Liveview)32

尚未有邦友留言

立即登入留言