Home » Учебное пособие по Rails form_with | Бутрейлы

Учебное пособие по Rails form_with | Бутрейлы

«form_with» известен как помощник формы, что означает, что это абстракция для создания известной стандартной HTML-формы.

При необходимости form_with

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

Но помните Философия Rails. Rails ценит интегрированную систему, а это означает, что в какой-то момент нам придется полагаться на тесное сотрудничество между браузером и сервером. И это сотрудничество (частично) обеспечивается помощниками.

Без помощников вам придется позаботиться о:

Примечание : Много критики в адрес Rails заключается в том, что этот инструмент слишком далеко заходит в абстракциях, с чем я в некоторой степени согласен. Насколько абстракция «достаточно хороша» для вас, полностью зависит от вас (или вашего технического руководителя).

Учебник по Rails с нуля

Итак, давайте начнем урок с нуля.

Инструмент, который я буду использовать в этом уроке:

1
2
3
ruby -v  # 3.3.0
bundle -v  # 2.4.10
node -v # 20.9.0

Затем давайте перейдем к корню вашего обычного рабочего пространства и начнем создавать новое приложение Rails:

1
2
3
4
5
mkdir formwith && cd formwith  
echo "source 'https://rubygems.org'" > Gemfile  
echo "gem 'rails', '7.1.3'" >> Gemfile  
bundle install  
bundle exec rails new . --force

Обратите внимание, что я не использую --minimal флаг – см. варианты здесь. Это убрало бы Hotwire, Stimulus и т. д. — сотрудничество между браузером и сервером. тогда было бы по-другому. В этом уроке я хочу придерживаться старых добрых Rails.

Создайте слой данных

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

Допустим, у нас есть несколько книг с названием, описанием и isbn (isbn — это бизнес-идентификатор для книг).

1
bin/rails generate model Book title:string body:text isbn:integer --no-test-framework

Файл миграции был создан под db/migrate/20240131201925_create_books.rb — номер — это временная метка, у вас, конечно, будет другая.

1
2
3
4
5
6
7
8
9
10
11
class CreateBooks < ActiveRecord::Migration[7.1]
  def change
    create_table :books do |t|
      t.string :title
      t.text :body
      t.integer :isbn
    
      t.timestamps
    end
  end
end

Представление по умолчанию, где размещать формы

Здесь нет ничего, кроме стандартных Rails. В терминале перейдите в корень вашего приложения и вставьте следующие команды:

1
2
3
4
5
6
7
8
9
10
11
12
13
# Create a default controller
echo "class WelcomeController < ApplicationController" > app/controllers/welcome_controller.rb
echo "end" >> app/controllers/welcome_controller.rb

# Create a default route
echo "Rails.application.routes.draw do" > config/routes.rb
echo '  get "welcome/index"' >> config/routes.rb
echo '  root to: "welcome#index"' >> config/routes.rb
echo 'end' >> config/routes.rb

# Create a default view
mkdir app/views/welcome
echo '

form_with tutorial

'
> app/views/welcome/index.html.erb

Затем создайте базу данных,

1
bin/rails db:create db:migrate

Затем запустите локальный сервер Rails, набрав:

И убедитесь, что «form_with учебник» отображается в вашем браузере по адресу localhost:3000.

Конечная точка, куда отправлять данные

Открой routes.rb файл и добавьте путь для отправки данных, например:

1
2
3
4
5
Rails.application.routes.draw do
  get "welcome/index"
  post "welcome/book_endpoint", as: "book_endpoint" # add this line
  root to: "welcome#index"
end

И добавьте соответствующий метод в WelcomeController:

1
2
3
4
5
6
7
class WelcomeController < ApplicationController

  # Add this method
  def book_endpoint
  end

end

Теперь откройте браузер по адресу localhost:3000/rails/info/routes, вы должны увидеть конечную точку.

Примечание : Лучше следовать соглашениям REST, и Rails помогает сделать это в файле Routes.rb. В демонстрационных целях мы придерживаемся явного и более простого маршрута отправки данных.

Создайте первую форму с помощью… form_with

Теперь пришло время посмотреть, как form_with может помочь в построении форм.

1
2
3
4
5
6
<%# inside app/views/welcome/index.html.erb %>

form_with tutorial

<%= form_with do |myform| %> Form contents <% end %>

Что отображает пустую форму, как эта:

1
2
3
4
5
6
7
8
9
10

    

form_with tutorial

action="/welcome/index" accept-charset="UTF-8" method="post"> type="hidden" name="authenticity_token" value="zOt30hNDyv2GLIUHeHmpUksAk8eujPFwbd6r7-pIpHigC6TLF9eAplosFKQxWF2N65NwKjDCurP5y3c1WYUwmw" autocomplete="off"> Form contents

  • HTTP-метод по умолчанию post
  • токен безопасности создан Rails
  • кодировка UTF-8 устанавливается автоматически
  • В, у нас есть myform объект, который поможет построить данные, которые будут отправлены на сервер

