การสาธิต Elixir Phoenix วิธีเริ่มต้นและใช้งาน และวิธีการปรับใช้ผ่าน Gigalixir
คำแนะนำเบื้องต้น:
มีหลายวิธีในการติดตั้ง:
ตรวจสอบเวอร์ชันเป็นอย่างน้อย:
erl --version
Erlang/OTP 27 …
elixir --version
Elixir 1.17.3 …
psql --version
psql (PostgreSQL) 16.4
node --version
v22.9.0หากต้องการให้การตั้งค่า 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 ชง 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:
mix archive.install hex phx_newเอาท์พุท:
* creating ~/.mix/archives/phx_new-1.7.14ตรวจสอบ:
mix phx.new -vเอาท์พุท:
Phoenix installer v1.7.14ใหม่:
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จากนั้นทำการแก้ไขปัญหาที่นี่:
วิ่ง:
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.เรียกดู:
คุณควรเห็นหน้ายินดีต้อนรับ
หากคุณได้รับข้อผิดพลาดนี้:
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.เรียกดู:
ตอนนี้คุณเห็นหน้า Landing Page ของผู้ใช้ โดยมีข้อความ เช่น "ผู้ใช้ตามรายชื่อ" "ชื่อ" "อีเมล" ฯลฯ
เอาท์พุตจากคอนโซลเซิร์ฟเวอร์:
[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
