Baue Instagram von Ruby on Rails (Teil 1)

Ich werde Sie Schritt für Schritt beim Erlernen von Ruby on Rails durch das Erstellen der Instagram-Anwendung führen.

Foto von Christopher Gower

Was wirst du nach Abschluss dieses Projekts lernen?

  • Wie starte ich eine neue Rails-Anwendung?
  • Design System von Craft
  • Grundlegendes zur MVC-Architektur (Model - View - Controller)
  • Modell: Active Record-Migration, Validierung, Rückruf, Zuordnung und Abfrageschnittstelle
  • Ansicht: Helfer für Layout, Teil- und Formular
  • Controller: Aktionen, starke Parameter
  • Schienenführung
  • Aktiver Speicher zum Hochladen von Dateien
  • Verwenden von Bootstrap, Devise, Kaminari in der Rails-Anwendung

Inhaltsverzeichnis:

  • Tech Stacks
  • Grundlegendes zu MVC in Ruby on Rails.
  • Neue Rails-Anwendung erstellen
  • Verwenden der PostgreSQL-Datenbank und des Bootstraps für unsere Anwendung
  • Anmelden - Anmelden - Abmelden für Benutzer mit Devise gem
  • Benutzerprofilseite erstellen
  • Benutzerprofil bearbeiten / aktualisieren

Tech Stacks

Backend:

  • Ruby 2.4
  • Schienen 5.2.x.
  • Datenbank: Postgres 9.6

Vorderes Ende:

  • HTML, CSS, Javascript, jQuery
  • Bootstrap (3.x oder 4.x)

MVC (Model - View - Controller) in Ruby on Rails

MVC ist ein Architekturmuster einer Softwareanwendung. Diese Architektur ist beliebt für das Entwerfen von Webanwendungen. Es unterteilt eine Anwendung in die folgenden Komponenten:

  • Modelle (Active Record): Daten und Geschäftslogik verarbeiten.
  • Ansichten (ActionView): Behandelt Benutzeroberflächenobjekte und Präsentationen.
  • Controller (ActionController): Zwischen Modell und Ansicht, Benutzereingaben empfangen und entscheiden, was damit geschehen soll.

Anforderungs- / Antwortzyklus in Schienen

Quelle: https://www.codecademy.com
  1. Der Benutzer öffnet seinen Browser, gibt eine URL ein und drückt die Eingabetaste. Wenn ein Benutzer die Eingabetaste drückt, fordert der Browser diese URL an.
  2. Die Anfrage trifft den Rails-Router (config / route.rb).
  3. Der Router ordnet die URL dem richtigen Controller und der richtigen Aktion zu, um die Anforderung zu verarbeiten.
  4. Die Aktion empfängt die Anforderung und fordert das Modell auf, Daten aus der Datenbank abzurufen.
  5. Das Modell gibt eine Liste von Daten an die Controller-Aktion zurück.
  6. Die Controller-Aktion leitet die Daten an die Ansicht weiter.
  7. Die Ansicht rendert die Seite als HTML.
  8. Der Controller sendet den HTML-Code zurück an den Browser. Die Seite wird geladen und der Benutzer sieht sie.

Neue Rails-Anwendung erstellen

Schienen installieren:

Um Rails zu installieren, verwenden wir den von RubyGems bereitgestellten Befehl gem install:

Edelsteinschienen installieren -v 5.2.1

Überprüfen Sie die Rails-Version nach der Installation von Rails:

Schienen - Version
=> Schienen 5.2.1

Wenn etwas wie "Rails 5.2.1" zurückgegeben wird, können Sie mit der Erstellung einer neuen Rails-Anwendung fortfahren.

Installieren Sie PostgreSQL:

Unter Mac OSX: Sie können den PostgreSQL-Server und -Client von Homebrew aus installieren:

brauen installieren postgresql

Starten Sie den Postgresql-Dienst:

Brauservices starten postgresql

Erstellen Sie eine neue Rails-Anwendung

Schienen neues Instagram --version = 5.2.1

Wechseln Sie nach dem Erstellen der Instagram-Anwendung in den entsprechenden Ordner

CD-Instagram

Installieren Sie Gems für unsere Anwendung:

Bundle installieren

Starten des Webservers:

Rails Server

Um die Anwendung anzuzeigen, öffnen Sie Ihren Browser und navigieren Sie zu http: // localhost: 3000 /

