【Phoenix】二、初始化 Phoenix 項目後的 目錄結構

　　一、當咱們建立的時候，Phoenix 爲咱們創建的根目錄架構，以下：

├── _build
├── assets  // 這個是放一下靜態文件的，不如 js、css img 和 node_module 依賴包，都是基本放在這裏
├── config  // 是放一些配置的，數據庫的配置也基本放在這裏
├── deps    // 這裏應該是放 Elixir 這個語言的依賴包的
├── lib     // 開發主要在這個目錄下進行
│   └── hello
│   └── hello_web
│   └── hello.ex
│   └── hello_web.ex
├── priv   // 這個不太清楚
├── test   // 這個估計是測試用的文件夾

 

 

　　二、這篇文章的教程，大部分都是在 lib/hello_web 這個目錄下進行，目錄結構以下：(頁面的路由，控件，模板都是在這個目錄下)

├── channels // 這個不清楚
│   └── user_socket.ex
├── controllers // 控制器
│   └── page_controller.ex
├── templates  // 模板放的位置
│   ├── layout
│   │   └── app.html.eex
│   └── page
│       └── index.html.eex
└── views // 渲染頁面的模塊調用位置
│   ├── error_helpers.ex
│   ├── error_view.ex
│   ├── layout_view.ex
│   └── page_view.ex
├── endpoint.ex
├── gettext.ex
├── router.ex // 這個是路由配置文件

 　　

　　三、靜態的 js、css、圖片 和 依賴包都在 priv/static 的文件夾中

├── assets
│   ├── css
│   │   └── app.css
│   ├── js
│   │   └── app.js
│   └── static
│   └── node_modules
│   └── vendor

　　

　　四、在本地運行的文件，不在瀏覽器上傳輸的在 lib/hello 中

lib ├── hello | ├── application.ex |   └── repo.ex

 

　　五、在 lib/hello_web/router.ex 文件中，全部的 http 路徑請求 控制，會在這裏控制，

// 全部相似的路徑請求，都會被 PageController 中的 index 方法處理，模塊定義 路徑在 lib/hello_web/controllers/page_controller.ex
get "/", PageController, :index

　　

　　六、下面讓咱們建立一個 http://localhost:4000/hello 路徑的頁面，咱們先在 router.ex 文件中 scope 裏面，新增一個 路徑爲 /hello 的 get 請求，新增後以下：

scope "/", HelloWeb do pipe_through :browser get "/", PageController, :index get "/hello", HelloController, :index end

　　

　　七、在 lib/hello_web/controllers 目錄下新建一個叫 hello_controller.ex 的文件，內容以下：

defmodule HelloWeb.HelloController do use HelloWeb, :controller // 這裏有兩個參數 // conn 是一個包含大量請求數據的結構 // params 是請求參數，在這裏沒有使用，直接 params 會在編譯的時候報警告，加上 _ 就能夠避免了
  def index(conn, _params) do

    // 這裏的意思，是告訴 Phoenix 找到一個 模板叫作 index.html.eex 而且渲染它 // Ps: 這裏咱們能夠在這裏用 atom(原子數據) 做爲值，例如：render(conn, :index) // 可是 模板 會根據 atom 的值，做爲頭部，在 index.html / index.json 之間選擇
    render(conn, "index.html") end end

 

 

 

 

　　八、而後，官方推薦在 view 中處理數據（這我不肯定是否是這樣理解），因此在 lib/hello_web/views 下面新建一個 hello_view.ex 的文件，內容以下：

defmodule HelloWeb.HelloView do use HelloWeb, :view end

 

　　九、Phoenix 中的模板，使用的是 EEx（是 Elixir 的嵌入式，容許嵌入 Elixir 代碼到 字符串），文件後綴是 .eex；

　　   模板的做用域是 一個 view，view 的做用域是 controller，咱們最好統一命名，因此建立一個命名空間（也就是建立一個 文件夾）；這裏建立一個 hello 的文件夾，在 templates 文件夾下，而後在 hello 下建立一個 index.html.eex 文件，內容以下：

 

<div class="phx-hero">
  <h2>第一個 Phoenix 的模板渲染</h2>
</div>

 

　　 

　　十、mix phx.server 運行 Phoenix 服務（若是你已經運行服務了，直接刷新就行了，Phoenix 已經作了熱重載），訪問路徑 http://localhost:4000/hello，咱們能夠看到下圖：

 

 

　　十一、爲何咱們只寫了一個 簡單的 div 標籤就看到一整個網頁呢？是由於 templates/layout 下面的 app.html.eex 是一整個頁面的模板，其中有一句 替換 成咱們本身寫的模板，就行渲染了。以下：

// 就這一行代碼，把咱們寫的模板替換到這裏位置來，進行渲染。暫時只瞭解到這裏，其餘的用法之類的。後面學習。
<%= render @view_module, @view_template, assigns %>

 

 　 十二、到這裏爲止，咱們的就算是學會了簡單的新增路由，和簡單的渲染。

 

我是分割線-------------------------------------------------------------------------------------我是分割線

 

　　1三、先新建一個路由，咱們這裏是一個動態路由，以下：

// :messager 這個大概都知道是什麼了。 // 在 Elixir 中 :messager 中，叫原子，也就是 鍵值對都是 messager 的值。但在路由中，也就是 messager = 1 的話，動態路由的路徑是 /hello/1 了。
get "/hello/:messenger", HelloController, :show

　　

　　1四、新增一個動做，由於咱們上面定義的 是 :show ，而不是已經存在的 :index 動做，由於都是 hello 這個路由下，因此咱們還在 hello_controller 這個文件中 新增就好了，以下：

  def show(conn, %{"messenger" => messenger}) do render(conn, "show.html", messenger: messenger) end // 新增後 hello_controller.ex 文件的內容，以下: // 這裏可能有小白，沒空 Elixir 語法就跑過來看了， 我大概講解一下， // defmodule 空間.名稱 do 這個，就是 Elixir 定義模塊的方法，模塊這個，我也只是大概看了一下，說法不必定對 // def 名稱 do 是定義函數的，Elixir 是函數式編程，因此函數式第一公民 // end 是說明這個模塊(或者函數)，到這裏結束。
  defmodule HelloWeb.HelloController do use HelloWeb, :controller def index(conn, _params) do render(conn, "index.html") end def show(conn, %{"messenger" => messenger}) do render(conn, "show.html", messenger: messenger) end end

　　

　　1五、若是動態路由。有多個值，以下：

#hello_controller.ex 文件 def show(conn, %{"messenger" => messenger, "test" => test}) do render(conn, "show.html", messenger: messenger, test: test) end #router.ex 文件 defmodule HelloWeb.Router do use HelloWeb, :router pipeline :browser do plug :accepts, ["html"] plug :fetch_session plug :fetch_flash plug :protect_from_forgery plug :put_secure_browser_headers end pipeline :api do plug :accepts, ["json"] end scope "/", HelloWeb do pipe_through :browser get "/", PageController, :index get "/hello", HelloController, :index get "/hello/:messenger/:test", HelloController, :show end # Other scopes may use custom stacks. # scope "/api", HelloWeb do # pipe_through :api # end end #show.html.eex 文件
// 一個 <%= %> 好像只能嵌入一個 變量 <div class="phx-hero">
    <p>Hello World, from <%= @messenger %>  我是測試數據<%= @test %> </p>
</div>