.

iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
1
自我挑戰組

關於 Ruby on Rails 的那些事系列 第 14

Day 14 - View 幫你包裝美美外殼

  • 分享至 

  • xImage
  •  

說完了 model、controller,最後剩下 view 囉~
延續昨天設定完 controller 與其中的幾個 action (方法)後,注意到註解裡面寫的東西嗎?

# articles_controller.rb

class ArticlesController < ApplicationController
  def index
    # 可能文章列表頁、或你想讓使用者看到的第一畫面
  end
  
  def new
    # 這是一個新增文章的畫面
  end
  
  def create
    # 這是一個動詞,會處理 new 畫面的表單,告訴 model 這要寫入資料庫
  end
  
  # 略...
end

這邊寫的方法有些是畫面,有些是動詞。
而畫面呢,依照 rails 的慣例,他會對應到 views資料夾 底下的 articles資料夾,這個資料夾裡面就可以拿來放很多關於 article 會使用到的頁面,也就是 html 檔案。一進到文章列表,rails 就會幫我們找 articles 資料夾中有沒有一個叫做 index.html 的檔案。同理,今天想要編輯之前的文章,也可以點進編輯頁面,這時候 rails 就會找有沒有 edit.html。如果沒有找到對的檔案,就會出現錯誤訊息 missing templete,這樣你就知道該生一個檔案給他了!

串起來看看

在routes中,使用 resources 自動長出8條路徑:

# config/routes.rb
Rails.application.routes.draw do
  resources :articles
end

建立資料表,並設計欄位:
在終端機下rails g model Article title:string content:text...
再執行rails db:migrate這樣資料庫就會產生一張新的資料表,且資料表欄位會寫入 schema.rb 檔案中,這個檔案是不能手動修改的,只能靠指令去產生 migration,透過 migration 再去修改 schema。

# db/schema.rb
create_table "articles", force: :cascade do |t|
  t.string "title"
  t.text "content"
  t.datetime "created_at", precision: 6, null: false
  t.datetime "updated_at", precision: 6, null: false
  t.bigint "user_id"
  t.bigint "category_id"
  t.index ["user_id"], name: "index_articles_on_user_id"
  t.index ["category_id"], name: "index_articles_on_category_id"
end

接著建立 model 之間的關聯性:

# app/model/article.rb
class Group < ApplicationRecord
  belongs_to :user
  belongs_to :category
end

routes 設定好,輸入地址要找到對的 controller,再去判斷要由哪個 action 做事。

# app/controller/articles_controller.rb
class ArticleController < ApplicationController
  def index
    @articles = Atricle.all
  end
end

最後就是包裝美美的畫面給使用者了~

# app/views/articles/index.html.erb
  <h1>小明的文章列表</h1>
  <ul>
    <% @articles.each do |article| %>
      <li><%= article.title %></li>
    <% end %>
  </ul>

小小補充:
關於html.erb,主要結構為html,但在其中可以寫 ruby 語法,像是<% ... %><%= ... %>,如果是在畫面上需要看到的內容,就可以使用後者有等號的寫法。

學無止盡,每天都要進步一點點!


上一篇
Day 13 - Controller 控制誰?
下一篇
Day 15 - session 和 cookie - 上集
系列文
關於 Ruby on Rails 的那些事30
.
圖片
  直播研討會

尚未有邦友留言

立即登入留言