4.Vue-Vue调用第三方接口

月落玄衣

已于 2023-10-17 10:40:06 修改

阅读量2.1k

点赞数 24

分类专栏： Vue 文章标签： vue.js javascript 前端前端框架 html 开发语言青少年编程

于 2023-10-16 19:19:00 首次发布

本文链接：https://blog.csdn.net/m0_70819559/article/details/133866073

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

题记

用vue调用第三方接口，以下是全部代码和操作流程。

寻找第三方接口网站

推荐：免费API - 提供免费接口调用平台 (aa1.cn)

下面的代码以下图中的接口为例

安装axios模块

在终端输入以下命令：

npm install axios

调用第三方接口代码

调用不需要设置参数的接口

TestView.vue文件如下：

<template>

<div >

<ul>





<div v-html="data"></div>





<div>{{ data }}</div>

</ul>

</div>

</template>

<script>

// 导入axios模块，使用axios来发送HTTP请求了

//export default是用于导出模块的语法

import axios from 'axios';

// const data = ref()

// const items = ref([])

export default {

//data()函数是用于定义组件的数据属性的方法

//data属性被初始化为空字符串，可以用来存储数据

data() {

return {

//items: [],

data:''

};

},

//mounted()是一个生命周期钩子函数，它会在组件被挂载到DOM后调用

mounted() {

this.fetchData();

},

//methods对象用于定义组件的方法

//fetchData()方法使用axios库发送一个GET请求到指定的URL

//通过Promise的.then()方法处理请求成功的响应，this.data = response.data将响应的数据设置到组件的data属性中

//如果请求失败，将通过.catch()方法捕获错误，并通过console.error()方法将错误打印到控制台。

methods: {

fetchData() {

axios.get('https://v.api.aa1.cn/api/yiyan/index.php')

.then(response => {

// 将返回的数据设置到items数组

// this.items = response.data;

this.data = response.data

// document.body.innerHTML = this.items，用这种方式也可以去掉返回内容中的p标签

console.log(response.data)

})

.catch(error => {

console.error(error);

});

}

}

}

</script>

<template>
  <div >
    <ul>
      <!--<li v-for="item in items" :key="item.id">{{ item }}</li>-->
      <!--使用了Vue的指令v-html，它会将组件的data属性的值作为HTML内容进行渲染-->
      <div v-html="data"></div>
      <!--使用了Vue的插值语法{{ }}，它会将组件的data属性的值作为文本进行渲染-->
      <!--没有去掉p标签-->
      <div>{{ data }}</div>
    </ul>
  </div>
</template>

<script>
// 导入axios模块，使用axios来发送HTTP请求了
// export default是用于导出模块的语法
import axios from 'axios';
// const data = ref()
// const  items = ref([])
export default {
  //data()函数是用于定义组件的数据属性的方法
  //data属性被初始化为空字符串，可以用来存储数据
  data() {
    return {
      //items: [],
      data:''
    };  
  },
  //mounted()是一个生命周期钩子函数，它会在组件被挂载到DOM后调用
  mounted() {
    this.fetchData();
  },
  //methods对象用于定义组件的方法
  //fetchData()方法使用axios库发送一个GET请求到指定的URL
  //通过Promise的.then()方法处理请求成功的响应，this.data = response.data将响应的数据设置到组件的data属性中
  //如果请求失败，将通过.catch()方法捕获错误，并通过console.error()方法将错误打印到控制台。
  methods: {
    fetchData() {
      axios.get('https://v.api.aa1.cn/api/yiyan/index.php')
        .then(response => {
          // 将返回的数据设置到items数组
          // this.items = response.data;
          this.data = response.data
          // document.body.innerHTML = this.items，用这种方式也可以去掉返回内容中的p标签
          console.log(response.data)

        })
        .catch(error => {
          console.error(error);
        });
    }
  }
  
}
</script>

调用需要设置参数的接口

TestView2.vue文件如下：

<template>

<div >

<ul>



<form @submit.prevent="handleSubmit">



<input type="text" v-model="message" placeholder="请输入内容">

<input type="number" v-model="type" placeholder="请输入类型">

<button type="submit">提交</button>

</form>

{{ message }}



<li v-for="(item,index) in data.data" :key="item.id">

{{index + 1 }}

{{ item.riqi }}

{{ item.wendu }}

{{ item.tianqi }}

</li>

</ul>

</div>

</template>

<script>

import axios from 'axios';

// const data = ref()

// const items = ref([])

export default {

data() {

return {

//items: [],

data:'',

message: '',

type: '1',

};

},

mounted() {

this.handleSubmit()

},

methods: {

handleSubmit() {

axios.get('https://v.api.aa1.cn/api/api-tianqi-3/index.php', {

// 使用 axios.get 发送一个 GET 请求，通过第二个参数的 params 属性传递了这个参数对象，

// 将 msg 和 type 作为查询参数传递给服务器。

params: {

msg: this.message,

type: this.type

},

})

.then(response => {

// 在这里处理返回的数据

this.data=response.data;

console.log(response.data);

})

.catch(error => {

// 在这里处理错误

console.error(error);

});

}

}

}

</script>

<template>
  <div >
    <ul>
    <!--使用Vue的事件修饰符@submit.prevent，表示在表单提交时会触发名为handleSubmit的方法。
      prevent修饰符用于阻止表单默认的提交行为，以便可以使用自定义的逻辑来处理提交事件。-->
    <form @submit.prevent="handleSubmit">
      <!--使用Vue的双向绑定指令v-model，将输入框的值绑定到了组件的message属性。-->
      <input type="text" v-model="message" placeholder="请输入内容">
      <input type="number" v-model="type" placeholder="请输入类型">
      <button type="submit">提交</button>
    </form>
      {{ message }}
      <!--v-for="(item, index) in data.data"是一个指令，表示要对data.data数组进行循环遍历。
        在每次循环中，item表示当前项的值，index表示当前项的索引。
        :key="item.id"是一个特殊的属性绑定语法，用于为循环渲染的每个项提供一个唯一的标识符。-->
      <li v-for="(item,index) in data.data" :key="item.id">
          {{index + 1 }} 
          {{ item.riqi }}
          {{ item.wendu }}
          {{ item.tianqi }}
      </li>
      </ul>
  </div>
</template>

<script>
import axios from 'axios';
// const data = ref()
// const  items = ref([])
export default {
  data() {
    return {
      //items: [],
      data:'',
      message: '',
      type: '1',
    };
    
  },
  
  mounted() {
    this.handleSubmit()
  },
  methods: {
    handleSubmit() {
      axios.get('https://v.api.aa1.cn/api/api-tianqi-3/index.php', {
          // 使用 axios.get 发送一个 GET 请求，通过第二个参数的 params 属性传递了这个参数对象，
          // 将 msg 和 type 作为查询参数传递给服务器。
          params: {
              msg: this.message,
              type: this.type
          },
          })
          .then(response => {
              // 在这里处理返回的数据
              this.data=response.data;
              console.log(response.data);
              
          })
          .catch(error => {
              // 在这里处理错误
              console.error(error);
              
          });
    }
  }
}
</script>