Cheng Ting's Blog

PATH To Engineer

0%

Ruby on Rails 網站開發 練習 - 008 (候選人列表頁面，產生候選人列表)

發表於 更新於 分類於

要將資料庫的的資料呈現到畫面，首先我們不需要自己寫SQL語法去撈資料

我們只要透過Model就可以幫我們去把資料拿出來。

進到CandidatesController，接著要來寫index action。這樣才能知道，我們要把什麼東西放到view//index.html.erb裡面讓使用者看到。

在index action 裡面我們增加@candidates = Candidate.all。這裡我們把candidate.rb這個 Model 裡面的所有候選人都拿出來，放到實體變數@candidates。

為何將變數取名為複數型態，是因為因為如果知道我們現在拿到的資料看起來是一個集合、一個群體，會用複數的變數名稱來取名。

接著進入到view/index.html.erb，我們要來讓從 Model 拿出來的候選人資料，可以在頁面上印出來。
★小撇步：這邊可以先在VScode上設定，把檔案的格式改為HTML
在頁面上，先新增一個<五個欄位的table>
1
2
3
4
5
6
7
8
9
<table>
    <tr>
        <td>Name</td>    #名稱
        <td>Party</td>    #政黨
        <td>Age</td>    #年齡
        <td>Politics</td>    #政見
        <td>Action</td>    #動作：可能是 新增 or 刪除
    </tr>
</table>

那我們要如何把資料印出來，我們可以透過「迴圈」的方式。一筆一筆的把資料印出來。
1
2
<% @candidates.each do |candidate| %>
<% end %>

接著把剛剛建立的 table 複製一份放到迴圈裡面，同時將原本的欄位內容替換
1
2
3
4
5
6
7
8
9
<% @candidates.each do |candidate| %>
<tr>
    <td><%= candidate.name %></td>
    <td><%= candidate.party %></td>     
    <td><%= candidate.age %></td>
    <td><%= candidate.politics %></td>
    <td>Action</td>
</tr>
<% end %>

最後寫成

接著打開瀏覽器看看畫面，有成功顯示前面我們增加的兩筆候選人資料

這時候我們來新增一筆候選人叫kk的資料。按下送出按鈕，看看結果會發生什麼？

哇!有成功新增資料，畫面也有出現提示

這邊就要再思考另外一件事情，候選人頁面顯示的欄位有包含政見(politics)。如果候選人的政見，字數非常多，那畫面會很擁擠不好看。
一般使用者想要是click候選人名稱後，會跳到新的頁面，這個頁面只會顯示此候選人的個人資料，包含政見。我們就開始來修該一下吧。

  1. 拿掉view/index.html.erb的politics欄位。
  2. 幫Name欄位加上超連結功能，要超連結的網址先暫時以＃代替，因為要知道要去的路徑，需要請門口阿姨(Routes)告訴我們。
  3. 打開終端機輸入rails routes，我們要找的路徑需要跟id有相關。可以看到路徑candidates/:id(.:format)，有一個對應的controller#action。(candidates#show)

    所以這時候回到view/index.html.erb我們來補上超連結的路徑。

    打開瀏覽器，直接來測試看看，點擊超連結會發生什麼事？
    竟然出現錯誤訊息。

在把錯誤訊息處理前，我們先來看看剛剛的超連結寫法，其實不是很好看，意思也不明確，這時候又可以請出一個小幫手<%= link_to '要顯示的字樣', 要去的位址 %>
先來修改一下<a href="/candidates/new">Add Candidate</a>
換成<%= link_to 'Add Candidate', '/candidates/new' %>

我們打開瀏覽器，右鍵 > 檢查頁面原始碼，這時候你會發現兩個長一樣。

這時候我們可以使用終端機打開rails routes看一下Prefix Verb這邊的new_candidate我們手動幫它後面加上_path 它就會幫我們做出/candidates/new出來。
所以回到view/index.html.erb ，我們把剛剛的<%= link_to 'Add Candidate', '/candidates/new' %>後面的/candidates/new 換成new_candidate_path

打開瀏覽器檢視網頁原始碼，發現其實兩個都是超連結到同一個網址。

其實第二個超連結等於是Routes幫我們產生的。這樣的好處就是，如果以後有需要維護專案或是更改超連結的網頁，我們只要到進到config/routes.rb這個檔案去修改路徑，整個網站就修改好了。

  • 好處就是，如果在連結的地方少打字或者打錯字，瀏覽器會噴訊息提醒你。
  • 因為 link_to 是一個方法，所以只要有打錯字，就會噴訊息出來。
  • 另外如果發現rails routtes有些Prefix Verb是空的就同上面的Prefix Verb。

接著修改候選人名稱的超連結，改用 link_to 的寫法。

但是這邊我們是要連到某個id的候選人頁面，所以candidate_path要給它一個id，他才能正確連結到對的候選人。

按下送出按鈕，網址後面就會有id，但是畫面上噴出訊息the action 'show' could not be found

接下來，下一堂課程，我們要建立一個 “show action” 給它，當然同時也要給它一個 “show” 的 view。

參考來源：為你自己學 Ruby on Rails (https://railsbook.tw/)