Vue axios请求后渲染页面

AnFat

于 2024-08-16 09:19:32 发布

阅读量47

点赞数

文章标签： vue.js 前端 javascript ecmascript 前端框架

我整理的一些关于【数据】的项目学习资料（附讲解～～）和大家一起分享、学习一下：

https://d.51cto.com/eDOcp1

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 启动开发服务器：

这条命令会启动一个本地开发服务器，你可以在浏览器中通过 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>