[RUBY] [Arbeitsnotiz zur Entwicklung persönlicher Anwendungen] Erstellen Sie eine Bildlistenseite wie eine Insta

Was du machen willst

Da das Bild bereits in jedem Beitrag angezeigt wurde,

スクリーンショット 2020-08-21 午後6.43.21.png

Ich möchte nur das Bild jedes Beitrags auf einer Seite anzeigen.

Warum eine Bilderlistenseite erstellen?

Ich mache eine Diät-App, damit ich die Veränderungen in meinem Körper sehen kann.

Arbeitsinhalt

Die Bilder wurden bereits in der Datenbank gespeichert. Sie müssen sie also nur aus der Datenbank abrufen und anzeigen.

スクリーンショット 2020-08-21 午後7.08.25.png

Wenn ich auf diese "Bildliste" drücke, möchte ich zu der Seite wechseln, auf der ich die von current_user gepostete Bildliste sehen kann.

Erstellen Sie eine neue Ansicht

スクリーンショット 2020-08-21 午後7.10.27.png Da es sich um eine "Bildlistenseite" handelt, habe ich eine Datei mit dem Namen "image.html.haml" im Verzeichnis "posts" abgelegt.

Erstellen Sie eine neue Aktion auf dem Controller

スクリーンショット 2020-08-21 午後7.12.04.png Bildaktion zu posts_controller hinzugefügt.

Routing einrichten

config/route.rb


#Bildlistenseite
get "posts/image" => "posts#image"

Stellen Sie das Routing so ein, dass Beiträge # image funktionieren.

Stellen Sie den Pfad ein

スクリーンショット 2020-08-21 午後7.16.43.png Ich habe mit "$ Rails Routen" nachgesehen und den Pfad wie folgt festgelegt. スクリーンショット 2020-08-21 午後7.13.31.png

Bis zu diesem Punkt funktioniert posts # image.

Holen Sie sich Bilddaten von current_user mit posts # image

Kartenmethode? Wertmethode?

Die von current_user gepostete Bildlistenseite wurde erstellt.

Klicken Sie hier für die resultierende Seite. Die von current_user geposteten Bilder werden in chronologischer Reihenfolge angezeigt. スクリーンショット 2020-08-22 午後7.26.33.png

Klicken Sie hier für den entsprechenden Code

Regler

posts_controller.rb


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

Dadurch werden die Beiträge des angemeldeten Benutzers einfach in eine Instanzvariable namens "@ posts" eingefügt, damit die Ansicht sie von hier aus abrufen kann.

Aussicht

ruby:image.html.haml


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

Es fiel mir schwer, das Bild hier anzuzeigen.

Zuerst habe ich versucht, es von "@ images" in der später beschriebenen zusätzlichen Ausgabe abzurufen und anzuzeigen, aber ich konnte es nicht anzeigen.

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

Vom angemeldeten Benutzer gepostete Posts befinden sich in Form eines Arrays in "@ posts". Nehmen Sie sie daher mit jeder Methode einzeln heraus. Variablen (hier posten) werden verwendet, um jede abzurufen.

Was für ein Gefühl enthält "@ posts" Posts (Postdaten)?

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: "Salat",
  calorie: 10.5,
  protein: 10.5,
  fat: 10.5,
  carbo: 10.5,
  text: "Ich habe einen Salat gegessen.",
  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: "Salat",
  calorie: 10.0,
  protein: 10.0,
  fat: 10.0,
  carbo: 10.0,
  text: "Salat",
  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>,

Es sieht aus wie das.

Sie können die Bildspalte von diesen angeben, indem Sie "@ posts.image" festlegen. Nehmen Sie einen nach dem anderen aus dem obigen Array heraus und nehmen Sie nur das image:" image6.png " diesen Teil heraus, Es ist in Ordnung, wenn Sie ".url" hinzufügen, damit es mit image_tag angezeigt werden kann.

Extra Edition (Oh !!)

posts_controller.rb


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

Das hat mich sehr beeindruckt.

Was passiert, wenn bind.pry ist?

[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 "]

Auf diese Weise werden die Bilddaten in Form eines Arrays erfasst.

posts_controller.rb


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

#Post Post Modell
# .where(user_id: current_user.id)Suchen und erhalten Sie Beiträge von angemeldeten Benutzern
# .select(:image)Nur Bildspalte abrufen

Bisher ist es einfach.

Wenn Sie denken, dass Sie damit Bilddaten erhalten können, können Sie dies nicht tun.

Was bisher bei bind.pry passiert ist

=> [#<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 ">]

Andere Informationen als die URL des Bildes werden so ausgegeben.

Aufgrund von Versuchen und Irrtümern, wie nur dieser Teil "image6.png " extrahiert werden kann, konnte ich ihn mit der obigen Methode erhalten.

Infolgedessen habe ich es nicht benutzt, aber ich wusste, dass ich es auf diese Weise bekommen kann, also habe ich gelernt.

Recommended Posts

[Arbeitsnotiz zur Entwicklung persönlicher Anwendungen] Erstellen Sie eine Bildlistenseite wie eine Insta
[Arbeitsnotiz für persönliche Anwendungen] Erstellen Sie einen Kalender mit simple_calendar
[Rails] Erstellen Sie eine Anwendung
[Arbeitsnotiz für persönliche Anwendungen] Verschieben Sie den Speicherort der Schaltfläche "Folgen"