自学内容网 自学内容网

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

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,并点击页面上的按钮即可看到接口返回的数据。如果需要其他代码示例,例如微信小程序、Python、PHP等等可在接口文档底部代码示例或在线测试生成代码中查看,支持十多种编程语言示例。


原文地址:https://blog.csdn.net/workxin/article/details/137932234

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!