「 12 in 12 」 (1)LeeReddit - 筆記

專案Overview

  • 註冊、登入、登出
  • 發送連結(包含Title及URL)
  • 對連結做like/dislike功能
  • 對連結作出評論

GitHub repo: https://github.com/ChenLiZhan/LeeReddit

reference: https://mackenziechild.me/12-in-12/1/


用devise gem實作登入、登出、註冊功能

devise是使用者認證的套件,是rails社群中最廣社群中最廣為使用的一套。

  • 輸入 rails g devise:install 產生devise設定檔
  • 編輯 config/environments/development.rb和production.rb加入寄信時預設網站網址:

    config.action_mailer.default_url_options = { :host => 'localhost:3000' }
    
  • 確認 app/views/layout/application.html.erb 中可以顯示flash訊息,例如:

    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>
    
  • 確認 routes.rb 中有設定網站首頁位置,例如:

    root :to => "welcome#index"
    
  • 輸入 rails g devise user 產生User的Model以及Migration

  • 若是需要email驗證功能,可以編輯 app/views/user.rb和migration將confirmtable打開

  • 輸入 rails g devise:views 產生樣板,會包含註冊、登入、忘記密碼、Email等頁面,並將這些頁面放在app/views/devise目錄下

  • 輸入 rake db:migration建立資料表

用法

  • 在需要登入的controller之中加入before_action :authenticate_user!

  • 可以在layout之中增加登入、登出選單:

    <% if current_user %>
      <%= link_to('登出', destroy_user_session_path, :method => :delete) %> |
      <%= link_to('修改密碼', edit_registration_path(:user)) %>
    <% else %>
      <%= link_to('註冊', new_registration_path(:user)) %> |
      <%= link_to('登入', new_session_path(:user)) %>
    <% end %>
    

加上自訂欄位

Devise預設沒有產生出first_name、last_name等欄位,我們可以自行增加一些欄位到User Model當中:

  • rails g migration add_username_to_users,加上

    add_column :users, :username, :string
    
  • rake db:migrate新增這個欄位

  • 編輯application_controller.rb,補上configure_permitted_parameters方法:

    class ApplicationController < ActionController::Base
      before_action :configure_permitted_parameters, if: :devise_controller?
    
      # ...
    
      protected
    
      def configure_permitted_parameters
        devise_parameter_sanitizer.for(:sign_up) << :username
        devise_parameter_sanitizer.for(:account_update) << :username
      end
    end
    
  • 編輯views/devise/registrations/edit.html.erb和views/devise/registrations/new.html.erb,加上username欄位

    <div><%= f.label :username %><br />
    <%= f.text_field :username %></div>
    

Authentication: 使用Omniauth

除了上述自行使用管理認證使用者帳號密碼之外,現在亦流行直接使用外部的使用者認證系統,例如:Google、Facebook、Yahoo、GitHub等等。這方面套件可以利用到Omniauth,她搭配不同的Provider廠商:

上述資料參考自:Ruby on Rails 實戰聖經


Model Attributes Association

學習參考自: ActiveRecord - 基本操作與關聯設計


before_action v.s. before_filter

自從rails 4.0.0後before_action是before_filter的新語法,兩者作用相同,


用bootstrap-sass gem做styling

bootstrap-sass是sass版本的Bootstrap。


用acts_as_votable gem達到like/dislike效果

acts_as_votable是一個Ruby gem,其主要目標為:

  • Allow any model to be voted on, like/dislike, upvote/downvote, etc.

  • Allow any model to be voted under arbitrary scopes.

  • Allow any model to vote. In other words, votes do not have to come from a user, they can come from any model (such as a Group or Team).

  • Provide an easy to write/read syntax.


建立model時的references

rails g model Post user_id:integerrails g model Post user:references兩者作用類似,但差別在於後者再Post model之中多了belongs_to :user的關係。


使用simple_form gem來設計表單

simple_form這個gem提供了全新的表單Helpers。有更強的功能來直接對付關聯性的資料。


routes.rb內使用member來增加成員路由

要添加成員路由,在resources區塊內使用member即可:

resources :photos do
  member do
    get 'preview'
  end
end

這段路由能識別到/photos/1/preview是個GET請求,並起映射到PhotosController的preview action上,同時還生成了preview_photo_urlpreview_photo_path兩個方法。

資料參考自:Rails Guide 中文