VUE网络应用

Vue结合网络数据开发应用

axios 网络请求库

axios基础使用

• 官网：www.axios-http.cn/
• 导包：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
• 语法：get:axios.get(地址?key=val&key2=val2).then(function(res){},function(err){})；post:axios.post(地址,{key:val,key2:val2}).then(function(res){},function(err){})
• 测试接口: 随机笑话get: autumnfish.cn/api/joke/li… ；用户注册post: autumnfish.cn/api/user/re…

<input type="button" value="getRequest" class="get">
<input type="text" placeholder="请输入用户名" id="userpost">
<input type="button" value="postRequest" class="post">
<!-- 导入axios库创建axios数据请求对象 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    /* 1.创建axios-get请求随机笑话接口；请求参数num(条数,number) */
    document.querySelector('.get').onclick = () => {
        axios.get('https://autumnfish.cn/api/joke/list?num=5')
        .then((res) => {
            console.log('res',res);
        })
    }
    /* 2.创建axios-post请求随机笑话接口；请求参数username(用户名,string) */ 
    document.querySelector('.post').onclick = () => {
        axios.post('https://autumnfish.cn/api/user/reg',{
            username: document.querySelector('#userpost').value
        })
        .then((res) => {
            console.log('res',res);
        })
        .catch((err) => {
            console.log('err',err);
        })
    }       
    
</script>

axios + vue:

<div id="jokelist">
    <input type="number" v-model="nList">
    <input type="button" value="生成笑话" @click="getJoke">
    <ul>
        <li v-for="item in aList">{{item}}</li>
    </ul>
</div>
<!-- 导入axios库创建axios数据请求对象 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 导入vue2 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"><script>

<script>
    let oVue = new Vue({
        el: '#jokelist',
        data:{
            nList: 0,
            aList: []
        },
        methods:{
            getJoke() {
                const that = this;
                let sAddress = 'https://autumnfish.cn/api/joke/list?num=' + that.nList;
                axios.get(sAddress).then((res) => {
                    console.log('res', res.data);
                    that.aList = res.data.data
                }, (err) => {
                    console.log('err', err);
                }) 
            }
        }
    });
</script>