vue3中调用api接口实现数据的渲染以及详情方式

当我们在Vue 3中进行开发时，我们通常需要与后端API进行数据交互。这里提供一个完整的攻略，帮助开发者学习如何在Vue 3中调用API接口实现数据的渲染以及详情方式。

步骤一：安装和引入axios

Axios是一个流行的网络请求库，我们可以通过npm命令来安装：

npm install axios

在Vue 3中，我们通常通过在main.js中全局引入axios来使用它：

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$axios = axios
app.mount('#app')

上面的代码将axios绑定到Vue的全局属性$axios，使得在项目的任何组件中都可以通过this.$axios来使用它。

步骤二：调用API接口

教程中的实例使用mock数据，并提供两个API接口，一个用于获取文章列表，另一个用于获取文章详情。

1. 获取文章列表

我们可以使用如下的代码来调用API接口来获取文章列表：

export default {
  data() {
    return {
      articles: []
    }
  },
  mounted() {
    this.loadArticles()
  },
  methods: {
    async loadArticles() {
      try {
        const response = await this.$axios.get('/api/articles')
        this.articles = response.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}

在上面的代码中，我们使用了data()方法来定义一个articles数组来存储获取到的文章列表。在组件的mounted()方法中，我们调用this.loadArticles()来加载文章列表。

在loadArticles()方法中，我们通过this.$axios来发起一个GET请求，获取到文章列表数据，并通过response.data来获取到响应的数据。最后我们将数据存储到articles数组中。

如果请求发生错误，我们通过catch语句来捕获错误，并使用console.error()来输出错误信息。

2. 获取文章详情

我们可以使用如下的代码来调用API接口来获取文章详情：

export default {
  data() {
    return {
      article: null
    }
  },
  mounted() {
    this.loadArticle()
  },
  methods: {
    async loadArticle() {
      try {
        const response = await this.$axios.get(`/api/articles/${this.$route.params.id}`)
        this.article = response.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}

在上面的代码中，我们使用了data()方法来定义一个article变量来存储获取到的文章详情。在组件的mounted()方法中，我们调用this.loadArticle()来加载文章详情。

在loadArticle()方法中，我们通过$route.params.id来获取到访问路径中的参数id，并使用它来构造API请求的URL。然后我们通过this.$axios来发起一个GET请求，获取到文章详情数据，并通过response.data来获取到响应的数据。最后我们将数据存储到article变量中。

如果请求发生错误，我们通过catch语句来捕获错误，并使用console.error()来输出错误信息。

步骤三：展示数据

下面是一个展示文章列表的示例：

<template>
  <div>
    <h2>文章列表</h2>
    <ul>
      <li v-for="article in articles" :key="article.id">
        <router-link :to="'/articles/' + article.id">{{ article.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: []
    }
  },
  mounted() {
    this.loadArticles()
  },
  methods: {
    async loadArticles() {
      try {
        const response = await this.$axios.get('/api/articles')
        this.articles = response.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

在上面的代码中，我们使用了v-for指令来遍历articles数组，并使用:key来指定唯一的键。在列表项中，我们使用router-link来跳转到文章详情页，并通过:to来指定路径。

下面是一个展示文章详情的示例：

<template>
  <div>
    <h2>{{ article.title }}</h2>
    <p>{{ article.content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: null
    }
  },
  mounted() {
    this.loadArticle()
  },
  methods: {
    async loadArticle() {
      try {
        const response = await this.$axios.get(`/api/articles/${this.$route.params.id}`)
        this.article = response.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

在上面的代码中，我们使用了双括号语法{{ }}来展示article.title和article.content的值，并使用v-if指令来确保数据已经加载。我们通过$route.params.id来获取到访问路径中的参数id，并使用它来构造API请求的URL。在组件的mounted()方法中，我们调用this.loadArticle()来加载文章详情。