Rails-Treasure chest1 (自定義Model網址;多語言包; 時區設置, TimeZone類; 格式日期時間; 表單單選UI; 表單多選UI;Select2 Plugin)

• 自定義Model網址: 隨機值網址SecureRandom.base58
• 多語言包, 包括默認語言設置和user自設置。
• 時區設置, TimeZone類 ,增長user自選時區功能
• 格式日期時間: xx.created_at.strftime("%Y-%m-%d %H:%M")
• 表單單選UI
• 表單單選UI和Select2 Plugin
• 表單多選UI和Select2 Plugin

---

---

 

自定義Model網址

• 方案一：網址上除了數字ID，能夠再加上文字
• 方案二：不要用數據庫的遞增數字ID，而是用一個隨機值產生的 ID✅
• 方案二（改）：除了用亂數ID，也可讓用戶自定義 ID（在二的基礎上修改）

---

 

方案一：

在model層使用to_param(*args)方法，別名 ActionController::Parameters#to_query

返回一個接收者的string形式 ，適合用在一個URL 查詢字符串。

   def to_param
　　  self.id  #這是Rails默認形式
   end

這是Rails默認的路徑方法，會默認添加到event_path(@event) 

等同於 event_path(@event.to_param)，

所以to_params能夠改爲"#{self.id}-#{self.name}",  返回一個"string"，

返回結果做爲參數"id=xxxxxx", url生成Parameters: {"id"=>"xxxxxx"}

 

to_query方法原理：

> params = ActionController::Parameters.new({

>    name: "David",
>    nationality: "Danish"
> })
=> <ActionController::Parameters {"name"=>"David", "nationality"=>"Danish"} permitted: >
> params.to_query
=> "name=David&nationality=Danish"

 

⚠️: Event.find(params[:id])中的參數會調用to_i，所以後面的非數字會被自動除去。若是寫成"#{self.name}-#{self.id}", 就會報錯了。由於"Smokey-1"返回的是0

---

 

方案二： 隨機數✅✅✅

例子url:   http://localhost:3000/events/FNRLRNgbKZWfVP7P

1. 新增一個字段friendly_id，帶index, 是unique。

add_column :events, :friendly_id, :string
add_index :events, :friendly_id, :unique => true

2. 使用to_param方法： self.friendly_id

3. 全部相關Controller action 改用 @event = Event.find_by(friendly_id: params[:id])

4. model.rb中，增長一個before_validation :generate_XXX, on:[:create], 而後設置這個方法爲friendly_id ||= SecureRandom.base58

 

方案二（增長自定義）

<div class="form-group">
  <%= f.label :friendly_id %>
  <%= f.text_field :friendly_id, :required => true, class: "form-control"%>
</div>

⚠️ input-Attribute: required表明必須填寫。

---

 

---

 

 

配置中文語系

若是咱們的網站不須要支援多國語系，你可能會以爲這樣作有點辛苦，直接將中文寫在樣板上就行了。

但這個功能對於團隊協做開發網站仍然很是有幫助，由於寫程式的時候不必定會先肯定文案規格，用 I18n 來處理的話，最後只須要讓 PM 統一修改翻譯詞彙檔便可。

gem 'rails-i18n' ， gem 'devise-i18n'

 

使用i18n的Rails指導：https://guides.rubyonrails.org/i18n.html 

 

方法：

1. config/application.rb

class Application < Rails::Application
  config.i18n.default_locale = "zh-CN"
end

2. 新增 config/locales/zh-CN.yml

"zh-CN":
  event_list: 活動列表
  admin:
    event_list: 活動列表管理

3. 修改en.yml

  "en":
+   event_list: Event List
+   admin:
      event_list: Admin Event List

4. 修改view中對應的位置，通通改成t("event_list")和t("admin.event_list")

t是i18n中的方法。

 

---

嵌套variable, 使用%{variable_name}

en:

   hello: "HI,  %{name}"

view中 使用 t("hello",  :name => variable_name )

 

使用gem 'i18n'後：

