51栗子,wordpress 博客主题 seo,旅游网站源码 wordpress模板 v1.0,上海公司企业网站怎么做题记 用vue调用第三方接口#xff0c;以下是全部代码和操作流程。
寻找第三方接口网站 推荐#xff1a;免费API - 提供免费接口调用平台 (aa1.cn) 下面的代码以下图中的接口为例 安装axios模块 在终端输入以下命令#xff1a; npm install axios 调用第三方接口代码 调…题记 用vue调用第三方接口以下是全部代码和操作流程。
寻找第三方接口网站 推荐免费API - 提供免费接口调用平台 (aa1.cn) 下面的代码以下图中的接口为例 安装axios模块 在终端输入以下命令 npm install axios 调用第三方接口代码 调用不需要设置参数的接口 TestView.vue文件如下 template div ul !--li v-foritem in items :keyitem.id{{ item }}/li-- !--使用了Vue的指令v-html它会将组件的data属性的值作为HTML内容进行渲染-- div v-htmldata/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 templatediv ul!--li v-foritem in items :keyitem.id{{ item }}/li--!--使用了Vue的指令v-html它会将组件的data属性的值作为HTML内容进行渲染--div v-htmldata/div!--使用了Vue的插值语法{{ }}它会将组件的data属性的值作为文本进行渲染--!--没有去掉p标签--div{{ data }}/div/ul/div
/templatescript
// 导入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 !--使用Vue的事件修饰符submit.prevent表示在表单提交时会触发名为handleSubmit的方法。 prevent修饰符用于阻止表单默认的提交行为以便可以使用自定义的逻辑来处理提交事件。-- form submit.preventhandleSubmit !--使用Vue的双向绑定指令v-model将输入框的值绑定到了组件的message属性。-- input typetext v-modelmessage placeholder请输入内容 input typenumber v-modeltype placeholder请输入类型 button typesubmit提交/button /form {{ message }} !--v-for(item, index) in data.data是一个指令表示要对data.data数组进行循环遍历。 在每次循环中item表示当前项的值index表示当前项的索引。 :keyitem.id是一个特殊的属性绑定语法用于为循环渲染的每个项提供一个唯一的标识符。-- li v-for(item,index) in data.data :keyitem.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.dataresponse.data; console.log(response.data); }) .catch(error { // 在这里处理错误 console.error(error); }); } } } /script templatediv ul!--使用Vue的事件修饰符submit.prevent表示在表单提交时会触发名为handleSubmit的方法。prevent修饰符用于阻止表单默认的提交行为以便可以使用自定义的逻辑来处理提交事件。--form submit.preventhandleSubmit!--使用Vue的双向绑定指令v-model将输入框的值绑定到了组件的message属性。--input typetext v-modelmessage placeholder请输入内容input typenumber v-modeltype placeholder请输入类型button typesubmit提交/button/form{{ message }}!--v-for(item, index) in data.data是一个指令表示要对data.data数组进行循环遍历。在每次循环中item表示当前项的值index表示当前项的索引。:keyitem.id是一个特殊的属性绑定语法用于为循环渲染的每个项提供一个唯一的标识符。--li v-for(item,index) in data.data :keyitem.id{{index 1 }} {{ item.riqi }}{{ item.wendu }}{{ item.tianqi }}/li/ul/div
/templatescript
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.dataresponse.data;console.log(response.data);}).catch(error {// 在这里处理错误console.error(error);});}}
}
/script 执行程序 可以参考在vue中搭建路由3.Vue-在Vue框架中搭建路由-CSDN博客 成功访问到网页后如果没有显示需要多刷新几次属于网络问题。如果一直没有请求成功则是请求次数太多官方不会返回响应需要等待一段时间再次发起请求或者自行更换接口进行测试 展示图 后记 觉得有用可以点赞或收藏
