vue基本知识-8.vue的ajax类库vue-resource

2019-04-29 本文已影响0人挤时间学习的阿龙

类库地址：

https://github.com/pagekit/vue-resource

1、打开类库地址里的使用说明，找到示例代码

adde255953735acc2cd95d1eda479ab2.png

说明：老师的视频接口用postman正常，但是用vue扩展类库的ajax请求过来后部分出错，跨域问题

最后是php版本的问题

（1）list.html代码

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for列表渲染</title>
    <link rel="stylesheet" href="aui/aui.css">
</head>
<body>
<div class="aui-content aui-margin-b-15" id="app">
    <ul class="aui-list aui-media-list">
        <li>
            图文列表
 </li>
        <li>
            <div>
                <div>
                    <img src="001.png">
                </div>
                <div>
                    <div>
                        <div>带有媒体的列表二</div>
                        <div>08:00</div>
                    </div>
                    <div>
                        在下方我们加入了aui-info信息条
 </div>
                </div>
            </div>
            <div style="padding-top:0">
                <div>
                    <img src="001.png" style="width:1rem"><span>流浪男</span>
                </div>
                <div>2015-07-14 10:31</div>
            </div>
        </li>
    </ul>
</div>
</body>
</html>
<script src="vue.js"></script>
<script src="vue-resource.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            list:[],
            index_url:'http://news.88xuexi.cn/app/index'
 },
        methods:{
           init:function () {
               this.$http.get(this.index_url,{
                   id:2,
                   username:''
 }).then(function(response){
                   console.log('正确响应');
                   // get body data
                   // this.someData = response.body;
 }, function(response){
                   console.log('响应失败');  // error callback
 });
           }
        },
    })
</script>

（2）效果

3b78f7698917faffdc1939a49a6212b5.png

2、完成的

（1）list.html 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for列表渲染</title>
    <link rel="stylesheet" href="aui/aui.css">
</head>
<body>
<div class="aui-content aui-margin-b-15" id="app">
    <ul class="aui-list aui-media-list">
        <li class="aui-list-header">
            图文列表
        </li>
        <li class="aui-list-item" v-for="vo in list">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media">
                    <img :src="vo.img">
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">带有媒体的列表二</div>
                        <div class="aui-list-item-right">08:00</div>
                    </div>
                    <div class="aui-list-item-text">
                        {{ vo.title }}
                    </div>
                </div>
            </div>
            <div class="aui-info" style="padding-top:0">
                <div class="aui-info-item">
                    <!--<img src="liulangnan.png" style="width:1rem" class="aui-img-round">-->
                    <span class="aui-margin-l-5">{{ vo.author }}</span>
                </div>
                <div class="aui-info-item">{{vo.create_time}}</div>
            </div>
        </li>
    </ul>
</div>
</body>
</html>
<script src="vue.js"></script>
<script src="vue-resource.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            list: [],
            index_url:'http://news.88xuexi.cn/app/index'
        },
        methods:{
           init:function () {
               //传统写法
               this.$http.post(this.index_url,{
                   id:2,
                   username:''
               }).then(function(response){
                   console.log('正确响应');
                   var ret = JSON.parse(response.data); //固定写法
                   vm.list = ret.data.article; //实现了ajax获取到数据绑定到vm对象
               }, function(response){
                   console.log('响应失败'); // error callback
               });
           }
        },
    });

    setTimeout(function () {
        vm.init();
    },500)
</script>