大航道計畫筆記 - Rails CRUD quick view

以建立photo album為例

Helper GET POST PATCH/PUT DELETE
photo_path(@photo) /photos/1 [show action] /photos/1 [update action] /photos/1
[destroy action]
photos_path /photos
[index action]
/photos [create action]
edit_photo_path(@photo) /photos/1/edit [edit action]
new_photo_path /photos/new
[new action]

網路資源

1.專案初始

  • rails new photo_album
  • 建立model : $rails generate model photo
  • 編輯db/migrate/下面的rb檔,把需要的欄位加上去
    【Ruby on Rails 實戰聖經】 ActiveRecord - 基本操作與關聯設計
  • 產生migrate : $rails db:migrate
  • 需要修改db,可以產生新的migration : $rails generate migration [migration name] 在db/migrate下面產生新的rb檔
  • 可以使用rails console 使用ActiveRecord操作DB
    【Ruby on Rails 實戰聖經】 ActiveRecord Query Interface - 資料表操作

2.CRUD初始 建立index

  • 設定RESTful 路由: 在config/route.rb 下新增 resources :photos,使用$rails routes確認路由
  • 產生Controller : $ rails generate controller photos
  • photos_controller.rb下 新增index action
  • 建立index.html.erb
     <%= link_to 'Show', photo_path(photo) %>
     <%= link_to 'Edit', edit_photo_path(photo) %>
     <%= link_to 'Destroy', photo_path(photo), method: :delete, data:{ confirm: "Are you sure?" } %>
  • route.rb 下新增index 的路由 root "photos#index"

3.Create

def photo_params
  params.require(:photo).permit(:title, :date, :description, :file_location)
end

4.Read

  • 在controller建立show action @photo = Photo.find(params[:id])
  • 建立view: show.html.erb

5.Update

  • 在controller建立 edit action @photo = Photo.find(params[:id])
  • 建立view: edit.html.erb (使用form_for)
  • 在controller建立 update action ,使用 @photo.update(photo_params)或 @photo.update_attribute(photo_params) 都可以

6.Destroy

  • 在controller 建立 destroy action

加強你的程式

Model 資料驗證

  • 在model/[model].rb下 新增validates_presence_of :title , ...
  • 在controller下新增判斷,失敗後render或導向其他頁面
  • 在view裡面,可以新增錯誤訊息if @photo.error.present?,@photo.error.each do |error, message|

DRY YOUR CODE

  • 在controller加上before_action before_action :beforemethod, :only=>[:method1,:method2...]
  • 使用partial ,建立 _form.html.erb檔,當作模板,在erb中使用<%= render :partial=>"form"%> 來引入

圖片上傳gem carrierwave

  • gem 'carrierwave'
  • 建立uploader : $ rails generate uploader uploader_name
  • 在models/photo.rb mount uploader_name :mount_uploader :file_location, UploaderName

加入bootstrap

  • 安裝gem gem 'bootstrap-sass', '~> 3.3.6'
  • /app/assets/stylesheets/application.css 改成.scss,刪掉原本,加入@import 'bootstrap-sprockets'; @import 'bootstrap';

小Tips

Rails api: Date

http://api.rubyonrails.org/v5.1/classes/Date.html

ActiveRecord排序

https://apidock.com/rails/ActiveRecord/QueryMethods/order

  def index
    @lists = List.all.order(date: :desc)
  end

改掉醜醜的input type:file button

http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

Gem: gem font-awesome

即將推出的 Bootstrap 4 將會移除 Glyphicons 可以裝font-awesome
https://github.com/bokmann/font-awesome-rails
有rails 的helper可以使用,例如:

<%=link_to fa_icon("eye"), photo_path(photo) %>

Gem: bootstrap3-datetimepicker-rails

https://github.com/TrevorS/bootstrap3-datetimepicker-rails
要先裝 gem jquery-rails
https://github.com/rails/jquery-rails

範例:

  <div class="form-group">
  <%= f.label :date ,"Date"%>
    <div class="input-group date" id="photo_date_pick">
   <%= f.text_field :date, class:"form-control" %>
   <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
  </div>
  <script type="text/javascript">
    $(function () {
        $('#photo_date_pick').datetimepicker({
            format: 'YYYY-MM-DD'
        });
    });
  </script>

spreered

掙扎也要前進