iT邦幫忙

DAY 7
2

從想法到快速實作的捷徑:Rails系列 第 7

[ Day 7 ][ Dev ] 從建立首頁開始認識Rails

  • 分享至 

  • xImage
  •  

這一篇開始的前提是:

Ruby和Rails已經裝好了,

你已經執行過Rails s,看過這個令人感動的畫面:

準備就緒的話就先執行rails new project\_name

這裡的專案名稱就打united_issues。

接著進去資料夾後會看到這堆東西

Gemfile      README.rdoc  app          config       db           log          test         vendor
Gemfile.lock Rakefile     bin          config.ru    lib          public       tmp

未來會一個一個看他們的用途是什麼,不過在這之前我們記得要先打git init

還有把不想要被git給記錄的檔案加到.gitignore裏面,

關於git的簡單使用,之後會有一篇開發workflow的心得會寫到,

但想跟大家分享一下ihower的git教室:http://ihower.tw/git/

如果你是一個常常不小心做了白癡事情的人,你熟練git之後會有一種自己不下呂布的錯覺,

真的非常的值得一學!

再來可以把自己的code push到github上面,

github是一個我們能把code放上去的地方,

顧名思義得用git把code給推(push)上去,

最快的方法就是到 https://github.com 申請一個帳號,

新增一個repository,再來只要跟著github上面的指示做就OK了。

如果想要試驗什麼新東西卻又不想動道原本的code時,可以開一支branch來做,

語法是:git co -b branchname

這樣就會開了一隻叫做branchname的branch,名稱可以自定,

等做完再merge回去就行了。

而如果做了什麼事情除了可以跳回前一個commit之外,有時候我也會懶惰到直接把branch刪掉重開一隻。

(但是在這隻branch上做的變動是會消失的喔!好孩子都知道這不是好習慣)

接著回到開發po文的功能,前面有提到Rails會遵循MVC的架構來開發。

今天主要做的是首頁,

(通常書上都是另外開個專案做靜態網頁來玩,不過既然都要做了,乾脆就做之後會用到的頁面吧XD)

我們前面提過Restful,不過到底什麼是Restful呢?

坦白說我覺得沒有實際去寫光用看的其實很難懂,

不過還是儘量簡單的介紹一下Rest是一種軟體架構的風格。

每一個我們在網站上要用到的資源(Resource),都可以透過url來互動、改變,

Rest還有其他更多的要求以及優點可以去依循,

記得當初看到這些解釋的時候,我第一個問題在想什麼東西算是resource呢?

先拋開那些太學理的名詞,

我們前一篇提到的文章(Posts)其實就是啦!

當初我是用物件導向的方法去想的,

把Resource想成是一個物件,而我們要對他互動的時候,會用他裡面的methods,

只是這些methods都有特定的url來代表,

在這裡變成我們會有一個Post的controller,裡面會有各式各樣可以跟他互動的actions。

補充一下:
在MVC架構中,Controller像是一個中介者的角色,
它處理client請求丟給Model,再由Model丟回client呈現使用者想看到的資訊

所以第一個問題就來了,那我們首頁要不要另外開一個Controller?

有人會直接在PostsController底下加上一個index action就把它當成首頁,

不過通常resource底下的index是拿來檢視那個resource下面所有東西的,

像在這裡index應該要看到的就是所有的posts。

只是我們首頁可能會有想要其他更多的額外資訊,

在這裡我的做法是新增一個home的controller,

跟posts分開做到時候也比較好載入想要的資訊,

另一個好處是這樣子也比較好找到,當專案變大之後其實找頁面是一個蠻惱人的事情。

以往學習的經驗是一次就來個MVC是有點消化不良,

所以這一次首頁牽涉到的就只有Controller和View的部分而已,

首先先新開一個branch叫做home,以後提到git部分會直接省略,

然後:rails g controller home

沒打錯字的話應該會看到:

➜  united_issues git:(home) rails g controller home
      create  app/controllers/home_controller.rb
      invoke  erb
      create    app/views/home
      invoke  test_unit
      create    test/controllers/home_controller_test.rb
      invoke  helper
      create    app/helpers/home_helper.rb
      invoke    test_unit
      create      test/helpers/home_helper_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/home.js.coffee
      invoke    scss
      create      app/assets/stylesheets/home.css.scss

進到我們的第一個controller會看到空空如也的HomeController:

class HomeController < ApplicationController
end

首先先為他加上一個index action。

(這裡稍微murmur一下,其實我是保有疑問的,

因為大部份首頁都會用index來命名,

只是在前述index指的是檢視所有的home,聽起來總是哪裡怪怪的,

希望這裡也能拋磚引玉問到更好的命名法或是其他有趣的解釋XD)

class HomeController < ApplicationController
def index
end
end

這樣做就結束了嗎?試試看就知道了!

執行rails s打開localhost:30000之後卻發現仍舊是這個感動人心的畫面

前面說過會用url來跟resource互動,

這裡我們直接輸入localhost:3000/home,

卻得到了滿江紅:

Routing Error
No route matches [GET] "/home"


問題很簡單,因為你還沒設定路徑,rails沒有聰明到你開個controller他就知道要去哪裡找了,

這裡我們要去找到routes.rb這個檔案,可以稍微看一下裡面很貼心的註釋。

我們打開這一行:

root 'home#index'

root就是根目錄,也就是我們的首頁,他告訴rails要去找在home controller裡面的index action。

再回到首頁重新整理一次卻跑出另一個錯誤:

Template is missing
Missing template home/index, application/index with {:locale=>[:en], :formats=>[:html], :variants=>[], :handlers=>[:erb, :builder, :raw, :ruby, :jbuilder, :coffee]}. Searched in: * "/Users/kudenny/work_place/itBang/united_issues/app/views"


template,樣板,白話一點就是我們要給他的頁面,

原來我們剛剛還沒做,我也是看了error才知道。

所以我們就在以下路徑新增app/view/home/index.html.erb

erb就是嵌入的ruby code,有了這一層東西我們才能更方便的從rails去跟html做互動。

像是我們在home controller的index action中新增一個變數,

class HomeController < ApplicationController
def index
@welcome = "還是八仙好玩"
end
end

用嵌入式ruby的方法就是這樣:

<h1>耶耶耶耶耶耶耶</h1>
<p><%= @welcome %></p>

以上就是開發的第一步啦!

今天會比較囉唆一點,以後會省略一些比較繁瑣的細節。

參考資料:
[wiki]


上一篇
[ Day 6 ][ Setting ] 在Windows開發Rails很麻煩?來試試看Ubuntu!
下一篇
[ Day 8 ][ Dev ] 從開發Po文功能認識MVC #1 Post的model
系列文
從想法到快速實作的捷徑:Rails30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言