Sie sehen die Rails-Standardseite:

Um den Webserver zu stoppen, drücken Sie im Terminal Strg + C.

Homepage erstellen

  • Erstellen Sie einen neuen Controller mit einer Aktion
  • Route hinzufügen

Erstellen Sie den Home-Controller mit der Indexaktion:

Schienen g Controller Home Index

Rails generiert einige Dateien und eine Route für Sie

create app / controller / home_controller.rb route get 'home / index' aufrufen erb erstellen app / views / home erstellen app / views / home / index.html.erb aufrufen test_unit create test / controller / home_controller_test.rb aufrufen helper create app / helpers / home_helper.rb ruft test_unit auf, ruft Assets auf, ruft Kaffee auf, erstellt App / Assets / Javascripts / home.coffee ruft scss auf, erstellt App / Assets / Stylesheets / home.scss

Öffnen Sie die Datei app / views / home / index.html.erb und ersetzen Sie den vorhandenen Code durch den folgenden Code:

Dies ist meine Homepage

Starten Sie den Webserver neu (Strg + C, um den Server zu stoppen, und den Rails-Server, um den Server zu starten) und navigieren Sie in Ihrem Browser zu http: // localhost: 3000 / home / index. Sie sehen die Meldung "Dies ist meine Homepage", die Sie in views / home / index.html.erb eingefügt haben

Öffnen Sie die Datei config / route.rb

Rails.application.routes.draw erhalten 'home / index'
  # Ausführliche Informationen zu DSL in dieser Datei finden Sie unter http://guides.rubyonrails.org/routing.html end

und fügen Sie die Codezeile 'home # index' hinzu. Es sollte ungefähr so ​​aussehen:

Rails.application.routes.draw erhalten 'home / index'
  root to: 'home # index' end

get 'home / index' weist Rails an, Anforderungen an http: // localhost: 3000 / home / index der Indexaktion des Home-Controllers zuzuordnen.

root 'home # index' weist Rails an, Anforderungen an das Stammverzeichnis der Anwendung der Indexaktion des Home-Controllers zuzuordnen.

Starten Sie den Webserver neu und navigieren Sie zu http: // localhost: 3000 /. Die Meldung "Dies ist meine Homepage" wird angezeigt.

Sie können alle aktuellen Anwendungswege anzeigen, indem Sie:

Schienen Routen

Verwenden von PostgreSQL in der Rails-Anwendung

Um die Anwendung PostgreSQL for Rails zu verwenden, fügen wir Gemfile gem 'pg' hinzu

Edelstein 'pg'

Führen Sie die Bundle-Installation aus, um pg gem zu installieren.

Datenbank konfigurieren (config / database.yml)

Standard: & Standardadapter: Postgresql-Pool: <% = ENV.fetch ("RAILS_MAX_THREADS") {5}%> Zeitüberschreitung: 5000
Entwicklung: <<: * Standarddatenbank: development_instagram
test: <<: * Standarddatenbank: test_instagram
Produktion: <<: * Standarddatenbank: Produktion_Instagram

Weitere Details: http://guides.rubyonrails.org/configuring.html#configuring-a-database

Datenbank erstellen

Verwenden des Migrationsbefehls zum Erstellen einer Datenbank für die Anwendung.

Schienen db: erstellen
>> Datenbank 'development_instagram' erstellt >> Datenbank 'test_instagram' erstellt

Installieren der Bootstrap for Rails-Anwendung

Bootstrap ist ein Open Source Toolkit für die Entwicklung mit HTML, CSS und JS. Mit unseren Sass-Variablen und -Mixins, dem responsiven Grid-System, umfangreichen vorgefertigten Komponenten und leistungsstarken Plugins, die auf jQuery basieren, können wir Ihre Ideen schnell prototypisieren oder Ihre gesamte App erstellen.

Um Bootstrap in die Rails-Anwendung zu integrieren, verwenden wir gem bootstrap-rubygem (Bootstrap 4 Ruby Gem für Rails).

Fügen Sie Ihrem Gemfile Bootstrap hinzu:

Edelstein 'Bootstrap', '~> 4.1.1'

Führen Sie die Bundle-Installation aus, um Bootstrap Gem zu installieren, und starten Sie Ihren Server neu, um die Dateien über die Pipeline verfügbar zu machen.

