iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

Phoenix 1.7 完全教學 系列

使用 Elixir 語言的全端網頁框架 Phoenix 在今年的 1.7 版本中新增了更多方便的功能,再加上內建用來做畫面互動的 LiveView 寫法逐漸成熟。現在正是開始使用 Phoenix 與 Elixir 的最好時機,這個系列將會從頭開始介紹 Phoenix 框架以及我這兩年使用得到的心得。

鐵人鍊成 | 共 30 篇文章 | 5 人訂閱 訂閱系列文 RSS系列文
DAY 21

21 LiveView 簡單的互動頁面

簡單的頁面 在開始解釋 LiveView 流程之前,我們要直接實作一個有簡單互動的 LiveView 頁面。 Router 與 Controller-View...

2023-10-06 ‧ 由 韋政 分享
DAY 22

22 LiveView 生命週期

相對於之前做的 Controller-View,LiveView 會一直有一個 process 在維護頁面的狀態,有狀態代表有一個週期循環。 LiveView...

2023-10-07 ‧ 由 韋政 分享
DAY 23

23 LiveView Index 頁面

這個章節我們要把原本使用 Controller-View 的感激筆記頁面一步一步的改成 LiveView 版本,並加上一些新功能。 一樣先由 Router 開始...

2023-10-08 ‧ 由 韋政 分享
DAY 24

24 CoreComponents

CoreComponents 源由 從 Phoenix 1.7 以後,Phoenix 的新專案都會產生這個 Component module,並且預設 impo...

2023-10-09 ‧ 由 韋政 分享
DAY 25

25 Component 與 Live Component

Component Phoenix 以 component 來整理或重複使用函式化的 HTML template,目前我們有用到包括 core_componen...

2023-10-10 ‧ 由 韋政 分享
DAY 26

26 Live Component 表格 1

modal 表格 由於 LiveView 可以不需要換掉整個頁面,所以我們可以把新增修改的表格放到 modal,這也成了現在 LiveView 表格常見的做法...

2023-10-11 ‧ 由 韋政 分享
DAY 27

27 LiveComponent 表格 2

顯示表格 建立 lib/gratitude_web/live/note_live/form_component.ex 並填入: defmodule Gratit...

2023-10-12 ‧ 由 韋政 分享
DAY 28

28 LiveView 測試

由於 LiveView 的狀態是在 server 端,所以大部分的 End-to-end 測試都可以直接使用 Elixir 在 LiveViewTest 中進行...

2023-10-13 ‧ 由 韋政 分享
DAY 29

29 LiveView_修改

這一回先由畫面開始 修改 在列表每一個 note 右邊加上修改按鈕 <.table id="notes" rows={@notes}&...

2023-10-14 ‧ 由 韋政 分享
DAY 30

30 LiveView 刪除 與 30 天總結

刪除 刪除相對簡單很多 在列表加上刪除按鈕 在我們的 index 裡多加一個 action slot <.table id="notes&quo...

2023-10-15 ‧ 由 韋政 分享