form_with в реальном мире

Добавим необходимые поля:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%# inside app/views/welcome/index.html.erb %>

form_with tutorial

<%= form_with scope: "book", url: book_endpoint_path, method: :post do |myform| %>
<%= myform .label :title, "Title is:" %> <%= myform.text_field :title %>
<%= myform.label :text, "Text is:" %> <%= myform.text_area :text %>
<%= myform.label :isbn, "Isbn is:" %> <%= myform.number_field :isbn %>
<%= myform.submit "Search" %> <% end %>

Что отображает следующий HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

    

form_with tutorial

action="/welcome/book_endpoint" accept-charset="UTF-8" method="post"> type="hidden" name="authenticity_token" value="AsfAGgNmd52Y6AUjbhtulwVtc6Q8r9r6U0wkKRAqnwbzlpeIK0x29NOzUDpcJrxAEht6njABQ_WoCdOB0Haq_Q" autocomplete="off">
for="book_title">Title is: type="text" name="bookRails form_with tutorial | Bootrails" id="book_title">
for="book_text">Text is: name="book[text]" id="book_text">
for="book_isbn">Isbn is: type="number" name="book[isbn]" id="book_isbn">
type="submit" name="commit" value="Search" data-disable-with="Search">

  • Обратите внимание, что «url» и «метод» явно заданы в объявлении блока.
  • Обратите внимание, что вы можете смешивать помощники HTML и Rails внутри блока формы.
  • Обратите внимание, что «имя» и «id» явно заданы для каждого поля.
  • Обратите внимание, что для поля отправки «фиксация» является именем по умолчанию. Если имеется несколько полей отправки, мы могли бы явно указать разные имена для каждой отправки.

form_with с использованием модели

Теперь давайте на секунду схитрим, используя строительные леса из рельсов.

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

1
bin/rails generate scaffold fruits name:string

Он сгенерирует миграцию, модель, контроллер и представление (да, только для фруктов).

теперь остановите ваш локальный сервер и запустите

1
2
bin/rails db:migrate 
bin/rails server

И заходим на localhost:3000/fruits/new.

Открыть app/views/fruits/_form.html.erb

Вы должны увидеть что-то вроде этого

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%= form_with(model: fruit) do |form| %>

  

  
<%= form.label :name, style: "display: block" %> <%= form.text_field :name %>
<%= form.submit %>
<% end %> action="/fruits" accept-charset="UTF-8" method="post"> type="hidden" name="authenticity_token" value="ZoY6D8B5iEd5Pp2PEWt-QHEYUgmVTQwz4omUz_e42g2DSFl-N5cZvmj54aVZVh8ZkXgmF7vs2FBjxXOsuCnctg" autocomplete="off">
style="display: block" for="fruit_name">Name type="text" name="fruit[name]" id="fruit_name">
type="submit" name="commit" value="Create Fruit" data-disable-with="Create Fruit">

Что отображается так:

1
2
3
4
5
6
7
8
9
10
11
12
 action="/fruits" accept-charset="UTF-8" method="post">
   type="hidden" name="authenticity_token" value="ZoY6D8B5iEd5Pp2PEWt-QHEYUgmVTQwz4omUz_e42g2DSFl-N5cZvmj54aVZVh8ZkXgmF7vs2FBjxXOsuCnctg" autocomplete="off">

  
style="display: block" for="fruit_name">Name type="text" name="fruit[name]" id="fruit_name">
type="submit" name="commit" value="Create Fruit" data-disable-with="Create Fruit">

Только что из model: fruitRails способен угадать:

  • URL-адрес конечной точки
  • метод
  • имя и идентификатор каждого поля
  • все остальное неудивительно, учитывая то, что мы видели ранее

Вероятно, для многих это слишком много, но вы можете видеть, насколько Rails ориентирован на модели и соглашения.

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

И, возможно, однажды вы обнаружите, что следовать условностям проще, чем повторять один и тот же скучный шаблон. Но мой совет: «не пробуйте это слишком рано», а может быть, и вообще не пытайтесь, если это не соответствует вашему мышлению.

Заключение

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

Я не пытался отправить форму, как я это сделал Статья о рельсах и формахпоэтому в качестве упражнения вы можете попробовать увидеть, что происходит в консоли Rails.

Надеюсь, вы сегодня узнали что-то новое!

Лучший,

Дэйвид.

2024-01-22 14:11:40


1705965526
#Учебное #пособие #по #Rails #form_with #Бутрейлы

Read more:  Год предстоящий: наш путеводитель по 2024 году

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.