Vue||获取网络数据

刺骨的言语ヽ痛彻心扉 2023-03-14 05:55 31阅读 0赞

## 背景 ##

本次项目说白了就是利用vue向天行数据网异步发送请求，并获得将其返回的数据。  
所以，在进行项目之前，需要先去天行数据的官网注册登录并申请接口。（网址：https://www.tianapi.com/）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]

## 天行数据申请接口 ##

1）登录注册  
2）选择接口菜单后在新页面的所有接口中选一个所需的（免费）接口，并进入，这里我选择趣味娱乐里面的神回复  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 2]  
3）进入后点击“申请接口按钮”即可使用，该页面还友好的介绍了使用方法和在线测试功能  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 3]  
其中，APIKEY是自己的密钥，在个人中心可以查看  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 4]

## 代码实现 ##

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逻辑实现(密钥记得替换成自己的噢）

## 效果预览 ##

1）初始化  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 5]  
2）点击按钮（一次返回四个数据）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]: /images/20230312/556117cfa2074a8e88478bf254abdf3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]: /images/20230312/47cae6ba312c478390560499a807efca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 2]: /images/20230312/67379eddf7f647669cdb2337ec1980e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 3]: /images/20230312/862a7d1b565a418ca399400584879c38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 4]: /images/20230312/5cdff010d65a4f01b218ec1a4556ceed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 5]: /images/20230312/9b69e586acce48bd849aa8abf847354c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 6]: /images/20230312/d69ff4564380447188f31a90a8056f8c.png