<input type="button" value="get請(qǐng)求" class="get">
    <input type="button" value="post請(qǐng)求" class="post">
    <!--官網(wǎng)提供的axios在線地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
         接口1:隨機(jī)笑話
         請(qǐng)求地址:https://autumnfish.cn/api/joke/list
         請(qǐng)求方法:get
         請(qǐng)求參數(shù):num(笑話條數(shù),數(shù)字)
         響應(yīng)內(nèi)容:隨機(jī)笑話
     */
        document.querySelector(".get").onclick=function (){
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
            .then(function (response){
                console.log(response);
            },function (err){
                console.log(err);
            })
        }

        /*
            接口2:用戶注冊(cè)
            請(qǐng)求地址:https://autumnfish.cn/api/user/reg
            請(qǐng)求方法:post
            請(qǐng)求參數(shù):username(用戶名,字符串)
            響應(yīng)內(nèi)容:注冊(cè)成功或失敗
        */
        document.querySelector(".post").onclick=function(){
            axios.post("https://autumnfish.cn/api/user/reg",{username:"李奕赫"}).then(function (response){
                console.log(response);
            },function (err){
                console.log(err);
            })
        }
    </script>

    <div id="app">
        <input type="button" value="獲取笑話" @click="getJoke">
        <p>{{joke}}</p>
    </div>

    <!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--官網(wǎng)提供的axios在線地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
         接口1:隨機(jī)笑話
         請(qǐng)求地址:https://autumnfish.cn/api/joke/list
         請(qǐng)求方法:get
         請(qǐng)求參數(shù):num(笑話條數(shù),數(shù)字)
         響應(yīng)內(nèi)容:隨機(jī)笑話
     */
        var app=new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑話"
            },
            methods:{
                getJoke:function (){
                    var that=this;
                    axios.get("https://autumnfish.cn/api/joke").then(function (response){
                        console.log(response.data)
                        that.joke=response.data;   /*這里不能使用this.joke，因?yàn)閷?duì)象已經(jīng)發(fā)生改變*/
                    },function (err){ })
                }
            },
        })
    </script>