檢視原始碼 目錄結構
當我們使用 mix phx.new
產生新的 Phoenix 應用程式時,它會建立如下所示的頂層目錄結構
├── _build
├── assets
├── config
├── deps
├── lib
│ ├── hello
│ ├── hello.ex
│ ├── hello_web
│ └── hello_web.ex
├── priv
└── test
我們將逐一介紹這些目錄
_build
- 由命令列工具mix
建立的目錄,此工具附屬於 Elixir,可保存所有編譯產出。正如我們在 "啟動並執行" 中所見,mix
是應用程式的主要介面。我們使用 Mix 編譯程式碼、建立資料庫、執行伺服器等。此目錄不得簽入版本控制,且隨時可進行移除。移除此目錄會強制 Mix 從頭開始重新建置您的應用程式。assets
- 保存前端資源原始碼的目錄,通常包含 JavaScript 和 CSS。這些來源會自動由esbuild
工具進行封裝。靜態檔案(例如圖片和字型)置於priv/static
。config
- 保存專案設定的目錄。config/config.exs
檔案是設定的進入點。在config/config.exs
的最後,它匯入了特定環境的設定,這些設定可在config/dev.exs
、config/test.exs
和config/prod.exs
中找到。最後,執行config/runtime.exs
,這是讀取機密和其他動態設定的最佳位置。deps
- 保存所有 Mix 相依項目的目錄。您可以在mix.exs
檔案內、defp deps do
函式定義中找到所有相依項目的清單。此目錄不得簽入版本控制,且隨時可進行移除。移除此目錄會強制 Mix 從頭開始下載所有相依項目。lib
- 用於保存應用程式原始碼的目錄。這個目錄分為兩個子目錄,lib/hello
和lib/hello_web
。lib/hello
目錄負責 hosting 所有業務邏輯與業務網域。它通常會與資料庫直接互動 - 它是 Model-View-Controller (MVC) 架構中的「Model」。lib/hello_web
負責將業務網域呈現在世界上,在此情況是透過 Web 應用程式。它同時具備 MVC 中的檢視與控制器。我們將於下一個區段更詳細探討這些目錄的內容。priv
- 保存生產環境中所需,但並非原始碼直接一部分的所有資源的目錄。你通常會在此保存資料庫腳本、翻譯檔案、圖像等等。預設上,從assets
目錄中的檔案產生的資源會放進priv/static/assets
。test
- 存放所有應用程式測試的目錄。它通常會反映在lib
中找到的相同結構。
lib/hello 目錄
lib/hello
目錄 hosting 所有的業務網域。由於我們的專案目前還沒有任何業務邏輯,此目錄大部分是空的。你只會找到三個檔案
lib/hello
├── application.ex
├── mailer.ex
└── repo.ex
lib/hello/application.ex
檔案定義一個名為:Hello.Application
的 Elixir 應用程式。這是因為 Phoenix 應用程式最終都只是 Elixir 應用程式。 Hello.Application
模組定義哪些服務屬於我們的應用程式
children = [
HelloWeb.Telemetry,
Hello.Repo,
{Phoenix.PubSub, name: Hello.PubSub},
HelloWeb.Endpoint
]
如果你是第一次使用 Phoenix,現在你不必擔心這些細節。就目前來說,只需要知道我們的應用程式會啟動一個資料庫儲存庫、一個用於於各種流程與節點交換訊息的 PubSub 系統、以及實際提供 HTTP request 服務的應用程式端點。這些服務會按照定義順序啟動,而應用程式關閉時,它們會以相反順序停止。
你可以在 Elixir 的官方 Application 文件 中進一步了解應用程式。
lib/hello/mailer.ex
檔案保存 Hello.Mailer
模組,其中定義傳送電子郵件的主要介面
defmodule Hello.Mailer do
use Swoosh.Mailer, otp_app: :hello
end
在同一個 lib/hello
目錄中,我們會找到一個lib/hello/repo.ex
。它定義了 Hello.Repo
模組,這是我們與資料庫溝通的主要介面。如果你使用 Postgres(預設資料庫),你會看到類似以下這個內容
defmodule Hello.Repo do
use Ecto.Repo,
otp_app: :hello,
adapter: Ecto.Adapters.Postgres
end
目前就到此為止了。在你進行專案開發時,我們會將檔案與模組新增至這個目錄。
lib/hello_web 目錄
lib/hello_web
目錄保存我們應用程式與 Web 相關的部分。展開後會如下所示
lib/hello_web
├── controllers
│ ├── page_controller.ex
│ ├── page_html.ex
│ ├── error_html.ex
│ ├── error_json.ex
│ └── page_html
│ └── home.html.heex
├── components
│ ├── core_components.ex
│ ├── layouts.ex
│ └── layouts
│ ├── app.html.heex
│ └── root.html.heex
├── endpoint.ex
├── gettext.ex
├── router.ex
└── telemetry.ex
目前位於 controllers
和 components
目錄中的所有檔案,用於建立我們在「起動並執行」指南中看到的「歡迎來到 Phoenix!」頁面。
檢視 controller
和 components
目錄,可以看到 Phoenix 提供了處理佈局、HTML 和錯誤頁面的現成功能。
除了前面提到的目錄,lib/hello_web
在其根目錄下有四個檔案。lib/hello_web/endpoint.ex
是 HTTP 要求的進入點。當瀏覽器存取 https://127.0.0.1:4000,終端點開始處理資料,最後傳遞至路由器,定義於 lib/hello_web/router.ex
中。路由器定義分散要求至「控制器」的規則,呼叫檢視模組為客戶端呈現 HTML 頁面。我們會在其他指南中深入探討這些層級,從接下來的「要求生命週期」指南開始。
透過 遙測,Phoenix 能夠收集指標並傳送應用程式的監控事件。lib/hello_web/telemetry.ex
檔案定義負責管理遙測程序的監督者。您可以在 遙測指南 中找到更多關於這個主題的資訊。
最後,有一個 lib/hello_web/gettext.ex
檔案提供國際化功能,透過 Gettext。若您不擔心國際化,則可以安全地略過這個檔案及其內容。
資產目錄
assets
目錄包含與前端資產相關的原始檔,例如 JavaScript 和 CSS。自 Phoenix v1.6 以來,我們使用 esbuild
編譯資產,由 esbuild
Elixir 套件管理。與 esbuild
的整合已植入到您的應用程式中。相關的設定可見於 config/config.exs
檔案。
您其他的靜態資產置於 priv/static
資料夾中,priv/static/assets
用於儲存已產生的資產。所有位於 priv/static
中的項目都會由 lib/hello_web/endpoint.ex
中設定的 Plug.Static
外掛程式提供服務。在開發模式下執行 (MIX_ENV=dev
) 時,Phoenix 會監測你在 assets
目錄中所做的任何變更,同時在您作業時負責更新瀏覽器中的前端應用程式。
請注意,當你第一次使用 mix phx.new
建立 Phoenix app 時,可以指定會影響 資產
目錄存在和配置的選項。事實上,Phoenix app 可以自備前端工具,甚至完全沒有前端 (例如,當你在寫 API)。如需更進一步的資訊,你可以執行 mix help phx.new
或參閱 Mix 任務 中的文件。
如果預設的 esbuild 整合無法符合你的需求,例如你想採用另一種建置工具,你可以轉用 客製資產建置。
至於 CSS,Phoenix 內建 Tailwind CSS Framework,為專案提供基本的設定。你可以轉換為任何你選擇的 CSS framework。在 資產管理 指南中可以找到其他的說明。