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

目录

前言

一、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

         

 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。

4.注意事项

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

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

四、最终效果图和视频

1.效果图

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

WeChat_20230807213828

---

总结

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

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