Konfigurieren Sie auf application.css (app / assets / stylesheets / application.css).

  • Benennen Sie application.css in application.scss um
  • Entfernen Sie dann alle Anweisungen * = require und * = require_tree aus der Sass-Datei. Verwenden Sie stattdessen @import, um Sass-Dateien zu importieren.
  • Importieren Sie Bootstrap-Stile in application.scss:
@import "bootstrap";

Konfigurieren Sie auf application.js

Bootstrap JavaScript hängt von jQuery ab. Da wir Rails 5.1+ verwenden, fügen Sie den Edelstein jquery-Rails zu Ihrer Gemfile hinzu:

Edelstein 'Jquery-Rails'

Fügen Sie Ihrer application.js Bootstrap-Abhängigkeiten und Bootstrap hinzu

// = erfordert jquery3 // = erfordert popper // = erfordert bootstrap

Layout-Anwendung

Ich werde unsere Layout-Anwendung in drei Hauptteile strukturieren:

  • Navigationsleiste
  • Hauptinhalt
  • Fusszeile

wie unten Bild:

Schienen verwenden die Standardlayoutdatei: app / views / layouts / application.html.erb

Fügen Sie HTML-Code zum Layout hinzu (/layouts/application.html.erb):

Verwenden von Awesome Icon

Wir verwenden einige Symbole für unsere Anwendung von Font Awesome Icon. Um dieses Symbol einfach verwenden zu können, sollten wir in der Lage sein, font-awesome-Rails Gem zu installieren.

Fügen Sie dies Ihrem Gemfile hinzu:

Edelstein 'font-awesome-Rails'

und führen Sie die Bundle-Installation aus.

Importieren Sie font-awesome in die Datei application.scss:

@import "font-awesome";

CSS-Code für das Layout (application.scss)

Benutzer: Anmelden - Anmelden - Abmelden

In diesem Abschnitt verwenden wir devise gem, um Anmelde-, Anmelde- und Abmeldefunktionen für Benutzer zu erstellen.

Devise ist eine flexible Authentifizierungslösung für Rails.

Es besteht aus 10 Modulen:

  • Datenbankauthentifizierbar: Hasht und speichert ein Kennwort in der Datenbank, um die Authentizität eines Benutzers während der Anmeldung zu überprüfen. Die Authentifizierung kann sowohl über POST-Anforderungen als auch über die HTTP-Basisauthentifizierung erfolgen.
  • Omniauthable: Fügt OmniAuth-Unterstützung hinzu.
  • Bestätigbar: Sendet E-Mails mit Bestätigungsanweisungen und überprüft, ob ein Konto bereits bei der Anmeldung bestätigt wurde.
  • Wiederherstellbar: Setzt das Benutzerkennwort zurück und sendet Anweisungen zum Zurücksetzen.
  • Registrierbar: Erledigt die Anmeldung von Benutzern über einen Registrierungsprozess und ermöglicht ihnen auch, ihr Konto zu bearbeiten und zu zerstören.
  • Erinnerbar: Verwaltet das Generieren und Löschen eines Tokens zum Speichern des Benutzers aus einem gespeicherten Cookie.
  • Verfolgbar: Verfolgt die Anzahl der Anmeldungen, Zeitstempel und die IP-Adresse.
  • Zeitüberschreitung: Läuft Sitzungen ab, die in einem bestimmten Zeitraum nicht aktiv waren.
  • Validierbar: Bietet Validierungen von E-Mail und Passwort. Es ist optional und kann angepasst werden, sodass Sie Ihre eigenen Validierungen definieren können.
  • Sperrbar: Sperrt ein Konto nach einer bestimmten Anzahl fehlgeschlagener Anmeldeversuche. Kann per E-Mail oder nach einem bestimmten Zeitraum entsperren.

Installieren von Devise Gem

Fügen Sie dies Ihrem Gemfile hinzu:

Edelstein "erfinden"

Führen Sie dann die Bundle-Installation aus.

Als nächstes müssen Sie den Generator laufen lassen:

Schienen erzeugen Gerät: installieren

Es werden automatisch 2 Dateien generiert:

  • config / initializers / devise.rb
  • config / locales / devise.en.yml

Richten Sie die Standard-URL-Optionen für den Devise-Mailer ein

In der Entwicklungsumgebung: (config / environment / development.rb)

config.action_mailer.default_url_options = {Host: 'localhost', Port: 3000}

