Vue前端框架如何调用天聚数行API？

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

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

1、新建一个vue.html文件

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

html 复制代码

<!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'

javascript 复制代码

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的可这样设置：

javascript 复制代码

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

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

最后，浏览器中打开index.html，并点击页面上的按钮即可看到接口返回的数据。如果需要其他代码示例，例如微信小程序、Python、PHP等等可在接口文档底部代码示例或在线测试生成代码中查看，支持十多种编程语言示例。