Vue||获取网络数据

背景

本次项目说白了就是利用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）点击按钮（一次返回四个数据）