Теория: Статические страницы

В этом уроке познакомимся с созданием статических страниц с помощью Rails. А также познакомимся с ресурсным роутингом, который позволяет снизить дублирование кода.

Попробуем создать первое приложение с простой страницей.

Сервер

Чтобы запустить сервер Rails, необходимо создать новый проект и запустить его командой bin/rails s

# Создаем новый проект
rails new static_pages_app
# ... вывод команды создания проекта

# Переходим в проект
cd static_pages_app

bin/rails s
=> Booting Puma
=> Rails 7.1.5.1 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 6.5.0 ("Sky's Version")
* Ruby version: ruby 3.3.4 (2024-07-09 revision be1089c8ec) [x86_64-linux]
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 370652
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop
Started GET "/" for 127.0.0.1 at 2024-12-23 21:55:37 +0500

Сервер сообщит о том, что он запустился, и выведет адрес http://127.0.0.1

При создании нового веб-приложения Rails отдает на главной странице страницу-заглушку с логотипом фреймворка и текущей версией Rails и Ruby. Это можно увидеть, если открыть в браузере адрес, на котором запущен сервер.

Генерация контроллера

Мы можем заменить главную страницу приложения на нашу. Для этого необходимо сгенерировать контроллер и добавить ему роут index:

# Создаем контроллер
bin/rails g controller pages index
Running via Spring preloader in process 82534
      create  app/controllers/pages_controller.rb
       route  get 'pages/index'
      invoke  erb
      create    app/views/pages
      create    app/views/pages/index.html.erb
      invoke  test_unit
      create    test/controllers/pages_controller_test.rb
      invoke  helper
      create    app/helpers/pages_helper.rb
      invoke    test_unit

Отменить изменения мы можем командой bin/rails d controller:

bin/rails d controller pages index

Созданный контроллер:

class PagesController < ApplicationController
  def index; end
end

При выполнении генератора будет добавлен роут в config/routes.rb

Rails.application.routes.draw do
  get 'pages/index'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

Метод get() создаст обработчик для адреса pages/index, который будет работать в контроллере PagesController.

По соглашению Rails будет искать по имени контроллера и метода обработчик. Если необходимо вывести другой шаблон, то можно сделать это с помощью метода метод render().

Чтобы на корневой странице открывалась наша страница, заменим в файле роутов метод:

# config/routes.rb
Rails.application.routes.draw do
  # Теперь / страница будет обрабатываться PagesController.index
  root 'pages#index'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

Вызов root 'pages#index' позволяет добавить корневую страницу, которая будет обрабатываться контроллером PagesController методом index()

Pages#index
Find me in app/views/pages/index.html.erb

Контроллеры

Все контроллеры приложения Rails наследуются от контроллера, который наследуется от базового

# app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
end

# app/controllers/pages_controller.rb
class PagesController < ApplicationController
end

Контроллеры и Вью

При создании контроллера с методом, были также созданы шаблоны по имени этого метода

bin/rails g controller pages index
Running via Spring preloader in process 82534
      # ...
      invoke  erb
      create    app/views/pages
      create    app/views/pages/index.html.erb
      # ...

По соглашению Rails будет искать шаблоны по имени контроллера и метода. Так для метода index() путь для вью будет app/views/pages/index.html.erb. В теле метода не нужно вручную указывать Вью.

Rails по умолчанию поставляется с шаблонизатором ERB. Он позволяет выводить HTML с помощью Ruby-кода. Важно помнить, что ERB - это обычный код на Ruby, который позволяет выполнять простую логику, например проходиться по коллекции и выводить список элементов.

Это можно проверить, добавив в app/views/pages/index.html.erb следующий код:

<h1>Pages#index</h1>
<p>Find me in app/views/pages/index.html.erb</p>

<% #Пример комментария в erb %>
<p>Знак = используется для отображения значений
params содержит переменные из пути, например /pages/:id - /pages/about</p>

<% 10.times do %>
<p>Для конструкций знак = не используется.</p>
<% end %>

Комментарий мы не увидим, а строку Для конструкций знак = не используется. увидим несколько раз.

Хелперы

Предположим есть шаблон и в нём выводятся ссылки

<h1>Pages catalog</h1>
<p>Find me in app/views/pages/index.html.erb</p>

<p><a href="/pages/about">About</a></p>
<p><a href="/pages/term_of_service">Term of service</a></p>

В Rails используется хелпер link_to() для формирования ссылок

<p><%= link_to "About", 'pages/about' %></p>
<p><%= link_to "Term of service", '/pages/term_of_service' %></p>

При создании роутов в config/routes.rb Rails создает автоматически хелперы. Их можно использовать, чтобы получить ссылки на страницы:

<h1>Pages catalog</h1>
<p>Find me in app/views/pages/index.html.erb</p>


