[RUBY] Lassen Sie uns die App verbessern

Hinzufügen der Kommentarfunktion

Gerüstkommentar Gerüst den Autorennamen des Kommentars, den Kommentartext und die Beziehung zur Ideentabelle (`Referenz`). `rails generate scaffold comment user_name:string body:text idea:reference`

Machen Sie eine Migration. rails db:migrate

Fügen Sie dem Modell eine Beziehung hinzu Machen Sie Rails auf die Verbindung zwischen der Idee und dem Kommentarobjekt aufmerksam.

app/models/idea.rb

class Idea < ApplicationRecord
has_many :comments

app/models/comment.rb

class Comment < ApplicationRecord
belongs_to :idea

Kommentarformular anzeigen und bearbeiten

app/views/ideas/show.html.erb

<p>
  <strong>Picture:</strong>
  <%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %>
</p>

<h3>Comments</h3>
<% @comments.each do |comment| %>
  <div>
    <strong><%= comment.user_name %></strong>
    <br />
    <p><%= comment.body %></p>
    <p><%= link_to 'Delete', comment_path(comment), method: :delete, data: { confirm: 'Löschen Sind Sie sicher, dass Sie möchten?' } %></p>
  </div>
<% end %>
<%= render 'comments/form', comment: @comment %>

app/controllers/ideas_controller.rb

def show
  @comments = @idea.comments.all
  @comment = @idea.comments.build
end

app/views/comments/_form.html.erb

<div class="field">
  <%= form.label :body %>
  <%= form.text_area :body %>
</div>

<%= form.hidden_field :idea_id %>

Löschen Sie abschließend die folgende Zeile:

app/views/comments/_form.html.erb

<div class="field">
  <%= form.label :idea_id %>
  <%= form.number_field :idea_id %>
</div>

Entwerfen wir mit HTML & CSS

Anwendungslayout anwenden

app/assets/stylesheets/application.css

body { padding-top: 100px; }

Schreiben Sie die obige Zeile wie folgt um.

app/assets/stylesheets/application.css

body { padding-top: 60px; }

Löschen Sie abschließend app / assets / stylesheets / scaffolds.scss.

Verbessern wir die Navigation Zeigen Sie in der Navigation immer die Schaltfläche "Neue Idee" an.

app/views/layouts/application.html.erb

<li class="active"><a href="/ideas">Ideas</a></li>
<li><%= link_to 'New Idea', new_idea_path %></li>

Ideenlistendesign

Schreiben Sie wie folgt um.

app/views/ideas/index.html.erb

<h1>Listing ideas</h1>

<% @ideas.in_groups_of(3) do |group| %>
  <div class="row">
    <% group.compact.each do |idea| %>
      <div class="col-md-4">
        <%= image_tag idea.picture_url, width: '100%' if idea.picture.present? %>
        <h4><%= link_to idea.name, idea %></h4>
        <%= idea.description %>
      </div>
    <% end %>
  </div>
<% end %>

<h2>Entwerfen Sie eine Detailseite für Idea</h2>

Schreiben Sie wie folgt um.


#### **`app/views/ideas/show.html.erb`**

<%= notice %>

Anzeigen von Miniaturansichten mit Carrierrwave

Installieren Sie ImageMagick Führen Sie "Brew Install Imagemagick" aus.

gem 'carrierwave'

unter,

gem 'mini_magick'

Hinzufügen. Führen Sie dann den folgenden Befehl aus. bundle

Erstellen Sie eine Miniaturansicht, wenn Sie ein Bild hochladen

app/uploaders/picture_uploader.rb

 # include CarrierWave::MiniMagick

version :thumb do
  process :resize_to_fill => [50, 50]
end

Löschen Sie das obige #.

Miniaturansicht erstellen

app/views/ideas/index.html.erb

<%= image_tag idea.picture_url, width: '100%' if idea.picture.present? %>

Wird wie folgt geändert.

app/views/ideas/index.html.erb

<%= image_tag idea.picture_url(:thumb) if idea.picture.present? %>

Authentifizierungsfunktion mit Decice hinzufügen

Füge einen Edelstein hinzu

gem 'devise'

Hinzufügen. Führen Sie dann den folgenden Befehl im Terminal aus. bundle

