首頁>編程相關>其他源碼
下載

示範 Elixir 鳳凰

靈藥+鳳凰

Elixir Phoenix 的演示，如何啟動和運行它，以及如何透過 Gigalixir 進行部署。

安裝 Erlang、Elixir、Node、Postgres

介紹性說明：

  • http://elixir-lang.org
  • http://exponential.io/blog/2015/02/21/

有多種安裝方式：

  • 透過 asdf 安裝 - 適用於跨平台開發人員
  • 透過brew安裝－適合喜歡brew的macOS開發者
  • 透過 kerl - wip 安裝
  • 透過來源安裝 - wip

驗證版本至少是這些： 

erl --version
Erlang/OTP 27 …

elixir --version
Elixir 1.17.3 …

psql --version
psql (PostgreSQL) 16.4

node --version
v22.9.0

配置PostgresSQL資料庫

為了使本機 PostgreSQL 設定更強大、更適合此演示，請建立一個新角色。

  • 角色名稱為“demo_elixir_phoenix”，因為它與該項目名稱相符。

  • 角色密碼可以是強密碼，因為這是一種好的安全做法。

產生一個強密碼，例如 32 個十六進位數字： 

 printf " %sn " $( LC_ALL=C < /dev/urandom tr -dc ' 0-9a-f ' | head -c32 )

輸出範例： 

a9ed78cd8e4aa2bd2a37ad7319899106

為了使本機 PostgreSQL 設定更強大、更適合此演示，請建立一個新角色。

  • 角色名稱為“demo_elixir_phoenix”，因為它與該項目名稱相符。

  • 角色密碼可以是強密碼，因為這是一種好的安全做法。

產生一個強密碼，例如 32 個十六進位數字： 

 printf " %sn " $( LC_ALL=C < /dev/urandom tr -dc ' 0-9a-f ' | head -c32 )

輸出範例： 

a9ed78cd8e4aa2bd2a37ad7319899106

透過典型的 PostgreSQL 選項連結： 

 psql --username postgres postgres

透過 macOS brew PostgreSQL 選項連接： 

psql --username " $USER " postgres

使用 psql 建立角色： 

 postgres=# CREATE ROLE demo_elixir_phoenix WITH CREATEDB LOGIN ENCRYPTED PASSWORD 'a9ed78cd8e4aa2bd2a37ad7319899106';

核實： 

 postgres=# du demo_elixir_phoenix
                List of roles
      Role name      | Attributes
---------------------+------------
 demo_elixir_phoenix | Create DB

更新組合

更新mix即 Elixir 套件管理器： 

mix local.hex --force

輸出： 

 * creating …/.mix/archives/hex-2.1.1

獲取 Phoenix 框架

安裝 Phoenix 新專案產生器： 

mix archive.install hex phx_new

輸出： 

 * creating ~/.mix/archives/phx_new-1.7.14

核實： 

mix phx.new -v​

輸出： 

Phoenix installer v1.7.14

創建一個新應用程式

混合 Phoenix 新目錄和應用程式

新的： 

mix phx.new demo-elixir-phoenix --app demo_elixir_phoenix
cd demo-elixir-phoenix

建立資料庫

更改檔案config/dev.exs中的資料庫配置。

從預設的使用者名稱和密碼： 

 username : "postgres" ,
password: "postgres" ,

進入自訂使用者名稱和密碼： 

 username : "demo_elixir_phoenix" ,
password: "a9ed78cd8e4aa2bd2a37ad7319899106" ,

跑步： 

mix ecto.create
The database for DemoElixirPhoenix.Repo has been created

對檔案config/test.exs執行相同的使用者名稱和密碼變更。

修復

如果您收到此錯誤： 

 ** (Mix) The task " ecto.create " could not be found

那麼您可能在錯誤的目錄中運行命令；驗證您正在應用程式的基底目錄中執行該命令。

如果您收到此錯誤： 

 ** (Mix) The database for DemoElixirPhoenix.Repo couldn ' t be created: an exception was raised:
** (DBConnection.ConnectionError) tcp connect (localhost:5432): connection refused - :econnrefused

然後在這裡進行故障排除：

  • https://github.com/sixarm/sixarm-postgresql-help

測試

跑步： 

 mix test

輸出： 

…
Finished in 0.03 seconds (0.01s async, 0.02s sync)
5 tests, 0 failures

運行鳳凰伺服器

跑步： 

mix phx.server

[info] Running DemoElixirPhoenixWeb.Endpoint with Bandit 1.5.5 at 127.0.0.1:4000 (http)
[info] Access DemoElixirPhoenixWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...

Rebuilding...

Done in 166ms.

瀏覽：

  • http://本地主機:4000

您應該會看到一個歡迎頁面。

修復

如果您收到此錯誤： 

Error: Brunch 2+ requires node.js v4 or higher …
Upgrade node or use older brunch for old node.js: npm i -g brunch@1

然後更新 Node、NPM 和 brunch： 

brew update
brew uninstall node
sudo rm -rf /usr/local/lib/node_modules
brew install node --with-full-icu
npm install -g npm
npm install -g brunch

使用應用程式工作

列出路線

您可能想要列出伺服器路由： 

mix phx.routes