config.i18n.default_locale = "zh-CN"
config.i18n.available_locales = ["zh-CN", :en，...] 選擇加載的locale包, 不寫這句就是全加載。

 

Devise 也有用到 I18n，能夠安裝 devise-i18n 這個 gem 有開源社區作好的中文翻譯：

https://github.com/tigrish/devise-i18n

---

 

對model的字段進行翻譯：

zh-CN:
  activerecord:
　　attributes:
　　   event:
　　      name: "活動名稱"
　　      description: "描述"

---

 

用戶自行切換多語言：

app/views/layouts/application.html.erb

+   <%= link_to "中文版", :locale => "zh-CN", :is => "dd" %>
+   <%= link_to "English", :locale => "en" %>

注意：locale是自行傳入url的參數 http://localhost:3000/events?locale=zh-CN&ls=dd 

 

app/controllers/application_controller.rb

+ before_action :set_locale
+
+ def set_locale
+   if params[:locale] && I18n.available_locales.include?( params[:locale].to_sym )
+     session[:locale] = params[:locale]
+   end
+
+   I18n.locale = session[:locale] || I18n.default_locale
+ end

---

 

語言系樣板：

若是樣板內大可能是屬於較爲靜態的內容，Rails 也提供了不一樣語系能夠有不一樣樣板，你只要將樣板命名加上語系附檔名便可

執行 rails g controller pages

編輯 config/routes.rb

    get "/faq" => "pages#faq"

新增 app/views/pages/faq.zh-CN.html.erb

新增 app/views/pages/faq.en.html.erb

如此在英文版的時候就會使用 faq.en.html.erb 這個樣板，中文版時使用 faq.zh-CN.html.erb 這個樣板。

最後，編輯 app/views/layouts/application.rb 放上 FAQ 頁面的連結：

app/views/layouts/application.rb

   <%= yield %>

   <%= link_to "FAQ", faq_path %> 

 

---

---

 

表單單選UI(固定選項，無Model)

 

狀況：在表單上加一個單選UI, 選項是固定的幾個，所以無需Model來存選項。

 

首先：新增一個字段來存儲選項的狀態。使用string.

1. rails g migration AddStatusToEvent status:string
2. 在model層上，定義一個常量數組，用於儲存選項類型，並validates :status, inclusion: STATUS

而後：把數據庫的status, 轉化爲user可看的中文。用Helper方法轉化中文，或用i18n轉化。

再後：在views/../_form.html.erb中增長select下拉菜單。在controller中，設置params白名單。

- 分支：少許選項可改用Radio Button UI: radio_button() 

⚠️：能夠加bootstrap4的美化。

 

表單的select的寫法：

f.select :status, Event::STATUS.map{ |s| [t(s, :scope => "event.status"), s] }, {}, :class => "form-control"

表單的radio的寫法：radion_button(method, tag_value, options = {} )

<div class="btn-group" data-toggle="buttons">
　　<% Event::STATUS.each do |status| %>
　　　　<label class="btn btn-default <%= (status == f.object.status)? 'active' : '' %>">
　　　　　　<%= f.radio_button :status, status %>
　　　　　　<%= t(status, :scope => "event.status")%>
　　　　</label>
　　<% end %>
</div>

=> <input type="radio" value="draft" name="event[status]  id="event_status_draft">

⚠️：

1. button樣式能夠用在其餘元素上如<label>, 爲了提供checkbox／radio按鈕button樣式，須要加上data-toggle="buttons" 到一個有.btn-group的元素。目的是給按鈕加上$().button('toggle')這個jquery方法，這個方法會給button合適的外觀。
2. CSS的active, 表明選擇的button, 須要developer手動添加到<label>
3. f是<FormBuilder:0x0007...>表格對象； f.object是<Event::0x0007...>; f.object.status是當前event的狀態。
4. 若是status和event的status相同，則選中這個button. 當進入edit頁面時，默認就是原先選擇的狀態。

---

 

 

i18n的寫法：

t是translate(key, options={})的簡寫：

 

Lookup:

