사용자 정의 페이지 나누기 체험

이 블로그에서 저는 기본적인 Ruby on Rails 웹 응용 프로그램을 설정하고 간단하고 유행하는 페이지 구성 요소를 실현하는 방법을 보여 드리겠습니다.
다음 항목의 소스 코드를 찾을 수 있습니다.

지도의

단계

Create a New Rails Project

Generate Movie Model and Resources

Create Test Data

Install Bootstrap

Implement will_paginate Gem

Customizing the Pagination Component

1. 새 Rails 프로젝트

Ruby 및 Rails가 로컬 시스템에 설치되어 있는 경우 터미널에 다음 명령을 입력하고 새 항목의 이름으로 교체하십시오.rails new 명령은 사용자가 지정한 경로에 기본 디렉토리 구조와 구성을 포함하는 새 Rails 응용 프로그램을 생성합니다.

rails new <project-name> --database=postgresql

주의: --database 로고는 선택한 데이터베이스 (옵션: mysql/postgresql/sqlite3/oracle/frontbase/ibm_db/sqlserver/jdbcmysql/jdbcsqlite3/jdbcpostgresql/jdbc) 를 미리 설정할 수 있습니다.
프로젝트가 생성되면 프로젝트 루트 디렉터리bundle install와 rails db:create에서 개발 및 테스트 데이터베이스를 만들어야 합니다.
마지막으로 rails start 를 실행하여 웹 응용 프로그램을 처음 시작할 수 있습니다. http://localhost:3000 에 접근하면 다음을 볼 수 있습니다.

2. 영화 모델과 자원 생성

이 강좌에서 우리는 영화 대상과 관련된 기본 정보를 저장하는 Movie라는 모델을 만들 것이다.다음 명령을 사용하면 모델, 마이그레이션, 테스트, 자원 루트, 컨트롤러와 보기를 만들 것입니다.

rails g scaffold Movie name director summary:text --no-assets --no-helper --no-jbuilder

자산, 조수, jbuilder 파일의 생성을 건너뛸 것입니다. 왜냐하면 이 강좌에서 필요하지 않기 때문입니다.rails db:migrate를 사용하여 데이터베이스 이전을 실행하고 웹 서버를 다시 시작하면 http://localhost:3000/movies에 접근할 수 있습니다.데이터베이스에 있는 모든 영화를 열거하는 간단한 색인 보기를 볼 수 있습니다.

3. 테스트 데이터 만들기

개발 및 테스트 그룹의 Gemfile->gem 'faker', :git => 'https://github.com/faker-ruby/faker.git', :branch => 'master'에 faker gem을 추가합니다.그리고 다시 실행합니다bundle install.
fakergem는 응용 프로그램을 테스트하고 기록하는 데 도움을 주기 위해 프로젝트에 허위 데이터를 생성합니다.faker를 사용하면 db/seeds.rb의 피드 파일에서 데이터베이스 피드를 효과적으로 사용할 수 있습니다.

#db/seeds.rb
require 'faker'

for m in 1..100 do
  name = Faker::Movie.title
  director = Faker::Name.name
  summary = Faker::Lorem.sentence
  Movie.create({name: name, director: director, summary: summary})
end

피드 파일에 추가한 후 rails db:seed 를 실행하고 http://localhost:3000/movies 브라우저를 새로 고치면 색인 보기에서 100개의 새 기록을 볼 수 있습니다.

faker gem에 대한 자세한 내용은 다음을 참조하십시오.

4. Bootstrap 설치

우리는 jquery, 보플을 설치해야 한다.js와 yarn이 안내하고 저희 rails 6 응용 프로그램에 웹 패커를 설정합니다.이것은 터미널에서 항목의 루트에서 실행해야 합니다.

yard add jquery popper.js bootstrap

파일config/webpack/environments.js을 만들고 이 줄const { environment } = require('@rails/webpacker')에 다음 설정을 추가합니다.

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  Popper: ['popper.js', 'default']
})

우리는 또한 보충해야 한다.

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

~ app/views/layouts/application.html.erb 및

import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'