In der Produktionsumgebung :: Host sollte auf den tatsächlichen Host Ihrer Anwendung eingestellt sein.

Benutzermodell generieren

Schienen generieren Gerät Benutzeraufruf active_record create db / migrate / 20180722043305_devise_create_users.rb create app / models / user.rb Aufruf test_unit create test / models / user_test.rb create test / fixtures / users.yml insert app / models / user.rb route devise_for : Benutzer

Nach dem Ausführen des Befehls wird eine Dateimigration generiert, um einen Benutzer zu erstellen. Eine Datei in app / models lautet user.rb. Fügen Sie Routen für Benutzer und Testdatei hinzu.

Öffnen Sie die Benutzermodelldatei (app / models / user.rb). Sie können sehen, dass Standardmodule im Benutzermodell enthalten sind.

Gerät: database_authenticatable ,: registrierbar ,: wiederherstellbar ,: erinnerbar ,: verfolgbar ,: validierbar

Führen Sie dann die Schienen db: migrate aus

Sie sollten Ihre Anwendung neu starten, nachdem Sie die Konfigurationsoptionen von Devise geändert haben (dies schließt das Stoppen der Feder ein). Andernfalls treten seltsame Fehler auf, z. B. wenn Benutzer sich nicht anmelden können und Helfer nicht definiert sind.

Hinzufügen von Anmelde- / Abmeldelinks

Fügen Sie rechts in der Navigationsleiste die Links sign_in und sign_out wie folgt hinzu:

Ersetzen Sie den HTML-Code im Layout (application.html.erb):

durch

  • user_signed_in? ist ein Entwicklungshelfer, mit dem überprüft werden kann, ob ein Benutzer angemeldet ist.
  • destroy_user_session_path: Abmeldepfad, Methode :: delete ist die Standard-HTTP-Methode zum Abmelden einer Ressource (Benutzer)
  • new_user_session_path: Anmeldepfad.

Wenn Sie auf das Symbol klicken, um sich anzumelden, wird die Ansicht folgendermaßen angezeigt:

Anmeldeansicht

Bevor Sie sich jedoch anmelden können, müssen Sie ein neues Konto erstellen, indem Sie auf den Uplink unter der Schaltfläche Anmelden klicken.

Die Anmeldeseitenansicht:

Anmeldeansicht

Sie können sich anmelden, indem Sie Ihre E-Mail-Adresse und Ihr Passwort eingeben und sich dann erneut bei der Anwendung anmelden.

Wenn Sie sich erfolgreich angemeldet haben, wird die Symbolanmeldung durch den Symbolbenutzer in der Navigationsleiste ersetzt. Und wenn Sie auf icon-user klicken, werden Sie abgemeldet.

Benutzerprofilseite erstellen

Fügen Sie dem Benutzer Spalten hinzu

Die Benutzertabelle enthält Spalten: Benutzername, Name, E-Mail, Passwort, Website, Bio, Telefon, Geschlecht. Benutzer haben bereits E-Mail- und Kennwortspalten. Jetzt fügen wir mithilfe der Migration weitere Felder hinzu:

Schienen g Migration AddMoreFieldsToUsers Benutzername: Zeichenfolge Name: Zeichenfolge Website: Zeichenfolge Bio: Text Telefon: Ganzzahl Geschlecht: Zeichenfolge

Führen Sie die Migration aus:

Schienen db: migrieren
== 20180813140820 AddMoreFieldsToUsers: Migration =============================
- add_column (: users ,: username ,: string)
-> 0,0333 s
- add_column (: Benutzer ,: Name ,: Zeichenfolge)
-> 0,0006s
== 20180813140820 AddMoreFieldsToUsers: migriert (0.0363s) ====================

Benutzercontroller erstellen

Um eine Benutzerprofilseite zu erstellen, müssen wir im ersten Schritt einen Controller namens UsersController mit diesem Befehl erstellen:

Schienen erzeugen Controller-Benutzer

Öffnen Sie die Datei app / controller / users_controller.rb im Editor und sehen Sie den Code so

Klasse UsersController 

Fügen Sie im nächsten Schritt eine Show-Aktion zu UsersController hinzu

Klasse UsersController 

Erstellen Sie dann eine entsprechende Ansicht: app / views / users / show.html.erb

Fügen Sie schließlich show action zu routen hinzu (config / routen.rb)

