简洁简单 axios请求api 接口仍然可用

[淘宝图片获取]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>妹纸秀</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>
<body>
<div class="app">
    <input type="text" autocomplete="off" v-model="sort" @keyup.enter="searchSort" placeholder="输入想搜的"/>
    选择输出分类[胖次猫|七了个三]
    <hr>
    <h2>输出的图片:</h2>
    <img :src="this.date.imgurl" width="500" height="600"/>
</div>
<script>
    var app = new Vue({
        el: ".app",
        data: {
            sort: "",
            date: {},
        },
        methods: {
            searchSort() {
                var that = this;
                axios.post('https://api.uomg.com/api/rand.img3?sort=' + this.sort + '&format=json').then(
                    function (result) {
                        that.date = result.data;
                    })
            },
        },
    });
</script>
</body>
</html>

[妹纸短视频获取]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/qs.min.js"></script>
</head>
<body>
<div class="app">

    <h3>标题: {{this.shuju.title}}</h3>
    <iframe :src="this.shuju.playurl" frameborder='0'
            allow='autoplay;encrypted-media' allowfullscreen style='height:500px;'>
    </iframe>
    <img :src="this.shuju.picurl" height="500px">
    <h3>作者: {{shuju.alias}}</h3>
</div>
<script>
    var app = new Vue({
        el: ".app",
        data: {
            shuju: {},
        },
        created() {
            this.getMv();
        },
        methods: {
            getMv() {
                var that = this;
                axios.get("https://api.apiopen.top/api/getMiniVideo?page=0&size=1").then(function (result) {
                    that.shuju = result.data.result.list[0];
                    console.log(that.shuju);

                    console.log(result.data.result.list[0].playurl);
                })
            },
        }
    });
</script>
</body>

</html>

[获取一言Api]

  <el-button type="primary" round @click="yiyan">获取一言</el-button>





  <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="hitokoto"
                label="一言">
        </el-table-column>

    </el-table>





<script>
    var app = new Vue({
        el: ".app",
        data: {
            tableData: [],
        },
        methods: {
            yiyan() {
                var that = this;
                axios.get("https://v1.hitokoto.cn/?c=a").then(function (result) {
                    console.log(result);
                    const list = []
                    list.push(result.data)
                    that.tableData = list;
                    console.log('我要的数据')
                    console.log(that.tableData)
                })
            },
         
         

        }

    });
</script>

3个完整的html源码:

DouZi_CloudDiskhttps://pan.livemz.cn/%E7%BD%91%E7%BB%9C%E6%BA%90%E7%A0%81/3%E4%B8%AAapi.zip

原文链接：https://blog.csdn.net/wangdouzi376/article/details/125215475