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

深碍√TFBOYSˉ_ 2024-03-23 19:28 3阅读 0赞

##  ##

**目录**

前言

一、axios怎么安装？

二、编写json文件

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

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

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

3.AxiosJson.Vue文件代码如下

4.注意事项

四、最终效果图

总结

--------------------

## 前言 ##

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

![73fc255dcd0f4934901c5bcbdb7cfdb7.png][]

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

![f41ebcde01a44cebbf3597e354198723.png][]

![976327e5253744b1a29190c0a420e0be.png][]

## **二、编写json文件** ##

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

![0299586a3c01449a992f2e115c278bbd.png][]

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

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

![17c40e27e62e4ed692e6e7c1c3fb15ff.png][]

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

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

![e26fdb99ed634c5f9b790e0258d97c3c.png][]

### 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.效果图 ###

![225fb94dc43b48eda2a5b889516930a2.png][]

![acb7c41e9d8a4027990de71d2e96fb0e.png][]

![a3feb3d2da4a474eb6647fbd69d4c44d.png][]

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

WeChat\_20230807213828

### `` ###

###  ###

--------------------

## 总结 ##

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

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

[73fc255dcd0f4934901c5bcbdb7cfdb7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/90a046ff1c5a4bcabbd3cbc020542633.png
[f41ebcde01a44cebbf3597e354198723.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/d32a1b67a0374bd48d76f2bc54bb20c3.png
[976327e5253744b1a29190c0a420e0be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/d508bf304a034491ae931c763e708c4f.png
[0299586a3c01449a992f2e115c278bbd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/fe0387e845dd4e28b2386af1749871d0.png
[17c40e27e62e4ed692e6e7c1c3fb15ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/9cd1b075e1854d5eaeb411fd60b80360.png
[e26fdb99ed634c5f9b790e0258d97c3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/31d8cca16e3a4b1ea52f8f3ccad7f43c.png
[225fb94dc43b48eda2a5b889516930a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/2d49ee325f1b41c49afb7229e3ca451e.png
[acb7c41e9d8a4027990de71d2e96fb0e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b4cd2dba14284bbab8dcdb1e9de2f356.png
[a3feb3d2da4a474eb6647fbd69d4c44d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b6d38ec44de54e7395916aeaa6547e14.png