까지app/javascript/packs/application.js.
앞의 절차가 끝나면 나머지는 웹 서버를 다시 시작하는 것입니다.현재 페이지는 다음과 같습니다.

5. will_paginate Gem 실행하기

will_paginategem를gem 파일에 추가할 수 있습니다.이것은 gm를 우리의 가방에 추가하고 설치할 것입니다.
다음으로, 우리는 페이지를 채우는 조회에 대해 페이지를 나누어야 한다.이 조회는 영화 컨트롤러bundle add will_paginate에서 찾을 수 있다.
현재 색인 방법은 다음과 같습니다.

# GET /movies
# GET /movies.json
def index
  @movies = Movie.all
endV

조회를 페이지당 30개의 결과만 표시하기 위해 다음과 같이 수정해야 합니다.

# GET /movies
# GET /movies.json
def index
  @movies = Movie.all.paginate(page: params[:page], per_page: 30)
end

현재 우리의 조회는 페이지를 정확하게 나누었습니다. 우리는 계속해서 보기에 페이지 내용을 표시할 수 있습니다.색인 뷰의 아래쪽 app/controllers/movies_controller.rb 에 다음을 추가할 수 있습니다.

<%= will_paginate @movies %>

우리의 보기를 정리하기 위해서, app/views/movies/index.html.erb 단추를 페이지 맨 위 New Movie 바로 아래로 이동하는 것을 권장합니다.
최종 뷰는 다음과 같습니다.

6. 맞춤형 페이지 구성 요소

will_paginate gem에는 다른 rails 조수<h1>Movies</h1>가 내장되어 있습니다.이 도움말을 사용하면 모델 이름, 반환된 레코드 총 수, 페이지에 표시되는 현재 레코드 범위 등 질의에 대한 요약 정보를 생성합니다.
요약 정보를 추가하려면page_entries_info 어셈블리 위에 추가할 수 있습니다.

<div class="page_info">
  <%= page_entries_info @movies %>
</div>

결과는 다음과 같습니다.

약간의 CSS를 통해 당신은 당신의 새로운 구성 요소를 위해 스타일을 설계하여 더욱 현대적이고 우호적으로 보일 수 있습니다.will_paginate의 창설자는 사용자가 사용할 수 있는 예시를 제공했습니다here.나는 이 개념을 한 걸음 앞으로 밀어붙이고 자신의 스타일링을 맞춤형으로 만들었다.이 스타일을 실현하려면 사용자 정의 스타일시트를 가져오고 구성 요소를 다른 스타일시트에 봉인해야 합니다 will_paginate.
먼저 div 에서 사용자 정의 스타일시트를 만듭니다.

/* app/assets/stylesheets/custom/pagination.scss */

.pear_pagination {
  text-align: center;
  padding: 1em;
  cursor: default;
}
.pear_pagination a,
.pear_pagination span {
  padding: 0.2em 0.3em;
}
.pear_pagination .disabled {
  color: #aaaaaa;
}
.pear_pagination .current {
  font-style: normal;
  font-weight: bold;
  background-color: #bebebe;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  line-height: 1.5;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;
  text-shadow: rgba(255, 255, 255, 0.8) 1px 1px 1px;
}
.pear_pagination a {
  text-decoration: none;
}
.pear_pagination a:hover,
.pear_pagination a:focus {
  text-decoration: underline;
}

스타일시트를 만들면 app/assets/stylesheets/custom/pagination.scss 에 다음 내용을 추가하여 응용 프로그램의 스타일시트로 스타일시트를 가져올 수 있도록 해야 합니다.

/* app/assets/stylesheets/application.scss */

@import "custom/pagination";

마지막으로, 우리는 새로운 app/assets/stylesheets/application.scss CSS 클래스로 우리의 구성 요소를 포장할 수 있다.

<div class="pear_pagination">
  <div class="page_info">
    <%= page_entries_info @movies %>
  </div>
  <%= will_paginate @movies %>
</div>

최종 제품은 다음과 같습니다.

결론

같은 결과를 실현할 수 있는 많은 방법이 있지만, 이 지침에 따라 사용자에게 간단하고 현대적인 페이지 나누기 체험을 제공할 수 있도록 보장할 것이다.