Rails.application.routes.draw tun
  ...
  Ressourcen: Benutzer, nur: [: show]
Ende

Ressourcen: Benutzer, nur: [: show] weist Rails an, Anforderungen an http: // localhost: 3000 / users /: id der show-Aktion des Benutzercontrollers zuzuordnen, wobei: id die ID des aktuellen Benutzers ist. Wenn die ID des aktuellen Benutzers 1 ist, lautet der Pfadpunkt zur Benutzerprofilseite http: // localhost: 3000 / users / 1

Aktualisieren Sie den Link zum Benutzerprofil in der Navigationsleiste

Navigationsleiste

Ersetzen Sie den Abmeldelink rechts in der Navigationsleiste durch den Link zum Benutzerprofil. Das heißt, wenn der Benutzer auf das Benutzersymbol klickt, wird die Benutzerprofilseite aufgerufen. Nach dem Update folgender HTML-Code:

<% wenn user_signed_in? %> ”> <% else%> ”> <% end%>

Erstellen Sie eine Benutzeroberfläche für die Benutzerprofilseite

Ich gestalte die Benutzerprofilseite in zwei Abschnitte: Grundlegende Informationen und Beiträge.

  • Grundlegende Informationen: Enthält Avatar, Benutzername, Name, Beiträge, Follower, Folgendes.
  • Beiträge: Enthält Bilder des Benutzers.

Abschnitt 1: Grundlegende Informationen des Benutzers

Mockup for Basic Information Abschnitt

Dieser Abschnitt ist in 2 Spalten unterteilt:

  • Die linke Spalte ist der Avatar des Benutzers.
  • Die rechte Spalte enthält weitere Informationen des Benutzers.

Ich verwende Zeilen und Spalten für das Layout. HTML-Code sieht folgendermaßen aus:

# app / views / users / show.html.erb
  

Da wir für einige Benutzerinformationen keine Daten wie Name, Anzahl der Beiträge, Follower, Follower und Bilder haben, verwende ich vorübergehend gefälschte Daten, um zuerst die Benutzeroberfläche zu erstellen, und werde sie später aktualisieren.

Nach dem Hinzufügen weiterer Komponenten in diesem Abschnitt sieht der HTML-Code folgendermaßen aus:

CSS für diese Ansicht: Ich erstelle die Datei Assets / Stylesheets / users.scss, die Stile für diese Seite enthält, und importiere sie in die Datei application.scss.

@import "Benutzer";

Fügen Sie der Datei users.scss den folgenden CSS-Code hinzu

Die Ansicht sieht aus wie:

Abschnitt 1: Grundlegende Informationen des Benutzers

Abschnitt 2: Beiträge des Benutzers

Fügen Sie 4 Registerkarten hinzu: POSTS, IGTV, SAVED, TAGGED wie im folgenden Bild:

POSTS IGTV GERETTET TAGGED

Fügen Sie users.scss mehr Stilcode hinzu:

