Yelp Camp

Yelpcamp -Entwicklungsprozess

Ein Full-Stack-Node.js-Projekt aus meinem Web Dev-Kurs mit erholsamem Routing

Erstes Setup

• Zielseite hinzufügen
• Fügen Sie Campingplätze hinzu, auf der alle Campingplätze aufgeführt sind

Jeder Campingplatz hat:

• Name
• Bild

Layout und grundlegendes Styling

• Erstellen Sie Header- und Fußzeilen -Teilungen
• Fügen Sie Bootstrap hinzu

Neue Campingplätze schaffen

• Setzen Sie die neue Campingplatz -Post -Route ein
• Fügen Sie einen Körper-Parser hinzu
• Setup -Route zur Anzeige von Form
• Fügen Sie eine grundlegende nicht stylierte Form hinzu

Style the Campingplätze Seite

• Fügen Sie einen besseren Header/Titel hinzu
• Machen Sie Campingplätze in einem Netz ausgestellt

Stylen Sie die Navigationsleiste und Form

• Fügen Sie allen Vorlagen eine Navigationsleiste hinzu
• Style die neue Campingplatzform

Mongoose hinzufügen

• Mongoose installieren und konfigurieren
• Setup Campground Model
• Verwenden Sie das Campingplatzmodell in den Routen

Seite anzeigen

• Überprüfen Sie die erholsamen Routen, die wir bisher gesehen haben
• Fügen Sie dem Campingplatzmodell Beschreibung hinzu
• Db.collection.drop () anzeigen
• Fügen Sie eine Show Route/Vorlage hinzu

Refaktor -Mongoose -Code

• Erstellen Sie ein Modelsverzeichnis
• Verwenden Sie Module.exports
• Erfordern Sie alles richtig!

Samendatei hinzufügen

• Fügen Sie eine Seeds.js -Datei hinzu
• Führen Sie die Seeds -Datei jedes Mal aus, wenn der Server startet

Fügen Sie das Kommentarmodell hinzu!

• Machen Sie Kommentarfehler verschwinden!
• Zeigen Sie Kommentare auf der Campingplatz -Show -Seite an

Kommentieren neu/erstellen

• Besprechen Sie verschachtelte Routen
• Fügen Sie den Kommentar neu hinzu und erstellen Sie Routen
• Fügen Sie das neue Kommentarformular hinzu

Style Show -Seite

• Fügen Sie die Seitenleiste hinzu, um die Seite anzuzeigen
• Kommentare schön anzeigen

Seite zum Ausgangsstyling -Show

• Fügen Sie öffentliches Verzeichnis hinzu
• Fügen Sie benutzerdefinierte Stylesheet hinzu

Authentifizierung pt. 1 - Benutzermodell hinzufügen

• Installieren Sie alle für Auth benötigten Pakete
• Benutzermodell definieren

Authentifizierung pt. 2 - Register

• Passpass konfigurieren
• Registerrouten hinzufügen
• Registervorlage hinzufügen

Authentifizierung pt. 3 - Login

• Fügen Sie Anmelderouten hinzu
• Anmeldevorlage hinzufügen

Authentifizierung pt. 4 - Logout/Navi

• Fügen Sie eine Abmelderoute hinzu
• Verhindern, dass der Benutzer einen Kommentar hinzufügt, wenn er nicht angemeldet ist
• Fügen Sie Links zu Navbarl -Links hinzu

Authentifizierung pt. 5 - Links anzeigen/ausblenden

• Auth -Links in Navbars anzeigen/ausblenden

Refactor die Routen

• Verwenden Sie Express -Router, um alle Routen neu zu forragnieren

Benutzer + Kommentare

• Assoziieren Sie Benutzer und Kommentare
• Speichern Sie den Namen des Autors automatisch in einem Kommentar

Benutzer + Campingplätze

• Verhindern Sie, dass ein nicht authentifizierter Benutzer einen Campingplatz erstellt
• Speichern Sie Benutzername+ID auf neu erstellten Campingplatz

Campingplätze bearbeiten

• Methode übertrieben
• Fügen Sie Bearbeitungsroute für Campingplätze hinzu
• Link hinzufügen, um die Seite bearbeiten zu können
• Update -Route hinzufügen

Campingplätze löschen

• Zerstören Sie die Route
• Fügen Sie die Schaltfläche Löschen hinzu

Autorisierung Teil 1: Campingplätze

• Der Benutzer kann nur seine Campingplätze bearbeiten
• Der Benutzer kann nur seine Campingplätze löschen
• Schaltflächen ausblenden/anzeigen bearbeiten und löschen

Kommentare bearbeiten

• Hinzufügen von Bearbeitungsroute für Kommentare
• Schaltfläche Bearbeiten hinzufügen
• Update -Route hinzufügen

Campingground bearbeiten Route:/Campgrounds/: ID/Bearbeiten Kommentar bearbeiten Route:/Campgrounds/: ID/Kommentare/: comment_id/bearbeiten

Kommentare löschen

• Zerstören Sie die Route
• Fügen Sie die Schaltfläche Löschen hinzu

Campingground Zerstören Route:/Campingplätze/: ID Kommentar Zerstören Route:/Campingplätze/: ID/Kommentare/: comment_id

Autorisierungsteil 2: Kommentare

• Der Benutzer kann nur seine Kommentare bearbeiten
• Der Benutzer kann nur seine Kommentare löschen
• Schaltflächen ausblenden/anzeigen bearbeiten und löschen
• Refactor Middleware zu einer einzelnen Datei

Fügen Sie Flash hinzu!

• Demo -Arbeitsversion
• Installieren und konfigurieren Sie Connect-Flash
• Fügen Sie Bootstrap -Warnungen zum Header hinzu

Hinzufügen von dynamischem Preisschild

• Benutzerdefinierten Preis anzeigen
• Neuen oder alten Preis bearbeiten
• Modell für den Campingplatz ändern