Richten Sie ein Gerät in Ihrer App ein Führen Sie den folgenden Befehl aus.

rails generate devise:install

Geräteumgebungseinstellungen Fügen Sie der Umgebungsdatei die Standard-URL-Option hinzu.

config/environments/development.rb

config.action_mailer.default_url_options = { host: 'localhost:3000' }

Vor "Ende" hinzufügen.

app/views/layouts/application.html.erb

<% if notice %>
  <p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
  <p class="alert alert-danger"><%= alert %></p>
<% end %>
<%= yield %>

Fügen Sie die obige Zeile hinzu.

Löschen Sie außerdem Folgendes:

app/views/ideas/show.html.erb

<p id="notice"><%= notice %></p>

Löschen Sie es ebenfalls in app / views / comment / show.html.erb. Weil ich die gleiche Zeile zu "app / views / layouts / application.html.erb" hinzugefügt habe.

Einrichtung des Benutzermodells

Verwenden Sie das mitgelieferte Generatorskript, um ein Benutzermodell zu erstellen.

rails generate devise User
rails db:migrate

Melden Sie sich an und fügen Sie den Anmeldelink hinzu Fügen Sie in der oberen rechten Ecke der Navigationsleiste den entsprechenden Link oder die entsprechenden Anweisungen hinzu, bei denen sich Benutzer anmelden können.

app/views/layouts/application.html.erb

<p class="navbar-text pull-right">
  <% if user_signed_in? %>
    Logged in as <strong><%= current_user.email %></strong>.
    <%= link_to 'Edit profile', edit_user_registration_path, class: 'navbar-link' %> |
    <%= link_to "Logout", destroy_user_session_path, method: :delete, class: 'navbar-link'  %>
  <% else %>
    <%= link_to "Sign up", new_user_registration_path, class: 'navbar-link'  %> |
    <%= link_to "Login", new_user_session_path, class: 'navbar-link'  %>
  <% end %>
</p>
<ul class="nav navbar-nav">
  <li class="active"><a href="/ideas">Ideas</a></li>
</ul>

Machen Sie es unmöglich, den registrierten Inhalt zu überprüfen, wenn Sie nicht zuletzt angemeldet sind.

app/controllers/application_controller.rb

  before_action :authenticate_user!

Vor "Ende" hinzufügen.

Profilbild mit Gravatar hinzufügen

Gravtastic Edelstein hinzufügen

gem 'gravtastic'

Fügen Sie dies unter "Entwickeln" hinzu.

Führen Sie im Terminal den folgenden Befehl aus:

bundle

Gravatar einrichten Fügen Sie unter der letzten Zeile Folgendes hinzu:

app/models/user.rb

include Gravtastic
gravtastic

Gravatar einstellen.

app/views/layouts/application.html.erb

<% if user_signed_in? %>

Schreiben Sie in wie folgt neu.

app/views/layouts/application.html.erb

<% else %>
<%= image_tag current_user.gravatar_url %>

Lassen Sie uns mehr entwerfen

Header-Design

app/assets/stylesheets/application.css

nav.navbar {
  min-height: 38px;
  background-color: #f55e55;
  background-image: none;
}

.navbar a.brand { font-size: 18px; }
.navbar a.brand:hover {
  color: #fff;
  background-color: transparent;
  text-decoration: none;
}

Tabellendesign Schreiben Sie wie folgt um.

app/views/ideas/index.html.erb

<table class="table">

Verwenden Sie den folgenden Code, um die Größe des Bildes zu ändern.

<%= image_tag(idea.picture_url, width: 600) if idea.picture.present? %>

Fügen Sie am Ende von app / assets / stylesheets / ideas.scss Folgendes hinzu.

app/assets/stylesheets/ideas.scss

.container a:hover {
  color: #f55e55;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0);
}

Stil zur Fußzeile hinzufügen

app/assets/stylesheets/application.css

footer {
  background-color: #ebebeb;
  padding: 30px 0;
}

Stil zur Schaltfläche hinzufügen

app/assets/stylesheets/ideas.scs

.container input[type="submit"] {
   height: 30px;
   font-size: 13px;
   background-color: #f55e55;
   border: none;
   color: #fff;
 }