【超简单】vue如何用axios调用现成的api

vue如何用axios调用现成的api

● 准备阶段

● 现成的api接口

● 了解一点css了解一点vue

● 操作阶段

● 如何获得免费的api接口

● 这里我用的是天行的接口，里面有很多免费调用的接口https://www.tianapi.com/source/7bb07dcc27

● 选择自己想要的api

● 注册登录网站后，找到“我申请的接口”页面中

● 然后点击“申请接口”

● 进入接口大全后，选择自己想要的接口（这里用彩虹屁接口为案例）

● 调用接口

● 点击进入彩虹屁api详情界面，点击申请接口

● 点击立即调试

● 记住这个key参数值，然后点击下方的测试请求

● 在左侧的返回信息中会发现很多信息，找到请求体

● 我们发现其实自己想要的部分就是newslist中的content部分

● 代码部分

● 创建Rainbow fart.html文件

● 先写下如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

● 在title标签下引入vue、axios、与element组件库。这里都引用的在线文档，无需配置可以直接拿来使用

 <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <!-- 引入axios 用来调用之前的接口 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

● 将vue框架先写出来

<body>
    <div id="app">


    </div>

    <script>
        const app = new Vue({
            el:'#app',
            data:{

            },
            methods:{

            }
        })
</script>

● 我们目前想要实现的功能是，通过点击一个生成按钮，然后跳转到一个页面，里面有我们想要的api的内容部分，并且只想得到我们api中我们想要的部分，其他部分全都剔除。

● 功能实现

● 发现这么说过于繁琐，于是我决定把完整的代码直接写出来，然后通过注释的方法，在代码中能直接清楚的了解到。不清楚的部分我会在下面继续做些解释

● 基本框架完成后就是下面这样的

● 这里要注意，其中的url值为http://api.tianapi.com/caihongpi/index?key=APIKEY

● APIKEY就是前面所说的那个值

● 这时候网页界面为

● 点击按钮后

● 界面较为简单，这时候就需要利用css来将页面调成自己喜欢的样子。我这里用的是element的组件库，所以是直接拿来用的。最终成品如下：

● 完整代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 修改导航栏上的标题 -->

    <title>彩虹屁</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <!-- 引入axios 用来调用之前的接口 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        * {
            list-style: none;
            font-size: 22px;
            /* color: rgb(132, 252, 21); */
            /* background-color: rgb(19, 18, 18); */
        }

        body {
            background-color: rgb(44, 43, 43);
        }

        .start {
            margin: 0 auto;
            /* padding-top: 60px; */
            /* width: 600px; */
            text-align: center;
            /* background-color: rgb(151, 21, 21); */
        }

        .start>p {
            color: aqua;
        }

        .end {
            width: 300px;
            margin: 0 auto;
        }

        .pf {
            display: inline-block;
            size: 12px;
            text-align: center;
            color: aquamarine;
            padding-inline-start: 0px;
            /* padding-left: -20px; */
        }

        h4 {
            font-size: 12px;
            color: rgb(243, 124, 124);
        }

        .pf>li {
            text-align: center;
            font-size: 12px;
        }
</style>
</head>

<body>
    <div id="app">
        <!-- 这里是初始页面 -->
        <!-- 这里设置一个is_start，用来后面通过点击事件来实现进入正文内容，并且将点击后的按钮隐藏 -->
        <div class="start" v-if="!is_start">
            <!-- 文字与按钮。tt部分可在下方data中设置值 -->
            <p>{{ tt }}</p>
            <el-button class="success" @click="send">Rainbow fart</el-button>
        </div>

        <!-- 正文部分 -->
        <div class="end" v-if="is_start">
            <ul class="pf" v-for="item in ct">
                <h4>微信公众号关注“听说爱情很美”</h4>
                <li>{{ item.content }}</li>
            </ul>
        </div>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                tt: '可惜故事太长，只有风听我说',
                // 设置is_start的默认布尔值，后面点击按钮后修改，实现按钮的隐藏
                is_start: false,

                //ct是用来存放所接受到的newslist值
                ct: []
            },
            methods: {
                send() {
                    var cc = this;

                    //点击后按钮消失，出现舔狗语录
                    this.is_start = true;

                    //调用axios方法得到的返回值是promise对象
                    axios({
                        //请求方式
                        method: 'get',

                        //请求地址,这里就填写前面申请的接口，后面加上key值
                        url: 'http://api.tianapi.com/caihongpi/index?key=81b39e09c6748897fefc0691b70f76de',

                        //URL中的 查询参数
                        // params:{},

                        //请求体参数
                        // data:{},

                        //接收
                    }).then(function (request) {
                        console.log(request.data.newslist);
                        cc.ct = request.data.newslist;

                    });
                }
            }
        })
</script>
</body>

</html>

posted @ 2021-12-21 17:25 良人旧柯梦阅读(654) 评论(0) 收藏举报

刷新页面返回顶部

【超简单】vue如何用axios调用现成的api

vue如何用axios调用现成的api

公告