Phoenix 初体验

在前一章，我们创建了 Menu 项目。现在，让我们进入项目的根目录，启动服务器：

$ cd menu
$ mix phx.server

打开浏览器，访问 http://localhost:4000 网址，我们会看到如下截图所示的内容：

那么，从输入网址到返回页面期间，都发生了什么？让我们来简单了解一下。

我们在浏览器访问 http://localhost:4000 网址
Phoenix 在服务端收到 HTTP 请求，它检查 menu 目录下的 lib/menu_web/router.ex 文件，定位到如下内容：
```
scope "/", MenuWeb do
    pipe_through :browser # Use the default browser stack

    get "/", PageController, :index
end
```
我们看到，router.ex 文件里已经设定好这么一条规则：用户 get 路径 / 时，PageController 模块中的 index 动作将接手处理请求。
按图索骥，我们来看看 lib/menu_web/controllers/page_controller.ex 文件内容：
```
defmodule MenuWeb.PageController do
    use MenuWeb, :controller

    def index(conn, _params) do
        render conn, "index.html"
    end
end
```
目前 page_controller.ex 文件中只定义了 index 一个动作 - 正是 index 动作中的 render conn, "index.html" 渲染了我们上面截图中的内容。
那么，我是怎么知道 PageController 定义在 lib/menu_web/controllers/page_controller.ex 文件的？你可能会这样问。这里，我们要了解 Phoenix 的一个约定：所有的控制器都定义在 controllers 目录下，并且文件名与模块名的命名有对应关系：文件名是 a_b.ex 时，对应的模块名就是 AB。
最后我们就来到 tempates/page/index.html 文件。

很简单是不是？

让我们依葫芦画瓢，添加一个 /help 试试。

不过，在动手前，且让我们先在当前目录下初始化 git，将 mix phx.new 生成的所有文件保存起来：

$ git init
$ git add .
$ git commit -m 'init`

这样，我们后面想要清理用不到的文件时，就非常容易。

添加帮助页面

首先在 router.ex 文件中添加路由：
```
get "/help", HelpController, :index
```

然后在 controllers 目录下新建一个 help_controller.ex 文件，添加如下内容：

defmodule MenuWeb.HelpController do
    use MenuWeb, :controller

    def index(conn, _params) do
        render conn, "index.html"
    end
end

此时的 http://localhost:4000/help 网址显示：
```
UndefinedFunctionError at GET /help
function MenuWeb.HelpView.render/2 is undefined (module MenuWeb.HelpView is not available)
```
报错。错误显示，我们还没有定义 MenuWeb.HelpView 视图模块。
在 views 目录下新建 help_view.ex 文件，内容参照 views/page_view.ex 文件，如下：
```
defmodule MenuWeb.HelpView do
    use MenuWeb, :view
end
```

再看看 http://localhost:4000/help 网址：

Phoenix.Template.UndefinedError at GET /help
Could not render "index.html" for MenuWeb.HelpView, please define a matching clause for render/2 or define a template at "lib/menu_web/templates/help". No templates were compiled for this module.

还是报错。提示我们要在 lib/menu_web/templates/help 目录下创建一个模板文件。

在 lib/menu_web/templates/help 目录下新建一个 index.html.eex 文件，添加如下内容：
```
<p>这是帮助内容</p>
```
再看 http://localhost:4000/help 网址：
这一次，页面终于显示正常。

从路由，到控制器，到视图，到模板，每一步，一旦出错，Phoenix 都会有完整的提示。所以哪怕我们还不清楚它们是什么，也是可以按照提示，成功添加新页面 - 当然，最好还是要清楚 MVC 是什么，否则再容易也很难。

另外，你可能已经发现，Phoenix 能够自动刷新浏览器中打开的页面，不需要我们修改文件后手动刷新页面，非常便利。

我们来简单整理下这一章涉及的几个概念：

路由（router）- 决定哪个请求由哪个控制器中的哪个动作来处理
控制器（controller）- 决定怎么处理请求
视图（view）- 决定渲染哪种模板
模板（template）- 决定要展示怎样的内容给用户

下一章，我们将对 Menu 项目做个规划。

上一章：创建项目下一章：Menu 项目规划

上一页02-explore-phoenix 下一页03-project-menu

最后更新于10个月前