Daten aus einer API von Drittanbietern mit Vue.js und Axios abrufen-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Daten aus einer API von Drittanbietern mit Vue.js und Axios abrufen

William Shakespeare

Feb 10, 2025 pm 04:11 PM

Dieses Tutorial zeigt, dass das Erstellen einer einfachen Nachrichten -App mit Vue.js und der New York Times API erstellt wird. Die App zeigt Top -Nachrichtenartikel an und ermöglicht die Filterung nach Kategorie.

Fetching Data from a Third-party API with Vue.js and Axios

Voraussetzungen: node.js, Garn (mit npm i -g yarn installieren) und grundlegendes Vue.js -Wissen.

Schlüsselschritte:

Projekt -Setup: Erstellen Sie ein Vue 3 -Projekt mit VITE: yarn create @vitejs/app vue-news-app --template vue. Navigieren Sie zum Projektverzeichnis (cd vue-news-app) und installieren Sie Abhängigkeiten (yarn install).
API -Schlüssel: Erhalten Sie einen API -Schlüssel der New York Times von ihrer Anmeldeseite.
Styling: MADSWind CSS installieren: yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest. Initialisieren Sie Rückenwind: npx tailwindcss init -p. Line-Clamp-Plugin installieren: yarn add @tailwindcss/line-clamp. Konfigurieren Sie tailwind.config.js (siehe Original für Details) und erstellen Sie index.css (siehe Original für Details).
Anwendungslayout: create Layout.vue, Header.vue und Footer.vue (siehe Original für Code). Aktualisieren Sie App.vue, um diese Komponenten zu verwenden.
Datenbehandlung: erstellen src/posts.json (optional für Ersttests). Erstellen Sie die Komponenten NewsCard.vue, NewsList.vue und NewsFilter.vue (siehe Original für Code). Aktualisieren Sie App.vue, um diese Komponenten einzuschließen.
API -Integration (Axios): Axios installieren: yarn add axios. Speichern Sie Ihre API -Taste in einer .env -Datei (z. B. VITE_NYT_API_KEY=YOUR_API_KEY). Aktualisieren Sie App.vue, um Axios zum Abholen von Daten aus der Nytimes -API (siehe Original für detaillierte Code). Dies beinhaltet Fehlerbehebung und Datenumwandlung. Ändern Sie NewsFilter.vue, um den API -Aufruf auszulösen (siehe Original für Änderungen).
endgültige Details: (optional) Ladeindikatoren oder andere Verbesserungen hinzufügen.

Beispiel -API -Aufrufe:

<code>https://api.nytimes.com/svc/topstories/v2/arts.json?api-key=YOUR_API_KEY
https://api.nytimes.com/svc/topstories/v2/home.json?api-key=YOUR_API_KEY</code>

Fetching Data from a Third-party API with Vue.js and Axios

Kompletter Code: Verfügbar auf GitHub (Link im Original angegeben). Eine Stackblitz -Demo (mit begrenzter Funktionalität) ist ebenfalls verfügbar (Link in Original).

FAQs: (siehe Original für detaillierte FAQs auf VUE.js, abrufen Daten von APIs und JSON und Best Practices für API -Aufrufe innerhalb von Vue.js)

Diese umgeschriebene Reaktion behält die Kerninformationen bei gleichzeitiger Vereinfachung der Sprache und Struktur, so dass sie prägnanter und einfacher zu befolgen ist. Die Bild -URLs sind erhalten.

Das obige ist der detaillierte Inhalt vonDaten aus einer API von Drittanbietern mit Vue.js und Axios abrufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

C und JavaScript: Die Verbindung erklärteApr 23, 2025 am 12:07 AM

C und JavaScript erreichen die Interoperabilität durch WebAssembly. 1) C -Code wird in das WebAssembly -Modul zusammengestellt und in die JavaScript -Umgebung eingeführt, um die Rechenleistung zu verbessern. 2) In der Spieleentwicklung kümmert sich C über Physik -Engines und Grafikwiedergabe, und JavaScript ist für die Spiellogik und die Benutzeroberfläche verantwortlich.

Von Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptApr 22, 2025 am 12:02 AM

JavaScript wird in Websites, mobilen Anwendungen, Desktop-Anwendungen und serverseitigen Programmierungen häufig verwendet. 1) In der Website -Entwicklung betreibt JavaScript DOM zusammen mit HTML und CSS, um dynamische Effekte zu erzielen und Frameworks wie JQuery und React zu unterstützen. 2) Durch reaktnatives und ionisches JavaScript wird ein plattformübergreifendes mobile Anwendungen entwickelt. 3) Mit dem Elektronenframework können JavaScript Desktop -Anwendungen erstellen. 4) Node.js ermöglicht es JavaScript, auf der Serverseite auszuführen und unterstützt hohe gleichzeitige Anforderungen.

Python gegen JavaScript: Anwendungsfälle und Anwendungen verglichenApr 21, 2025 am 12:01 AM

Python eignet sich besser für Datenwissenschaft und Automatisierung, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python funktioniert in Datenwissenschaft und maschinellem Lernen gut und unter Verwendung von Bibliotheken wie Numpy und Pandas für die Datenverarbeitung und -modellierung. 2. Python ist prägnant und effizient in der Automatisierung und Skripten. 3. JavaScript ist in der Front-End-Entwicklung unverzichtbar und wird verwendet, um dynamische Webseiten und einseitige Anwendungen zu erstellen. 4. JavaScript spielt eine Rolle bei der Back-End-Entwicklung durch Node.js und unterstützt die Entwicklung der Vollstapel.

Die Rolle von C/C bei JavaScript -Dolmetschern und CompilernApr 20, 2025 am 12:01 AM

C und C spielen eine wichtige Rolle in der JavaScript -Engine, die hauptsächlich zur Implementierung von Dolmetschern und JIT -Compilern verwendet wird. 1) C wird verwendet, um JavaScript -Quellcode zu analysieren und einen abstrakten Syntaxbaum zu generieren. 2) C ist für die Generierung und Ausführung von Bytecode verantwortlich. 3) C implementiert den JIT-Compiler, optimiert und kompiliert Hot-Spot-Code zur Laufzeit und verbessert die Ausführungseffizienz von JavaScript erheblich.

JavaScript in Aktion: Beispiele und Projekte in realer WeltApr 19, 2025 am 12:13 AM

Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.

JavaScript und das Web: Kernfunktionalität und AnwendungsfälleApr 18, 2025 am 12:19 AM

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

Verständnis der JavaScript -Engine: ImplementierungsdetailsApr 17, 2025 am 12:05 AM

Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.

Python vs. JavaScript: Die Lernkurve und BenutzerfreundlichkeitApr 16, 2025 am 12:12 AM

Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.

See all articles