axios的使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、引入 vue和axios

二、使用步骤

1.引入库

代码如下（示例）：

 <div id='app'>
        <img :src="imgSrc" alt="">

        <ul>
            <li v-for="(item,index) in courseList" :key="item.courseId">
                <img :src="item.coverFileUrl" alt="">
                <p>{{item.courseTitle}}</p>
                <p>共{{item.learningNum}}节课</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}}节课</p>
                <p v-if="item.isFree==1">免费</p>
                <p v-else-if="item.isDiscount==1"><del>{{item.discountPrice}}</del>{{item.coursePrice}}</p>
                <p v-else>{{item.discountPrice}}</p>
            </li>
        </ul>
    </div>

2.读入数据

代码如下（示例）：

 const vm = new Vue({
            el: '#app',
            data: {
                imgSrc: '',
                courseList: [],
                boutiqueList: []
            },
            methods: {
                getCourseList(type = 'free') {
                    let url = new URLSearchParams()
                    url.append('type', type)
                    url.append('pageSize', 5)
                    url.append('pageNum', 1)
                    return axios.post('http://wkt.shangyuninfo.cn/weChat/applet/course/list/type', url)
                }
            },
            created() {
                console.log(this);
                // console.log();
                // 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
                })

                // 封装
                this.getCourseList().then(res => {
                    this.courseList = res.data.rows
                })
                this.getCourseList('boutique').then(res => {
                    this.boutiqueList = res.data.rows
                })
                // post
                // formData()
                // 实例化
                // let url = new FormData()
                // url.append('type', 'free')
                // url.append('pageSize', 10)
                // url.append('pageNum', 1)
                //  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
                // })


                axios.post('http://wkt.shangyuninfo.cn/weChat/applet/subject/list', {
                    enable: 1
                }).then(res => {
                    console.log(res);
                })
            }
        })

该处使用的url网络请求的数据。