[RUBY] [Rails] Implementieren Sie die Image-Posting-Funktion

Überblick

Beim Erstellen einer Bulletin Board-Site im Rails-Projekt hatte ich die Möglichkeit, die Image-Posting-Funktion zu implementieren. Ich werde das Verfahren hier zur Erinnerung belassen.

1. Erstellen eines Bildmodells

Modell und Migrationsdatei erstellen

Es gibt zwei Tabellen, die "Beitragstabelle" und die "Bildtabelle". Die Spalte "post_id" der Bildtabelle hat eine Beziehung zur Post-Tabelle.

terminal

$ rails g model Image image_url:string post:references

Öffnen Sie die erstellte Migrationsdatei und überprüfen Sie sie.

db/migrate/Datum (und Uhrzeit_create_images.rb

class CreateImages < ActiveRecord::Migration[5.0]
  def change
    create_table :images do |t|
      t.string :image_url
      t.references :post, foreign_key: true

      t.timestamps
    end
  end

Es scheint, dass die Migrationsdatei ohne Probleme erstellt wurde.

Führen Sie die Migration durch

terminal

$ rails db:migrate

Überprüfen Sie das Bildmodell

app/model/image.rb

class Image < ApplicationRecord
  belongs_to :post
end

** Gehört zu: Post ** wird geschrieben, weil die Referenzen in der Migrationsdatei festgelegt sind.

Beziehung zum vorhandenen Post-Modell hinzufügen

Füge ** has_many: images ** hinzu.

app/models/post.rb

class Post < ApplicationRecord
  
  has_many :images #Fügen Sie diese Zeile hinzu
end

Damit konnten wir eine Eins-zu-Viele-Beziehung ausdrücken.

2. Verwenden Sie accept_nested_attributes_for, um die Aktualisierung mehrerer Modelle aus einem Formular zu aktivieren

Dieses Mal werde ich mehrere Modelle gleichzeitig in einem Formular registrieren, damit Bilder beim Posten eines Beitrags gleichzeitig veröffentlicht werden können. Was wird dafür benötigt

__ · akzeptiert_verschachtelte_Attribute_für__

ist. Mit dieser Option können Sie has_many verwandte untergeordnete Datensätze gleichzeitig registrieren.

Vorbereitung für den Umgang mit verschachtelten Formularen

Sie erstellen ein verschachteltes Formular, um die Tabellen zusammen zu registrieren. Verwenden wir eine Methode namens accepts_nested_attributes_for, um dies zu ermöglichen.

Jetzt setzen wir accepts_nested_attributes_for. Fügen Sie die Einstellungen wie folgt zum Post-Modell hinzu.

app/models/post.rb

class Post < ApplicationRecord
  
  has_many :images
  accepts_nested_attributes_for :images #Fügen Sie diese Zeile hinzu
end

Beiträge bearbeiten Controller

Fügen Sie die Einstellungen auch zu posts_controller.rb hinzu.

app/controllers/posts_controller.rb

class PostsController < ApplicationController

  def new
    @post = Post.new
    @post.images.build #Fügen Sie diese Zeile hinzu
  end

  def create
    @post = current_user.posts.build(post_params)
    if @post.save
      flash[:success] = 'Ich habe eine Nachricht gepostet.'
      redirect_to root_url
    else
      @posts = current_user.feel_posts.order('created_at DESC').page(params[:page]).per(10)
      flash.now[:danger] = 'Fehler beim Posten der Nachricht.'
      render 'posts/new'
    end
  end

  private
  
  def post_params
    params.require(:post).permit(:content, :security, images_attributes: [:image_url]) #Fügen Sie diese Zeile hinzu
  end

@post.images.build Und in params images_attributes: [:image_url] Wurde hinzugefügt. Die Werte der Parameter, die vom verschachtelten Modell zugelassen werden, werden mit images_attributes: in params beschrieben.

Verwenden Sie fields_for, um in einem Formular zu verschachteln

erb:views/posts/new.html.erb

<%= form_for(@post) do |f| %>
  <div class="form-group">
    <%= f.label :content, 'Kommentar' %>
    <%= f.text_area :content, class: 'form-control', rows: 5, placeholder: 'Bitte geben Sie einen Kommentar ein'  %>
  </div>
        
  <div class="form-group">
    <%= f.label :security, 'Security_Level' %>
    <%= f.number_field :security, class: 'hoge', min: 0, max: 100 %>
  </div>
          
  <%= f.fields_for :images do |i| %> 　#Zu dieser Zeile hinzufügen
    <%= i.file_field :image_url %>
  <% end %>
                
  <div class="text-right">
    <%= f.submit 'Post', class: 'btn btn-primary' %>
  </div>
<% end %>

Jetzt können Sie mehrere Modelle gleichzeitig mit einem Formular registrieren. Erstellen Sie als Nächstes eine Funktion zum Hochladen von Bildern.

3. Installieren Sie CarrierWave, damit Sie Bilder hochladen können

Füge den Edelstein "Carrier Wave" zu Gemfile hinzu.

Gemfile

gem 'carrierwave' #Bild hochladen

Führen Sie die Bundle-Installation aus.

terminal

$ bundle install

Uploader erstellen

terminal

$ rails g uploader image

Legen Sie für das Bild einen geeigneten Namen fest. Dieses Mal habe ich es Bild genannt. Wenn Sie den Befehl ausführen

create app/uploaders/image_uploader.rb

Und der Bild-Uploader wurde erstellt.

Modellassoziation

Fügen Sie Folgendes zu /models/image.rb hinzu und geben Sie den Spaltennamen in mount_uploader an.

app/models/image.rb

class Image < ApplicationRecord
  belongs_to :post
  
  mount_uploader :image_url, ImageUploader #Zu dieser Zeile hinzufügen
end

Das Bildmodell verfügt über eine Spalte mit dem Namen image_url, in der die URL des Bildes gespeichert wird. Durch Angabe einer Spalte in "mount_uploader" lädt Carrierwave das Bild beim Aktualisieren der Spalte automatisch hoch und speichert die URL des Upload-Ziels.

Zeigen Sie das von Carrierwave gespeicherte Bild in der Ansicht an

erb:view/posts/_posts.html.erb

 <div>
   <%= link_to post.user.name, user_path(post.user) %><span class="text-muted">posted at<% post.created_at %></span>
 </div>
 <div>
   <p><%= post.content %></p>
 </div>
 <div>
   <% post.images.each do |image| %>  
     <%= image_tag image.image_url.url %>  #Hier anzeigen
   <% end %>
 </div>
 <div>
   <p>Security_Level <%= post.security %></p>
 </div>
        
 <div class="batton">
   <%= render 'favorites/favorite_button', post: post %>
   <% if current_user == post.user %>
     <%= link_to "Delete", post, method: :delete, data: { confirm: "Möchten Sie dies wirklich löschen??" }, class: 'btn btn-danger btn-xs' %>
   <% end %>

Die Bildposting-Funktion wurde implementiert.

Am Ende

Sie haben jetzt die Image-Posting-Funktion in Ihrem Rails-Projekt implementiert. Es gibt einige Punkte, die verbessert werden können, z. B. das Posten mehrerer Bilder. Derzeit handelt es sich jedoch um einen Absatz.

Vielen Dank.