vue-resource的使用、axios的使用

1、vue-resource的使用

　　1、直接在页面中，通过script标签，引入vue-resource的脚本文件；

　　2、注意：引用的先后顺序是-先引用Vue的脚本文件，再引用vue-resource的脚本文件。

　　3、vue-resource get请求案例

<div id='app'>
        <ul>
            <li v-for="item in list">
                <img :src="item.coverImgUrl" alt="">
                <p>{{item.name}}</p>
            </li>
        </ul>
    </div>
    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            list:[],
        },
        created(){
            this.$http.get('https://showme.myhope365.com/api/shop/shopGoods/open/banner/list',{
                header:{
                   'X-Requested-With':'XMLHttpRequest'
                }
            }).then(res=>{
                this.list=res.body.rows;
            }).catch(err=>{
                console.error(err);
            })
        }
    })
    </script>

4、vue-resource post请求案例

 <div id='app'>
        <ul>
            <li v-for="item in list">
                <img :src="item.coverImgUrl" alt="">
                <p>{{item.name}}</p>
            </li>
        </ul>
    </div>
    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            list:[],
        },
        created(){
            this.$http.post('https://showme.myhope365.com/api/shop/shopGoods/open/list',{
                pageNum:1,
                pageSize:5,
            },{
                emulateJSON:true
            }).then(res => {
                console.log(res);
                this.list = res.body.rows;
            }).catch(err => {
                console.error(err);
            })
        }
    })
    </script>

2、axios的使用

　　1、axios get请求

　　　　axios.get(地址，配置).then(res=>{ })

  <div id='app'>
        <ul>
            <li v-for="item in list">
                <img :src="item.coverImgUrl" alt="">
                <p>{{item.name}}</p>
            </li>
        </ul>
    </div>
    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            list:[],
        },
        created(){
            axios.get('https://showme.myhope365.com/api/shop/shopGoods/open/banner/list',{
                headers:{
                    'X-Requested-With': 'XMLHttpRequest'
                }
            }).then(res => {
                console.log(res);
                this.list = res.data.rows;
            }).catch(err => {
                console.error(err);
            })
        }
    })
    </script>

2、axios post请求　　　

// json {}
// application/x-www-form-urlencoded   URLSearchParams()
// multipart/form-data   FormData()  
const formdata = new FormData()
formdata.append("参数名",参数值)                          
axios.get(地址，请求体，配置).then(res=>{})

 <div id='app'>
        <ul>
            <li v-for="item in list">
                <img :src="item.coverImgUrl" alt="">
                <p>{{item.name}}</p>
            </li>
        </ul>
    </div>
    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            list:[],
        },
        created(){
            //  axios.post('https://showme.myhope365.com/api/shop/shopGoods/open/list', {
            //     pageNum: 1,
            //     pageSize: 5,
            // }).then(res => {
            //     console.log(res);
            //     this.list = res.body.rows;
            // }).catch(err => {
            //     console.error(err);
            // })
            let params=new URLSearchParams();
            params.append("pageNum", 1);
            params.append("pageSize", 5);
            axios.post('https://showme.myhope365.com/api/shop/shopGoods/open/list',params).then(res => {
                console.log(res);
                this.list = res.data.rows;
            }).catch(err => {
                console.error(err);
            })
        }
    })
    </script>

3、axios文件上传

<div id='app'>
        <input type="file" @change="selectFile">
        <button @click="uploadFile">上传文件</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                file: null,
            },
            methods: {
                selectFile(e) {
                    this.file = e.target.files[0];
                },
                uploadFile() {
                    let formdate = new FormData();
                    formdate.append("file", this.file);
                    formdate.append("fileUseForEnum", "DEFAULT");
                    axios.post('http://59.111.92.205:13010/api/nos/upload/image', formdate).then(res => {
                        console.log(res);
                    })
                }
            }
        })
    </script>