Vue前端框架如何调用天行数据API?

栏目分类:帮助中心 发布时间:2022-11-02 阅读次数:249

Vue是一个业内优秀的前端解决方案,采用了最新流行的MVVM框架模式,深受web前端开发者的喜爱,在相关开发者社区也一直都是热门交流话题。那么,如何通过Vue调用天行数据的API接口呢,下面就具体给大家示例。


Vue前端框架如何调用天行数据API?


vue采用的是数据与视图分离的方案,也就是结构层HTML、表现层CSS和逻辑层是分开的,数据以变量的形式集中存放在data中。


1、新建一个vue.html文件

为方便大家测试,以下采用的是引入静态js文件的方法:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue调用API示例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.3/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.11.0/qs.min.js"></script>
</head>
<body>
  <div id="app">
      <input type="button" value="点击这里" v-on:click="send" />
      <p>
        {{tianapi_data}}
      </p>
   </div>
<script src="vue.js"></script>
</body>
</html>


2、逻辑层,新建vue.js文件:

如果相关库文件已下载到本地,可以使用import 的方式导入。安装axios、QS库,例如npm install axios并导入import axios from 'axios'


new Vue({
        el: '#app',
        data: {
           tianapi_data:''
        }, 
        methods:{
        send:function (){
      axios({  
       method:'post',
       url:'https://api.tianapi.com/jiejiari/index',
       data:Qs.stringify({key:'你的APIKEY',date:'2021-01-01'}),
       headers:{'Content-Type': 'application/x-www-form-urlencoded'}
       }).then(res => {
       this.tianapi_data = res.data
 })        
}    
}
})


注意:post方式请求时,enctype应为application/x-www-form-urlencoded,在vue的可这样设置:


headers:{'Content-Type': 'application/x-www-form-urlencoded'}


post请求方式不可直接用param参数传值,参数应在请求体data中,并且需要将参数对象格式化为一个字符串,否则接口后端无法接受到参数,一般可使用QS库解决。安装npm install qs --save并在main.js 中引入,再导入到项目中import qs from ‘qs’

最后,浏览器中打开index.html,并点击页面上的按钮即可看到接口返回的数据。


其他推荐OTHER API 更多>

开通会员专享福利
联系客服 咨询反馈