這時候新增完文章後也會順利導回首頁，因此我們可以來寫首頁的view了，讓首頁可以顯示每一篇的文章

• app/views/articles/index.html.erb

  <h1>文章列表</h1>
  <a href="articles/new">新增文章</a>
  
  <ul>
    <% @articles.each do |article| %>
      <li>
        <%= article.title %>
      </li>
    <% end %>
  </ul>
  

這個時候首頁就能顯示剛剛的文章title了

新增首頁檢視文章

• config/routes.rb

  Rails.application.routes.draw do
    root "articles#index"
    get "/articles", to: "articles#index"
    get "/articles/new", to: "articles#new", as:"new_article"
    post "/articles", to: "articles#create"
  
    get '/articles/:id', to: 'articles#show', as:"article"
    #=>這個不可以放到/articles/new 的上方
  
  end
  

• app/controllers/articles_controller.rb

  class ArticlesController < ApplicationController
      def show
        @article = Article.find(params[:id])
      end
  end
  

• app/views/articles/index.html.erb

  <h1>文章列表</h1>
  <a href="articles/new">新增文章</a>
  
  <ul>
    <% @articles.each do |article| %>
      <li>
        <%= link_to article.title, article_path(article) %> 更改這行
      </li> 
    <% end %>
  </ul>
  

• 新增 show.html.erb
  app/views/articles/show.html.erb

  <h1><%= @article.title %></h1>
  
  <article>
    <p><%= @article.content %></p>
  </article>
  

編輯文章

• config/routes.rb

  Rails.application.routes.draw do
    root "articles#index"
    get "/articles", to: "articles#index"
    get "/articles/new", to: "articles#new"**,** as:"new_article"
    post "/articles", to: "articles#create"
  
    get '/articles/:id', to: 'articles#show', as:"article"
    get '/articles/:id/edit', to: 'articles#edit', as:"edit_article" 新增這行
    patch '/articles/:id', to: 'articles#update' 新增這行
  end
  

• app/controllers/articles_controller.rb
  新增 def edit 與 def update

  class ArticlesController < ApplicationController
    def index
      @articles = Article.all.order(id: :desc)
    end
  
    def new
      @article = Article.new
    end
  
    def edit
      @article = Article.find(params[:id])
    end
  
    def update
      @article = Article.find(params[:id])
      if @article.update(article_params)
        redirect_to articles_path, notice: "更新成功"
      else
        render :edit
      end
    end
  
  
    private
    def article_params
      params.require(:article).permit(:title, :content)
    end
  
  end
  

• render :edit = render edit.html.erb
  用符號:edit 來表示 edit.html.erb

在文章列表中新增編輯文章的按鈕

• app/views/articles/index.html.erb

  <h1>文章列表</h1>
  <%= link_to "新增文章", new_article_path %>
  
  <ul>
    <% @articles.each do |article| %>
      <li>
        <%= link_to article.title, article_path(article) %>
        <%= link_to '更新', edit_article_path(article) %>
      </li>
  
    <% end %>
  </ul>
  

刪除文章

• config/routes.rb 新增路徑

  Rails.application.routes.draw do
    root "articles#index"
  	get "/articles", to: "articles#index"
    get "/articles/new", to: "articles#new"**,** as:"new_article"
  ****	post "/articles", to: "articles#create"
  
  ****	get '/articles/:id', to: 'articles#show', as:"article"
  	get '/articles/:id/edit', to: 'articles#edit', as:"edit_article"
  ****	patch '/articles/:id', to: 'articles#update'
  	**delete '/articles/:id', to: 'articles#destroy'**
  
  end
  

• app/controllers/articles_controller.rb 新增controller

  class ArticlesController < ApplicationController
      before_action :set_article, only: [:show, :edit, :update, :destroy]
      #before_action :set_article, expect: [:index, :new, :create]
  
      **def destroy
  			@article = Article.find(params[:id])
        @article.destroy
        redirect_to articles_path, notice: '刪除成功'
      end**
  
      private
      def article_params
          params.require(:article).permit(:title, :content)
      end
  
      def set_article
        @article = Article.find(params[:id])
      end
  
  end
  

• app/views/articles/index.html.erb 新增刪除按鈕

  <h1>文章列表</h1>
  
  <%= link_to "新增文章", new_article_path %>
  
  <ul>
    <% @articles.each do |article| %>
      <li>
        <%= link_to article.title, article_path(article) %>
        <%= link_to '更新', edit_article_path(article) %>
        <%= link_to '刪除', article_path(article), data: { turbo_method: 'delete',
                                                  turbo_confirm: '確定刪除嗎?'   } %>
      </li>
  
    <% end %>
  </ul>
  

整理結構

• app/controllers/articles_controller.rb

  1. 把重複部分的包起來成一個方法, 並且設定某些方法執行前執行

     before_action :set_article, only: [:show, :edit, :update, :destroy]    
     
     private
         def set_article
           @article = Article.find(params[:id])
         end
     
     

  2. 把[:show, :edit, :update, :destroy] 這四個action重複的程式碼刪掉

• new.html.erb 跟 edit.html.erb 內容幾乎重複
  把重複的部分複製起來放到新的頁面去, 新增: _form.html.erb

  • app/views/articles/_form.html.erb

    <%= form_with(model: model, data:{ turbo: false }) do |f| %> 
      <div>
        <%= f.label :title, '標題' %>
        <%= f.text_field :title %>
      </div>
    
      <div>
        <%= f.label :content, '內文' %>
        <%= f.text_area :content %>
        <%= f.submit %>
      </div>
    
    <% end %>
    

• app/views/articles/new.html.erb

  <h1>新增文章</h1>
  
  <%= render 'form', model: @article%>
  

• app/views/articles/edit.html.erb

  <h1>更新文章</h1>
  
  <%= render 'form', model: @article %>