云课堂轮播图和部分课程请求

什么是axios？

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

引入axios

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

轮播图数据请求

视图层部分代码：

<div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in imgList">
            <img :src="item.imgUrlPc" alt="" />
          </div>
          <!-- <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div> -->
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
      </div>

Script标签内代码：

<script>
      const vm = new Vue({
        el: "#app",
        data: {
          imgList: [],
        },
        methods: {},
        created() {
          axios
            .get(
              "http://wkt.shangyuninfo.cn/weChat/applet/course/banner/list?number=5"
            )
            .then((res) => {
              this.imgList = res.data.data;
              // 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
              this.$nextTick(() => {
                var mySwiper = new Swiper(".swiper-container", {
                  // direction: 'vertical', // 垂直切换选项
                  loop: true, // 循环模式选项
                  speed: 10,
                  autoplay: true,
                  delay: 10,
                  // 如果需要分页器
                  pagination: {
                    el: ".swiper-pagination",
                  },
                  // 如果需要前进后退按钮
                  navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                  },
                  // 如果需要滚动条
                  scrollbar: {
                    el: ".swiper-scrollbar",
                  },
                });
              });
            });
        },
      });
</script>

免费课程数据请求

视图层部分代码：

 <h2>免费课程</h2>
<ul>
            <li v-for="(item,index) in courseList" :key="item.courseId">
                <img :src="item.coverFileUrl" alt="">
                <div>{{item.courseTitle}}</div>
                <div>共{{item.orderBy}}节课，{{item.learningNum}}人报名</div>
                <div>免费</div>
            </li>
        </ul>

Script标签内代码：

 const vm = new Vue({
            el: '#app',
            data: {
                imgSrc: '',
                imgList: [],
                courseList: [],
                boutiqueList: []
            },
            methods: {
                getList(type = 'free', pageSize = 10, pageNum = 1) {
                    let url = new URLSearchParams()
                    url.append('type', type)
                    url.append('pageSize', pageSize)
                    url.append('pageNum', pageNum)

                    return axios.post('http://wkt.shangyuninfo.cn/weChat/applet/course/list/type', url)
                }
            },

精品课程数据请求

视图层部分代码：

<h2>精品课程</h2>
        <ul>
            <li v-for="(item,index) in boutiqueList" :key="item.courseId">
                <img :src="item.coverFileUrl" alt="">
                <div>{{item.courseTitle}}</div>
                <div>共{{item.orderBy}}节课，{{item.learningNum}}人报名</div>
                <div v-if="item.isFree==1">免费</div>
                <div v-else-if="item.isDiscount==1">{{item.discountPrice}} <del>{{item.coursePrice}}</del> </div>
                <div v-else>{{item.coursePrice}}</div>
            </li>
        </ul>

Script标签内代码：

                // 协议（http https） + 主机（ip 域名） + 地址
                axios.get('http://wkt.shangyuninfo.cn/weChat/applet/course/banner/list?number=5').then(res => {
                    console.log(res);
                    this.imgSrc = res.data.data[0].imgUrlPc
                    this.imgList = res.data.data
                })
                // console.log(this.getList());
                this.getList().then(res => {
                    this.courseList = res.data.rows
                })
                this.getList('boutique', 5).then(res => {
                    this.boutiqueList = res.data.rows
                    // this.courseList = res.data.rows
                })