# 5.4 用戶注冊：第一步 為了完成本章的目標，本節要設置“注冊”頁面的路由，為此要創建第二個控制器。這是允許用戶注冊重要的第一步，我們會在[第 6 章](chapter6.html#modeling-users)完成第二步，創建用戶模型，[第 7 章](chapter7.html#sign-up)會完成整個功能。 ## 5.4.1 用戶控制器 我們在 [3.2 節](chapter3.html#static-pages)創建了第一個控制器——靜態頁面控制器。現在要創建第二個，用戶控制器。和之前一樣，我們使用 `generate` 命令創建所需的控制器骨架，包含用戶注冊頁面所需的動作。遵照 Rails 使用的 REST 架構約定，我們把這個動作命名為 `new`，把 `new` 作為參數傳給 `generate` 命令就可以自動創建這個動作，如[代碼清單 5.28](#listing-generate-users-controller) 所示。 ##### 代碼清單 5.28：生成用戶控制器（包含 `new` 動作） ``` $ rails generate controller Users new create app/controllers/users_controller.rb route get 'users/new' invoke erb create app/views/users create app/views/users/new.html.erb invoke test_unit create test/controllers/users_controller_test.rb invoke helper create app/helpers/users_helper.rb invoke test_unit create test/helpers/users_helper_test.rb invoke assets invoke coffee create app/assets/javascripts/users.js.coffee invoke scss create app/assets/stylesheets/users.css.scss ``` 上述命令會創建用戶控制器，以及其中的 `new` 動作（[代碼清單 5.30](#listing-initial-users-controller)）和一個占位視圖（[代碼清單 5.31](#listing-initial-new-action)）。除此之外還會為新建用戶頁面生成一個簡單的測試（[代碼清單 5.32](#listing-user-new-test)），這個測試現在可以通過： ##### 代碼清單 5.29：**GREEN** ``` $ bundle exec rake test ``` ##### 代碼清單 5.30：默認生成的用戶控制器，包含 `new` 動作 app/controllers/users_controller.rb ``` class UsersController < ApplicationController def new end end ``` ##### 代碼清單 5.31：默認生成的 `new` 動作視圖 app/views/users/new.html.erb ``` <h1>Users#new</h1> <p>Find me in app/views/users/new.html.erb</p> ``` ##### 代碼清單 5.32：新建用戶頁面的測試 GREEN test/controllers/users_controller_test.rb ``` require 'test_helper' class UsersControllerTest < ActionController::TestCase test "should get new" do get :new assert_response :success end end ``` ## 5.4.2 “注冊”頁面的 URL 有了前一節生成的代碼，現在就可以通過 /users/new 訪問新建用戶頁面。但是參照[表 5.1](#table-url-mapping)，我們希望這個頁面的 URL 是 `/signup`。為此，我們要參照[代碼清單 5.22](#listing-static-page-routes) 的做法，為“注冊”頁面添加規則 `get '/signup'`，如[代碼清單 5.33](#listing-signup-route) 所示。 ##### 代碼清單 5.33：“注冊”頁面的路由 config/routes.rb ``` Rails.application.routes.draw do root 'static_pages#home' get 'help' => 'static_pages#help' get 'about' => 'static_pages#about' get 'contact' => 'static_pages#contact' get 'signup' => 'users#new' end ``` 然后使用具名路由讓首頁中的按鈕指向正確的地址。和其他路由一樣，添加 `get 'signup'` 后會得到具名路由 `signup_path`。我們在[代碼清單 5.34](#listing-home-page-signup-link) 中使用這個具名路由。針對“注冊”頁面的測試留作[5.6 節](#filling-in-the-layout-exercises)。 ##### 代碼清單 5.34：使用按鈕鏈接到“注冊”頁面 app/views/static_pages/home.html.erb ``` <div class="center jumbotron"> <h1>Welcome to the Sample App</h1> <h2> This is the home page for the <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a> sample application. </h2> <%= link_to "Sign up now!", signup_path, class: "btn btn-lg btn-primary" %> </div> <%= link_to image_tag("rails.png", alt: "Rails logo"), 'http://rubyonrails.org/' %> ``` 最后，編寫“注冊”頁面的臨時視圖，如[代碼清單 5.35](#listing-initial-signup-page) 所示。 ##### 代碼清單 5.35：“注冊”頁面的臨時視圖 app/views/users/new.html.erb ``` <% provide(:title, 'Sign up') %> <h1>Sign up</h1> <p>This will be a signup page for new users.</p> ``` 現在，我們暫別鏈接和具名路由，到[第 8 章](chapter8.html#log-in-log-out)再添加“登錄”頁面的路由。新創建的用戶注冊頁面如[圖 5.9](#fig-new-signup-page) 所示。 圖 5.9：[/signup](http://localhost:3000/signup) 地址上的“注冊”頁面