Ruby on rails を使ってCRUDを実装するまで(プロジェクト作成~一覧表示)
Ruby on rails を使ってCRUDを実装するまで(記事作成、詳細表示、編集、削除)
で書けなかったことの補足資料
Routing
前回はlocalhost:3000/memosにアクセスするといきなり
へと遷移したが、routingはどのようになっているのか?
config/routes.rb
Rails.application.routes.draw do
resources :memos
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
resource どこかで見たような。。。
思い出したLaravelのroutingでも使った。
あの時もrespurceと書けばindex,create,show,update,edit,deleteが実現できた。
ってことはrailsでもresources :〜って書くことで実現されるのか。確認してみる
$ rails routes
Prefix Verb URI Pattern Controller#Action
memos GET /memos(.:format) memos#index
POST /memos(.:format) memos#create
new_memo GET /memos/new(.:format) memos#new
edit_memo GET /memos/:id/edit(.:format) memos#edit
memo GET /memos/:id(.:format) memos#show
PATCH /memos/:id(.:format) memos#update
PUT /memos/:id(.:format) memos#update
DELETE /memos/:id(.:format) memos#destroy
rails_service_blob GET /rails/active_storage/blobs/:signed_id/*filename(.:format) active_storage/blobs#show
rails_blob_representation GET /rails/active_storage/representations/:signed_blob_id/:variation_key/*filename(.:format) active_storage/representations#show
rails_disk_service GET /rails/active_storage/disk/:encoded_key/*filename(.:format) active_storage/disk#show
update_rails_disk_service PUT /rails/active_storage/disk/:encoded_token(.:format) active_storage/disk#update
rails_direct_uploads POST /rails/active_storage/direct_uploads(.:format) active_storage/direct_uploads#create
Controller
RoutingができてるってことはControllerもできてるってことじゃない。
確認してみる
app/controllers/memos_controller.rb
class MemosController < ApplicationController
before_action :set_memo, only: [:show, :edit, :update, :destroy]
# GET /memos
# GET /memos.json
def index
@memos = Memo.all
end
# GET /memos/1
# GET /memos/1.json
def show
end
# GET /memos/new
def new
@memo = Memo.new
end
# GET /memos/1/edit
def edit
end
# POST /memos
# POST /memos.json
def create
@memo = Memo.new(memo_params)
respond_to do |format|
if @memo.save
format.html { redirect_to @memo, notice: 'Memo was successfully created.' }
format.json { render :show, status: :created, location: @memo }
else
format.html { render :new }
format.json { render json: @memo.errors, status: :unprocessable_entity }
end
end
end
# PATCH/PUT /memos/1
# PATCH/PUT /memos/1.json
def update
respond_to do |format|
if @memo.update(memo_params)
format.html { redirect_to @memo, notice: 'Memo was successfully updated.' }
format.json { render :show, status: :ok, location: @memo }
else
format.html { render :edit }
format.json { render json: @memo.errors, status: :unprocessable_entity }
end
end
end
# DELETE /memos/1
# DELETE /memos/1.json
def destroy
@memo.destroy
respond_to do |format|
format.html { redirect_to memos_url, notice: 'Memo was successfully destroyed.' }
format.json { head :no_content }
end
end
private
# Use callbacks to share common setup or constraints between actions.
def set_memo
@memo = Memo.find(params[:id])
end
# Never trust parameters from the scary internet, only allow the white list through.
def memo_params
params.require(:memo).permit(:title, :body)
end
end
できてた(^◇^;)
cssをいじってみる
app/assets/stylesheets/application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
/* ここから追加 */
.command{
background-color:white;
color:blue;
text-decoration:none;
}
.command:hover{
background-color:blue;
color:white;
}
.show{
background-color:white;
color:royalblue;
text-decoration:none;
}
.show:hover{
background-color:royalblue;
color:white;
}
.danger{
background-color:white;
color:tomato;
text-decoration:none;
}
.danger:hover{
background-color:tomato;
color:white;
}
a{
color:black;
text-decoration: none;
}
a:hover{
color:royalblue;
}
以上で補足を終えます。
なお、今回作成したプロジェクトはgitにあげますので、 よかったらご参照ください。