key能夠是單獨的key，也能夠是a dot-separated key(string和symbols均可)

如：t('date.formats.short')

scope能夠是單獨的key, a dot-separated key或者an array of keys or dot-separated keys.

如：

I18n.t 'formats.short', :scope => 'date' I18n.t 'short', :scope => 'date.formats' I18n.t 'short', :scope => %w(date formats)

t(@event.status, :scope => "event.status")

 

在zh-CN.yml中：

event:
  status:
　 draft: 草稿
　 private: 私密
　 public: 公開

 

插入interpolation:

view中使用 t("hello",  :name => variable_name )

在en.yml中

en:  

   hello: "HI,  %{name}"

 

 

---

 

表單單選 UI 和 Select2 Plugin

例子：Event須要被分類，但這個分類是能夠編輯的，非固定的，所以須要新增一個Category Model。

1. rails g model category name; Event增長一個category_id,加上index; 創建雙方關聯。
2. 創建Category的 controller: rails g controller admin::categories
3. 後臺編輯頁面增長一個目錄select。對應請求參數加入白名單（controller#event_params）
4. 前臺show頁面，顯示分類。或者其餘外觀佈景。
5. gem 'select2-rails'是一個jQuery Plugin讓select菜單看起來很是漂亮。

注意：

第四步，前臺頁面顯示分類時，若是event沒有分類會報告nilClass, 須要添加判斷或者使用try()方法。

如：@event.category.try(:name)

 

 

---

 

 

表單多選UI

例子：給admin後臺的user編組

步驟：

1. 新建Group用於給users分組
2. User和Group是多對多關係。新建一個關聯Model Memebership
3. 控制檯輸入一些group資料。
4. 多選UI，須要使用checkbox. helper方法能夠使用collection_check_boxes()
5. controller#user_params的白名單，:group_ids => []
6. 前臺頁面修改。爲了不N+1 query能夠使用User.includes(:groups).all
7. 也能夠使用select 2插件

詳解：

第四步，在edit頁面，新增checkbox，

<%= f.label :group_ids %>
<%= f.collection_check_boxes(:group_ids, Group.all, :id, :name )%>

 

 會生成原生html:（下面是部分代碼）

 

<input type="hidden" name="user[group_ids][]" value="">

 

<input type="checkbox" value="1" name="user[group_ids][]" id="user_group_ids_1">

 

@user的group_ids，指它的一組group_id集合,做爲參數傳入controller處理，以今生成membership記錄。

collection_check_boxes(method, collection, value_method, text_method, options = {}, &block)

method是 :group_ids 一個關聯方法。

collection是 Group.all

value_method是 要存入的值, 所以這裏是:id  (group的id)

text_name是顯示的文本內容, 所以這裏是 :name  (group的name)

 

這是生成的參數：

Parameters: { "utf8"=>"✓",

　　　　　　 "authenticity_token"=>"fyyJ9Q...",

                   "user"=>{"email"=>"admin@example.org", "group_ids"=>["", "1", "2"]},

　　　　　　 "commit"=>"Update",

　　　　　　 "id"=>"1"}
 

調用Admin::UsersController#update方法

#查找user.id是1的記錄：@user = User.find(params[:Id])

SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ? [["id", 1], ["LIMIT", 1]]

#而後 @user = @user.update(user_params)

#根據參數中"group_ids"=>["", "1", "2"]查詢group.id是1, 2的記錄
SELECT "groups".* FROM "groups" WHERE "groups"."id" IN (1, 2)

#membership和group表格鏈接，而後找user_id = 1的數據，沒有找到：
SELECT "groups".* FROM "groups" INNER JOIN "memberships" ON "groups"."id" = "memberships"."group_id" WHERE "memberships"."user_id" = ? [["user_id", 1]]

#所以，根據group_id和user_id, 插入2條memberships
 INSERT INTO "memberships" ("user_id", "group_id", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["user_id", 1], ["group_id", 1], 。。。

 INSERT INTO "memberships" ("user_id", "group_id", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["user_id", 1], ["group_id", 2], 。。。