【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>