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

简介: 《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组件。


相关文章
|
14天前
|
JSON 前端开发 JavaScript
Vue3 Ajax(axios)
Vue3 Ajax(axios)
|
14天前
|
JavaScript 小程序 API
【uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建】
【uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建】
112 0
|
14天前
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
|
13天前
|
前端开发 JavaScript 安全
第十篇 Axios最佳实战:前端HTTP通信的王者之选
第十篇 Axios最佳实战:前端HTTP通信的王者之选
|
14天前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
17 1
|
14天前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
50 0
|
14天前
|
JSON 前端开发 JavaScript
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
42 0
|
14天前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
|
14天前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
39 1
|
14天前
Vue3集成axios
Vue3集成axios
40 0