背景
本次项目说白了就是利用vue向天行数据网异步发送请求,并获得将其返回的数据。
所以,在进行项目之前,需要先去天行数据的官网注册登录并申请接口。(网址:https://www.tianapi.com/)
天行数据申请接口
1)登录注册
2)选择接口菜单后在新页面的所有接口中选一个所需的(免费)接口,并进入,这里我选择趣味娱乐里面的神回复
3)进入后点击“申请接口按钮”即可使用,该页面还友好的介绍了使用方法和在线测试功能
其中,APIKEY是自己的密钥,在个人中心可以查看
代码实现
1)页面布局
<div id="webdata">
<input id="btn1" type="button" value="获取数据" @click="addSome"/>
<ul>
<li class="item" v-for="i in obj">
<h4 >Title: {{i.title}}</h4>
<p>Content:{{i.content}}</p>
</li>
</ul>
</div>
2)添加css层叠样式
*{
padding: 0;
margin: 0;
}
input{
text-align: center;
width: 100px;
height: 40px;
font-size: 16px;
background-color: #dd001b;
border-radius: 8px;
color: white;
}
.item{
margin-left: 4%;
margin-top: 4%;
padding: 8px;
width: 500px;
height: auto;
list-style: none;
border: 1px solid #dd001b;
box-shadow: 2px 2px 4px black;
border-radius: 8px;
}
h4{
color: #000;
}
p{
color: #8b8b8b;
}
3)js逻辑实现(密钥记得替换成自己的噢)
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var d = new Vue({
el : "#webdata",
data : {
obj : [
]
},
methods :{
addSome : function(){
var that = this;
axios
.get("http://api.tianapi.com/txapi/godreply/index?key=3848346dfdje29035753&num=4")
.then(function(resp){
// title: content:
// console.log(resp.data.newslist);
for(var i = 0; i < resp.data.newslist.length; i++ ){
that.obj.push({
"title" : resp.data.newslist[i].title,
"content" : resp.data.newslist[i].content
});
}
});
}
}
});
效果预览
1)初始化
2)点击按钮(一次返回四个数据)