[RUBY] [Mémo de travail de développement d'applications personnelles] Créez une page de liste d'images comme un insta

Chose que tu veux faire

Comme l'image a déjà été affichée dans chaque article,

Je souhaite afficher uniquement l'image de chaque article sur une seule page.

Pourquoi créer une page de liste d'images?

Je crée une application diététique pour voir les changements dans mon corps.

Le contenu du travail

Les images ont déjà été enregistrées dans la base de données, il vous suffit donc de les récupérer dans la base de données et de les afficher.

Lorsque j'appuie sur cette "liste d'images", je veux passer à la page où je peux voir la liste d'images publiée par current_user.

Créer une nouvelle vue

Puisqu'il s'agit d'une "page de liste d'images", j'ai placé un fichier appelé "image.html.haml" sous le répertoire des messages.

Créer une nouvelle action sur le contrôleur

Ajout d'une action d'image à posts_controller.

Configurer le routage

config/route.rb

#Page de liste d'images
get "posts/image" => "posts#image"

Définissez le routage pour que l'image des publications fonctionne.

Définissez le chemin

J'ai vérifié avec $ rails routes et défini le chemin comme suit.

Jusqu'à présent, les # image fonctionnent.

Obtenir les données d'image publiées par current_user avec les articles # image

méthode de la carte? méthode de la valeur?

La page de liste d'images publiée par current_user a été créée.

Cliquez ici pour la page résultante. Les images publiées par current_user sont affichées par ordre chronologique.

Cliquez ici pour le code correspondant

manette

posts_controller.rb

def image
  @posts = Post.where(user_id: current_user.id)
end

Cela place simplement les messages de l'utilisateur connecté dans une variable d'instance appelée @ posts afin que la vue puisse les obtenir à partir d'ici.

Vue

ruby:image.html.haml

.content
  .images
  - @posts.each do |post|
    = image_tag post.image.url, class: "my-images"

J'ai eu du mal à afficher l'image ici.

Au début, j'ai essayé de l'obtenir à partir de @ images dans l'édition supplémentaire décrite plus tard et de l'afficher, mais je ne pouvais pas l'afficher.

- @posts.each do |post|
  = image_tag post.image.url, class: "my-images"

Les messages publiés par l'utilisateur connecté sont dans @ posts sous la forme d'un tableau, alors supprimez-les un par un avec chaque méthode, Des variables (poster ici) sont utilisées pour récupérer chacune d'elles.

Quel genre de sentiment «@ posts» contient-il des messages (données de publication)?

Terminal

[1] pry(#<PostsController>)> @posts
  Post Load (0.5ms)  SELECT `posts`.* FROM `posts` WHERE `posts`.`user_id` = 28
  ↳ app/controllers/posts_controller.rb:65
=> [#<Post:0x00007fc263764bc0
  id: 217,
  food: "salade",
  calorie: 10.5,
  protein: 10.5,
  fat: 10.5,
  carbo: 10.5,
  text: "J'ai mangé une salade.",
  created_at: Fri, 21 Aug 2020 06:56:52 UTC +00:00,
  updated_at: Fri, 21 Aug 2020 06:56:52 UTC +00:00,
  user_id: 28,
  start_time: nil,
  image: "image6.png ",
  weight: 70.5>,
 #<Post:0x00007fc263764a58
  id: 219,
  food: "salade",
  calorie: 10.0,
  protein: 10.0,
  fat: 10.0,
  carbo: 10.0,
  text: "salade",
  created_at: Fri, 21 Aug 2020 10:20:31 UTC +00:00,
  updated_at: Fri, 21 Aug 2020 10:20:31 UTC +00:00,
  user_id: 28,
  start_time: nil,
  image: "image6.png ",
  weight: nil>,

Ça ressemble à ça.

Vous pouvez spécifier la colonne d'image de ceux-ci en définissant @ posts.image. Sortez un par un du tableau ci-dessus, et ne retirez que ces ʻimage: "image6.png " cette partie, C'est OK si vous ajoutez .url` afin qu'il puisse être affiché avec image_tag.

Édition supplémentaire (Oh !!)

posts_controller.rb

def image
  @images = Post.where(user_id: current_user.id).select(:image).map{ |image| image[:image]}
end

C'est ce qui m'a beaucoup impressionné.

Que se passe-t-il lorsque binding.pry est

[1] pry(#<PostsController>)> Post.where(user_id: current_user.id).select(:image).map{ |image| image[:image]}
  User Load (0.4ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 28 ORDER BY `users`.`id` ASC LIMIT 1
  ↳ (pry):2
  Post Load (0.4ms)  SELECT `posts`.`image` FROM `posts` WHERE `posts`.`user_id` = 28
  ↳ (pry):2
=> ["image6.png ", "image6.png ", "image5.png ", "image4.png "]

De cette manière, les données d'image sont acquises sous la forme d'un tableau.

posts_controller.rb

def image
  @images = Post.where(user_id: current_user.id).select(:image).map{ |image| image[:image]}
end

#Modèle Post Post
# .where(user_id: current_user.id)Rechercher et obtenir les messages des utilisateurs connectés
# .select(:image)Obtenir uniquement la colonne d'image

C'est facile jusqu'ici.

Si vous pensez que vous pouvez obtenir des données d'image avec cela, vous ne pouvez pas le faire.

Ce qui se passe lorsque binding.pry est jusqu'à présent

=> [#<Post:0x00007fc261c86290 id: nil, image: "image6.png ">,
 #<Post:0x00007fc261c85fe8 id: nil, image: "image6.png ">,
 #<Post:0x00007fc261c85cc8 id: nil, image: "image5.png ">,
 #<Post:0x00007fc261c85a20 id: nil, image: "image4.png ">]

Les informations autres que l'url de l'image sortent comme ceci.

À la suite d'essais et d'erreurs sur la façon d'extraire uniquement cette partie, ʻimage6.png` a été obtenu par la méthode ci-dessus.

En conséquence, je ne l'ai pas utilisé, mais je savais que je pouvais l'obtenir de cette manière, alors j'ai appris.