<p><%= link_to "Home", root_path %></p>
<p><%= link_to "About", 'pages/about' %></p>
<p><%= link_to "Term of service", '/pages/term_of_service' %></p>

Хелпер root_path был создан автоматически. Он ведет на корневую страницу /. Если мы добавим в config/routes.rb новые роуты, то получим новые хелперы

# config/routes.rb
Rails.application.routes.draw do
  root 'pages#index'

  get 'pages/about'
  get 'pages/term_of_service'
end

<% #app/views/pages/index.html.erb %>
<h1>Pages#index</h1>
<p>Find me in app/views/pages/index.html.erb</p>

<p><%= link_to "Home", root_path %></p>
<p><%= link_to "About", pages_about_path %></p>
<p><%= link_to "Term of service", pages_term_of_service_path %></p>

# app/controllers/pages_controller.rb
class PagesController < ApplicationController
  def index
  end

  def about
  end
  def term_of_service
  end
end

Для получения ссылки на корневую страницу создается хелпер root_path. Список хелперов можно посмотреть в списке роутов http://localhost

Шаблоны и Вью

Rails позволяет использовать базовый шаблон и отображать уникальный контент. Контент страницы будет выведен с помощью yield. Шаблоны находятся в директории app/views/layouts.

Пример базового шаблона app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>ExampleApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Страница app/views/pages/index.html.erb Содержит только уникальный контент

<h1>Pages catalog</h1>
<p>Find me in app/views/pages/index.html.erb</p>

Добавим в базовый шаблон навигацию и удалим ее из вью

<!DOCTYPE html>
<html>
  <head>
    <% # ... %>
  </head>

  <body>
    <%= yield %>
    <% # Добавили навигацию %>
    <p><%= link_to "About", pages_about_path %></p>
    <p><%= link_to "Term of service", pages_term_of_service_path %></p>
  </body>
</html>

Теперь ссылки на страницы будут описаны в одном месте и отображаться на всех страницах

Рендер шаблонов в контроллере

Как мы помним, Rails сопоставляет имя метода и контроллера и выводит подходящий шаблон. Но если мы хотим вывести другой шаблон, мы можем сделать это явно:

class PagesController < ApplicationController
  def index
    # Явно указываем рендерить шаблон /tmp/static_pages_app/app/views/pages/index.html.erb
    render 'pages/index'
  end
end

Рендер частичных шаблонов

Частичные шаблоны (partials) используются для повторного использования кода. Они начинаются с символа подчеркивания. Рендер частичного шаблона app/views/layouts/shared/_links.html.erb

<%= render 'layouts/shared/links' %>

render partial: требует четкого указания пути и локальной передачи переменных. Обычный render использует переменные в том контексте запроса, в котором вызывается

<%= render partial: "pages/partial/links", locals: {} %>

Сам файл находится по следующему пути — app/views/pages/partial/_links.html.erb

<p><%= link_to "Back", root_path %></p>

Рендеринг статичных страниц

Вместо создания методов для каждой конкретной страницы можно использовать один метод. Вместо:

class PagesController < ApplicationController
  def about; end
  def term_of_service; end

  def index; end
end

Используем метод show()

class PagesController < ApplicationController
  def show; end

  def index; end
end

Чтобы в будущем воспользоваться хелпером и удобно работать с урлами, используем ресурсный роутинг (подробнее о нём в следующих уроках):

Rails.application.routes.draw do
  root 'pages#index'
  # page_path	GET	/pages/:id(.:format) pages#show
  resources :pages, only: :show
end

Ресурсный роутинг позволяет создавать роуты динамически. Имя страницы будет передаваться в параметрах путей. Например localhost

<%= render params[:id] %>

А уникальный для каждой страницы контент находиться в своем шаблоне. Имя шаблона будет начинаться с нижнего подчеркивания

• app/views/pages/_about.html.erb
• app/views/pages/_term_of_service.html.erb

Теперь мы можем использовать один хелпер page_path() и передавать ему параметр с ID страницы

<p><%= link_to "About", page_path(:about) %></p>
  <p><%= link_to "Term of service", page_path(:term_of_service) %></p>

Заключение

В этом уроке мы изучили создание статических страниц в Ruby on Rails, включая запуск сервера, генерацию контроллера и настройку роутов.

Мы узнали, как Rails автоматически сопоставляет методы контроллера с шаблонами представлений, что упрощает разработку, а также рассмотрели использование хелпера link_to() для создания ссылок.

Мы познакомились с базовыми шаблонами и их применением для отображения уникального контента, а также с рендерингом других шаблонов и частичных шаблонов для повторного использования кода.

В завершение урока мы рассмотрели ресурсный роутинг, который позволяет динамически создавать маршруты для статических страниц, что делает код более организованным и удобным для поддержки.