rails'kaminari'를 사용하여 페이지 설정

안녕히 주무세요.
오늘은 rails의gem의kaminarihttps://github.com/kaminari/kaminari를 사용하여 페이지의 단자를 실현했기 때문에 지난번 소개를 계속합니다.

우선

Gemfile

gem 'kaminari'

작성 후 bunle install

컨트롤러에 기술

현재 제작된 프로그램은 첫 페이지의 투고 기록을 일람표로 삼는다.
records_controller.rb(변경 전)

def index
 @records = Record.include(:user)order("created_at DESC")

records_controller.rb(변경 후)

def index
 @records = Record.include(:user)order("created_at DESC")
 @records = Record.page(params[:page]).per(4).order("created_at DESC")

뷰 파일

컨트롤러가 정의하는 방법을 설명합니다.
index.html.erb(변경 전)

#省略
 <% if @records[0] == nil %>
      <li class='list'>
        <%= link_to '#' do %>
        <%= image_tag "https://tech-master.s3.amazonaws.com/uploads/curriculums/images/Rails1-4/sample.jpg", class: "item-img" %>
        <div class='item-info'>
          <h3 class='item-name'>
            記録を投稿してね！
          </h3>
          <div class='item-price'>
            <span>スポーツの種目名<br>投稿者</span>
            <div class='star-btn'>
              <%= image_tag "star.png", class:"star-icon" %>
              <span class='star-count'>0</span>
            </div>
          </div>
        </div>
        <% end %>
       <% end %> 
      </li>
    </ul>
  </div>

index.html.erb(변경 후)

#省略
 <% if @records[0] == nil %>
      <li class='list'>
        <%= link_to '#' do %>
        <%= image_tag "https://tech-master.s3.amazonaws.com/uploads/curriculums/images/Rails1-4/sample.jpg", class: "item-img" %>
        <div class='item-info'>
          <h3 class='item-name'>
            記録を投稿してね！
          </h3>
          <div class='item-price'>
            <span>スポーツの種目名<br>投稿者</span>
            <div class='star-btn'>
              <%= image_tag "star.png", class:"star-icon" %>
              <span class='star-count'>0</span>
            </div>
          </div>
        </div>
        <% end %>
       <% end %> 
      </li>
    </ul>
    <%= paginate @records %>
  </div>

페이지 아래 <%=paginate@records%>에서 호출

완성

이렇게 된 느낌!

오늘의 공부

간단하지만 편의성도 높아져 설치가 잘 됩니다.
할 수 있는 일도 늘었으니, 하고 싶은 것을 명확히 하고, 끊임없이 기술을 향상시키고 싶다!

내면의 외침

Uer 모형의 결합 테스트에서 생일을 입력하지 않음
오류 화면

화면 확인

VS 코드

 context 'ユーザー新規登録ができるとき' do 
    it '正しい情報を入力すればユーザー新規登録ができてトップページに移動する' do
      visit_with_http_auth root_path
      # トップページに移動する
      #visit root_path
      # トップページにサインアップページへ遷移するボタンがあることを確認する
      expect(page).to have_content('新規登録')
      # 新規登録ページへ移動する
      visit new_user_registration_path
      # ユーザー情報を入力する
      fill_in 'user[nickname]', with: @user.nickname
      fill_in 'user[email]', with: @user.email
      fill_in 'user[password]', with: @user.password
      fill_in 'user[password_confirmation]', with: @user.password_confirmation 
      fill_in 'user[family_name]', with: @user.family_name
      fill_in 'user[first_name]', with: @user.first_name
      fill_in 'user[family_name_kana]', with: @user.family_name_kana
      fill_in 'user[first_name_kana]', with: @user.first_name_kana
      fill_in 'user[birth_day(1i)]', with: @user.birth_day
      fill_in 'user[birth_day(2i)]', with: @user.birth_day
      fill_in 'user[birth_day(3i)]', with: @user.birth_day
      # サインアップボタンを押すとユーザーモデルのカウントが1上がることを確認する
      except{
        find('input[name="commit"]').click
      }.to change { User.count }.by(1)
      # トップページへ遷移する
      expect(current_oath).to eq root_path
      # カーソルを合わせるとログアウトボタンが表示されることを確認する
      # サインアップページへ遷移するボタンや、ログインページへ遷移するボタンが表示されていないことを確認する
      expect(page).to have_no_content('新規登録')
      expect(page).to have_no_content('ログイン')
    end
  end
  

빨리 해결하고 싶어요!(누군가 나를 구하러 왔다~)