vue中的请求

vue1的请求

vue-resource

用vue1 的请求，有一个先后顺序需要先引入vue.js，在引入vue-resource.js。
用vue.resource 请求的时候需要在created(){}里面,用this.$http.请求方式

get请求

//http代码：
   <div id='app'>
        <img :src="imgSrc" alt="">
    </div>
//vue实例代码：
      const vm = new Vue({
            el: '#app',
            data: {
                imgSrc: ''
            },
            methods: {
            },
            created() {
                console.log(this);
                this.$http.get('http://wkt.shangyuninfo.cn/weChat/applet/course/banner/list?number=1').then(res => {
                    console.log(res);
                    this.imgSrc = res.data.data[0].imgUrlPc
                }) 
        })

效果如图：

post请求

post有三种请求头一种是application/JSON；一种是application/formData；另一中是application / x - www - form - urlencoded。
post请求的默认请求头是application/JSON。
如果请求的请求是application / x - www - form - urlencoded这种的话，post请求就有三种参数分别是URL、请求的参数和emulateJSON: true

//引入vue.js
    <script src="./vue-2.4.0.js"></script>
    <script src="./vue-resource-1.3.4.js"></script>
//http代码：
   <div id='app'>
        <img :src="imgSrc" alt="">
    </div>
//vue实例代码：
      const vm = new Vue({
            el: '#app',
            data: {
                imgSrc: ''
            },
            methods: {
            },
            created() {
                console.log(this);
                 //application / x - www - form - urlencoded 请求头
                 this.$http.post('http://wkt.shangyuninfo.cn/weChat/applet/course/list/type', {
                    type: 'free',
                    pageNum: 10,
                    pageSize: 1
                }, { emulateJSON: true }).then(res => {
                    console.log(res);
                })


                //application/JSON请求头             
                this.$http.post('http://wkt.shangyuninfo.cn/weChat/applet/subject/list', {
                    enable: 1
                }).then(res => {
                    console.log(res);
                })
        })

vue2的请求

axios请求

用axios请求前要先引入axios.js
用axios 请求的时候需要在created(){}里面,用axios.请求方式

get请求

//引入vue.js：
    <script src="./vue-2.4.0.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//css代码：
       * {
            padding: 0;
            margin: 0;
        }

        ul {
            width: 1200px;
            margin: auto;
            list-style: none;
            display: flex;
            justify-content: space-between;
        }

        li {
            width: 18%;
        }

        img {
            width: 100%;
        }
//html代码：
    <div id='app'>
        <img :src="imgSrc" alt="">
    </div>
//vue实例代码：
    const vm = new Vue({
            el: '#app',
            data: {
                imgSrc: '',
                courseList: [],
                boutiqueList: []
            },
            methods: {
            },
            created() {
                console.log(this);
                //  get请求
                axios.get('http://wkt.shangyuninfo.cn/weChat/applet/course/banner/list?number=1').then(res => {
                    console.log(res);
                    this.imgSrc = res.data.data[0].imgUrlPc
                })
        })

效果如下：

post请求

post有三种请求头一种是application/JSON；一种是application/formData；另一中是application / x - www - form - urlencoded。
post请求的默认请求头是application/JSON。
如果请求的请求头是application / x - www - form - urlencoded或application/formData的话，需要把application / x - www - form - urlencoded或application/formData实例化。

//引入vue.js：
    <script src="./vue-2.4.0.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//css代码：
      * {
            padding: 0;
            margin: 0;
        }

        ul {
            width: 1200px;
            margin: auto;
            list-style: none;
            display: flex;
            justify-content: space-between;
        }

        li {
            width: 18%;
        }

        img {
            width: 100%;
        }
//html代码：
    <div id='app'>
        <h2>免费课程</h2>
        <ul>
            <li v-for="(item,index) in courseList" :key="item.courseId">
                <img :src="item.coverFileUrl" alt="">
                <p>{{item.courseTitle}}</p>
                <p>共{{item.learningNum}}节课 | {{item.participationsCount}}人报名</p>
                <p>免费</p>
            </li>
        </ul>
        <h2>精品课程</h2>
        <ul>
            <li v-for="(item,index) in boutiqueList" :key="item.courseId">
                <img :src="item.coverFileUrl" alt="">
                <p>{{item.courseTitle}}</p>
                <p>共{{item.learningNum}}节课 | {{item.participationsCount}}人报名</p>
                <p v-if="item.isFree==1">免费</p>
                <p v-else-if="item.isDiscount==1">{{item.discountPrice}} <del>{{item.coursePrice}}</del></p>
                <p v-else>{{item.discountPrice}}</p>
            </li>
        </ul>
    </div>
//vue实例代码：
    const vm = new Vue({
            el: '#app',
            data: {
                imgSrc: '',
                courseList: [],
                boutiqueList: []
            },
            methods: {
            },
            created() {
                console.log(this);
                  //application / x - www - form - urlencoded请求头
                 let url = new URLSearchParams()
                 url.append('type', 'free')
                 url.append('pageSize', 5)
                 url.append('pageNum', 1)
                 axios.post('http://wkt.shangyuninfo.cn/weChat/applet/course/list/type', url).then(res => {
                     console.log(res);
                     this.courseList = res.data.rows
                  })
                 let urlBoutique = new URLSearchParams()
                 urlBoutique.append('type', 'boutique')
                 urlBoutique.append('pageSize', 5)
                 urlBoutique.append('pageNum', 1)
                 axios.post('http://wkt.shangyuninfo.cn/weChat/applet/course/list/type', urlBoutique).then(res => {
                     console.log(res);
                     this.boutiqueList = res.data.rows
                 })
                 //application/JSON请求头
                 axios.post('http://wkt.shangyuninfo.cn/weChat/applet/subject/list', {
                    enable: 1
                }).then(res => {
                    console.log(res);
                })
        })

效果如下：