.user-tabs {border-top: 1px solid #efefef; Anzeige: flex; Rechtfertigungsinhalt: Mitte;
a.tab {Höhe: 35px; Rand rechts: 50px; Zeilenhöhe: 45px; Farbe: # 999; Schriftgröße: 12px; Schriftgröße: 500; Textausrichtung: Mitte; i {rechts auffüllen: 1px; } &: hover {Textdekoration: keine; }} a.active {border-top: 1px solid # 262626; Farbe: # 262626; }}

Im Bildbereich: In jeder Zeile dieses Abschnitts werden 3 Bilder wie folgt angezeigt:

HTML Quelltext:

Ich verwende die CSS-Flexbox-Technik, um diese Bilder zu gestalten. Sie können sehen, wie sie im CSS-Code verwendet werden:

.user-images {display: flex; Flex-Wrap: Wrap; Inhalt rechtfertigen: Zwischenraum; Rand: 0 20px;
.wrapper {width: 280px; Höhe: 280px; Rand: 15px; img {width: 100%; Randradius: 4%; }}}

Schließlich sieht die Benutzerprofilseite folgendermaßen aus:

Benutzerprofilseite

Ja, sieh großartig aus! Wir haben eine Benutzerprofilseite erstellt. Im nächsten Schritt fügen wir eine Bearbeitungsprofilseite für den Benutzer hinzu.

Benutzer bearbeiten / aktualisieren

Der Ablauf zum Erstellen der Seite "Profil bearbeiten" umfasst 4 Hauptschritte:

  • Schritt 1: Profilseite hinzufügen hinzufügen
  • Schritt 2: Layout Profilseite bearbeiten
  • Schritt 3: Fügen Sie links auf der Seite Navigationslinks hinzu
  • Schritt 4: Fügen Sie rechts auf der Seite ein Formularbearbeitungsprofil hinzu.

Benutzeroberfläche der Seite "Profil bearbeiten":

Profilseite bearbeiten

Schritt 1: Profilseite hinzufügen hinzufügen

Im ersten Schritt fügen wir eine Aktion hinzu, deren Name in UsersController bearbeitet wird

Klasse UsersController 
def bearbeiten
Ende Ende

Erstellen Sie dann eine entsprechende Ansicht unter app / views / users / edit.html.erb

Fügen Sie als Nächstes den Routen eine Bearbeitungsaktion hinzu:

Ressourcen: Benutzer, nur: [: show ,: edit]

Sie können den Pfad der Seite zum Bearbeiten des Profils nach dem Befehl type anzeigen:

Rechenrouten ... ... edit_user GET /users/:id/edit(.:format) Benutzer # bearbeiten

Ressourcen: Benutzer, nur: [... ,: Bearbeiten] Weist Rails an, Anforderungen an http: // localhost: 3000 / users /: id / edit der Bearbeitungsaktion des Benutzercontrollers zuzuordnen.

Hinzufügen eines Linkbearbeitungsprofils zur Schaltfläche Profil bearbeiten auf der Benutzerprofilseite:

current_user ist ein Entwicklungshelfer, der aktuelle Benutzer ist angemeldet.

Schritt 2: Layout Profilseite bearbeiten

Wir gestalten die Profilseite mit 2 Spalten bearbeiten: Die linke Spalte enthält Aktionen und die rechte Spalte enthält entsprechende Details.

Das Layout der Profilseite bearbeiten.

HTML Quelltext:

CSS-Code: Ich verwende die Flex-Technik für das Layout

.user-edit-page {Anzeige: flex; Rand oben: 60px; Mindesthöhe: 500px; .actions {width: 220px; Rand: 1px fest #dbdbdb; } .details {flex: 1; Rand: 1px fest #dbdbdb; Rand links: keine; }}

Schritt 3: Fügen Sie links auf der Seite eine Navigation hinzu

In diesem Abschnitt verwenden wir Navigationskomponenten von Bootstrap 4 mit vertikalen Pillen. Siehe HTML-Code unten:

Abschnitt CSS für Aktionen:

.actions {width: 220px; Rand: 1px fest #dbdbdb;
.nav-link {Schriftgröße: 14px; Hintergrundfarbe: weiß; Farbe schwarz; Randradius: 0; Polsterung: 12px 0 12px 30px; &: hover {Cursor: Zeiger; }} .nav-pills .nav-link.active {border-left: 2px solid; Schriftgröße: 600; }}

Jetzt sieht die Benutzeroberfläche so aus:

Die Seite Links von Profil bearbeiten

Schritt 4: Fügen Sie rechts auf der Seite einen Benutzer zum Bearbeiten des Formulars hinzu

Fügen Sie einen Zeilencode hinzu, um den aktuellen Benutzer zum Bearbeiten der Aktion in users_controller.rb zu finden

def edit @user = User.find (params [: id]) end

Fügen Sie in der rechten Spalte ein Formular hinzu, um den aktuellen Benutzer zu aktualisieren. Wir verwenden form_with helper of Rails, um ein Formular zu generieren.

Formular bearbeiten Benutzer wie folgt:

CSS der Form:

.form-edit-user {Auffüllen: 30px 100px 10px 50px;
.form-group, input {Schriftgröße: 14px; Farbe schwarz; } input, textarea {border: 1px solid #efefef; } .col-form-label {text-align: right; Schriftgröße: 600; }}
.avatar {Höhe: 38px; Breite: 38px; Randradius: 50%; } .username {Schriftgröße: 20px; Zeilenhöhe: 22px; Rand-unten: 0; } .change-photo {color: # 3897f0; Textdekoration: keine; Schriftgröße: 13px; } input [type = 'submit'] {Farbe: weiß; }}

Die Benutzeroberfläche des Formulars sieht folgendermaßen aus:

Wenn Sie Informationen in das Formular eingeben und auf die Schaltfläche "Senden" klicken, um den Aktualisierungsbenutzer zu verarbeiten, wird der Fehler angezeigt, dass keine Routen übereinstimmen:

Ein Fehler tritt auf, weil wir die Aktualisierungsroute zum Benutzer noch nicht definiert haben. Jetzt müssen wir der Route.rb aktualisierte Benutzerrouten hinzufügen

Ressourcen: Benutzer, nur: [: show ,: edit ,: update]

Füllen Sie das Formular aus und senden Sie es erneut. Es sollte ein Familienfehler angezeigt werden:

Das Aktionsupdate konnte nicht gefunden werden, daher müssen wir in UserController folgende Aktualisierungsaktion erstellen:

def update current_user.update (params [: user]) redirect_to current_user end

In der Aktualisierungsaktion aktualisieren wir den aktuellen Benutzer basierend auf Parametern, die beim Bearbeiten des Formulars ausgefüllt wurden. current_user ist der aktuell angemeldete Benutzer.

Versuchen Sie es erneut, oop! Sie erhalten eine Fehlermeldung wie folgt:

Fehler bei verbotenen Attributen

Rails unterstützen einige Funktionen, mit denen wir sichere Anwendungen schreiben können. Dieser wird als starke Parameter bezeichnet, bei denen wir definieren müssen, welche Parameter in unseren Controller-Aktionen zulässig sind. Wir müssen unsere Parameter auf die Whitelist setzen, um eine fehlerhafte Massenzuweisung zu verhindern.

Um ForbiddenAttributesError zu beheben, müssen wir vor dem Aktualisieren des Benutzers starke Parameter verwenden.

Um in unserem Fall starke Parameter zu verwenden, verwenden wir folgende Methoden zum Erfordernis und Zulassen:

params.require (: user) .permit (: Benutzername ,: Name ,: Website ,: Bio ,: E-Mail ,: Telefon ,: Geschlecht)

Das heißt, wir erlauben Benutzername, Name, Website, Bio, E-Mail, Telefon und Geschlecht Parameter für die gültigen Parameter. Die Aktualisierungsaktion sieht nun folgendermaßen aus:

def update current_user.update (user_params) redirect_to current_user end
Privat
def user_params params.require (: user) .permit (: username ,: name ,: website ,: bio ,: email ,: phone ,: gender) end

Kehren Sie nun zur Formularbearbeitung zurück und senden Sie das Update erneut. Es funktioniert! Nach erfolgreicher Aktualisierung des Benutzers wird zur Benutzerprofilseite weitergeleitet.

Um die Änderung nach dem Aktualisieren der Benutzerinformationen leicht zu erkennen, sollten wir zur Benutzerprofilseite (users / show.html.erb) zurückkehren, um einige gefälschte Daten durch echte Benutzerdaten zu ersetzen.

Aktualisieren Sie den HTML-Code folgendermaßen:

<% = current_user.username%> ...
  ...
<% = aktueller_Benutzername%> <% = link_to current_user.website, current_user.website, Klasse: 'website'%>

Fazit

In diesem Artikel helfe ich Ihnen Schritt für Schritt, wie Sie eine neue Rails-Anwendung mit PostgreSQL und Bootstrap erstellen. Grundlegendes zu MVC in Rails. Verwenden von Devise Gem zum Erstellen von Authentifizierungsfunktionen. Erstellen Sie Funktionen zum Anzeigen und Aktualisieren des Benutzerprofils.

Im nächsten Artikel werde ich Ihnen Einzelheiten über Active Record (CRUD, Validation, Association), Active Storage-Funktion und die Verwendung von Kaminari Gem in der Paginierung mitteilen.

Vollständiger Code für Github: https://github.com/thanhluanuit/instuigram

Zusammenhängende Posts:

  • Teil 2: medium.com/luanotes/build-instagram-by-ruby-on-rails-part-2
  • Teil 3: medium.com/luanotes/build-instagram-by-ruby-on-rails-part-3

Verweise:

  • Führungsschienen: https://guides.rubyonrails.org/
  • Bootstrap: http://getbootstrap.com/
  • Entwickeln Sie ein Juwel: https://github.com/plataformatec/devise
  • https://www.codecademy.com/articles/request-response-cycle-dynamic