[RUBY] [Rails] Implémenter la fonction de publication d'images

Aperçu

Lors de la création d'un site de tableau d'affichage dans le projet Rails, j'ai eu l'opportunité d'implémenter la fonction de publication d'images. Je laisserai la procédure ici pour rappel.

1. Création d'un modèle d'image

Créer un modèle et un fichier de migration

Il y a deux tables, la table posts et la ʻimage table. La colonne post_id` de la table image a une relation avec la table post.

terminal

$ rails g model Image image_url:string post:references

Ouvrez le fichier de migration créé et vérifiez-le.

db/migrate/Date et l'heure_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

Il semble que le fichier de migration a été créé sans aucun problème.

Effectuer la migration

terminal

$ rails db:migrate

Vérifier le modèle d'image

app/model/image.rb

class Image < ApplicationRecord
  belongs_to :post
end

** appartient_to: post ** est écrit car les références sont définies dans le fichier de migration.

Ajouter une relation au modèle de poteau existant

Ajoutez ** has_many: images **.

app/models/post.rb

class Post < ApplicationRecord
  
  has_many :images #Ajouter cette ligne
end

Avec cela, nous avons pu exprimer une relation un-à-plusieurs.

2. Utilisez accepte_nested_attributes_for pour activer la mise à jour de plusieurs modèles à partir d'un formulaire

Cette fois, je vais enregistrer plusieurs modèles à la fois dans un seul formulaire afin que les images puissent être publiées en même temps lors de la publication d'un article. Ce qui est nécessaire pour cela

__ · accepte_nested_attributes_for__

est. Avec cela, vous pouvez enregistrer has_many enregistrements enfants liés à la fois.

Préparation à la gestion des formulaires imbriqués

Vous allez créer un formulaire imbriqué pour enregistrer les tables ensemble. Utilisons une méthode appelée accepts_nested_attributes_for pour rendre cela possible.

Maintenant, définissons accepts_nested_attributes_for. Ajoutez les paramètres au modèle Post comme suit.

app/models/post.rb

class Post < ApplicationRecord
  
  has_many :images
  accepts_nested_attributes_for :images #Ajouter cette ligne
end

modifier le contrôleur de messages

Ajoutez également les paramètres à posts_controller.rb.

app/controllers/posts_controller.rb

class PostsController < ApplicationController

  def new
    @post = Post.new
    @post.images.build #Ajouter cette ligne
  end

  def create
    @post = current_user.posts.build(post_params)
    if @post.save
      flash[:success] = 'J'ai posté un message.'
      redirect_to root_url
    else
      @posts = current_user.feel_posts.order('created_at DESC').page(params[:page]).per(10)
      flash.now[:danger] = 'Échec de la publication du message.'
      render 'posts/new'
    end
  end

  private
  
  def post_params
    params.require(:post).permit(:content, :security, images_attributes: [:image_url]) #Ajouter cette ligne
  end

@post.images.build Et dans les paramètres images_attributes: [:image_url] Était ajouté. Les valeurs des paramètres autorisés par le modèle imbriqué sont décrites à l'aide d'images_attributes: in params.

Utilisez fields_for pour imbriquer dans un formulaire

erb:views/posts/new.html.erb

<%= form_for(@post) do |f| %>
  <div class="form-group">
    <%= f.label :content, 'commentaire' %>
    <%= f.text_area :content, class: 'form-control', rows: 5, placeholder: 'Merci de saisir un commentaire'  %>
  </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| %> 　#Ajouter à cette ligne
    <%= i.file_field :image_url %>
  <% end %>
                
  <div class="text-right">
    <%= f.submit 'Post', class: 'btn btn-primary' %>
  </div>
<% end %>

Désormais, vous pouvez enregistrer plusieurs modèles à la fois avec un seul formulaire. Ensuite, créez une fonction de téléchargement d'image.

3. Installez CarrierWave pour vous permettre de télécharger des images

Ajoutez la gemme "Carrier Wave" à Gemfile.

Gemfile

gem 'carrierwave' #Téléchargement d'image

Exécutez l'installation groupée.

terminal

$ bundle install

Créer un uploader

terminal

$ rails g uploader image

Pour l'image, définissez un nom approprié. Cette fois, je l'ai nommé image. Lorsque vous exécutez la commande

create app/uploaders/image_uploader.rb

Et le téléchargeur d'image a été créé.

Association de modèles

Ajoutez ce qui suit à /models/image.rb et spécifiez le nom de la colonne dans mount_uploader.

app/models/image.rb

class Image < ApplicationRecord
  belongs_to :post
  
  mount_uploader :image_url, ImageUploader #Ajouter à cette ligne
end

Le modèle d'image a une colonne appelée image_url, qui est conçue pour stocker l'URL de l'image. En spécifiant une colonne dans mount_uploader, Carrierwave téléchargera automatiquement l'image lors de la mise à jour de la colonne et enregistrera l'URL de la destination de téléchargement.

Afficher l'image enregistrée par Carrierwave dans View

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 %>  #Montrez ici
   <% 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: "Voulez-vous vraiment supprimer ceci?" }, class: 'btn btn-danger btn-xs' %>
   <% end %>

La fonction de publication d'image a été implémentée.

À la fin

Vous avez maintenant implémenté la fonction de publication d'images dans votre projet Rails. Certains points peuvent être améliorés, comme la publication de plusieurs images, mais pour le moment, il s'agit d'un paragraphe.

Merci beaucoup.