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], 。。。