用Vue.js和Axios从第三方API获取数据

热门技术勘探工
303 阅读3分钟

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

更多的时候，在构建你的JavaScript应用程序时，你会想从一个远程源获取数据或消费一个API。有很多很酷的东西可以用一系列公开可用的API的数据来完成。

A woman collecting data from library shelves

有了Vue.js，你可以围绕这些服务建立一个应用程序，并在几分钟内开始向用户提供内容。

我将演示如何建立一个简单的新闻应用，它将显示当天的热门新闻文章，并允许用户根据他们感兴趣的类别进行过滤，从纽约时报的API中获取数据。你可以在这里找到本教程的完整代码。

下面是最终的应用程序的样子。

vue-news-final-app

要继续学习本教程，你需要在你的机器上安装Node.js和（可选）Yarn。要安装Node，你可以前往官方下载页面，为你的系统抓取Node二进制文件，或者使用一个版本管理器代替。

一旦Node安装完毕，要拉入Yarn，请运行。

npm i -g yarn

你还需要有Vue.js的基本知识。你可以在这里找到一个很好的入门指南。

获得一个API密钥

为了使用纽约时报的API，你需要获得一个API密钥。所以，如果你还没有一个，请到他们的注册页面，注册获得Top Stories API的API密钥。

01-nyt-register-api-key

我们将使用top storiesAPI的端点来获取数据。请注意，这个API提供了多个部分，如 "家庭"、"旅游"、"艺术 "和 "科学"。我们需要建立一个过滤器，允许用户选择一个部分并加载其中的故事。

下面是调用的例子。

https://api.nytimes.com/svc/topstories/v2/arts.json?api-key=yourkey
https://api.nytimes.com/svc/topstories/v2/home.json?api-key=yourkey
https://api.nytimes.com/svc/topstories/v2/science.json?api-key=yourkey
https://api.nytimes.com/svc/topstories/v2/us.json?api-key=yourkey
https://api.nytimes.com/svc/topstories/v2/world.json?api-key=yourkey

请随意使用你最喜欢的REST客户端（如Hoppscotch或Insomnia）来测试你的API调用。

insomnia rest client

项目结构

让我们使用Vite快速启动一个Vue 3项目，这是一个运行速度比Vue CLI更快的开发服务器。

yarn create @vitejs/app vue-news-app --template vue

# Install package dependencies
cd vue-news-app
yarn install

# Confirm app can run
yarn dev

在你的浏览器中打开localhost:3000 。你应该有以下视图。

create vue app

接下来，让我们安装TailwindCSS框架，以提供一些基本的风格设计。你需要停止服务器，以便执行这个动作。

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

# Generate tailwind.config.js and postcss.config.js files
npx tailwindcss init -p

我们将需要一些额外的软件包实用程序，以帮助我们格式化日期和夹紧abstract 字段的行数。

yarn add @tailwindcss/line-clamp date-fns

@tailwindcss/line-clamp 是一个需要包含在 的插件。 下面是完整的配置。tailwind.config.js

module.exports = {
  purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require("@tailwindcss/line-clamp")],
}

接下来，在src 文件夹中创建一个index.css 文件，并添加以下代码。

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply antialiased text-green-900 bg-green-50;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

#app {
  @apply flex flex-col min-h-screen overflow-x-hidden;
}

除了导入所需的Tailwind CSS类，我们还包括一些CSS设置，以帮助我们定义应用程序的默认主题。我们还实现了一个灵活的布局系统，帮助我们为我们的应用程序创建一个粘性的页眉和页脚。

我们需要在src/main.js ，导入index.css 。

import { createApp } from "vue"
import App from "./App.vue"
import "./index.css"

createApp(App).mount("#app")

现在让我们继续定义我们的应用程序布局。首先，清除src/components 中的任何现有组件。接下来，在同一个文件夹中，创建这三个文件。

  • Layout.vue
  • Header.vue
  • Footer.vue

为每个文件复制以下代码。

src/components/Footer.vue。

<template>
  <footer
    class="px-4 py-8 text-sm font-bold text-center text-green-100 bg-green-900">
    <p class="text-sm tracking-wide">Copyright (c) 2021 SitePoint</p>
  </footer>
</template>

src/components/Header.vue:

<template>
  <header class="flex justify-center py-6 bg-green-900 place-items-center">
    <img alt="Vue logo" src="../assets/logo.png" width="32" />
    <span class="ml-4 text-lg font-bold text-green-100 md:text-xl">
      Vue News | NYTimes Edition
    </span>
  </header>
</template>

src/components/Layout.vue。

<template>
  <Header />
  <main class="container flex-grow px-4 mx-auto my-12">
    <slot />
  </main>
  <Footer />
</template>

<script>
import Header from "./Header.vue"
import Footer from "./Footer.vue"

export default {
  components: {
    Header,
    Footer,
  },
}
</script>

最后，更新src/App.vue 。

<template>
  <Layout>
    <p>Main content goes here</p>
  </Layout>
</template>

<script>
import Layout from "./components/Layout.vue"

export default {
  components: {
    Layout,
  },
}
</script>

执行yarn dev 。浏览器应该会自动刷新。

vue layout

随着应用程序布局的完成，我们现在可以开始构建我们的新闻应用程序的核心逻辑。

继续阅读：在SitePoint 上用Vue.js和Axios从第三方API获取数据。

avatar
文章
阅读
粉丝