锦囊妙计-前端篇

Lose your first 50 games as quickly as possible. - 围棋谚语

Build your first 50 Rails apps as quickly as possible. - 造样造句

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，也有一些提供表单设计更方便的套件：

• simple_form
• formtastic

select2 厉害的下拉选单

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

• 支援 Autocomplete 的 select 单选
• 支援 Autocomplete 的 select 多选
• 支援 Tagging UI (text_field)
• 可用 Ajax 捞资料Example code: https://github.com/ihower/rails-exercise-ac5/blob/master/app/views/events/_form.html.erb

漂亮的 Date/Time 输入和输出

表单输入

• 只有日期 https://github.com/Nerian/bootstrap-datepicker-rails
  • Example code: https://github.com/ihower/rails-exercise-ac5/blob/master/app/views/events/_form.html.erb
• 日期+时间
  • https://github.com/TrevorS/bootstrap3-datetimepicker-rails
  • http://eonasdan.github.io/bootstrap-datetimepicker/

调整显示格式

• Ruby 内建的方法: Datetime#strftime
• Rails 内建的方法: datetime.to_s(:short) http://railscasts.com/episodes/31-formatting-time?view=asciicast
• 增加或变更 Rails 的时间日期 to_s，修改 config/application.rb 在最下面插入：

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

Admin 接口

管理员后台除了自己盖，有一些 gem 可以很快速的盖起来，例如这两套：

• ActiveAdmin
• RailsAdmin

缺点：想要扩充或修改的时候，会碰到限制和麻烦。

如何画图表

常用图表包括 Line chart、Pie chart、Column chart、Bar chart 等等，最常见使用 Google Charts 或 Highcharts 和 D3.js

搭配 Rails 的话，可以安装 https://github.com/ankane/chartkick 这一套最简单，但功能较少。或是笔者推荐使用 Chart.js。

自订 URL 网址

可以让使用者自订，或是乱数产生当作 URLhttp://railscasts.com/episodes/63-model-name-in-url-revised

范例:

• AC4 https://github.com/ihower/rails-exercise-ac4/commit/a27c59dd2d8e311cf0d87d30f70630fb6bf153d7
• AC5
  • https://github.com/ihower/rails-exercise-ac5/commit/f98d20f0e37d13796b4005f971ae77bd3ab27ef5
  • https://github.com/ihower/rails-exercise-ac5/commit/b7302cf361ddc1f345cee3595ba50c283775fca1

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 最简单快速的方式。