Vue axios请求后渲染页面

原创

mob649e815da088 2024-08-16 06:03:11 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e815da088的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue + Axios 请求后渲染页面的完整指南

在现代前端开发中，使用 Vue.js 框架结合 Axios 库进行网络请求和页面渲染是一种常见的模式。今天，我们将一起学习如何完成这件事情。以下是我们将要走的流程：

流程步骤

步骤	描述
1	安装 Vue 和 Axios
2	创建一个 Vue 项目
3	在组件中引入并配置 Axios
4	发起请求并处理响应
5	将数据绑定到页面上

接下来，我们将详细介绍这个过程中的每一步，以及需要的代码示例。

步骤详解

1. 安装 Vue 和 Axios

首先，我们需要创建一个 Vue 项目。你可以使用 Vue CLI 来生成一个新的项目。打开终端并运行以下命令：

# 安装 Vue CLI (如果未安装)
npm install -g @vue/cli 

# 创建新的 Vue 项目
vue create my-project

# 进入项目目录
cd my-project

# 安装 Axios
npm install axios

这段代码做了以下几件事情：

安装 Vue CLI：用于快速创建 Vue.js 项目。
创建新项目：生成一个名为 my-project 的新 Vue 项目。
进入项目目录：切换到新创建的项目文件夹。
安装 Axios：将 Axios 添加进项目依赖中。

2. 创建一个 Vue 项目

完成安装后，你可以使用默认模板，或选择自己喜欢的配置。接下来，使用 npm run serve 启动开发服务器：

npm run serve

这条命令会启动一个本地开发服务器，你可以在浏览器中通过 http://localhost:8080 访问应用。

3. 在组件中引入并配置 Axios

我们需要在 Vue 组件中引入 Axios。打开 src/components 文件夹，创建一个新的组件 MyComponent.vue，并在其中添加以下代码：

<template>
  <div>
    数据列表
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'; // 引入 Axios

export default {
  data() {
    return {
      data: [] // 初始化一个空数组用于存储数据
    };
  },
  methods: {
    fetchData() {
      // 发起 GET 请求
      axios.get('
        .then(response => {
          this.data = response.data; // 将请求到的数据赋值给 data
        })
        .catch(error => {
          console.error('获取数据失败:', error); // 错误处理
        });
    }
  },
  mounted() {
    this.fetchData(); // 组件挂载后调用 fetchData 方法
  }
};
</script>

这段代码的解释如下：

使用 import axios from 'axios'; 引入 Axios。
定义一个 data 数据属性用于存储获取到的数据。
创建一个 fetchData 方法，通过 Axios 发起网络请求，获取数据并处理成功与失败的响应。
在 mounted 钩子中调用 fetchData 方法，以便组件挂载后立即请求数据。

4. 发起请求并处理响应

在上一步骤我们已经发起了请求，然而在这里我们详细解释响应处理：在 fetchData 方法中，使用 then 登录成功的返回数据，并通过 catch 错误处理来捕获可能出现的错误。

5. 将数据绑定到页面上

在 <template> 部分，我们通过 v-for 指令循环渲染获取到的数据。这将展示从 API 获取的数据的列表。

状态图

接下来，我们可以使用 Mermaid 语法画出一个简单的状态图，来展示组件从创建到数据渲染的状态变化。

stateDiagram
    [*] --> Created
    Created --> Fetching
    Fetching --> Fetched
    Fetched --> [*]

甘特图

为了让你更好地了解项目时间线，这里有一个简单的甘特图，展示各个步骤所需的时间。

gantt
    title Vue + Axios 开发过程
    dateFormat  YYYY-MM-DD
    section 项目开发
    安装 Vue 和 Axios       :done,    des1, 2023-10-01, 1d
    创建 Vue 项目          :done,    des2, 2023-10-02, 1d
    配置 Axios              :active,  des3, 2023-10-03, 1d
    发起请求处理响应      :         des4, 2023-10-04, 1d
    渲染页面                :         des5, 2023-10-05, 1d