Blog mit React und JSON Server erstellen

1. Einführung: Hallo meine Freunde. Willkommen zu diesem Kurs , in dem wir lernen werden. Wir können die Blogging-Website der Haarzwiebel löschen. Und Jason sagte, mein Name ist Tony Traditional und ich werde in diesem Kurs eingeschränkt sein. In diesem Kurs werden wir sehen, wie wir diese schöne Blogging-Website mit Hilfe von Objekten, Reaktanten und Gattern erstellen können diese schöne Blogging-Website mit Hilfe von Objekten, , anstatt ein dieser Anwendung ist kein Back-End beteiligt. Dieser Code ist also im Großen und Ganzen ein Designteil, aber kein Entwickler für Schlafsäle, irgendeine Art von Hintergrundwissen. Lassen Sie uns also eine kurze Demo dieser Blogging-Anwendung machen, die wir in diesem Kurs mit der reaktanten Verteidigungsseite des Health Bot erstellen werden. Derzeit werfen wir einen Fünf-Block-Vorteil. Und wenn Sie nach unten scrollen, können Sie sehen, dass wir eine Seitenemission pro Klick oder negativ haben . Sie werden die nächsten fünf Block sehen. Aber im Moment haben wir neun Blöcke in der Vervielfältigung. Es wird also nur für den Blog angezeigt Klicken Sie auf Vorschau, Sie kehren zur Homepage zurück. Wir haben uns jemals beide Abschnitte angeschaut. Wo erklären wir das Leben für deinen Blog? Wir haben eine kardiale Lebendlast, also haben wir einen Carnegie-ähnlichen Antrieb, der sicher ist, dass sein Board ist. Und wenn Sie kritisch auf einen klicken, wird dies besonders in der Reihenfolge herausgefiltert. Aber Sie können sehen, dass wir für diese spezielle Person keinen Blog haben, für den wir blockieren müssen oder Sie müssen suchen. Auf diese Weise können Sie auch den Audioblock beenden , okay? Nun, in diesem Fall werden wir alle Blöcke herausholen, die wir noch nicht zehntes Silber haben. Sehen wir uns nun die richtige Region dieser Blogging-Anwendung an. Aber zuerst füge ich noch einen Blog hinzu, und ich werde ihm diese Verzögerung geben. Blog, die Demo. Ich füge sie eine lange Beschreibung ein. Ich füge das sofort hinzu. Sie können sehen, dass Methoden Bild von geladen statistisch betrachtet werden. Wir werden eine Kategorie wie Mode auswählen. Und klicken wir auf Hinzufügen. Dieser Blog wird vollständig erkannt. Sie können sehen, dass wir hier wie eine dekorative Block-Demo haben. Sie können dort unter Brief für Abschnitt sehen. Und um fortzufahren, bloggt es diese Guard-Komponente. Dann musst du auf Weiter klicken. Du kannst sehen, dass dieses Bloggen und es hier rüber bringt. Wir haben unseren kreativen Block. Jetzt können wir auch einen Block löschen. Lassen Sie uns den Löschvorgang durchführen. Klicken Sie auf dieses Icon. Dieser Blog wird verwässert. Wir haben den Board-Methodenblock technisch verdünnt. Sie können den verschiedenen Block auch aktualisieren. Lasst uns das also aktualisieren. Fangen wir mit dem Board-Blog-Update an. Sie können das Image hier nicht aktualisieren. Sie können die Beschreibung aktualisieren und lassen Sie uns diese besonders aktualisieren. Sie können sehen, dass unser Blog normalerweise auch aktualisiert wird. Und wir haben auch eine dritte Funktionalität in dieser Anwendung. Sie können es auch die Blöcke festlegen. Ich setze es so ein, dass es mit dem taktischen Keyword bloggt. Und wenn du auf Set klickst, kommst du raus, das ist Block mit diesem gegeben. Und wenn Sie auf dieses Kreuz klicken, erhalten Sie einen Backhaul-Block , den wir in unseren UND-Toren haben, anstatt dass wir auch einen Timperley Boardfüße haben. Wir haben auch nicht formtauglich, wenn es nicht paart. Ich werde auch erfahren, dass wenn die Daten eine normale Route sind, übereinstimmen. Wir haben auch ein Detail über diese Anwendung, klicken Sie auf Lesemodus. Sie werden niemals zur Detailseite dieses bestimmten Blocks gelangen. Und wenn es abgekühlt ist, können Sie sehen, dass wir eine Beschreibung haben. Wir haben auch mit diesem speziellen Blog verwandt. Von hier aus können Sie auch durch Schmutz navigieren, ist das detaillierte Blockbit. Wenn Sie also auf diese Kartenkomponente klicken, navigieren Sie zu diesem neuen Vertreter bestimmten Blocks. Wenn Sie auf Zurück klicken, navigieren Sie normalerweise zurück zur Homepage. Die Gesamtanwendung, die wir in diesem Kurs mit dem Helfer und der anderen Serveranwendung erstellen werden. Es ist kein Back-End beteiligt. Wir werden nur in GitHub verwendet. Der Server wird all diese Funktionen implementieren. Sie können feststellen, dass dieser Code für einen Content-Entwickler entwickelt wurde. Habe kein nicht-tödliches Back-End. Weil wir all diese Kinder wie 13 Degeneration implementieren werden , filtern Sie das Hinzufügen, Erstellen, Löschen und Hochladen mit j sine Theta. Aber nur in dieser React-Anwendung über die Anwendung , dass wir diesen Code mit React n GSM erstellen werden, beheben Sie das. Aber jetzt sprechen wir über die grundlegenden Anforderungen, bevor Sie sich für Discord anmelden. Dieser Kurs ist in der Tat von einem Deck konzipiert. Jeder kann an diesem Kurs teilnehmen, Direktor Charakter, um zu lernen, wie man eine Website mit der Eigenschaft Health erneut erstellt UND Gates Sie müssen nur ein grundlegendes Verständnis von HTML, CSS, JavaScript haben. als Reagieren Sie Basiswissen. Dann zitiert Ärzte, Sie werden Polen darüber haben, wie Sie mit Hilfe von JSON eine Blogging-Website erstellen können. Worauf warten Sie also und führen diesen Code aus, um zu lernen, wie Sie Entwicklung klar entwickeln, reflektieren Sie mit der Leiter prof, reaktanten Seite. Und wenn Sie einen Vorschlag für eine Abfrageleiste haben, können Sie sich jederzeit an mich wenden. Ich werde mein Bestes geben , um Ihre Abfrage zu lösen. Von meinem Ende sehe ich Sie im Kursbereich. 2. Umgebungseinstellung: In diesem Video werde ich besprechen, welche Tools und Software erforderlich sind , um an diesem Projekt zu arbeiten. In diesem Projekt werde ich den Visual Studio Code-Editor verwenden , um unseren Code zu schreiben. Stellen Sie also sicher, dass Sie diesen kognitiven Ursprung nennen , damit Sie diesen Motivursprung herunterladen können. Ich habe das schon heruntergeladen. Und das nächste, was wir brauchen, um hier auch den Knoten j zu installieren , um hier einen Entwicklungsserver für Reaktanten zu haben. Und neben der Anmerkung erhalten Sie einen npm-Paketmanager, um die Abhängigkeit zu installieren und sicherzustellen, dass Sie den Knoten installieren? Ja. Lasst uns eins machen. Ich glaube, das war's. Das ist alles für dieses Projekt erforderlich. Jetzt hoffe ich, dass Sie sowohl den Knoten J als auch den Visual Studio-Code-Editor in Ihrem System installiert haben . Und Sie können überprüfen , ob der Knoten JS auf Ihrem System installiert ist oder nicht. Sie können also zum CMD gehen, öffnen, meine AMD öffnen, und Sie können hier einen Befehl ausführen , Node Bindestrich v. Sie erhalten den Ursprungsknoten , den der Knoten JS auf dem Seitenbegriff angegeben hat. Gehen wir nun zu dem Visual Studio-Code, der in unseren Visual Studio-Code werfen muss in unseren Visual Studio-Code werfen um unsere Entwicklungs-DG zu erstellen. Leute, ich habe meinen visuell geöffnet, wenn du Code machst und wir müssen thermische Spannungen installieren. Diese Spannung wird wie die erste Einheit sein , die diese Klammerluft installiert. Grundsätzlich wird es Ihre öffnende und schließende Klammer einfärben . Und ich habe schon installiert , um diese Actins zu installieren , und so kannst du die Dissektionen verletzen und wie hier, Klammer hier. Auf diese Weise können Sie diesen installieren. Gerichtete Sonnenlicht-Einheit, um diese zu installieren. Das ist Snippet, ein Snippet an. Helfen Sie uns also mythisch, eine Reaktanz zu generieren , ist Snippet wie wenn Sie eine funktionale Komponente schreiben möchten , dann müssen Sie einfach RAFs schreiben. Es wird wöchentliche Agenda funktional sein, eine Komponente. Es ist sehr nützlich, mit Hilfe dieser Aufmerksamkeit einige Reaktanten Lipid zu erzeugen . Die andere Sache, die wir wie dieses Angebot installieren müssen , ist zulässig. Sie können dieses auch installieren um unser Board zu treffen. Das war's. Nur so viel Transient ist in unserem Visual Studio-Code erforderlich. Wir sehen uns im nächsten Video, in dem ich mit der Einrichtung des React JS-Projekts beginnen werde. 3. Set-up Projekt: Leute, jetzt bin ich in diesem Verzeichnis und öffne hier eine Eingabeaufforderung. Öffnen wir eine Eingabeaufforderung. Ich erstelle eine React-Anwendung mit dem Befehl und wähle Create, React App und die App React JSON Block aus. Dies wird unser App-Name sein. Lasst uns Enter drücken. Es dauert etwa zwei bis drei Minuten, um alle erforderlichen Abhängigkeiten zu installieren. Ich komme einmal die ganze Abhängigkeit zurück. Also Leute, unser Projekt-Setup wurde abgeschlossen. Gehen wir nun zuerst in dieses Verzeichnis, das reagiert, JSON, Blob. Jetzt sind wir in dieser Einführung, bevor wir npm starten, wenn IT einige Pakete installiert. Wir werden mit dem React Router Dom arbeiten. Lassen Sie uns dieses Paket installieren. Reagieren Sie den Router nach unten der Achse, die wir verwenden werden. Dann verwenden wir React, um die Toastbenachrichtigung zu zertifizieren oder anzuzeigen . Wenn es dann zu groß ist, reagiert IMDB UI. Das weil wir auch mit dem Materialdesign arbeiten werden , das beide in diesem Projekt gefangen ist, um unsere Komponente zu bauen. Lassen Sie uns diese Pakete installieren. Und inzwischen habe ich dieses Projekt bereits in meinem Visual Studio-Code geöffnet . Lasst uns in den VS-Code gehen. Wie Sie sehen können, ist dieses Projekt in meinem Visual Studio-Code geöffnet. Lassen Sie uns alle unerwünschten Inhalte entfernen , die wir in unserer Datei app.js haben. Ich gebe hier nur eine Überschrift. Blog. Lasst uns diese 1 zuerst entfernen. Und wir brauchen diese Textdatei nicht. Lasst uns das auch entfernen. Lassen Sie uns diesen Logopunkt auch als SVG-Datei entfernen. Lassen Sie uns nun prüfen, ob unsere Paketkoordinate dies mitgeteilt hat oder nicht. Unser Paket-Button. Lassen Sie uns machen und demonstrieren und warten die Anwendung in den Browser geladen wird. Anwendung wird ohne Probleme in den Browser geladen. 4. JSON Server einrichten: Also das nächste, was wir tun müssen, also richte ich hier unseren JSON-Server ein. Also werde ich eine Datei im Root erstellen, das ist db.json-Datei. Und hier werden wir einen Blogs haben , weil wir alle Bloggen haben werden. Lassen Sie uns einfach, sagen wir jetzt beides, diese Ära, denn wir werden diesen ganzen Blog in diesem Array speichern. Jetzt müssen wir schreiben, dass einer gecribbt ist, um unseren JSON-Server zu starten. Also gehe ich zum Skript Seite 20, um das zu starten. Und JSON-Server. Ich habe gerade dieses Skript eingefügt. Um den JSON-Server zu starten. Wir haben unsere axiale MDB, reagieren UI Create, React Router, Diamantreaktor. Nur diese vier Pakete sind erforderlich, um an unserer Blog-Anwendung zu arbeiten. 5. Ordnerstruktur: Als Nächstes, was wir tun müssen, werde ich hier einen Ordner erstellen. Zunächst werden nur wenige Komponenten sein, die alle Komponenten in diesem Ordner abgelegt werden. Der zweite Ordner, wir werden Seiten haben. Ich erstelle eine Datei in diesem PDF-Ordner. Wir werden wie unsere Homepage haben, Home Dot gs. Dann haben wir unsere Blog-Seite. Wir werden also dieselbe Seite verwenden, aber den neuen Block hinzufügen oder den Adjektivblock aktualisieren. Die nächste Datei, die wir haben werden life blog.js. So können wir den einzelnen Blog auch auf einer separaten Seite ansehen. Die Akten, die Sie nicht gebildet haben werden. Wir werden also auch keine Finanzierungsmethode durchführen, wenn die URL nicht übereinstimmt. Die anderen Dateien, über die wir noch eine haben werden. Es enthält nur einige grundlegende Informationen zu dieser Anwendung. 6. MDB in unserer App konfigurieren: Das nächste, was wir tun müssen, also konfiguriere ich zuerst unser Material , konfiguriere ich zuerst unser Material Bootstrap in dieser Anwendung hinzuzufügen. Gehen wir also auf die offizielle Website des Materialdesign Bootstrap. Klicken wir auf Loslegen. Was müssen wir hier machen? Lass uns einfach runterkommen. Zuerst. Wir müssen diese CSS-Datei importieren um das Styling der Materialbootsfahrt in unserer Anwendung anzuwenden . Also, als es Seite nahm Das ist wichtige Aussage in dieser Indexpunkt-JS-Datei. Hier müssen wir bezahlen. Als Nächstes, was wir tun müssen, werden wir auch dieses Font Awesome Icon verwenden. Kopieren wir das einfach. Und fügen wir es hier in diese index.html ein. Und wir werden auch mit diesem Rover-Font-Styling arbeiten. Lassen Sie uns das auch kopieren. Lasst es uns einfach hier einfügen. Im dritten ist Public Folder. Ich lege meine Bilder ein. Okay? Ich bringe die Bilder rein. Drittens ist Public Folder. Also habe ich einfach unseren Bilderordner in diesen öffentlichen Ordner eingefügt . Und Sie müssen sich um all diese Bilder keine Sorgen machen , weil ich diese Ether bereitstellen werde. Sie müssen sich also keine Sorgen um all diese Bilder machen. Bis jetzt haben wir gerade unser Basis-Setup abgeschlossen. 7. Routing aktivieren: Als Nächstes, was ich tun werde, werde ich die ganze Route registrieren. Also generiere ich zuerst ein Snippet hier. Lassen Sie uns vorerst einfach einen Titel geben, wie etwa. Lasst uns das hier auch ein wenig lesen , indem wir den RFC verwenden. Geben wir den Titel an. Du hast es getan. Lassen Sie uns das auch hier ein bisschen zentrieren. Es wird ein einziger Blog sein, in dem wir die Details des jeweiligen Blogs einsehen können. Nun, das wird der Titel sein. Wir werden uns auch nicht gebildet haben. Lasst uns vorerst bleiben, nicht gebildet. Jetzt. Was müssen wir tun? Gehen wir zur Datei app.js. Und hier müssen wir den Component React Router herunterbringen. Wir werden Routen, Browser-Router, Route mitbringen. Lassen Sie uns das entfernen. Sagen wir mal, entferne das hier. Auf der obersten Ebene werden wir einen Browser-Router haben. Lasst uns diesen Inhalt einfügen. Darin drin. Jetzt werden wir alle Routen haben, also werden wir unsere alte Route innerhalb dieser Route registrieren . React Router Dom wurde Version sechs aktualisiert. So süß ist im React Router Dharma vergence sechs nicht verfügbar . Also müssen wir die Route benutzen. Diese Route. Wenn du starre 35. herausgefunden haben wolltest, dann musst du diese Route zurückgeben. Hier. Wir werden einen Weg geben, um fünf Mal unser Homepage-Element zu registrieren , das wir hier bereitstellen müssen. Wir werden unsere Route auf diese Weise registrieren. Wenn VS-Code diese Komponente automatisch und mit Routen importiert , müssen wir nicht das genaue Keyword angeben. Lassen Sie uns nun diese und die nächste Folie kopieren , in der wir unseren Blog haben werden. Dafür werden wir die Komponente verwenden, die ihn hinzugefügt hat. Die dritte Route, die wir haben werden, Sie haben geblog und wir werden den Blog basierend auf der ID bearbeiten. Hier müssen wir die ID angeben. Und dafür werden wir dieselbe Komponente verwenden, um das vorhandene Blog zu aktualisieren. Jetzt eine andere Route Licht Single Block V. Okay? So kann der Benutzer auch den einzelnen Blog anzeigen , der ebenfalls auf der ID basiert. Dieses Mal rendern wir die Seite nur wie Blob. Die nächste Route werden wir eine einfache About Seite haben. Lassen Sie uns vorerst einfach kopieren. Darum wird es gehen. R wird es dabei sein. Wir werden die About-Seite betreten. Die URL stimmt nicht überein. In diesem Fall werden wir also keine Schrift lösen. Bringen wir die NADH-Formularkomponente mit. Lassen Sie uns zuerst prüfen, ob alle Router funktionieren oder nicht. Gehen wir in den Browser. Lies das hier. Das Zuhause funktioniert also schon. Jetzt. Lass uns zum Blog gehen. Das funktioniert auch. Blog. Blog. Wir müssen eine ID angeben, aber es funktioniert auch, weil wir dieselbe Komponente eingeben , um den neuen Block hinzuzufügen und den Austrittsblock zu bearbeiten. Die anderen Routen, die wir dabei mögen, funktionieren ebenfalls. Wir haben einen einzigen Blog, Blog, Punktblock. Sie müssen die ID auch hier angeben. Dies funktioniert also auch, wenn URLS nicht übereinstimmen. Behalten wir also eine zufällige URL bei. Das funktioniert auch. Es ist schau, okay. Wir sind erfolgreich in der Lage , unsere ganze Dürre, die wir in unserem Ziffernordner haben, zu registrieren . Als Nächstes werde ich das reaktive T phi in dieser Anwendung konfigurieren . Ich füge hier ein, um die IF-Anweisung zu importieren. Diese blaue importierte Behandlung ist erforderlich, um zu konfigurieren mit aktiv in unserer Verpflichtung zu reagieren. Also lass uns dir einen Container geben. Das wird klappen. Wir haben auch den Reaktor konfiguriert. Starten Sie auch unseren JSON-Server. Dies ist also unser Verzeichnis , in dem wir unser React-Projekt erstellt haben. Gehen wir und Statusordner und öffnen wir einen TMD. Und lasst uns npm rennen. Dies ist für k. Im Moment haben wir also keine Inhalte, um diesen zu testen. 8. Arbeiten am Header: Als Nächstes wollten wir im Grunde eine Header-Komponente erstellen , damit wir einfach in unserer Verpflichtung navigieren können. Gehen wir zum VS-Code. Und im Ordner Statuskomponenten erstelle ich eine Datei namens Header dot js. Lassen Sie uns hier ein Snippet generieren. Vorerst. Gehen wir nun auf die offizielle Website von Materialdesign Bootstrap. Hier verwende ich die Navigationskomponente. Ich benutze Navbar. Und ich benutze diese Nummer. Also lasst uns runterkriechen. Ich kopiere diesen Code bis hierher. Gehen wir zum VS-Code und fügen wir ihn hier ein. Wir müssen auch die Komponente kopieren, die erforderlich ist, wenn die IT diese Komponente von unserer MDB aus unserer MDB reagieren kann. Kopieren wir diesen ganzen Import. Stellen wir es hier hin. Wir müssen auch einen riesigen Staat bringen. Hier. Ein paar Dinge, die ich ansprechen muss. Wir werden einen Staat definieren. Also const user state false. Hier wird es versendet, es wird eingestellt. Also schalten wir einfach hier um, also wird es so sein. Und hier müssen wir es auch einfach sagen. Also werden wir einen Blog erstellen. Wenn ich mich bewerbe, lege ich hier unser Logo ein, was unsere Verpflichtung hier ist. Also hier entferne ich diesen und wir navigieren zur Homepage. Es wird seitlich sein. Hier. Ich werde mein Bild haben. Ich kann hier benutzen, Bild dort. Und sortieren Ich kann Ihnen unser Bild für später geben als den öffentlichen Ordner ausblenden. Also Bilder, und wir haben ein Logo, Logo Punkt JPG. Alternativ müssen wir liefern, damit es nur niedrig ist. Wir müssen hier ein bisschen Inline-Styling geben. Es wird wie Höhe sein. Dies und behandeln Sie die Hintergrundfarbe. Und wir müssen auch die Hintergrundfarbe ändern. Ich muss hier 5411 b geben. Es wird leicht sein. Das ist in Ordnung. Ich glaube, das war's. Wenn es hier andere Sachen ändern soll. Es wird also wie nur Slice hier sein , weil wir nie auf die Homepage kommen. Das nächste Diagramm, das wir haben werden wie Werbeblock. Hier können wir diesen Outlet-Anzeigenblock angeben. Der nächste Block, den wir haben werden. Also können wir darüber angeben. Es wird ungefähr sein. Wir müssen auch etwas Inline-Style-Farbe geben. Ich gebe Ihnen ein dreifaches F. Lassen Sie uns dieses kopieren, weil wir es auch hier verwenden müssen. Lasst uns auch hier benutzen. Und lasst uns das entfernen, aber wir brauchen diesen nicht. Wir müssen das auch hier auch beim NaBR-Kleinkind hinzufügen . Ich denke, im Moment sind wir mit dieser Header-Komponente fertig. Verwenden wir die Theta-Komponente in dieser Datei app.js. In dieser Datei app.js bringe ich unseren Header hierher, importiert diese Komponente automatisch. Lassen Sie uns sehen, ob dieser Header angezeigt wird oder nicht. Sie können sehen, dass wir noch unseren netten Header haben. Und wenn Sie auf Block hinzufügen klicken, werden wir eine gute Möglichkeit haben, das hinzugefügte es ist. Hier. Du hast vielleicht bemerkt, dass es hier neu geladen wird, wenn ich auf das Theta klicke. Denn mit der Breite der Bootstrap-Komponente des Materialdesigns können Sie hier nicht zum Schlüsselwort verwenden. Okay? Zwei arbeiten also nicht mit diesen MDB-Nav-Verbindungen. Wenn du es auch tust, sagen wir mal, wenn du zwei gibst , wird es nicht funktionieren. Man sieht, dass es nicht funktioniert. Sie müssen noch verwenden usw. Es gibt eine alternative Möglichkeit, zwei zu verwenden. Im Grunde muss man das Knabbern vom React Router nach unten bringen . Und dann kannst du doch natürlich anstelle von MDB NAB Berlin verwenden . In diesem Fall erhalten Sie jedoch eine Warnung in Ihrer Konsole. Es liegt also an Ihnen, wenn Sie Nearpod Link von Reactor AutoDock verwenden möchten, können Sie anstelle dieser MDB nie verknüpft verwenden. Es liegt also an dir. Jetzt. Jetzt sind wir mit dieser Header-Komponente in unserer Anwendung fertig. 9. Cloudinary in React konfigurieren: Als Nächstes werden wir zuerst an unseren Add Edit Blöcken arbeiten. Also werde ich zuerst die Operation aktivieren, um Blogs hinzuzufügen. Um Block für erweitert hinzuzufügen , um eine gewisse Konfiguration in unserem Cloudinary durchzuführen , weil wir unser Limit in diesem Cloudinary verletzen werden. Dann werden wir den Image-Link von unserem Cloudinary kommen oder getrübt bekommen. Dieser Image-Link wird uns auf unserem JSON-Server mitgeteilt. Lasst uns gegen den konfigurierten Cloudinary kämpfen. Also Leute, ich bin auf meinem normalen Konto. Ich hoffe, du hast ein Konto bei Cloudinary. Was musst du tun? Du musst zu deinen Einstellungen gehen. Sie müssen also auf dieses Einstellungssymbol klicken. Und du musst auf diesen Upload klicken. Scrollen wir nach unten. Hier. Sie müssen Ihre Upload-Voreinstellung festlegen. kannst du tun. Klicken Sie einfach auf diese Upload-Voreinstellung hinzufügen. Es wird einen zufälligen bevorzugten Namen erzeugen. Und hier musst du unsigned benutzen. Und klicken wir auf Speichern. Sie können sehen, dass unser Upload 3 drittes hier erstellt wurde. Sie können dieses einfach kopieren und hier in V malen, wie im VS-Code. Wir sind mit dieser Grundkonfiguration von Cloudinary fertig. 10. Form: Also das nächste, was wir an unserer Seite arbeiten werden, fügte es hinzu. Wir müssen einige Komponenten aus unserer Materialentwurfsarbeit mitbringen , um eine Formularkomponente zu bauen. Bringen wir diese Komponenten zuerst. Wir brauchen eine MDB-Validierung. Wir werden auch clientseitige Validierung nur von unserem Ende aus durchführen , MDB-Eingang, IMDB, btn. Und als Nächstes, was wir tun müssen, werden wir dir auch nur Band bringen. Ich brauche auch axial. Bringen wir das auch aus unserem Phi. Lasst uns Toast drucken. Definieren wir nun unseren Ausgangszustand. Ursprünglicher Zustand. Wir werden unseren Musterblock haben. Dann werden wir eine Beschreibung haben. Aber unser Blog. Dann haben wir ein Kategoriebild, das Sie gesehen haben Cloudinary. Wir werden sofort Atome bekommen. Also werden wir gespeichert, dass du schon, es bekommst statt. Jetzt werden wir eine andere, andere Kategorie haben. In unseren Dropdown-Optionen. Wir werden eine Kategorie wie Ravel haben. Dann werden wir die Kategorie Life Fitness, Sport haben. Dann werden wir Essen essen. Dann haben wir eine sechste Kategorie, um einen Blog zu erstellen. Jetzt, hier werden wir Wert haben. Also Formularwert, setze den Wert. Du hast es gerade getan. Hier. Wir werden den Ausgangszustand passieren. Nachdem sie eine Editormethode für Kategorie haben , haben wir gekauft oder Dropdown. Wir sind nicht bereit, dort eine MDB React-Komponente zu verwenden. Wir werden also ein normales HTML-Dropdown verwenden, um ein Kategorie-Dropdown zu erstellen , dass wir auch eine separate Methode in GitHub verwalten müssen. Wir werden also in einem separaten Zustand mit den staatlichen zeitgenössischen Methoden umgehen . Das wird null sein. Jetzt werden wir all diesen Wert, Ahmad-Formwert, destrukturieren . Wir werden es ablenken wie Titel, Beschreibung und Bild-URL. Okay? Lasst uns nun an unseren eigenen Komponenten arbeiten. Wir können das alles entfernen. Hier. Wir werden die IMDB-Validierung verwenden. Darin. Wir geben ihm einen Klassennamen. Also hier verwenden wir beide Grep plus Feder. Und danach können wir einen Inline-Stil wie Margin, Top Pixel haben. Sie müssen keine Validierung geben. Wir bestehen diese novalidierten Requisiten. Und wir werden uns auf ein paar Met Handle einreichen lassen. Definieren wir diese Funktion. Sonst holen wir es raus. Okay? Definieren wir das vorerst. Wir werden die Logik später hinzufügen. Im dritten Jahr werden wir hier ein P-Tag haben. Wir können hier Light Blob geben , den wir einen Klassennamen geben können, um dies zu stylen, um diese Überschrift zu stylen. Also FS, F, fett. Lasst uns das zuerst sehen. Sieh aus wie. Lasst uns das schließen. Es ist nicht erforderlich. Klicken wir auf diesen Block hinzufügen. Wir haben unseren Überschriften-Anzeigenblock. Danach müssen wir an unserer Eingabedatei arbeiten. Also div drin werde ich haben. Ich style. Ich suche mir hier drüben etwas Styling aus. Das ist Kacheln. Ich habe gerade erst überklebt. Wir werden unseren IMDB-Eingang haben. Wir können dir einen Wert geben. Dann werden wir wie Name, Titel haben. Dann wird der Typ der extern sein. Dann werden wir unsere OnChange-Methode haben. Verfolgen Sie im Grunde den Status jedes Eingabefeldes auf jeder GIF-Requisite. Wir gehen, wir werden einen zur Input-Änderung haben. Dann wäre es nicht nur erforderlich. Dann werden wir Level haben. Es wird also Titel sein. Dann müssen Sie die Validierungsmethode angeben, falls das Eingabefeld in Armut ist. So können wir ihnen eine Methode geben. Geben wir einen Titel an. Wir müssen es ungültig machen. Jetzt. Wir werden hier eine Pause machen. Und danach kopiere ich das in Portfolio-Kupel. Das für Beschreibungsdateien Kategorie N. Ich kopiere diese Eingabe ein paar Mal. Lassen Sie uns das kopieren. Die zweite ist die Beschreibung. Beschreibung. Der Name wird Beschreibung lauten. Dipolschutz bei Änderung wird unsere Eingangskette sein. Es wird benötigt. Level wird die Beschreibung sein. Hier können wir Bein geben. Bitte geben Sie eine Beschreibung ein. Beschreibung. Wir werden einen Textbereich verwenden. Wir können den Bereich des Fehlerdetektors teilen und wir können Reihen einer zweiteiligen Datei angeben. Wir werden keinen Typ verwenden, der diesem entspricht. Es wird Phi sein, das sich in PSF-Datei befindet. Der Wert wird nicht unterstützt, daher müssen wir diesen entfernen. Dafür werden wir nicht mit dem oninput J arbeiten Dafür werden wir eine separate Funktion verwenden, die Bild hochladen wird. Auf Bild hochladen wird dies auf Bild hochladen angezeigt. Und hier können wir das Punktziel verzögern. Danach werden wir Drop-downs haben. Wir werden also nicht mit dem Material innerhalb des Bootstrap-Dropdown arbeiten . Wir werden die STM früher benutzen. Wählen Sie Ich werde hier verwenden. Und hier verwende ich den Klassennamen. Also Kategorie. Wir müssen das Styling in unserer Indexpunkt-CSS-Datei definieren. Lassen Sie uns eine lineare Dropdown-Kategorie der ersten Klasse geben. Wir werden Tönung haben. Dafür werden wir auch mit einer separaten Methode umgehen , okay, also werden wir für den Kategoriewert nur mit der Kategorie verfügbar sein. Darin werden wir unsere erste Option haben. So verfügbare Faktenoptionen die Abfahrt von Sonnenlicht. Bitte wählen Sie eine Kategorie aus. Bitte wählen Sie eine Kategorie aus. Danach haben wir unsere Optionen hier bereits definiert. Du siehst dort oben. Wir werden all diese Option abbilden. Hier. Wir können Optionen verwenden Punktmap. Wir werden eine einzige Option bekommen. Wir werden einen Index haben. Hier. Ich benutze Option. Und tatsächlich werde ich die Option innerhalb dieses Wertes haben wird die Option sein. Sie können dies auch insbesondere in GitHub angeben , der den vorhandenen Wert auffüllt. Lassen Sie es uns jetzt geben. Wir geben dir einen Index. Andernfalls werden wir eine Warnung bekommen. Lassen Sie uns dies auch in anderen Eingabefeldern bereitstellen. So können wir auch hier detailliert mit Italien hilfreich machen, um den vorhandenen Wert in jedem Eingabefeld zu populär zu machen . Im Falle des Abrufs des eindeutigen Blogs. Wir werden dies insbesondere verwenden. Wenn Sie es nicht verwenden, erhalten Sie eine Warnung in einer Konsole. Wir haben dieses Dropdown-Menü erstellt. Jetzt. Wir müssen an unserem Button arbeiten. Lass uns hier ein paar Pause machen. Hier. Ich werde MDB in BTN Dipol mit etwas Breite verwenden. Und ich werde ein bisschen Inline-Styling verwenden. Ich gebe hier Marge. Und es werden zehn Pixel sein. Hier. Ich werde nur noch einmal geben und kopieren, weil wir einen Zurück Button haben werden . Es wird zurückgehen. Wir werden hier Farbe, Gefahr benutzen. Lassen Sie uns den Typ senden entfernen. Wir brauchen es nicht. Hier. Wir werden unsere onclick-Methode haben. Wenn Sie jedoch auf klicken, gehen Sie in der Regel zurück, so dass Sie nie zur Homepage gelangen. Also müssen wir navigieren von R. Wir müssen den US navigieren Daumen oder React Router nach unten bringen . Bringen wir diesen React Router runter. Um uns navigieren zu lassen. Und Puls haben wir zu diesem Elternteil gedrängt. Verwenden Sie navigieren hinein, navigieren Sie in Variable Lassen Sie uns nun diese navigate-Variable hier verwenden. Jetzt müssen wir all diese Funktion definieren , die aufInput-Änderung und das Bild hochladen. Lassen Sie uns dieses definieren. Außerhalb dieser Rückkehr. Dies wird eine E-Mail erhalten. Jeder. So erhalten beide Funktionen hier Ereignisx-Balken, aktuelles Hochladen des Ereignisses , Hochladen, es wird hier stapelt. Lassen Sie uns zuerst prüfen, ob wir unsere Formularkomponente sehen können oder nicht. Gehen wir also in den Browser. Also in der Kategorie. Wir müssen also const auf Eigenkapitaländerung definieren. Definieren wir dieses auch. Gehen wir in den Browser. Das hier. In GitHub Eingabetypdatei. Wir müssen den Namen nicht angeben. Okay, lass mich das auch loswerden . Level auch müssen wir nicht bereitstellen. Also lasst uns das auch loswerden. Lassen Sie uns nun in den Browser gehen. Unsere Form sieht hier also gut aus. Jetzt haben wir ein bisschen an dieser Dropdown-Kategorie gearbeitet , okay, denn wir verwenden hier unser einfaches HTML-Dropp. Ich habe den Klassennamen hier hinzugefügt. Sie können dieses Kategorie-Dropdown sehen. Also werden wir, wir werden die index.js, CSS verwenden, um unser Styling nicht anzuwenden. Hier bezahle ich etwas Styling. Also habe ich diesen Vektor, einen Geheimcode für diesen Klassennamen. Gehen wir jetzt in den Browser. Aber jetzt können Sie sehen, dass unser Kategorie-Dropdown fast nur wie Materialdesignkomponente aussah. Also habe ich einfach mein Bestes versucht, Äquivalent zur Bootstrap-Komponente des Materialdesigns herzustellen . Unser Format wurde hier abgeschlossen. 11. Bild hochladen: Also das nächste, was wir im Grunde genommen den Block hinzufügen müssen. Bevor wir also diesen Adding Block ausführen, arbeiten wir zuerst an diesem Piloten. Okay, lass uns zur hinzugefügten It blog.js gehen. Gehen wir zum Upload-Bild. Und doch erhalten wir Akte. Lassen Sie uns also zuerst die Konsolenprotokollkonsole hier protokollieren, Datei nach lokal. Das ist ein bisschen herausfordernd. Gehen wir also zuerst zur Konsole. Lasst uns unsere Konsole öffnen. Also werde ich nur diese Konsolenseite aufstellen. Hier. Ich lade ein Bild hoch. Lasst uns also ein Bild hochladen. Jetzt können Sie sehen, dass wir unser BY früher haben und es in einem einzigen Objektbereich enthalten ist. Wir können so etwas machen. Es wird immer ein einziges Array von Objekten sein, also können wir so weitergeben. Kehren wir nun zum Browser zurück. Aktualisieren Sie es, laden Sie dieses Bild erneut hoch. Jetzt können Sie sehen, dass wir hier ein Objekt haben , das Namensgröße und Typ enthält, alle fünf Mal enthalten um an dieser Funktion „Bild hochladen“ zu arbeiten. Hier. Ich werde hier besonders gut gehen, wie const data. Neue Daten, Formulardaten kontrahieren grundsätzlich einen Satz Schlüssel-Wert-Paar, das eine Pille darstellt. Hier erstellen wir im Grunde ein Schlüssel-Wert-Paar für unser Farmville, das wir mit unserer Cloudinary-API interagieren können weil wir unser Limit für Cloudinary einhalten werden. Wir müssen eine API-Anfrage stellen und Formulardaten sind im Grunde genommen, wir können ganz einfach HTTP-Anfragen mit Hilfe von Formulardaten stellen . Wir können einen regelmäßigen Tarif erstellen und unser Bild auf Cloudinary hochladen. Deshalb verwenden wir hier aus Daten. Danach müssen wir im Grunde genommen anhängen. So bilden Sie Datenpunkt anhängen. Und hier müssen wir Schlüssel und Wert geben. Dies sind Wertdaten, Punkt anhängen. Und hier müssen wir unser Upload-Preset definieren. Es wird also Upload-Voreinstellung sein. Hier müssen wir unseren voreingestellten Upload-Wert übergeben. Daher haben wir diese Upload-Voreinstellung bereits während der Konfiguration von Cloudinary kopiert . Lasst es uns hier rüber stellen. Jetzt. Wir müssen eine HTTP-Anfrage stellen. Also werden wir x's verwenden und eine API-Anfrage mit unserem Cloudinary TP, APA dot, Cloudinary Punkt stellen . Dann unterstreicht man eins. Hier. Wir haben DB, neun, Q, C, D herausgebracht neun, Q, C, D Wenn Sie sich also fragen, was ist das? Wenn du dich also fragst, was ist das? Dies ist der API-Schlüssel. Sobald Sie ein Konto bei Cloudinary erstellt haben , erhalten Sie Ihren API-Schlüssel. Gehen wir also zum Cloudinary und jetzt bin ich in meinem Dashboard. Und hier siehst du , dass ich einen Cloud-Namen habe. Ich habe dieses Cloud-Negativ benutzt. Sobald Sie die Wirtschaft geschaffen haben, erhalten Sie Ihre eigene Cloud-native. Also benutze diesen Clade-Namen nicht , weil ich es in diesem Clade-Namen tun werde. Nach dem Hochladen dieses Videos möchte ich mit diesem Cloud-Namen arbeiten. Ich habe das gerade kopiert. Lasst es uns hierher stellen. Also mache ich keinen Fehler. Jetzt müssen wir Bild-Upload geben. Danach ist die EU bereits der Bild-Upload. Hier können wir unsere Daten weitergeben. Jetzt. Wir werden unsere Antwort erhalten, damit wir uns darin auflösen werden. Dann Methode. Lassen Sie uns zuerst Ihre Konsole, die Antwort auf das Konsolenpunktprotokoll und die Antwort setzen. Es wird es als Bindung sein. Lassen Sie uns also eine Art Antwort antworten. wir zuerst ein Bild hoch. Wir werden prüfen, was wir kriegen. Werben. Beziehen Sie sich dieses hier. Lasst uns dieses Bild hochladen. Hier wird eine Antwort gekauft. In Daten. Sie können dort sehen, dass wir unsere URL bekommen haben. Wenn Sie diese URL kopieren, fügen wir sie hier ein. Jetzt können Sie sehen , dass wir mit dieser URL unser Bild haben, das wir hochgeladen haben. Also werden wir dieses Bild speichern. Sie sind auf unserem JSON-Server verlinkt. Ich habe Cloudinary für dieses Projekt verwendet , weil in GSM Theta, aber Sie können kein Bild direkt hochladen. Der Grund, warum ich Cloudinary für diese Anwendung verwende. Als Nächstes, was wir tun müssen, lasst uns das verblasen. Gehen wir zum VS-Code damit wir dieses Konsolenprotokoll entfernen können. Wir können Informationen geben, um sie zu verwenden, unabhängig davon, ob das Bild hochgeladen wurde oder nicht. Also Fackelpunkt-Info. Danach können wir das Bild erfolgreich hochladen lassen. Und danach müssen wir tun, wir werden den Formularwert festlegen. Ich werde unseren eigenen Wert verteilen. Und ich muss nur die Bild-URL aktualisieren , damit die URL und wie wir die Bild-URL erhalten können. Wir müssen jedoch zu diesen Antwortpunktdaten, Punkt-URL, gehen . Okay? So etwas haben wir hier drüben produziert. Punkt-Delta-Punkt-URL. Lassen Sie uns auch mit diesem Leitfaden umgehen. Wenn Sie also irgendeine Art von Daten haben, sagen wir mal eine Benachrichtigung. Und wir können unsere eigene Methode geben, als wäre etwas schief gelaufen. Lade den Mythos hoch und fertig. 12. Blog hinzufügen: Lassen Sie uns nun an der Input-Änderung arbeiten. Wir erhalten das Ereignis, den Vornamen und den Wert vom Zielnamen. Wert, Wert festlegen. Ich werde mich auf den Wert ausbreiten. Hier. Es wird wie Name, Wert sein. Und lasst uns auch an dieser Kategorie arbeiten. Diese Kategorieänderung wird auch sogar II erhalten. Nach diesem Palmwert. Es wird wie der Formwert sein. Hier machen wir uns nur Sorgen um unsere Wettbewerbskategorie. Zielwert. Gehen wir in den Browser. Schließen wir diesen und schauen wir uns an, ob wir in der Lage sind, irgendetwas in InputField einzugeben oder nicht. So können wir den Upload eingeben, den wir bereits gesehen haben, wählen wir eine Kategorie aus. Wir können diese Kategorie auch auswählen. Danach werden wir an unserem Handle-Einreichen arbeiten . Behandeln Sie Absenden. Lassen Sie uns zuerst das Dot-Ereignis machen. Hier verhindern wir grundsätzlich das Standardverhalten eines Browsers bei der Übermittlung. Form in Mitleid. Wenn Sie einfach darauf klicken, ohne den Wert in jedes Eingabefeld anzugeben, erhalten wir eine Fehlermeldung. Und für diese Kategorie erhalten wir keine Fehlermeldung, da wir die Materialdesignkomponenten nicht verwenden. Wir werden hier unsere eigene Methode anbieten , soweit wir den Staat bereits definiert haben. Das siehst du hier drüben. Danach müssen wir mit dem Einreichen umgehen. Du kannst dir das Leben nehmen. Wenn Sie keine Kategorie haben. Dann können wir die Kategoriemethode festlegen. Und die Methode wird wie Liste sein, wählen Sie die Kategorie aus. Wählen Sie im Moment des Benutzers die Kategorie aus dem Dropdown-Menü aus. Dann setze ich diese Kategorie auf Null. Also lasst uns das hier machen. Setzen Sie nur Kategoriefehlermethoden auf null. Lassen Sie uns diese Fehlermethode anzeigen. Unter dieser Auswahl. Okay, ich setze diese Auswahl. Was müssen wir tun? Wir werden zuerst prüfen, ob Sie die Kategorie-Fehlermethode haben. Dann zeigen wir das auf. Und hier verwende ich hier einen Klassennamen. Das wird also spät sein Caltech drei. Corteva, mein Gesicht. Diesen Glasnamen werde ich mit div verwenden. Hier gehe ich zur Kategoriebearbeitungsmethode und wähle das Styling für diese Kategorie-Editor-Methoden aus. Im dritten Fall diese Indexpunkt-CSS-Datei. Ich werde meine Kategorie bei Atmosphäric-Klassennamen haben und wähle den CSF-Code für diese Klasse aus. Dies sagt, dass ich die Kategorie-Fehlermethode anwenden werde . Aber lass uns in den Browser gehen. Klicken wir nun auf Hinzufügen. Jetzt können Sie sehen, dass wir auch die Artikelnachricht für das Kategorie-Dropdown erhalten haben. Und in dem Moment, in dem Sie eine Kategorie auswählen, wird sie verschwinden. Und das Gleiche, was wir für jede Bearbeitungs- und Put-Füllung verwenden werden. Und ich lade das Bild für diese Datei nicht hoch, da es das Bild erneut auf Cloudinary hochlädt. Also werde ich das Unnötige nicht hochladen. Lass es dort liegen. Jetzt fügen wir unseren Blog im JSON-Server hinzu. Wir müssen an diesem Handle einreichen arbeiten. Gehen wir zur Datei „blog.js bearbeiten“. In diesem Handle, sende dich ein. Wo haben wir unseren Griff Irgendwo. Hier. Wir haben hundert, zweihundert. Also irgendwo in diesem Griff nehme ich zuerst, dass wir den Titel haben. Wenn Sie die Beschreibung haben, wenn Sie die Bild-URL von unserem Cloudinary erhalten haben, und das ist es so. Und wenn es sich um die elektrische Kategorie handelt, dürfen Sie nur einen Blog erstellen. Dies ist unser erstes Häkchen. Danach werden wir uns auch beim Erstellen eines Blogs verabreden. Wir brauchen also auch Daten. Also kosten. Es ist cool, dies definieren zu müssen. Müssten wir diese sehr tiefgreifende Funktion definieren , die dafür verantwortlich ist , die aktuellen Schulden zum Zeitpunkt der Erstellung des Blogs zu erhalten. Trotzdem füge ich einfach etwas Code ein. Okay? Ich erwarte nur einen Code hier drüben. In diesem Code ist erforderlich, um die aktuellen Schulden zum Zeitpunkt der Erstellung des neuen Blogs zu erhalten. Hier haben wir unsere derzeitigen Schulden bekommen. Jetzt. Danach haben wir unser Formularfeld produziert. Wir müssen unseren Formularwert mit diesem aktuellen Datum aktualisieren. Blog aktualisiert, Delta-Objekt. Und ich werde unseren Formularwert wie Titel, Beschreibung und Bild-URL und Kategorie verteilen . Ich füge noch eine Unterkunft hinzu, die tot ist. Trotzdem komme ich hier vorbei. Aktuelle Schulden. Danach. Diese nummerierten Handles werden eine Sache , weil wir uns hier mit der APA beschäftigen werden. Entspricht einem Gewicht. Ja. Es werden Post-Anfragen sein , weil wir einen neuen Block hinzufügen, http localhost. Und unser JSON-Server läuft auf fünftausend. Fünftausend. Dann haben wir diese Blöcke bereits definiert , die Sie dort in unserer db.json-Datei sehen können. So werden alle Blocks in diesen Blöcken darin gespeichert. Danach werden wir diese aktualisierten Blockdaten übergeben. Jetzt werden wir eine Antwort bekommen. Also, wenn wir Schriftarten punkten Status Quadratwurzel auf zwei, nicht eins. Während eine schlechte Frequenz v immer größer zu machen einen Status von unseren UND Gates und Server. Deshalb nehme ich hier , will es nicht sagen. Also dachte ich mir, dass das falsch angegeben wurde. Dann. Wir müssen Zugriffsmethode wie Blog beziehen , die sie erfolgreich erstellt hat. Erfolg gelehrt. Hier sind wir spät dran. Blog wurde erfolgreich erstellt. Und falls du etwas Besseres hast. So können wir Methoden wie Bush geben, kein Fehlermaterial. Wir mögen, dass etwas schief gelaufen ist Danach. Was wir in unserem Projekt tun werden , werden wir jedes Eingabefeld völlig löschen. Wir können Formwert machen. Und der Titel wird vorübergehend. Das Titeleingabefeld, Beschreibung erhalten Empathie und die Kategorie erhält Eingabe D. Lassen Sie uns auch in dem Bild, das Sie hinzugefügt haben, natürlich werden Sie diese Bild-URL, die UA, nicht sehen. Lasst uns das auch temperieren. Nach dem Einreichen des Blogs wollten wir zur Homepage navigieren , wollten wir zur Homepage navigieren damit wir diese Navigation nutzen können. Okay, wir sind fertig mit der Logik, einen neuen Block hinzuzufügen. Gehen wir in den Browser und erstellen unseren ersten Blog. Ich wollte einen 4D-Block erstellen. Also Holzblock, wir können Ihnen einen Teddy Let Food Blog geben. Ich mache nur einen Lastarm fertig. Wenn eine Inhaltsbeschreibung. Ich bin einfach hier eingefügt. Wählen wir noch eine Datei aus, ich erstelle einen 4D-Block, also wählen wir dieses Bild aus. Wir haben hier Methode wie Bild erfolgreich hochgeladen. Wir haben diese Informationen von unserem Cloudinary erhalten und es ist ein Vier-Block. Wählen wir also die Kategorie für dn und klicken wir auf Hinzufügen. Betrachten Sie die Methode wie erfolgreich erstellter Block. Lassen Sie uns das in unserer db.json-Datei überprüfen. Lasst uns eine db.json-Datei erstellen. Und hier sehen Sie, dass wir unseren Titel, unsere Beschreibung, Kategorie, Bild, URL, tot und ID haben. Wir haben erfolgreich unseren Fünf-Blog in dieser Anwendung erstellt . 13. Arbeiten am Badge: Als Nächstes werden wir an unserer Chargenkomponente arbeiten . Also im Grunde wollte ich in dieser Kategorie in einer Charge, einer Chargenkomponente, das Chargengeschlecht hier ein bisschen zeigen einer Chargenkomponente, . Ich nehme Kinder auf. Ziffern Sie vier. Ich definiere einen Farbschlüssel basierend auf dem Objekt der Kategorie B. Für diese Mode wird es also Parameterreisen sein. Und dann setzen wir diese Zugangsbemühungen für Netto-Fitness ein. Dann werden es die Verletzten sein. Wenn es Essen ist, wird es eine Warnung sein. Dann wird es die Info sein. Sport. Jetzt werden wir diesen Stil für Informationen haben . Wir werden hier F5 benutzen. F5. Danach benutze ich MDB. Und drittens entscheide ich mich basierend auf der Kategorie, okay? Diese Einbettungsfarbe erhält also J und basierend auf dieser Kategorie ist die Farbe kalendrisch zu färben. Hier können wir an den Kindern vorbeikommen. Hier werden es die Kinder sein. Verwenden wir nun diese Batch-Komponente in dieser Datei blog.js. Wir verwenden P-Tags, damit wir Batch-Komponenten-VS-Code verwenden können Batch-Komponenten-VS-Code diese Basskomponente automatisch zu importieren. Gehen wir jetzt zum Browser. Sie können sehen, dass wir unser schönes Bett für diesen Food-Blog haben. Das nächste, was ich den Löschvorgang ausführen wollte. Wir können es löschen gehört. Um den Blog zu löschen, fügen wir hier einen Blog hinzu. Ich füge den Blog-Test hinzu. Ich gebe hier eine Beschreibung. Ich lade ein Bild hoch. Lasst uns das hochladen. In Bezug auf mein Bild wurde erfolgreich hochgeladen. Lasst uns in diese Mode hochladen. Okay, klicken wir auf „Hinzufügen“. Unser Blog wurde erfolgreich erstellt. Sie können sehen, dass wir auf unserer Homepage sehen können . 14. Blog löschen: Jetzt möchten wir, dass es den Löschvorgang durchführt. Wir haben die Funktion bereits in unserer Home-Dot-JS-Datei definiert . Gehen wir zur Home-Dot-JS-Datei. Hier erhalten wir die ID aus unserer Datei blog.js. Und das wird das achte sein , denn wir werden hier eine Anfrage stellen . Darin. Ich möchte, dass der Benutzer, wie: Sind Sie sicher, dass er diesen Blog löscht? Ich bin irgendwie eine Nachricht, um es zu verwenden , bevor sie diesen Bericht löschen. Also unser Problem, du wolltest diesen Blog löschen. So etwas wie diese Methode wollte ich dem Benutzer zeigen. Sobald der Benutzer auf den Block geklickt hat, wird der Block verwässert. Du kannst das einfach kopieren. Alles, weil es ähnlich nur die Anfrage möchte geändert werden. Liefern Sie also diesen Löschvorgang. Wir werden es in einem Blog machen, das auf der ID basiert. Also werde ich hier einen Rucksack benutzen , damit wir den Ausweis weitergeben können. Sobald Sie diese Antwort erhalten haben , ist Theta wie 200. Das bedeutet, dass unser Blog erfolgreich gelöscht wurde. Wir können ihnen Zehen zum Erfolg geben. Blogs wurden gelöscht. Das sagt voll und ganz, okay. Ich wollte die Latexdaten für den Modus noch beenden und schrecklich. Ich kann diese Funktion ausführen. Nun, um den Block von der Bestellung und dem JSON-Server und einem L abzurufen , wird die Methode dieselbe sein. Lassen Sie uns durchführen , ob wir in der Lage sind einen Blog zu verwässern oder nicht. Gehen wir in den Browser. Klicken wir auf dieses und löschende Icon. Betrachten Sie diese Methode, wie Audi gezeigt hat , dass Sie diesen Blog löschen wollten. Und wenn Sie auf Okay klicken, können Sie sehen, dass wir eine Methode wie Blog erhalten haben , die erfolgreich gelöscht wurde. Lösch-Vorgang. Wir haben auch auftreten. 15. Blog aktualisieren: Jetzt müssen wir also auf den irritierenden Adjektivblock knallen . Wenn Sie also auf dieses Bearbeitungssymbol klicken, navigiert es ethisch zu dem hinzugefügten es mit fünf, wir werden den gesamten vorhandenen Wert in jedes jeweilige Eingabefeld füllen . Wir müssen den Filtermodus aktualisieren, wie der Titel das Update, der Block, der Schaltflächenwert das Update sein wird. Und im Falle eines Updates werden wir das Image auch nicht aktualisieren, werden wir das Image auch nicht aktualisieren da es nicht möglich ist , den Dateiwert im HTML-Eingabe-Tag zu füllen . also den Wert unserer Datei füllen, ist dies nicht zulässig, wenn sich die Eingabetypdatei befindet. Im Falle von Updates erlauben wir dem Benutzer nicht , das Image zu aktualisieren. Lassen Sie uns zunächst daran arbeiten, den Auswertungswert für die jeweilige Eingabefüllung zu füllen. Sie können sehen, dass wir in der URL die ID erhalten. Wir brauchen diese ID jetzt hinzugefügt Blog-Dot-JS-Datei. Um das hinzuzufügen, verwenden wir param von unserem Reaktor nach unten. Du spritzst. Wir können LED-Anzeige verwenden. Verwende Gegenstände. Wir können den Ausweis detektieren, den wir haben. Jetzt. Wir müssen noch etwas mehr tun. Wir müssen eins schreiben, zuerst den Effekt verwenden. Und hier haben wir einen Staat vordefiniert , der bestimmt , ob wir uns im unmittelbaren Modus befinden oder nicht. Der Modus. Mehr. Das wird es sein. Wenn wir nun die ID haben, diese große Auswirkung auf später, sobald wir die ID haben, die ID. Das bedeutet, dass Benutzer den vorhandenen Block aktualisieren. In diesem Fall, was ich tun wollte, wollte ich den Bearbeitungsmodus auf Beweis stellen. Wir wollten den einzelnen Blog basierend auf der ID abrufen. Auf diese Weise können wir den Wert in jedes jeweilige Eingabefeld einfüllen. Ein einziger Block. Also diese Funktion werden wir neu definieren, dünner Block bekommen. Und hier werden wir den Ausweis übergeben. Sonst markiert. Offensichtlich müssen wir das Modellieren mit einem Falsch machen. Der Unternehmenswert wird sich ebenfalls anpassen. Es wird wie der Ausgangszustand sein. Lassen Sie uns nun definieren, dass dies Singular Blog erhält , um dem einzelnen Blog basierend auf der einzelnen Blog-ID zu begegnen . Und es wird die Sache sein , weil wir eine regelmäßige Liste erstellen werden. Wir kriegen einen einzigen Block. Wir werden bekommen, wir werden nur einen einzigen Block im Objekt bekommen. Cs Dot bekommen. Hier. Wir können dies einfach an Sie kopieren, was wir in unserem Handle eingereicht haben. Wir können es hier einfügen. Und danach können wir grundsätzlich Wert festlegen. Es werden Single-Blob-Punkt-Daten sein. Gehen wir in den Browser. Jetzt können Sie sehen , dass wir in der Lage sind den gesamten Adjektivwert darin zu füllen. Lassen Sie uns produktiv und Portfolio für diese Blog-ID. Sie können hier auch eine kleine Änderung vornehmen falls die API ausgefüllt wird, also ein einziger Blog-Punktstatus, Zwei 100. Dann wollten Sie nur den Formularwert festlegen. Sie können diese Benachrichtigung einfach an den Benutzer lösen. Als ob etwas schief gelaufen ist. Jetzt wird es ein Urteil darüber sein. Sie können auf die Homepage gehen. Klicken wir nun auf dieses Bearbeiten-Symbol. Jetzt können Sie sehen, dass wir jeden Wert in das jeweilige Eingabefeld füllen können . Jetzt müssen wir dieses Hochladen einschränken, GitHub einreichen und den bestehenden Blog aktualisieren. Notieren Sie es mit der Eingabetypdatei nicht möglich. Und wir müssen diese Überschrift ändern. Jetzt füge ich einen Block hinzu , um Vlog zu aktualisieren. Der Button wird der auch GitHub von Add to Update sein. Lassen Sie uns all diese Änderungen vornehmen. Dann werden wir den bestehenden Block aktualisieren. Rückkehr nach innen. Wir können feststellen, ob er es nicht mehr geschafft hat, als es der Update-Block sein wird. Es wird die Schaltfläche „Hinzufügen“ sein. Außerdem können wir dasselbe tun, als ob wir ein bisschen mehr dabei sind, dass der Benutzer das vorhandene Blog betreibt, sonst fügt der neue Block hinzu. Und danach, was wir tun müssen, müssen wir das Hochladen der Bilddatei einschränken. Hier. Wir können überprüfen ob wir uns in diesem Monat nicht im Bearbeitungsmodus befinden, das heißt, wenn Sie ihn verwenden, wird ein neuer Block hinzugefügt. In diesem Fall wollte ich das zeigen. Schneiden wir das aus, fügen Sie es hier ein. Hier kannst du benutzen, denke ich Fragment. Lassen Sie uns etwas ausschneiden oder weniger zu erscheinen. Gehen wir jetzt in den Browser. Jetzt können Sie sehen, dass Sie in GitHub Update-Blogs das Image nicht aktualisieren können. Sie können also nur den Titel, die Beschreibung und die Kategorie aktualisieren . Der Button-Wert wurde ebenfalls geändert und die Überschrift wurde ebenfalls geändert. Klicken wir nun auf diese Blöcke hinzufügen. Wir bekommen diese Eingabedatei, laden Sie das Bild hoch. Das funktioniert. Lassen Sie uns weiter an unserem Update des bestehenden Blogs arbeiten. Wir müssen jetzt etwas daran arbeiten, gehandhabt zu werden. Also im Handle einreichen, was wir tun müssen. Wir müssen feststellen, ob wir uns im Bearbeitungsmodus befinden oder nicht. Wenn Sie also nicht im Bearbeitungsmodus sind, Benutzer einen neuen Block hinzufügt können wir diesen ganzen Code ausschneiden, wenn der , und wir können ihn hier einfügen. Und das wird auch Teil ausgeschnitten. Wir werden unseren ablehnenden Blog grundsätzlich aktualisieren. Trotzdem. Wir können das einfach kopieren. Hier. Wir werden diese Daten nicht eines Tages weitergeben. Es gilt nur für das Hinzufügen des neuen Blocks. Hier können wir einfach unseren Formularwert übergeben da der Formularwert bereits E-Mails, Titel, Beschreibung, Kategorie enthält und all diese Dinge getan hat. Wir müssen auch feststellen , ob wir uns im Bearbeitungsmodus befinden oder nicht. Bildvalidierung wird also nur in GitHub beim Hinzufügen des neuen Blocks vorsichtig sein. Also müssen wir diesen auch anpassen. Also Nachteile, Bildvalidierung. Wenn du nimmst, wenn du dich nicht im Bearbeitungsmodus befindest, müssen wir das Bild validieren. Ob es hochgeladen wurde oder nicht. Es wird die Reihe sein. Das bedeutet, dass wir keine Bildvalidierung durchführen wenn das vorhandene Blog aktualisiert wird. Hier werden wir den Blog basierend auf der ID aktualisieren. Also hier verwende ich vector. Und ich werde einen Blog basierend auf der ID aktualisieren. Hier gehe ich vorbei, gebildet durch die Regression wird der Status sein. Wir bekommen 200 und bauen den Adjektiv-Blog auf. Und die Nachricht wird aus einem Block, der sich auf den Blog bezieht, der erfolgreich aktualisiert wurde. In beiden Gates wie das Hinzufügen des neuen Blocks Albert, der Blog abwirft. Wir wollten es tun, wir wollten das Wärmeeingabefeld löschen. Und danach wollte ich auf die Homepage navigieren. Mal sehen, ob sie das vorhandene Blog aktualisieren können oder nicht. Gehen wir also in den Browser. Schneller. Gehen wir auf die Homepage. Klicken wir auf das Symbol „Bearbeiten“. Lasst uns den Titel aktualisieren. Food-Blog aktualisiert. Klicken wir auf Update. Jetzt können Sie sehen, dass wir unsere Benachrichtigung erhalten haben , die besagt, dass die Blockierung erfolgreich aktualisiert wird und wir unsere Tight bekommen haben und unser Titel von Codeblock auf Woodblock aktualisiert wurde. Wir haben auch den Update-Vorgang durchgeführt. 16. Blog: Jetzt werden wir als Nächstes auf unserer einzelnen Blockseite arbeiten, also sollte es auf Lesemodus klicken. Dann navigieren Sie ethisch zu dem einzelnen Blockbit, in dem Sie mehr über diesen speziellen Blog lesen können. Jetzt werden wir an dieser einzigen Blogseite arbeiten. Das heißt, lasst uns an dieser Singlet-Blockpaste arbeiten. Also gebe ich meinen VS-Code ein um eine Komponente aus unserem Materialdesign-Bootstrap mitzubringen . Von einem abgeleiteten N-Bootstrap müssen wir eine Komponente mitbringen. Ich wähle all diese Komponenten hier aus. Diese Komponente ist in dieser Datei erforderlich. Problem Materialdesign, Reise bewegen. Und wir müssen hier auch parametrischen Link von unserer reagierten After Dome verwenden , da wir das einzelne Blog-Detail mit Hilfe von ID zeigen werden. Wir müssen Param benutzen. Lasst uns auch den Link mitbringen. Danach. Bringen wir x her. X hier liegt daran, dass wir eine API-Anfrage stellen und sie auch unsere Batch-Komponente hierher bringen lassen . Jetzt müssen wir auch Haken mitbringen, wo Sie gerade Effekt verwendet haben. Definiere einen Status, setze Blog. Wir müssen dies hier als drittes definieren. Lass es schade sein. Und danach müssen wir warten, bis wir die ID abrufen , die in der URL hierher kommt. Diese ID brauchen wir diesen Zweck. Ich habe das mitgebracht, benutze Params. Wir haben hier hinzugefügt. Was wir jetzt tun müssen, können wir einen US-Effekt schreiben. Dieser Benutzer wird erst ausgeführt, wenn wir eine ID in der URL haben. Hier können wir überprüfen, ob wir die ID haben, dann den einzelnen Block. Diese Funktion definiere ich jetzt, Einzelblock. Das wird der Gedanke daran sein. Lass es uns was machen. Da Sevilla, weil wir eine API-Anfrage stellen werden, ist die Antwort gleich x naught post. Und hier kopiere ich die URL aus unserer hinzugefügten Blockdatei. Okay, also lasst uns das kopieren. Komm zur Datei blog.js und füge sie hier ein. Danach. Was wir tun müssen, damit Sie die Antwort in einem einzelnen Objekt erhalten , da wir das einzelne Objekt basierend auf der ID abrufen . Hier. Wir können Punktdaten festlegen, bloggen und antworten. Und hier kannst du auch noch eine Sache machen. Wenn der Antwortpunktstatus. Wenn wir 200 haben, wird diese Anfrage der gute Not Post sein. Weil wir die Daten von unserem JSON-Server abrufen. In diesem Fall werden wir nur den Block setzen und unsere Daten mutlos machen. Und wir können eine Benachrichtigung erhalten, um das zu benutzen. Etwas ist schief gelaufen. Wir können Methode geben, als wäre etwas schief gelaufen. Jetzt danach formatieren wir das hier. Danach müssen wir einen Stil in vier pro Stunde entwerfen . Hier. Es wird inline angezeigt. Warum mache ich das und weil es eine andere geben wird Diese Kachel müssen wir für unsere Batch-Komponente in unserem einzigen Block bereitstellen , da wir die gleiche Batch-Komponente auch für unsere Homepage verwenden als einzelne Blogseite. Wir müssen uns mit etwas Styling befassen. Von dieser Komponente gebe ich all dieses Styling weiter. Rand links fünf Pixel, wird richtig sein. Marge, oben. Ich gebe dir sieben Pixel. Was müssen wir hier machen? Hier können wir all das Ding entfernen. Wir können hier benutzen, MDB-Container. Und darin werde ich sie im Linienstyling weitergeben. Es wird wie Grenze, Grenze um unseren Blog, ein Pixel sein. Also lasse ich, ich gebe diese Farbe EB. Danach gebe ich Ihnen einen Link, weil wir rückwärts gehen und ein Link dazu nicht mehr zur Homepage zurückkehren kann. Hier verwende ich starkes Tag mit dem Klassennamen, leeren Bindestrich drei. Und es wird so sein, als gehe ich auch hierher zurück, ich werde Fliesen anbieten. Sag dir, dass ich dir einen Schwimmer gebe. Es wird übrig bleiben. Ich gebe dir eine traditionelle schwarze Farbe. Jetzt nach diesem Link. Was müssen wir tun? Also MDB-Topographie. Hier zeige ich den Blog-Titel. Blog. Wir müssen wie diesen Blog schreiben, Blog-Punkttitel. Sie erhalten einen Fehler. Lassen Sie uns sehen, ob wir dies im Blocktitel anzeigen können oder nicht. Lassen Sie uns zum Browser gehen. Wir haben unseren Blocktitel, das ist für den Blog aktualisiert. Jetzt müssen wir dieses auch stylen. Mdb-Topographie. Hier gebe ich Tag, Klassennamen. Ich werde hier geben, wird Bootcamp wie Lungenentzündung oder Text, gedämpft, md, Bindestrich zum Stil sein. Ich gebe eine Sprachkachel, die Inline-Block, Block angezeigt wird Inline-Block, Block angezeigt . Gehen wir nun zum Browser. Das sieht gut aus. Nun, nach dieser MDB-Topographie, was wir tun müssen, also werde ich hier ein Bild haben, also werden wir das Bild nach unserem Titel anzeigen. Hier. Sind alle Typen in einem Block vorhanden und es ist ein einzelnes Objekt. So können wir so schreiben, eine Blog-, Blog - und Blog-Punkt-Bild-URL zum Anschauen. Und wir können hier einen Klassennamen nennen wie Image Fluid, abgerundet. Okay. Wir können Ihnen L. Wir können diesen Titel nur geben. Also lasst uns das kopieren. Füge es hier ein. Und wir können jemandem eine Kachel geben. Dieses Image-Tag. Die Breite beträgt 100% und die maximale Höhe beträgt 600 Pixel. Mal sehen, wie unsere Bilder aussehen. Sieht gut aus. Gehen wir nun zurück zum VS-Code. Danach. Ich werde div haben. Ich werde ein bisschen Fliesenmarge angeben, oben. Ich werde eine gewisse Besiedelungsmarge im Landesinneren bieten. Wenden wir uns den Pixeln zu. Ich werde noch ein Div haben. Diese Kachelhöhe, 43 Pixel Hintergrund. Ich kann hier F6, F6, F6 geben. Und dann benutze ich MDB. Mdb. Ich werde einen Stil haben, also wird es float sein, links. Der Name der Klasse. Ich gebe dir Md-Bindestrich drei Icon. Ich benutze hier ein Symbol wie Calendar, Arab. Im Grunde zeigen wir die Daten an. Blogs. Kalendersymbol wird live da sein. Also gebe ich dir Energie. Danach. Wir werden einen starken Pflog haben, in dem ich den Datenblog, den Blog, den Blog sortieren werde. Drittens werde ich wieder ein paar Fliesen zur Verfügung stellen. Ich gebe Float linken Rand, oben. Rand, oben wird 12 Pixel Rand links Pixel sein. Danach verwende ich unsere schlechte Komponente. Das habe ich bereits importiert . Darin. Ich werde Blog - und Blog-Punktkategorie zur Verfügung stellen. Hier müssen wir unsere Kachelstil-Info weitergeben. Kachel-Info. Wir können das überprüfen. Sah aus wie. Sieht gut aus. Darunter werde ich Dale diesen Blockinhalt aufstellen. Nach diesem Bett. Ich habe das eingefügt, wir werden MDB-Typografie haben. Ich benutze deinen Klassennamen, Klassennamen, MD, Bindestrich. Hier. Ich werde Blog geben. Blog. Punktbeschreibung schlägt korrekt fehl, also wird es eine Beschreibung sein. Gehen wir in den Browser. Scrolle nach unten. Jetzt haben wir unsere Beschreibung für diesen Block. Diesen einzelnen Block haben wir auch fertiggestellt. 17. Verwandte Blog anzeigen: Jetzt müssen wir auch die verwandten Beiträge zu dieser Kategorie anzeigen . Lass uns das machen. Bisher werde ich ein paar Blogs erstellen. Ich werde noch einen Block wie Test für Hunde erstellen. Und ich wähle den Inhalt hier aus. Also wähle ich hier eine Datei aus. Also wähle ich dieses Mal aus. Betrachten Sie Methode wie das Bild wurde erfolgreich hochgeladen. Lassen Sie uns eine Kategorie wie Lebensmittel auswählen. Jetzt fügen wir hinzu, dass es Luft bekommt. Und ich füge noch einen Block mit einer anderen Kategorie hinzu. Also lasst uns das auch hinzufügen. Also lade ich einen Blutverwandten hoch, um Blog zu nehmen, ich werde hochladen, lass uns die Beschreibung einfügen, das Bild auswählen. Ich benutze das hier. Wählen wir nun die Kategorie aus. Es wird markiert. Lasst uns auf klicken. Details kommen ebenfalls an. Jetzt. Ich werde löten, die mit dieser Blockkategorie zusammenhängen , also Lebensmittel. Bisher müssen wir auch einen weiteren API-Aufruf tätigen. Also lasst uns das machen 1. Zuerst. Was wir hier tun müssen, werde ich einen finden, wie verwandt ist und blogbezogen ist. Alles, was Sie hier einen verwandten Beitrag festlegen werden. Normalerweise wird angegeben vorhanden sein und es werden Eingabedaten sein. Was müssen wir danach tun? Während du den einzelnen Block bekommst? Wir werden auch verwandte Beiträge filtern. Also kostenbezogene Post. Hier. Wir können es relativ für Daten geben, okay? Es wird keine Verwirrung auslösen. Hand noch. Du kannst wie warten. X hier ist nicht gut. Wir können diese URL einfach verwenden. Und anstatt RD zu verwenden, verwenden wir den Lichtantwortpunkt, die Punktdatenpunktkategorie . Diese Antwort enthält insbesondere ein einzelnes Objekt, in dem wir Titelbeschreibung, Kategoriebild-URL haben. diese Weise können wir auf die Kategorie Licht zugreifen. Und wir werden eine weitere ABI-Flüssigkeit mit Italien für alle Boards machen ABI-Flüssigkeit mit Italien für , die sich auf die Ford-Kategorie beziehen. Im Grunde genommen wird es hier den beiden Gedichten gegenüberstehen , die wir auf unserer Homepage haben. Hier sehen Sie, dass wir einen Blog haben , der sich auf die Lebensmittelkategorie bezieht. Und wenn Sie auf den Lesemodus klicken, Sie hier im Grunde genommen eine API-Anfrage, stellen Sie hier im Grunde genommen eine API-Anfrage, um den einzelnen Blog zu erhalten. Und gleichzeitig stellen wir auch die API-Anfragen, um die beiden auf diese Lebensmittelkategorie beziehen zu können. Aber normalerweise füllt es den Board-Blog. Was wir hier tun können, verwandter Beitrag hier, wenn wir wie verwandte Daten, Punktdaten tun können . Jetzt haben wir im verwandten Port zwei, also nur einen Blog. Wir wollen nicht, dass es Block anzeigt, also lasst uns diesen lesen. Etwas funktioniert nicht, oder? Funktioniert nicht. Wir müssen ein Jahr oder eine Bedingung machen. Und wir können auch spät verwandte Daten aufnehmen. Dot ist Theta 200. Dann können wir das einstellen. Gehen wir zum Browser. Aktualisieren Sie das hier. Also kriegen wir nichts. Es wird also Kategorie sein. Wir machen hier einen kleinen Fehler. Kategorie heißt so. Dann bekommst du nur deinen Blog, der sich auf diese vierte Kategorie bezieht. Und wir wollten nur drei Blogs im vierten Bereich mit Kopf sortieren , wir können das kaufmännische und start zu 0% n gleich drei verwenden . Wir werden nur den dreiteiligen Teil füllen sich auf diese bestimmte Kategorie bezieht. Gehen wir jetzt in den Browser. Es funktioniert wie erwartet. Jetzt werden wir die verwandten beiden unten anzeigen , was wir überprüfen müssen. Falls gewählt und Punktlänge größer als 0. Dann haben wir nur zwei verwandte Beiträge. Hier. Ich verwende das H1-Tag. Es wird wie verwandte Beitragsüberschrift sein. Ich werde sie einfügen Theta h eng mit diesem Tag in diesem Indexpunkt-CSS-Datei-Styling verwandt . Ich drehe es hier für einen Tag um. Sie können all dieses Styling kopieren, indem Sie dieses Video pausieren. Ich hoffe, du hast das alles kopiert welche Kacheln. Wenn Sie zum Browser gehen, spiegeln Sie unsere Änderungen nicht wider. Speichern wir diese Datei. Wir haben diese Datei nicht gespeichert. Gehen wir zum Browser. Und jetzt kannst du damit anfangen. Wir haben unseren verwandten Hafen in Richtung. Aber wenn diese horizontale Linie danach, müssen wir verwandten Beitrag zeigen. Dennoch werde ich die MDB-Zeile mit dem Klassennamen verwenden. Also verwende ich die Zeile für den Klassennamen. Ruf an, lustig. Dann ziehe Anrufe D drei, D vier. Hier. Lass uns ein Fragment benutzen. Andernfalls werden wir diesen Fehler weiterhin erhalten. Lass das ausschneiden. Und hier werden wir unsere beiden Port-Map löschen lassen. Wir können einen Artikelindex haben. Wir können hier den MDB nennen , den wir benutzen können. Mdb kann deinen Link benutzen. Hier. Was wir auch von hier aus tun müssen, man kann nie zu einer einzigen Blob-Basis gehen. Also gebe ich an, dass du schon. Ja. Hier können wir ihm unter diesem Link eine ID-Item-Punkt-ID geben , die ich MDB, MDB-Kartenbild verwenden kann . Wir können Quelle, Artikelpunktbild, URL haben . Wir können Ihnen einen gleichen Begriff Punkttitel geben, Position. Wir werden Top geben. Durch Klicken auf E-Mail. Sie werden niemals auf den einzelnen Block zukommen. Aber nur wir können etwas Inhalt IMDB-Kartentext haben. Darin kann ich MDB-Kartentitel verwenden, wie Artikelpunkttitel. Dann kannst du eine MDB-Karte haben. Dies wird der Text mit dem Text sein. Und hier können wir eine Beschreibung verwenden. Auch hier werde ich x verwenden. Wir bringen diese Methode nach Hause dot js-Datei usw. Wir brauchen hier. Und lasst uns diese Logik kopieren. Lass alles auf die Blog-Seite gehen. Gehen wir in den Browser. Jetzt können Sie sehen, dass wir uns verwandt haben, oder Sie haben vielleicht bemerkt , dass wir diesen Blog auch bekommen. Unter diesem Thema wollen wir es nicht, diesen Blog hier, weil wir bereits auf diesem Gesicht sind. Wir möchten nicht, dass es diesen Blog unter den verwandten beiden anzeigt . Was wir hier tun können. Wir können einen Auszug erstellen. Lass uns dir einen Gefangenen geben. Gehen wir zum Browser. Wir können Sicherheit geben. Das wird gut sein. Okay. Wir möchten nicht, dass es diesen Blog unter dem verwandten zeigt , da wir bereits in diesem Blog sind. Was können wir tun? Wir können einen Filter anwenden. Danach. Wir können Filter benutzen. Wir können hier Artikel, Punkt-ID nehmen. Wenn es nicht getroffen wird, wollten wir es. ganze Blog-ID wird also nicht erfüllt. Es filtert diesen Blog automatisch heraus. Sie können sehen, dass wir diesen Blog jetzt nicht sehen können. Wir haben herausgefiltert. Und wenn Sie zur Homepage gehen, wenn Sie auf diese klicken, lesen Sie mehr. Nun, hier haben wir keine Beziehung zu tun, also möchten wir nicht, dass diese Überschrift für Erwachsene angezeigt wird. Wenn Sie keinen verwandten Port zu dieser Kategorie haben, nehmen Sie, wenn Sie keinen Blog haben , der sich auf dieses Kategorie-Tag bezieht, dann wird diese ABA immer den einzelnen Bereich des Objekts zurückgeben. Wir können hier eine Logik schreiben. Lass uns das schneiden und diesen Teil schneiden. Wir können erneut prüfen, ob es um eine Punktlänge größer als eins geht. Das bedeutet, dass wir mehr Blog in Bezug auf diese Kategorie haben. In diesem Fall wollten wir diesen Block unter den verwandten Beiträgen zeigen. Hier kannst du wie einen verwandten Beitrag geben. Gehen wir in den Browser. Jetzt können Sie sehen, dass wir diese Überschrift nicht erreichen können , weil wir keinen Blog in Bezug auf diese Kategorie haben. Und wenn Sie auf die Homepage gehen, wenn Sie darauf klicken, funktioniert dies wie erwartet. Wir bekommen einen verwandten Punkt für diese Lebensmittelkategorie. Und wenn Sie auf diesen Block klicken, navigieren Sie zu dieser einzigen Blockzahlung , die Ford Blog aktualisiert wird. Jetzt bist du im Food-Blog-Upgrade. Den Titel kannst du hier sehen. Sie können auf diese Weise auch zwischen diesem Blog wechseln. Das funktioniert jetzt. Wir haben diese Funktionalität auch auf unserer einzigen Blog-Seite abgeschlossen . 18. Blog suchen: Jetzt müssen wir an unserer Strategie arbeiten. Komponenten. Der Benutzer kann es auch starten Blob. Lass uns das machen. Ein Teil , den ich unter der Komponente eine Datei erstellen werde. Das wird die Suche sein. Ja. Es ist ein bisschen. Um Button-Komponente aus unserem Material zu holen , fahren beide aus. Bringen wir dieses eine MDB-Video mit. Wir werden ein paar Tropfen von der Heimkomponente erhalten . Das wird leicht sein. Wert bei Eingabe, Änderung, Statuswert in der Eingabekette. Diese drei Aufforderungen, wenn wir von unserer dritten Komponente erhalten werden. Hier werden wir div mit dem Klassennamen haben. Und danach verwende ich die Formularkomponente. Wir brauchen kein Handeln. Wir können einen Klassennamen wie d Bindestrich Flex geben. Wir können ein bisschen MIT haben. Mit, wir können Ihnen Verkäufe abwickeln, die wir von diesem Formular erhalten. Wir werden eine Eingabe mit einem Klassennamen haben , wird das Formularsteuerelement sein. Bitte bestellen Sie wir können Ihnen einen ersten Blog geben. Wir können Werte haben. Ich werde diesen Wert auswählen, bei dem wir die Elternkomponente beibehalten werden , die zu Hause ist. Formatieren wir das hier. Jetzt werden wir Veränderungen haben. Ich werde diese Methode noch bei Eingabeänderung verwenden, ich werde einen Button haben MDB Median wird der dritte sein, wird die Primarvereinigung sein. Primär. Wir müssen die Farbe nicht angeben. Dort wird es irgendwo sein. Jetzt wähle ich das Styling für diese Klasse in der Indexpunkt-CSS-Datei aus. Ich wette, dass das Styling für diesen Klassennamen, das das Suchformular ist. Dieser Treffer sagt ihm, er solle einen zufriedenstellenden Klassennamen ausgeben. Gehen wir nun zur Home-Dot-JS-Datei. Wir werden hier unseren Touch-Input anzeigen. Bringen wir diese zufriedenstellende Komponente mit. Gehen wir jetzt zum Browser. Sieht gut aus. Jetzt müssen wir an dieser Requisite arbeiten, die wir an unsere dritte Komponente, Mode, weitergeben. Ich definiere ein State 13-Portfolio. Lassen Sie uns seinen Wert festlegen. Stellen Sie ein. Value verwendet die dritte Methode in der Schönheit. Und hier haben wir den Längenwert vorgegeben. Es wird nur zufrieden sein. Dann auf und lege zehn. Also welches Jahr soll definiert werden? Wir haben auch Griffe Servicekrankheit. Muss es auch Input definieren? Eingabe, ändern. Es wird eine Veranstaltung erhalten. Wir können Leg Set erkennen , also Wertepunkt, Punktwert. Danach ist der Pfad eins. Definieren Sie einen Handler. Ich hab dir gesagt, denkst du. Verhindern Sie einen Zahlungsausfall? Default verhindern. Der Standardwert kann browsern. Wir werden eine Anfrage stellen, ja, also const Anleihen und ich kann diese einfach kopieren. kleinere Determinante von a ist erforderlich. Also lasst uns das kopieren. Benutzerstufe. Ich würde das ganze Ding Minute zu Weg bewegen. Und doch müssen wir die Warteschlange bestehen. Wenn wir den Antwortstatus mit 200 erhalten haben, sind wir fertig. Dann legen wir die Daten fest. Stellen Sie Daten ein. Wir werden die zweiten Daten verwenden, Antwortdaten. Also habe ich nicht benutzt, als wäre etwas schief gelaufen. Okay, lass uns das kopieren. Lass es uns hier benutzen. Jetzt. Gehen wir zum Browser. Wir haben hier etwas vermisst. Wir müssen hier ein bisschen zur Verfügung stellen. Dies wird auch eine Veranstaltung erhalten. Gehen wir nun zum Browser. Die Fed ist eine. Jetzt setzen wir den Block so, dass wir hier buchstäblich bei unserer Eingabe zuerst kein Kreuzzeichen bekommen. Was wir also tun können, können wir dir auf ewig ein Drittel geben. Gehen wir jetzt in den Browser. Aktualisieren Sie das hier. Beginnen wir jetzt noch einmal mit Diktat. Wir bekommen dieses und wenn Sie auf dieses Kreuz klicken, wird es geräumt. Sobald es gelöscht ist, möchten wir, dass es alle Daten lädt , die wir auf unserem JSON-Server haben. Was wir tun können, gehen wir zum VS-Code. Und was wir tun müssen, können wir prüfen, ob Sie keinen Wert haben. Also E-Punkt-Zielpunktwert. In diesem Fall wollten wir einfach oder Lovelock-Daten laden. Lasst uns sehen, das funktioniert oder nicht. Also lasst es uns mit dieser Zeit so einstellen. Also bekommen wir diesen Block , der mit lecker zu tun hat. Und wenn Sie darauf klicken, wird Cross gelöscht und wir werden unseren Block nach unten bringen und der Turn Server funktioniert. 19. Kategorie Blog anzeigen: Nun, das nächste, was ich im Grunde genommen den Blog bekommen wollte , wo Conduct Kategorie. Ich will eine Kategorie hier drüben. Lasst uns das machen. Ich werde eine Datei erstellen und head ist Komponente für diese Kategorie. Dot js. Lassen Sie uns zentrieren, dass es kein bisschen ist. Und das wurde im Grunde genommen einige Aufforderungen von unserer Homepage erhalten . Behandelt also Optionen der Kategorie eins über t von n aus Material Design, die darauf gebucht , um eine Komponente von MDB mitzubringen, die Sie möchten. Um MDB, MDB, Listengruppe, MDB, Lift-Gruppenelement zu bringen . Hier anstelle von div haben wir eine MDB-Karte mit etwas Lernstil. Der Stil, ich werde dir ein bisschen Tönungsrampenmarge geben. Ich gebe hier typische Zelle und ich werde Tags, Kategorien haben. Und dann verwende ich die MDB-Listengruppe. Ich übergebe einen Plüsch. Zur Map gehen sind alle Option. Option-Punkt-Map Wir holen uns einen Gegenstand. Danach werden wir unseren MDB LET-Gruppenartikel haben , in dem wir die gesamte Kategorie anzeigen werden. Wir können dir einen Artikel geben. Lassen Sie uns den Schlüsselindexstil angeben. Lassen Sie uns Ihnen Kredit geben, Sir. Onclick. Onclick. Onclick. Ich werde diese Methode verwenden , die Kategorie behandelt wird. Und ich gebe den Gegenstand weiter. Hier haben wir das hier. Also lasst uns das entfernen. Farmer das hier. Gehen wir nun zur Home-Dot-JS-Datei. Hier. Als es teilgenommen hat, ist die Option. Wir haben hier bereits definiert. Lassen Sie uns das kopieren. Gehen wir zur Home-Dot-JS-Datei. Hier. Wir können diese Kategoriekomponente hier und unter dieser Spalte verwenden. Oh, wir können noch eine Kolumne haben. Mit der Größe drei. Hier können wir die Kategoriekomponente verwenden jeden Code automatisch wichtige Komponente ansehen. Und hier können wir unsere von uns definierten Optionen weitergeben. Ein riesiger Staat. Das siehst du hier. Crawdaddy-Komponente wird automatisch aus VS Code importiert. Gehen wir zuerst in den Browser. Sie können sehen, dass wir unsere Kategorie haben. Okay? Diese Kategorie wird tödlich herunterkommen, denn hier werden wir unsere vierte Komponente haben. Markieren wir diese Kategorie-Komponente. Wir wollten den Hafen basierend auf der verschiedenen Kategorie bekommen . Das nächste, was wir hier tun können ist, dass wir eine Methode definieren müssen. Hier. Wir bestehen auch diese, handhaben die Kategorie. Definieren wir dieses. Drittel ist Rückkehr. Es könnte alles sein. Hier. Wir können einen API-Aufruf tätigen, sogenannte Antwort. Wir haben diese API bereits in Bezug auf Kategorien verwendet. Lassen Sie uns also zur Datei blog.js gehen und wir können diese verwenden. Lassen Sie uns das kopieren. Füge es hier ein. Lass uns zu den Hausaufgaben gehen. Ja. Ich benutze hier ein seltsames x ts. Lasst uns sehen, wie sie all das Ding bewegen. Und wir werden eine Kategoriekomponente erhalten . Wir können die Kategorie hier packen. Jetzt haben wir den Antwortpunktstatus 100 nicht angekreuzt . Dann setzen wir die Daten ein, setzen Delta-Anleihen Punktdaten. Wir werden die gleichen Methoden lösen als wäre etwas schief gelaufen. Irgendetwas ist gegangen. Mal sehen, ob es funktioniert oder nicht. Lassen Sie uns nun den Block basierend auf der Kategorie abrufen. Also bekommen wir nur Food-Blog. Wenn Sie auf klicken, erhalten wir nur Tech-Blog. Nun, was ich tun werde, also fünf, werde ich hier noch ein Blog hinzufügen, damit wir die Funktionalität implementieren können, wie lassen Sie es diese Vasodilatation einschenken. Also müssen wir noch ein paar Blogs hinzufügen. Funktioniert auch. Und du siehst, dass wir den Freund der Farbe pro Stunde haben. Wir haben insgesamt sechs Block geschaffen. Lasst uns noch einen Block hinzufügen. Bei Schaltkreisen. 20. Aktuelle Blog anzeigen: Jetzt wollten wir als Nächstes den Block in unserer Anwendung zeigen . Immer wenn der Benutzer einen neuen Block hinzufügt. So wird es auf dieser Seite erscheinen und wir werden nur anzeigen für, lass uns Bloc vom Benutzer erstellt. Weil wir später eine Paginierung haben werden. Während der Paginierung werden also nur fünf Blogs angezeigt. Daraufhin wird die Reihenfolge angezeigt. Sie können den großen Blog nicht sehen. Und um Theta großen Block zu erreichen, müssen wir im Grunde die Hale-Bopp Seite im Wesentlichen nehmen. Sie können mit dieser Paginierung auch , wenn Sie zum Blog gehen möchten. Aber der letzte Block können wir auch hier in unserer Blockkomponente zeigen . Lassen Sie uns das also umsetzen. Gehen wir zum VS-Code. Ich werde kompetentes Licht haben. Blog-Punkt js. Erstens ist es weniger als das Geschlecht in ein bisschen. Hier. Wir müssen Komponenten mitbringen. Ich bin DVD von MDB betätigt. Lehnen Sie den UI-Thread ab, wenn die IT eine Komponente enthält, die sich auf Karte, MDB, MDB-Zeile, MDB-Spalte, MDB- und MDB-Kartentopf bezieht MDB-Zeile, MDB-Spalte, . Wir wollten auch den Link-Import von Dr. nach unten bringen. Wir müssen diesen Link mitbringen. Hier. Wir werden ein Proxy-Image erhalten. Sie haben die Kategorie „Gezeiten-ID“ hinzugefügt. Danach verwende ich den Link. Wir wollten auch zu dem Sängerblock navigieren , der basierend auf dem Ausweis bezahlt wurde. Ich bin unser Blog-Bereich, Blog. Und wir haben Fitbits-Ausfall-ID. Danach verwende ich Kartenkomponenten, also MDB-Karte. Ich werde sie hier im Linienstyling verwenden. Max verte. Ich gebe dir 300 Pixel. Ich gebe hier einen typischen Ich gebe dir einen Bootstrap-Klassennamen, der leer ist. Das passiert als Marketing. Danach verwende ich die MDB-Zeile mit dem Platin G 0. Ich werde hier verwendet MDB-Spalte. Ich gebe dir einen MD. Und hier verwende ich MDB Guard Image. Hier. Ich gebe eine Quelle an , die sofort vererbt wird. Wir können title verwenden. Wir können dir einen Klassennamen geben, wir können dir eine Runde geben, um das Bild zu erstellen. Wir können auch hier ein wenig Inline-Styling geben. Lassen Sie uns die Höhe geben. Es zeigt einen einsamen. Okay? Nach dieser MDB, MDB-Spalte, können wir MD neun geben. Wir können hier MDB-Pappe verwenden, in dem ich ein p-Tag mit dem Klassennamen haben kann. Dann lasst uns titeln. Lassen Sie uns Titel titeln. Und es wird nur wie Titel sein , den wir von unserer Homepage erhalten. Wir sind die Fliesen vordefiniert. Aber diese Klasse vielleicht in unserer Indexpunkt-CSS-Datei. Gehen wir zur Indexpunkt-CSS-Datei. Ich werde hier drüben etwas Styling machen. Ich gebe diese Fliesen. Danach. Gehen wir zur Home-Dot-JS-Datei. Was wir tun können. Also definiere ich zuerst einen Zustand hier. Welches wird der Kleber sein, der den neuesten Blog hält. Blog. Lasst uns hier blob machen. Verwenden Sie im dritten Bereich Vektor. Wir können unfunktionsfähig sein wie das neueste holen, Blog. Jetzt müssen wir diese Funktion definieren. Definieren wir nur. Lasst uns das ein bisschen bloggen. Hier. Wir wollten buchstäblich das, was wir tun wollten, wir wollten den letzten vier Rekord beenden. Wir wollten einen API-Status erstellen, unabhängig davon, ob er sein ganzes Licht für Blogs passt. Immer wenn der Benutzer einen neuen Block hinzufügt, passt er zum Licht für den Blog, das wir hier anzeigen werden. Okay, bis jetzt müssen wir im Grunde genommen einige Anpassungen in unserem Server-APA vornehmen. Also brauchen wir zuerst den Gesamtblock. Gesamter Block, wie wir kriegen können, können wir diesen einfach kopieren. Dies ist verantwortlich für das Abrufen des Portal-Blogs. Jetzt heben wir mit Feather Star Ten und beginnen wie Portal-Blog-Punktdaten, Punktlänge minus vier wird nichts sein, aber es wird nur die gesamte Blog-Punktlänge sein . Wir müssen Breite und Daten angeben. Jetzt haben wir unseren Anfang und Ende. Wir müssen API-Antworten schreiben. Also nochmal, wir werden diesen nur benutzen. Aber dieses Mal werden wir diese API ändern. Also benutze ich deinen Rücken. Danach. Ich fange an und fange an. Das gleiche Konzept, das wir für unsere Patientenbedürfnisse verwenden werden. Und auch. Geben wir auch Ihr Ende und Ihren Wert an. Lasst uns hier Dollar legen. Jetzt. Wir können das einfach kopieren. Wir können es einfach hier teilen. Wir wollten diese Daten in einen Blog einfügen. Lasst uns das nun sehen, was es erhält. Der Empfang von IV ist URL-ID und Kategorien. Also Kategorie, die wir hier nicht brauchen. Also lasst uns das entfernen. Gehen wir zur Home-Dot-JS-Datei. Und danach, was wir tun müssen, Lasst uns runterkommen. Drittens dieses Spalten-Tag. Wir werden R haben, lasst uns unseren Blog angestochen haben. Wird wie für Tag verwenden. Und es wird die neueste Post-Klasse sein. Dann gebe ich dir eine SMS. Um anzufangen. Hier. Wir können Licht haben. Lasst uns, lasst uns die Punktkarte einstecken. Ich werde einen Index haben. Hier. Ich kann die Komponente des Vietnamkriegs hervorbringen, lassen Sie uns Komponente planen automatisch wichtige Komponente des Vietnamkriegs hervorbringen, lassen Sie uns Komponente planen. Hier können wir key benutzen. Hier können wir uns einfach ausbreiten sind alle Artikel. Auf diese Weise können wir unsere Blockkomponente D strukturieren. Hier brauchen wir also nur Bild, URL, Titel und ID. Sie können auch Textur, andere Kategorie und diese Kategorie und Beschreibung graben , aber für diesen Beitrag ist nicht erforderlich. Gehen wir in den Browser. Jetzt können Sie sehen, dass wir uns posten lassen. Okay? Und wenn Sie auf diesen klicken, können Sie auch zu einem einzigen Block navigieren. Das funktioniert so, als hätten wir das Widget auch in unserer Anwendung implementiert . 21. Pagination – Teil 1: Das letzte Feature ist also das linke Bein. Um die Paginierung zu implementieren. Bei der Paginierung wollten wir nur den Fünf-Blog anzeigen, aber lassen Sie uns sehen, wie wir diesen umsetzen werden. Gehen wir zum VS-Code. Fünf. Ich werde eine Komponente in der heutigen Komponente erstellen, denn die Paginierung stammt aus und dot js. Lassen Sie uns hier ein Snippet zur Paginierung. Hier das Fenster, um eine Komponente aus unserer aktiven Datei zu bringen, könnte ich die Paginierung von MDB, MDB, MDB, MDB, Basie, Nation Link und MDB-Buten implementieren MDB, MDB, MDB, Basie, . Wir können einige Prof machen, die wir von unserer übergeordneten Komponente erhalten werden. Das heißt, es wird das aktuelle Seitenlimit erhalten. Dann kann es kein Load Blöcke Delta erhalten, okay? Daten und gesamter Blog. Hier. Ich definiere eine Funktion und diese rendern. Ich werde prüfen, ob wir die aktuelle Seite haben , die sich auf 0 befindet, dann haben wir die Schaltfläche Weiter um auf die andere Seite zu navigieren. Hier. Ich schreibe wie IMDB-Seite. Es wird ein Zentrum haben. Ich benutze mb Bindestrich 0. Wir werden MDB-Paginierung haben. Dann Link zur MDB-Paginierung. Lasst uns dieses Extra entfernen. Es wird unten sein. Hier wird es eins sein. Jetzt haben wir noch ein Paginierungselement. Lasst es uns pumpen. Darin. Wir werden unseren Knopf haben. Darin. Wir werden unseren Button hier haben. Ich benutze die MDB und die BTN-Taste wird abgerundet. Ich werde einen Klick haben. Onclick. Dies werden die Lasten Blöcke Daten sein. Der Wert unseres Buttons wird der nächste sein. Jetzt müssen wir eine Bedingung überprüfen, wie wenn wir eine Bedingung wie die momentane Latenzzeitbegrenzung abzüglich eines Delta-Punkt-Längenlimits überprüfen wollen momentane Latenzzeitbegrenzung abzüglich eines Delta-Punkt-Längenlimits . Ich wollte es, also den vorherigen Vorlesungs-Button, also wollte ich beide Buttons anzeigen. In diesem Fall können wir diesen einfach kopieren. Wir können einfach hier übernehmen. Hier müssen wir einige Anpassungen vornehmen. Hier wird der Wert zurückkommen. Okay? Hier bin ich MDB Paginierung Link ist nicht erforderlich. Also lasst uns das zuerst verschieben . Hier. Wir müssen auch die Seite vergrößern, damit wir dies ausschneiden können und wir können hier auch von hier aus verwenden. Wir brauchen keinen Seiten-Paginierungslink, also entfernen wir diesen. Hier. Was auch immer der aktuelle Lohn da sein wird, es wird Zutat bekommen. Und der Button-Wert wird der vorherige sein. Wieder werden wir noch einen haben. Aktionspunkt „Auslagerung“. Ich kopiere das einfach. Ich füge es unter diese Paginierungsschaltfläche ein. Wir kommen hier nah dran. Lassen Sie uns das kopieren. Ich schneide das hier drüben ab. Diese Regeneration. Aber dann und dieses Paginierungselement. Wir kommen hier in die Nähe, damit wir diesen entfernen können. Hier wird es da sein. Und ich glaube, das war's. Und wir werden eine andere Bedingung haben , in der das große Netz erreicht wird. Dann wollte ich in diesem Fall die Seitenzahl und den vorherigen Button anzeigen. Also können wir diese eine ganze Sache einfach noch einmal kopieren. Bevor wir kopieren, müssen wir uns zurückgeben, sonst wird es nicht vertikal. Also lasst uns das ganze Ding kopieren und zurückgeben. In diesem anderen wollten wir den vorherigen Button zusammen mit dieser Seitenzahl sortieren . Wir können das kopieren. Wir können zwei Stufen zahlen wird IMDB-Patient sein. Wir müssen also diese schließende Klammer angeben, wenn die IT dieses schließende Tag bereitstellt. Und wir müssen auch Thaddeus zurückgeben, sonst wird es dir nicht zeigen. Lass uns kopieren. Lasst uns das schneiden. Wir können einfach die Paginierung rendern. Im Oktober mit der P-Generation. Wir müssen einige Anpassungen in unserem bestehenden APA vornehmen. Wir wollten den Blog fünf pro Seite sortieren. Okay, von hier aus geben wir ihnen den Standardwert 05 an. Dies ist n und dieses Detail in höherem Gradwert. Standardmäßig rufen wir die fünf Block pro Seite auf der Homepage ab. Jetzt können wir es nicht so benutzen. Also müssen wir etwas anders machen. Wir können unseren Start- und Endwert bereitstellen. Hier wird es das Ende sein. Wir erhalten während dieser Wert von hier 0 und steigen. Okay? Was wir danach tun müssen, müssen wir aktuell machen, okay? Wir müssen zuerst diese dritte Ferneinstellung definieren. Die aktuelle wird die aktuelle Seite sein. Dies wird der g. Wir werden nicht auf Seitenlimit überwacht haben. Beschränken. Wir wollten die fünf Block pro Seite anzeigen. Und wir werden auch einen weiteren Status haben , der die Gesamtblocklänge festlegt. Okay, also lasst uns das machen. Dies wird ein totaler Blog sein. Blog. Dies könnte anfangs null sein. Jetzt müssen wir die aktuelle Seite einstellen. Wir können Ihnen einen aktuellen Bits plus Erhöhung geben. Gehen wir nun zuerst zum Browser. Jetzt können Sie sehen, dass wir nur fünf Blocks sehen können , aber es zahlt sich aus. Jetzt müssen wir an unserer Paginierung arbeiten. Also alles, was wir bereits geschaffen haben. Was wir hier tun können, so schnell, lass uns zum schriftlichen Teil gehen. Nach der db-Spalte. Md Bureau, wir werden noch ein div mit dem Klassennamen leeren Bindestrich drei haben. Und stattdessen diese Klasse bringen wir jetzt die Paginierung mit. Mal sehen. Geschäft und es zeigt sich oder nicht, wir haben das Geschäft und dann bieten wir derzeit keinen Wert. Lassen Sie uns diesen Wert also angeben. Blöcke, Daten, Load und Blöcke und Daten der aktuellen Seite laden. Du musst dafür sorgen. Dann beschränken Sie auch Daten wir zur Verfügung stellen müssen. Wir sind aufgerufen, das gesamte Blocknetz bereitzustellen. Wie viel Blut haben wir jedoch in unserer db.json-Datei, können wir das tun? Also hier kriegen wir alle Blöcke. Hier können wir also den gesamten Blog sagen. Hier können wir hören, dass wir insgesamt Blog-Punktdaten, Punktlänge machen können . Diese Funktion wird es immer ausführen, weil wir Use-Effekt auf diese Weise eingefügt haben. Aber hoffentlich können wir die Länge des Quartal-Blogs ermitteln, den wir in unserer db.json-Datei haben. Jetzt können wir das auch passieren. Gesamt Blog. Gehen wir also zum Browser und aktualisieren ihn. Jetzt wird diese Natur nicht wie erwartet funktionieren , da wir auch einige Anpassungen vornehmen müssen. In unserer Paginierungskomponente. Gehen wir zur Paginierungskomponente. Was wir tun müssen, müssen wir erneut einen Standardwert von diesem Load Block Theta bereitstellen , da diese API hier geändert wurde. Sie können sehen, dass wir sie in 3D bereitstellen müssen. Für dieses Szenario. Wir müssen die nächsten fünf Block passieren. Wir werden durch Klicken auf die Schaltfläche Weiter kommen. Und wir werden den pH-Wert erhöhen. Für dieses Szenario. Wir müssen diesen Weg gehen. Hier mit hässlich gehen wir rückwärts. Hier können wir also Aktuelle Seite minus 15 geben. Wir haben zwei Wege wie diesen, aktuelles Gebot und B25. Wir gehen rückwärts, also müssen wir es im Dekrement tun. Also müssen wir ein Dekret minus eins machen. Nun hier, was wir zur Verfügung stellen müssen, also kopieren wir das hier. Füge es hier ein. Hier gehen wir normalerweise wieder hin. Als Nächstes. Wir haben noch ein paar Blogs. Hier was wir tun können. Also lasst uns das extra schnell entfernen, und hier wird es der Strom plus eins zu fünf plus sein , um diesen auch in die Klammer zu stecken. Und mach fünf. Und dieses Mal tun wir für dieses Szenario oder dieses Szenario, das wir tun können, können wir dies auf Klebstoff weitergeben , weil es auf die gleiche Weise funktioniert. Gehen wir jetzt zum Browser. Dafür. Wir haben Seite eins und wir haben den Next Button. Und wir haben Wachseite h2. Und wir haben keinen weiteren Blog. Wir kommen hier vorherigen Button und wir müssen noch bloggen, okay. 22. Pagination – Teil 2: Und wir müssen auch noch ein paar Objekte in dieser Paginierungskomponente machen. Also hier nehmen wir, wenn ich nicht aktuelle Seite hätte, das ist 0 und die Datenlänge weniger als drei ist, weniger als fünf ist, dann wollen wir es nicht. Also die Visualisierungskomponenten, setzen wir noch eine Klammer weil wir einen Motor haben werden , unseren Zustand, unsere Täuschung, die eine Bedingung, das heißt, wenn wir uns in der aktuellen Periode befinden, das ist 5-Bit, wir haben die Blog-Verlängerung Datei. In diesem Fall möchte ich es dann nicht zur Paginierungskomponente. Und für die zweite Bedingung, was wir ändern werden. Also bekommen wir Portal-Blog, also total Blog, aber sie haben nichts getan, aber es gibt die Länge des Blocks, die wir in unserer db.json-Datei haben. Im Moment haben wir also sieben Blöcke. Sie können das durch Block in diesem Bereich sehen und blockieren. Und dann haben wir als Nächstes Steven Blog. Wir können überprüfen, ob der gesamte Blog weniger als d dt ist. Leider ist der Blog gleich dem Limit. Das heißt, was ich hier versuche zu tun. Angenommen, wir haben nur fünf Blogs in unserer db.json-Datei. In diesem Fall möchte ich auch nicht, dass die Seite gewissermaßen sortiert wird, denn wenn Sie auf Weiter klicken, erhalten Sie ein Leerzeichen. In diesem Fall wollte ich auch vermeiden, Vasodilatationskomponente zu löten. Deshalb nehme ich dieses Szenario an. Wenn wir uns unserem Thema nähern, nehmen wir weitere 5-Bit, keine andere Basis. In diesem Fall wollte ich es einfach erledigen. Keine. Gehen wir zu einem Browser. Sie werden es hier erst geändert, wenn Sie einen Blog gelöscht haben. Beispiel, wenn ich die beiden Blöcke lösche und wenn ich diesen lösche, wird der Blogger gelöscht. Aber wir bekommen ein Problem. Warum bekommen wir dieses Problem weil wir die Daten aus unserer Home-Dot-JS-Datei verwässern. Wir erstellen auch den Blog mit dieser Last blockiert und sagen Hier müssen wir auch das Argument übergeben. Was müssen wir also tun? Also werden wir wieder den Standardwert angeben. Wir wollten also bei 5050 beginnen und wir müssen auch noch eine weitere zusätzliche Operation wie delete bereitstellen . Okay? Mit Hilfe dieses Arguments werden wir also den aktuellen Weg auf den Anfangswert festlegen. Also brauchen wir das hier. Lassen Sie uns zur Funktion Loads Block Data gehen. Hier. Was wir hier mit hässlich machen müssen, können wir das Argument Lake Operation weitergeben. Darin. Was wir tun müssen. Nachdem wir diese Daten festgelegt haben, können wir überprüfen, ob Sie die Operation haben, Dies funktioniert am Lynne-Fall. Ich lösche es. Das wird aktuell auf 0 gesetzt. Es wird das Basisszenario bereits erhöhen . Versuchen wir es und dieses. Lass uns als Nächstes gehen. Hier haben wir nur einen Block. Lasst uns das löschen. Jetzt wird unser Bloggen hier gelöscht. Wir haben nur fünf Blocks. Dies sollte nicht angezeigt werden. Etwas wird nicht richtig aktualisiert, da der gesamte Blog grundsätzlich hier in diesem Fitch, diesem Blog, verwendet wird . Wir müssen diese Logik hier eigentlich nicht in den Textblock passen. Wir müssen diese Logik hier machen. Wir müssen Ihren DCPA hier ändern. Die Gesamtblocklänge wird abgerufen. Ich füge dieser Anwendung ein paar Blogs hinzu. Also Leute, ich habe zwei weitere Blöcke hinzugefügt, bevor wir erneut eine Löschoperation mit der Paginierung durchführen. Klicken wir auf Weiter. Sie können sehen, dass wir auch dieses Szenario haben. Diese Else-if-Bedingung haben wir auch den dritten und wir haben noch einen Block bei der dritten Pille. Jetzt wollte ich eine weitere Bedingung in 30s LCF schreiben , falls Sie bei Kunst nicht blockiert haben, dann möchte ich nicht, dass diese vorherige und nächste potenzielle Unterstützung angezeigt wird. Was alles haben wir zehn Block in unserer db.json-Datei. In diesem Fall möchte ich nicht, dass dies in beiden Schaltflächen angezeigt wird, die Previous und Next sind. Ich wollte einen kleinen Previous Button zeigen. Also müssen wir noch eine Bedingung schreiben. Bevor wir also den Löschvorgang ausführen, schreiben wir diese Bedingung. Hier. Was ich nehmen werde, Portal-Blog minus Theta-Punktlänge ist nicht gleich dem Seitenlimit. Dann wird nur es angezeigt. Okay, lass uns kämpfen. Gehe in den Browser und aktualisiere ihn. Klicken wir auf Weiter. Wir haben das ziemlich gut , weil wir mehr Blog zum Thema haben. Jetzt lasst uns dieses löschen. Klicken Sie auf. Okay, also Blog wurde erfolgreich gelöscht. Jetzt sind wir unter fünf Seiten. Jetzt klicken wir auf Weiter. Jetzt können Sie sehen, dass wir den nächsten Button nicht haben, denn da wir einen Zehn-Block in unserer db.json-Datei haben, sagen wir fünf Block, aber wir haben auch die Tatsache , dass es ein kleines Problem ist in unserer Paginierung. Wenn du zurück gehst, funktioniert das. Lassen Sie uns noch einen löschen. Auch hier wird es von der fünfseitigen Seite gelöst . Klicken wir auf Weiter. Wir haben nur diesen vorherigen Button bekommen. Das funktioniert. Also zahlen die Leute das Nächste. Es wurde auch in unserer Bewerbung abgeschlossen. 23. Korrekturfehler: Jetzt haben wir ein Problem in unserer Bewerbung. Wenn Sie also einen Blog suchen, nehmen wir an, Sie haben seit dem Basteln Block, wir bekommen diesen 30-Jährigen mit diesem Keyword-Band, okay? Und wenn Sie dieses eine Eingabefeld löschen, erhalten wir jetzt kein Blockformular. Was passiert hier drüben? Also müssen wir zum VS-Code und in der Home-Dot-JS-Datei gehen , warum es passiert. Also hier, Input-Änderung in der Eingabekette mit hässlichem Umgang mit dem 13-Portfolio. Hier geben wir also nicht den standardmäßigen Anfangswert für unseren Start und einen erhöhten Wert weiter. Hier müssen wir also auch in Richtung Standardwert wie 050 übergehen . Die Art und Weise, wie wir in OUT weitergegeben haben. Wenn du dich erinnerst, hier. Hier haben wir unseren Anfang und erhöhen dann den Wert. Ebenso müssen wir den Wert auch hier übergeben. Gehen wir in den Browser und aktualisieren Sie diesen. Jetzt suchen wir noch einmal Blog mit der Technologie. Jetzt klicken wir auf dieses Kreuz. Jetzt erhalten wir alle Blog-Daten zurück , die wir in unserer JSON-Datei haben. Also haben wir dieses Problem behoben. 24. 404 und About Seite: Okay, jetzt werden wir also an anderen Seiten arbeiten , die nicht gefunden und über bezahlt werden. Also fange ich zuerst mit der nicht gefundenen Seite an. Gib ein paar zufällige URLs. Du wirst keinen Spaß machen, aber ich wollte hier ein Bild lösen. Lasst uns das machen. Lass uns hier keine Dot JS-Datei finden. Was müssen wir tun? Hier? Ich füge nur eine Codezeile ein. Lassen Sie uns nun den Browser gehen. Jetzt kriegen wir einen ganz schön. Nun, wenn die URL nicht mit NET übereinstimmt, haben wir in unserer Datei app.js. Jetzt müssen wir auch an dieser About-Seite arbeiten Ich werde mir nur den Inhalt in der Dot-JS-Datei ansehen. Also sage ich nur den Inhalt für diese About dot js-Datei voraus. Wenn die IT etwas Vertrauen von MDB, MDB-Container bringt . Ich bin DB typografisch. Geben wir etwas Marge, obersten Rand, Top 100 Pixel. Sie können jeden Inhalt in dieser About dot js-Datei angeben. Gehen wir in den Browser. Wir erhalten also diese eine Beschreibungszeile zu dieser Anwendung. 25. Vielen Dank: Wenn Sie sich dieses Video ansehen, das gegangen ist, haben Sie diesen Kurs statistisch abgeschlossen. Ich bin mir sicher, Sie haben es genossen, diese React-Blog-Anwendung mit mir zu erstellen . Ich hoffe, dieser Kurs wird Ihnen helfen, Ihre eigene Blogging-Website mit React und anderen Teilen davon von meinem Kopf zu erstellen. Wenn Sie Fragen oder Vorschläge haben, können Sie sich jederzeit an mich wenden. Vielen Dank, Jungs, dass Sie sich für diesen Kurs eingeschrieben haben. Wir sehen uns in einem anderen Kurs. Bis dahin gehst du zu kaufen und kümmere dich darum. Und vergiss nicht, auch meinen Code zu überprüfen.