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

题记

用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>