--Utilisez ruby sur les rails 6.0.0.
L'introduction et la procédure sont décrites dans part1 , je vais donc continuer l'implémentation immédiatement. Si vous êtes intéressé, veuillez le lire.
La deuxième partie de la procédure, partie 2, est "Implémenter la publication d'image en associant la table d'images".
Je viens d'enregistrer l'image dans un tableau séparé, mais il a fallu environ 30 000 ans pour la mettre en œuvre, je voudrais donc laisser la procédure correcte pour la postérité.
Faisons de notre mieux aujourd'hui.
$ rails g model image $ rails db:migrate
Tout d'abord, créez un modèle d'image et faites-le migrer. Comme pour la dernière fois, la description du fichier de migration est omise.
Ensuite, je vais expliquer la structure du modèle.
app/models/product.rb
class Product < ApplicationRecord
belongs_to :user
has_many :images
end
app/models/image.rb
class Image < ApplicationRecord
belongs_to :product
end
Comme vous pouvez le voir ci-dessus, il existe une relation un-à-plusieurs dans laquelle vous pouvez avoir plusieurs modèles d'image pour un modèle de produit. (La validation est omise pour plus de clarté) Dans la table d'images, un enregistrement correspond à une image et product_id est associé à chacune.
Maintenant que vous avez une idée approximative de la structure, nous allons nous préparer à télécharger l'image dans l'environnement local.
Gemfile
~réduction~
gem 'carrierwave'
gem 'mini_magick'
Le premier est l'introduction de gemmes. Cette fois, j'aimerais utiliser le téléchargeur de carrierwave pour télécharger des images.
$ bundle install $ rails g uploader image
N'oubliez pas de faire une installation de bandle puis de générer le fichier de téléchargement. Afin de les utiliser correctement, ajoutons une description au fichier de téléchargement généré et au modèle précédent.
app/models/image.rb
class Image < ApplicationRecord
belongs_to :product
mount_uploader :src, ImageUploader
end
En écrivant ainsi, il est possible d'utiliser ImageUploader dans la colonne src du modèle d'image.
app/uploaders/image_uploader.rb
include CarrierWave::MiniMagick
process resize_to_fit: [50, 50]
C'est le réglage Mini Magick. C'est un bijou pratique qui vous permet d'ajuster la taille de l'image téléchargée. Plutôt que d'ajouter une nouvelle ligne ci-dessus, vous trouverez cette description dans le commentaire et décommentez-la. (Vous pouvez ajuster librement le contenu du redimensionnement)
Maintenant que vous pouvez vous télécharger, créons un formulaire pour publier l'image.
app/models/product.rb
class Product < ApplicationRecord
belongs_to :user
has_many :images, dependent: :destroy
accepts_nested_attributes_for :images, allow_destroy: true
end
haml:app/views/products/_form.html.haml
= form_with model: @product, local: true do |f|
= f.text_field :name, placeholder: 'name'
= f.fields_for :images do |i|
= i.file_field :src
= f.submit 'SEND'
Quelque chose comme fields_for est sorti. Il s'agit d'un assistant de formulaire qui peut enregistrer des données dans plusieurs tables associées à une table en même temps. Pour l'utiliser, ajoutez d'abord la description accepte_nested_attributes_for au modèle parent. Associons un modèle enfant au facteur. La partie allow_destroy qui suit est une fonction pratique qui, si vous la définissez sur true, si l'enregistrement parent est supprimé, les enregistrements enfants associés seront supprimés en même temps.
app/controllers/products_controller.rb
#~réduction~
def new
@product = Product.new
@product.images.new
end
#~réduction~
def product_params
params.require(:product).permit(:name, images_attributes: [:src]).merge(user_id: current_user.id)
end
#~réduction~
end
Nous apporterons quelques modifications au contrôleur en fonction des données à traiter. Tout d'abord, dans la nouvelle partie action, nous ajoutons une description qui crée une nouvelle instance d'image liée au produit. Notez que sans cela, l'image ne sera pas enregistrée correctement dans l'image. Et c'est un paramètre fort. Ceci est une petite description spéciale. _attributes: [:] signifie spécifier les colonnes du modèle associé. Je pense que ce n'est pas grave si vous le considérez comme un ensemble lorsque vous utilisez le formulaire d'aide fields_for.
Ceci termine la fonction de publication d'image. Cependant, à ce rythme, une seule image peut être sélectionnée, je voudrais donc la mettre à niveau la prochaine fois.
Cette fois, j'ai créé un modèle d'image, envoyé l'image sous une forme et l'ai implémentée jusqu'à la sauvegarder dans la base de données.
Je pensais que ce serait difficile à comprendre avec juste les lettres, alors je voulais ajouter des images de référence et des gifs. Je suis un peu occupé en ce moment, alors je le ferai si je peux me le permettre. (Peut-être)
Dans la troisième partie, nous présenterons enfin jQuery. Créons un formulaire qui vous permet de publier plusieurs images en jouant avec l'affichage! C'est comme ça. Je ferai de mon mieux.
Rendez-vous dans la prochaine partie. Merci beaucoup.
Je souhaite implémenter une fonction d'édition des informations produit ~ part3 ~