[Rails] 카미나리 &ransack에서 호출 및 검색 기능 구현

[페이지 스타일]
페이지당 20개를 설정합니다.
스타일은 Bootstrap4로 구현됩니다.
【검색 기능】
투고 일람에서 검색하는 것과 책갈피의 투고 일람에서 검색하는 두 가지 모델.
검색 조건은 제목이나 본문 부분과 일치합니다.
[사전 준비]
· 책갈피 기능을 설치하십시오.
참고 자료: [Rails] 책갈피(즐겨찾기) 기능
・bootstrap4를 사용할 수 있도록 설정하십시오.
참고 자료: Bootstrap을 Rails로 가져오세요!철저한 해설!

컨디션

Rails 5.2.3 mysql 5.7.28 gem kaminari gem ransack

이루어지다


그럼 실시를 시작하겠습니다.

gem 추가

gem kaminari gem ransackGemfile에 추가bundle installGemfile
gem 'kaminari'
gem 'ransack'
단말기
$ bundle install

페이지 디자인


먼저 페이지 스타일부터 설치합니다.
터미널에서 설정 파일을 자동으로 생성하는 명령을 입력하십시오.
단말기
$ rails g kaminari:config
이렇게 하면 변경kaminari 동작에 필요한 설정 파일을 생성할 수 있다.
페이지 스타일을 자동으로 생성하는 뷰 파일에 대한 명령을 입력합니다.
단말기
$ rails g kaminari:views bootstrap4
이렇게 하면bootstrap4의 페이지 스타일 디자인과 일치하는 보기 파일을 자동으로 생성할 수 있다.
이어서 페이지당 데이터 획득 수를 고칩니다.
기본값은 25개의 데이터를 가져오는 것입니다.
config/initializers/kaminari_config.rb
# frozen_string_literal: true
Kaminari.configure do |config|
  config.default_per_page = 20 # 25から20に書き換え
  # config.max_per_page = nil
  # config.window = 4
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
  # config.params_on_first_page = false
end
다음에 컨트롤러에 페이지 방법을 추가합니다.
board_controller.rb
def index
  @boards = Board.includes(:user).page(params[:page])
end

def bookmarks
  @boards = current_user.bookmark_boards.includes(:user).page(params[:page])                  
end
설치kaminari를 통해 모델류에 사용할 수 있다kaminari.
이전에 설정한 페이지당 데이터 획득 건수를 매개 변수pageメソッド에 저장하고 보기에 표시합니다.
이 때 1페이지에는 20개의 데이터가 표시되어야 한다.
두 번째 페이지 이후에도 볼 수 있도록 링크를 붙여넣습니다.
링크를 붙이고 싶은 곳에 params[:page]라고 쓰면 됩니다.

서버를 재부팅하고 이러한 링크가 표시되면 설치가 완료됩니다.

일본어화


설치는 완료되었지만 영어의 일부를 일본어화합니다.
기본 로켈을 일본어로 설정합니다.
config/application.rb
module アプリ名
  class Application < Rails::Application
  # 追記↓
    config.i18n.default_locale = :ja
다음은 일본어 번역을 설정한 파일을 제작하고 기술합니다.
제작<%= paginate @boards %>, 임의의 일본어를 기술합니다.
config/locales/ja.yml
ja:
  views:
    pagination:
      first: 最初
      last: 最後
      previous: 
      next: 
      truncate: ...
이 설정이 완료되었으니 서버를 다시 시작하면 반영될 것입니다.

검색 기능 구현


controller 편집


boards_controller.rb
def index
    @q = Board.ransack(params[:q]) # 検索オブジェクト作成
    @boards = @q.result.includes(:user).page(params[:page]) # 検索結果(検索しなければ全件取得)
end

def bookmarks
    @q = current_user.bookmark_boards.ransack(params[:q]) # 検索オブジェクト作成
    @boards = @q.result.includes(:user).page(params[:page]) # 検索結果(検索しなければ全件取得
end

보기 편집 (검색 창)


boards/index.html.erb
<!-- 検索フォーム --> 
<%= render 'search_form', url: boards_path, q: @q %>
boards/bookmarks.html.erb
<!-- 検索フォーム -->
<%= render 'search_form', url: bookmarks_boards_path, q: @q %>
_search_form.html.erb
<%= search_form_for q, url: url do |f| %>
  <div class="input-group mb-3">
    <%= f.search_field :title_or_body_cont, class: "form-control", placeholder: '検索ワード' %>
    <div class="input-group-append">
      <%= f.submit "検索", class: "btn btn-primary" %>
    </div>
  </div>
<% end %>
일람과 책갈피 일람의 URL 지정config/locales/ja.yml의 URL을 통해 이 범위 내에서 검색할 수 있습니다.<%= search_form_for q, url: url do |f| %>에서 타이틀열과 바디열의 검색 부분이 일치하면 신호를 표시합니다.
조건은 이쪽 사이트를 참고했습니다.
Ransack으로 검색 형식의 73가지 레시피 만들기

뷰 편집(검색 결과 목록)


index.html.erb,bookmarks.html.erb 공통
<!-- 掲示板一覧 -->
<% if @boards.any? %>
  <div class="row d-flex">
    <%= render @boards %>
  </div>
<% else %>
  <h1><%= '検索結果がありません。' %></h1>
<% end %>
<%= paginate @boards %>
인스턴스에 데이터가 있으면 목록이 표시되고 그렇지 않으면 검색 결과가 표시되지 않습니다.

총결산


내 생각에는 비교적 순조롭게 실현된 것 같다.
막히면 검색 범위가 모두board와bookmark보드로 범위를 구분하는 부분이지만 url을 검색 범위에 지정함으로써 해결되었습니다.

좋은 웹페이지 즐겨찾기