《Vue3实战》使用axios获取文件数据以及走马灯Element plus的运用

前言

axios是一个基于Promise的HTTP客户端库，用于浏览器和Node.js。

它可以在浏览器中使用XMLHttpRequest实现HTTP请求，也可以在Node.js中使用http模块实现。

下面是一些axios的详细介绍：

1. 发起HTTP请求：可以使用axios来发起各种类型的HTTP请求，例如GET、POST、PUT、DELETE等。它提供了很多方便的方法，可以根据需要设置请求的headers、参数、超时时间等信息。同时，也支持拦截器来对请求和响应进行处理。
   
2. Promise支持：axios基于Promise实现，可以使用async/await语法或then/catch方法来处理异步请求的结果。这让代码可以更直观和易读。
   
3. 响应处理：axios可以自动将响应数据转换为JSON格式，默认情况下也可以自动将JSON格式的请求数据转换为表单格式。还可以设置全局的默认配置，例如响应的数据类型、请求超时时间等。
   
4. 错误处理：axios对HTTP错误状态码进行了封装，可以通过catch方法捕获请求失败时的错误，并对错误进行处理。
   
5. 取消请求：axios提供了取消请求的功能。可以通过cancelToken参数来取消某个请求，也可以使用interceptor拦截器来全局取消请求。
   
6. 前端框架集成：axios可以集成到大部分前端框架中，例如React、Vue等。这样可以更方便地在组件中发起HTTP请求，并处理请求结果。
   

一、axios怎么安装？

1.在项目中使用axios之前，需要先安装它。可以通过npm安装，在终端中输入以下命令：

npm install axios

2. 在终端输入命令并运行成功后找到node_modules目录，并在此目录中找到axios文件，则说明安装成功！

二、编写json文件

在public目录下创建存在json文件目录,照片用.png格式则放入对应文件夹中，将照片的路径输入json文件中写入的data数据中。

三、在vue文件中获取json文件的数据

1.在methods：{}中写入方法，并用anxios.get()获取json文件中的数据，并在create中调用一次methods中写入的方法。

2.使用Element Plus的走马灯组件展示数据

elementPlus中有许多美化的组件，优秀的前端页面必不可少，我们直接使用走马灯组件。

3.AxiosJson.Vue文件代码如下

需要注意的是：如果你的vue项目没有引入router，则将以下代码放入主入口App.vue,需要再script标签中引入import axios from "axios"，否则无法使用axios。

<template>
  <div class="block text-center" style="margin-top:-500px;width: 800px;height: 500px;margin-left: 300px ">
  <span class="demonstration"></span>
      <el-carousel height="350px" style="width:660px;margin-left: -130px"   >
        <el-carousel-item v-for="item in carouselList" :key="item">
          <img :src="item.picture" />
        </el-carousel-item>
      </el-carousel>
  </div>
</template>
 
<script>
import axios from "axios";
 
export default {
  name:`Rotation`,
  data(){
    return{
      carouselList : [],
      carouselListTwo:[]
    }
  },
  created() {
    this.invokeUerList()
  },
  methods:{
    invokeUerList(){
      axios.get("/data.json")
          .then(response =>{
            console.log(123)
            console.log(response)
            this.carouselList = response.data.success.data;
          }).catch(function (error) {
        console.log(error)
      })
    },
   
  }
}
 
</script>
 
 
<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}
 
.el-carousel__item img {
}
 
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
 
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

4.注意事项

如果没有引入elementPlus则需要引入，在项目中使用之前，需要先安装它。可以通过npm安装，在终端中输入以下命令：

npm install element-plus --save          之后再main.js文件中全局引入即可

四、最终效果图和视频

1.效果图

2.两个走马灯的最终视频

WeChat_20230807213828

总结

 总的来说，axios是一个功能强大、易用且灵活的HTTP客户端库，适用于前后端分离开发中的HTTP请求处理。它的设计理念是简洁易用、可扩展性强，因此在使用axios时，可以更方便地处理HTTP请求，并且提供了很多的功能和配置选项来满足不同的需求。

 Elementplus也是优秀的前端页面必不可少的组件，希望这篇博客能让大家明白如何使用axios和Elementplus组件。