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等等可在接口文档底部代码示例或在线测试生成代码中查看,支持十多种编程语言示例。

相关推荐
汪子熙2 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到113 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆7 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er12 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0615 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444017 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆18 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子21 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain928 分钟前
Gradle 8.11.1的升级之旅
前端
一拳不是超人39 分钟前
PWA渐进式Web应用技术深度解析
前端·pwa