Share
Im ersten Teil dieser Serie haben Sie gelernt, wie Sie CarrierWave in Ihrer Rails-Anwendung verwenden. In diesem zweiten Teil erfahren Sie, wie Sie das Hochladen von Bildern für Ihre Benutzer mithilfe von Devise aktivieren. Devise ist eine Authentifizierungslösung für Rails. Außerdem lernen Sie, wie Sie die Ruby Cloud-Service-Bibliothek Fog verwenden, mit der Ihre Anwendung eine Verbindung zu Amazon Web Services herstellen kann.
Genug geredet, lass uns zur Sache kommen.
Generieren Sie Ihre neue Schienenanwendung:
Schienen Schienen neue myapp
Öffne deine Gemfile und füge die folgenden Edelsteine hinzu:
"Schienen Gemfile
gem carrierwave gem devise gem mini_magick gem fog "
Lauf Bundle installieren um die Edelsteine zu installieren.
Erstellen Sie von Ihrem Terminal aus eine Seitencontroller:
Schienen Schienen g Controller Seitenindex
Navigiere zu config / routes.rb und fügen Sie einen Stammpfad hinzu:
"Schienen config / routes.rb
root zu: 'pages # index "
Die Upload-Funktion wird in unser Benutzermodell integriert, damit Benutzer Avatare hochladen können. Installieren Sie von Ihrem Terminal aus:
Schienen Schienen erzeugen Gerät: Installieren
Der Generator installiert einen Initialisierer, der beschreibt alles von Devise Konfigurationsoptionen. Aufmachen app / views / layouts / application.html.erb in Ihrem Texteditor und fügen Sie den folgenden Code über dem ein Ausbeute Block:
"Schienen app / views / layouts / application.html.erb
<%= notice %>
<%= alert %>
"
An dieser Stelle können Sie Ihr Benutzermodell generieren:
Schienen Schienen generieren Benutzer
Migrieren Sie als Nächstes Ihre Datenbank:
rails rake db: migrieren
Sie müssen Geräteansichten bearbeiten, daher ist es wichtig, dass Sie diese generieren:
Schienen Schienen generieren Ansichten: Ansichten
Und das wird die Magie sein.
Öffnen Sie mit Ihrem Texteditor app / views / devise / registrations / new.html.erb und bearbeiten Sie es so, dass es so aussieht:
"Schienen app / views / devise / registrations / new.html.erb
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), :html => multipart:: true) do | f | %> <%= devise_error_messages! %>
<%= f.label :email %><% end %>
<%= render “devise/shared/links” %>"
Machen Sie dasselbe für app / views / devise / registrations / edit.html.erb:
"Schienen app / views / devise / registrations / edit.html.erb
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: method: :put, multipart: :true ) do |f| %> <%= devise_error_messages! %>
<%= f.label :email %><% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<% if current_user.avatar.url.present? %> <%= image_tag(current_user.avatar.url) %> <%= f.label :remove_avatar do %> <%= f.check_box :remove_avatar %> <% end %> <% end %> <%= f.file_field :avatar %> <%= f.hidden_field :avatar_cache %>
<%= f.label :current_password %> (Wir benötigen Ihr aktuelles Passwort, um Ihre Änderungen zu bestätigen.)<% end %>
Unzufrieden? <%= button_to "Cancel my account", registration_path(resource_name), data: confirm: "Are you sure?" , method: :delete %>
<%= link_to “Back”, :back %>"
In diesem Fall müssen Sie den Avatar für die Whitelist hinzufügen und eine Avatar-Spalte zur User-Tabelle hinzufügen. Führen Sie die Migration von Ihrem Terminal aus aus, um eine neue Avatar-Spalte hinzuzufügen.
"Schienen
Schienen g Migration add_avatar_to_users avatar: String Rake db: migrate "
Fügen Sie den CarrierWave-Avatar Ihrem Benutzermodell hinzu. Ihr Modell sollte folgendermaßen aussehen:
"Schienen models / user.rb
Klasse Benutzer < ActiveRecord::Base mount_uploader :avatar, AvatarUploader
devise: database_authenticatable,: registrierbar,: wiederherstellbar,: erinnernd,: verfolgbar,: validierbar
# Benutzer Avatar Validation validates_integrity_of: avatar validates_processing_of: avatar
private def avatar_size_validation errors [: avatar] "" sollte weniger als 500 KB sein ", wenn avatar.size> 0.5.megabytes end end"
Im obigen Code haben Sie a mount_uploader Linie an der Spitze der Nutzer Klasse. Es gibt auch eine Validierung zur Überprüfung der Integrität und Verarbeitung des Avatars sowie eine Methode, mit der sichergestellt wird, dass kein Bild mit einer Größe von mehr als 500 KB hochgeladen wird.
Sie müssen hinzufügen Benutzerbild, avatar_cache, und remove_avatar zur Liste der zugänglichen Attribute. Dies zu tun ist einfach - öffnen Sie einfach Ihre Anwendungscontroller.rb und es so aussehen lassen:
"Schienen app / controller / application_controller.rb
Klasse ApplicationController < ActionController::Base # Prevent CSRF attacks by raising an exception. # For APIs, you may want to use :null_session instead. protect_from_forgery with: :exception
before_action: configure_permitted_parameters, wenn:: devise_controller?
geschützt
def configure_permitted_parameters devise_parameter_sanitizer.for (: sign_up) | u | u.permit (: Benutzername,: E-Mail,: Kennwort,: Kennwortbestätigung,: remember_me,: avatar,: avatar_cache) devise_parameter_sanitizer.for (: account_update) | u | u.permit (: Benutzername,: Kennwort,: Kennwortbestätigung,: Aktuelles_Kennwort,: Avatar,: avatar_cache,: remove_avatar) Ende Ende "
Damit sind Sie bereit, sich zu integrieren CarrierWave.
Navigieren Sie mit Ihrem Texteditor zu config / initializers und erstellen Sie eine Datei mit dem Namen carrier_wave.rb. Füge den Code unten ein:
Schienen *** config / initializers / carrier_wave.rb ***
Schienen benötigen "Trägerwelle / Orm / Aktivaufnahme"
Dies ist der Initialisierer, der zum Laden von CarrierWave nach ActiveRecord benötigt wird.
Generieren Sie von Ihrem Terminal aus einen Uploader:
Schienen Schienen erzeugen Uploader Avatar
Dadurch wird ein neues Verzeichnis mit dem Namen "Uploader" im App-Ordner und eine Datei mit dem Namen "" erstellt avatar_uploader.rb. Ich habe den Inhalt der Datei so bearbeitet, dass er wie folgt aussieht:
"Schienen
app / uploaders / avatar_uploader.rb
Klasse AvatarUploader < CarrierWave::Uploader::Base
umfassen CarrierWave :: MiniMagick
# Wählen Sie aus, welche Art von Speicher für diesen Uploader verwendet werden soll: Speicher: Nebel
# Überschreiben Sie das Verzeichnis, in dem die hochgeladenen Dateien gespeichert werden. # Dies ist eine sinnvolle Standardeinstellung für Uploader, die gemountet werden sollen: def store_dir "uploads / # model.class.to_s.underscore / # mount_as / # model.id" end
# Erstellen Sie verschiedene Versionen Ihrer hochgeladenen Dateien: version: thumb do process: resize_to_fill => [100, 100] end
version: medium do process: resize_to_fill => [300, 300] end
version: small do process: resize_to_fill => [140, 140] end
# Fügen Sie eine weiße Liste der Erweiterungen hinzu, die hochgeladen werden dürfen. # Für Bilder können Sie etwa Folgendes verwenden: def extension_white_list% w (jpg jpeg gif png) end end "
Du brauchst die MiniMagick Zeile, um verschiedene Versionen eines Bildes zu erzeugen. Ich habe drei Versionen von Bildern beigelegt. MiniMagick ermöglicht das Ändern der Größe in diese Version. Der letzte Codeblock stellt sicher, dass keine Dateierweiterungen außer den hier aufgelisteten hochgeladen werden.
Für dieses Tutorial laden wir unsere Bilder zu Amazon Web Services hoch. Wenn Sie noch kein Konto haben, wechseln Sie zur Anmeldeseite und erstellen Sie ein kostenloses Konto.
Wenn Sie damit fertig sind, müssen Sie einen Eimer erstellen, um Ihre Bilder zu speichern. Wenn dort, wählen Sie Eimer erstellen um das Dialogfeld zu öffnen. Geben Sie einen Namen für den Bucket ein und wählen Sie eine Region aus. Wenn Sie fertig sind, wählen Sie Erstellen.
Öffne dein Gemfile und füge dieses Juwel hinzu, und Bundle installieren wenn fertig.
Schienen Edelstein 'Figaro'
Führen Sie von Ihrem Terminal aus Bündel Exec Figaro installieren. Dadurch wird eine neue Datei erstellt config / application.yml und hängen Sie es an Ihre Anwendung an .Gitignore. Sie benötigen diese Datei, um Ihre AWS-Zugriffs-ID und den geheimen Schlüssel sicher zu halten.
Um Ihre AWS-Zugriffs-ID und den geheimen Schlüssel zu finden, rufen Sie Amazon Web Services auf und klicken Sie auf den Namen Ihres Kontos, der sich in der rechten Ecke der Konsole befindet.
Wählen Sie aus der Dropdown-Liste Sicherheitsnachweise, und klicken Sie auf die Fahren Sie mit den Sicherheitsnachweisen fort Taste. Wählen Sie auf der angezeigten Seite Zugangsschlüssel (Zugangsschlüssel-ID und Geheimer Zugangsschlüssel). Klicke auf das Neuen Zugangsschlüssel erstellen Schaltfläche, um einen neuen Schlüssel zu erstellen, und kopieren Sie ihn in einen Editor.
Navigieren Sie in Ihrem Texteditor zu config / application.yml und fügen Sie Folgendes ein:
"Schienen config / application.yml
aws_access_id: Geben Sie hier die access_id ein. aws_access_secret_key: Geben Sie hier den access_key ein. "
Ersetzen Sie die Leitungen wie oben angegeben.
Navigiere zu config / initializers, Erstellen Sie eine Datei mit dem Namen storage.rb, und fügen Sie Folgendes ein:
"Schienen config / initializers / storage.rb
CarrierWave.config do | config | config.storage =: fog config.fog_credentials = provider: 'AWS', aws_access_key_id: ENV ["aws_access_id"], aws_secret_access_key: ENV ["aws_access_secret_key"], region: 'us-west-2' config.fog_direct = tutsplus-avatar ”config.fog_public = falsches Ende"
Gemäß der obigen Konfiguration ist die Region für meinen Eimer us-west-2, und der Name des Eimers lautet tutsplus-avatar. Ersetzen Sie dies durch Informationen zu Ihrem Eimer.
Starten Sie Ihre Schienen-Server und zeigen Sie mit Ihrem Browser auf http: // localhost: 3000 / users / sign_up.
In Ihrer Anwendung möchten Sie möglicherweise einen Standard-Avatar für Benutzer festlegen, die keinen Avatar hochladen möchten. Das ist einfach.
Erstellen Sie einen Ordner in App / Assets / Bilder namens Zurückfallen und legen Sie Ihr Standardbild darin ab. Navigieren Sie mit Ihrem Texteditor zu app / uploaders / avatar_uploader.rb und füge den Code unten ein:
"Schienen app / uploaders / avatar_uploader.rb
def default_url (* args) ActionController :: Base.helpers.asset_path ("fallback /" + [Versionsname, "default-avatar.gif"]. compact.join ('_')) end "
Achten Sie darauf, dass Sie sich ändern default-avatar.gif auf den Namen Ihres Bildes.
Jetzt wissen Sie, wie Sie das Hochladen von Bildern für Ihre Benutzer aktivieren. Dies fügt Ihrer Rails-Anwendung eine wichtige Funktion hinzu. Ich hoffe, Sie hatten Spaß. Im nächsten Teil werden wir uns PaperClip ansehen. Ihr Feedback ist willkommen.
Accentsconagua