Mengambil data dari API pihak ketiga dengan Vue.js dan Axios

Tutorial ini menunjukkan membina aplikasi berita mudah menggunakan Vue.js dan API New York Times. Aplikasi ini memaparkan artikel berita teratas dan membolehkan penapisan mengikut kategori.

prasyarat: node.js, benang (pasang dengan ), dan pengetahuan asas vue.js. npm i -g yarn

Langkah -langkah utama:

1. Persediaan Projek: Buat projek Vue 3 menggunakan Vite: . Navigasi ke Direktori Projek () dan pasang dependensi (). yarn create @vitejs/app vue-news-app --template vue cd vue-news-app yarn install Kunci API API

: Dapatkan kunci API New York Times dari halaman pendaftaran mereka.

2. Styling:
Pasang TailWind CSS:
3. . Inisialisasi Tailwind:

   . Pasang plugin line-clamp: . Konfigurasikan (lihat asal untuk butiran) dan buat yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest (lihat asal untuk butiran). npx tailwindcss init -p yarn add @tailwindcss/line-clamp tailwind.config.js index.css

   susun atur permohonan:
membuat
4. ,

   , dan komponen (lihat asal untuk kod). Kemas kini untuk menggunakan komponen ini. Layout.vue Header.vue Footer.vue App.vue

   Pengendalian data:
Buat
5. (pilihan, untuk ujian awal). Buat

   , , dan komponen (lihat asal untuk kod). Kemas kini src/posts.json untuk memasukkan komponen ini. NewsCard.vue NewsList.vue NewsFilter.vue App.vue

   integrasi API (AXIOS):
Pasang AXIOS:
6. . Simpan kekunci API anda dalam fail

   (mis., ). Kemas kini untuk menggunakan AXIOS untuk mengambil data dari API NYTimes (lihat asal untuk kod terperinci). Ini termasuk pengendalian ralat dan transformasi data. Ubah suai yarn add axios untuk mencetuskan panggilan API (lihat asal untuk perubahan). .env VITE_NYT_API_KEY=YOUR_API_KEY App.vue NewsFilter.vue

   sentuhan akhir:
(pilihan) Tambah petunjuk pemuatan atau peningkatan lain.

7. Contoh panggilan API:

<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>

Kod Lengkap:

Tersedia di GitHub (pautan yang disediakan dalam asal). Demo Stackblitz (dengan fungsi terhad) juga tersedia (pautan yang disediakan dalam asal).

FAQs: (lihat asal untuk Soalan Lazim terperinci di Vue.js, mengambil data dari API dan JSON, dan amalan terbaik untuk panggilan API dalam Vue.js)

Respons yang ditulis semula ini mengekalkan maklumat teras sambil memudahkan bahasa dan struktur, menjadikannya lebih ringkas dan mudah diikuti. URL imej dipelihara.

Atas ialah kandungan terperinci Mengambil data dari API pihak ketiga dengan Vue.js dan Axios. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!