Ruby on Rails 實戰聖經

使用 Rails 4.2 及 Ruby 2.3

電子書製作中,歡迎留下 E-mail,有消息將會通知您。若您有任何意見、鼓勵或勘誤,也歡迎來信給我,謝謝。

錦囊妙計-前端篇

Bootstrap

Bootstrap是目前最流行的前端設計框架,讓開發者也可以很輕鬆的進行網頁排版,也很有多現成的Theme可以套用。要在Rails使用Bootstrap,請安裝bootstrap-sass

如果搭配分頁套件kaminari的話,執行rails generate kaminari:views bootstrap3就會產生對應的kaminari樣板。

進一步可以參考Integrating Rails and Bootstrap這一系列文章。

Font Awesome

即將推出的 Bootstrap 4 將會移除 Glyphicons,所以目前大家推薦使用 Font-Awesome

Rails 可以安裝 https://github.com/bokmann/font-awesome-rails 這個 gem

表單

除了用Rails內建的表單Helper,也有一些提供表單設計更方便的套件:

select2 厲害的下拉選單

https://github.com/argerim/select2-rails

  1. 支援 Autocomplete 的 select 單選
  2. 支援 Autocomplete 的 select 多選
  3. 支援 Tagging UI (text_field)
  4. 可用 Ajax 撈資料

Example code: https://github.com/ihower/rails-exercise-ac5/blob/master/app/views/events/_form.html.erb

漂亮的 Date/Time 輸入和輸出

表單輸入

調整顯示格式

Date::DATE_FORMATS[:short] = "%Y/%m/%d"
Time::DATE_FORMATS[:short] = "%Y/%m/%d %H:%M"

Admin 介面

管理員後台除了自己蓋,有一些 gem 可以很快速的蓋起來,例如這兩套:

缺點:想要擴充或修改的時候,會碰到限制和麻煩。

如何畫圖表

常用圖表包括 Line chart、Pie chart、Column chart、Bar chart 等等,最常見使用 Google ChartsHighchartsD3.js

搭配 Rails 的話,可以安裝 https://github.com/ankane/chartkick 這一套最簡單,但功能較少。或是筆者推薦使用 Chart.js

自訂 URL 網址

可以讓使用者自訂,或是亂數產生當作 URL http://railscasts.com/episodes/63-model-name-in-url-revised

範例:

Nested Form (1-to-many)

1 對 1 的表單

使用 Rails 內建的 fields_for 就可以完成,參考 https://ihower.tw/rails4/restful-practices.html

1 對多的表單

如果知道固定N筆,作法同上。但如果需要可以動態加減數量,則需要 JavaScript 協助動態增減欄位。

可以使用 https://github.com/ncri/nested_form_fields gem (注意 Strong Parameter,這個 gem 的 README 沒提到) 或 https://github.com/nathanvda/cocoon 另外參考 http://api.rubyonrails.org/classes/ActiveRecord/NestedAttributes/ClassMethods.html 的 reject_if 用法

範例 Example Code: https://github.com/ihower/rails-exercise-ac3/tree/nested_form

Recapache

  • Recaptcha 是做 captcha 最簡單快速的方式。

》回到頁首