輸出： 

  GET   /                                      DemoElixirPhoenixWeb.PageController :home
  GET   /dev/dashboard/css-:md5                Phoenix.LiveDashboard.Assets :css
  GET   /dev/dashboard/js-:md5                 Phoenix.LiveDashboard.Assets :js
  GET   /dev/dashboard                         Phoenix.LiveDashboard.PageLive :home
  GET   /dev/dashboard/:page                   Phoenix.LiveDashboard.PageLive :page
  GET   /dev/dashboard/:node/:page             Phoenix.LiveDashboard.PageLive :page
  *     /dev/mailbox                           Plug.Swoosh.MailboxPreview []
  WS    /live/websocket                        Phoenix.LiveView.Socket
  GET   /live/longpoll                         Phoenix.LiveView.Socket
  POST  /live/longpoll                         Phoenix.LiveView.Socket

產生資源

產生完整 HTML 資源的所有程式碼：ecto 遷移、ecto 模型、控制器、視圖和模板。 

mix phx.gen.html Account User users 
    name:string 
    email:string

輸出： 

 * creating lib/demo_elixir_phoenix_web/controllers/user_controller.ex
* creating lib/demo_elixir_phoenix_web/controllers/user_html/edit.html.heex
* creating lib/demo_elixir_phoenix_web/controllers/user_html/index.html.heex
* creating lib/demo_elixir_phoenix_web/controllers/user_html/new.html.heex
* creating lib/demo_elixir_phoenix_web/controllers/user_html/show.html.heex
* creating lib/demo_elixir_phoenix_web/controllers/user_html/user_form.html.heex
* creating lib/demo_elixir_phoenix_web/controllers/user_html.ex
* creating test/demo_elixir_phoenix_web/controllers/user_controller_test.exs
* creating lib/demo_elixir_phoenix/account/user.ex
* creating priv/repo/migrations/20240625211751_create_users.exs
* creating lib/demo_elixir_phoenix/account.ex
* injecting lib/demo_elixir_phoenix/account.ex
* creating test/demo_elixir_phoenix/account_test.exs
* injecting test/demo_elixir_phoenix/account_test.exs
* creating test/support/fixtures/account_fixtures.ex
* injecting test/support/fixtures/account_fixtures.ex

重新排序時間戳

我們希望遷移時間戳記出現在其餘欄位之前，因此我們編輯遷移： 

edit priv/repo/migrations/ * _create_users.exs

我們的結果如下所示： 

 defmodule DemoElixirPhoenix.Repo.Migrations.CreateUsers do
  use Ecto.Migration

  def change do
    create table ( :users ) do
      timestamps ( type: :utc_datetime )
      add :name , :string
      add :email , :string
    end
  end
end

新增路線

請參閱路由器檔案lib/demo_elixir_phoenix_web/router.ex 。

預設為： 

  scope "/" , DemoElixirPhoenixWeb do
    pipe_through :browser

    get "/" , PageController , :home
  end

編輯路由器： 

edit lib/demo_elixir_phoenix_web/router.ex `

將使用者資源新增至瀏覽器範圍： 

  scope "/" , DemoElixirPhoenixWeb do
    pipe_through :browser
    
    resources "/users" , UserController

    get "/" , PageController , :home
  end

遷移

遷移： 

mix ecto.migrate

輸出： 

Generated demo_elixir_phoenix app

[info]  == Running … DemoElixirPhoenix.Repo.Migrations.CreateUsers.change/0 forward

[info]  create table users

[info]  == Migrated … in 0.0s

驗證路線

驗證用戶路由是否存在： 

mix phx.routes | grep users

輸出： 

  GET     /users                                 DemoElixirPhoenixWeb.UserController :index
  GET     /users/:id/edit                        DemoElixirPhoenixWeb.UserController :edit
  GET     /users/new                             DemoElixirPhoenixWeb.UserController :new
  GET     /users/:id                             DemoElixirPhoenixWeb.UserController :show
  POST    /users                                 DemoElixirPhoenixWeb.UserController :create
  PATCH   /users/:id                             DemoElixirPhoenixWeb.UserController :update
  PUT     /users/:id                             DemoElixirPhoenixWeb.UserController :update
  DELETE  /users/:id                             DemoElixirPhoenixWeb.UserController :delete

跑步

運行伺服器： 

mix phx.server
…
[info] Running DemoElixirPhoenixWeb.Endpoint with Bandit 1.5.5 at 127.0.0.1:4000 (http)
[info] Access DemoElixirPhoenixWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...

Rebuilding...

Done in 152ms.

瀏覽：

  • http://localhost:4000/用戶

現在，您會看到一個使用者登入頁面，其中包含「列出使用者」、「姓名」、「電子郵件」等文字。

伺服器控制台的輸出： 

[info] GET /users
[debug] Processing with DemoElixirPhoenixWeb.UserController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[debug] QUERY OK source="users" db=0.4ms queue=0.5ms idle=974.7ms
SELECT u0."id", u0."name", u0."email", u0."inserted_at", u0."updated_at" FROM "users" AS u0 []
↳ DemoElixirPhoenixWeb.UserController.index/2, at: lib/demo_elixir_phoenix_web/controllers/user_controller.ex:8
[info] Sent 200 in 48ms
展開
附加信息
相關應用
爲您推薦
相關資訊 全部