Axios请求与Vue遍历

一、页面效果

二、接口请求

思维：
1、引用axios
2、创建变量,存放数据
3、创建一个函数(页面挂载好之后执行)
4、请求POST接口
5、获得请求数据
6、创建声明周期钩子函数, 页面挂载好之后执行 4

<script>
import axios from 'axios'

export default {
  name: 'IndexCourses',
  data () {
    return {
      userList:[]
    }
  },
  methods: {
    // 创建一个函数
    getCoursesInfo () {
      // 通过axios进行数据请求
      axios({
        method: 'post',
        url: 'http://192.168.0.110:8888/coach/findGoldCoach?currentPage=1&pageSize=4',
      }).then((res)=>{
        // console.log(res.data.data)
        this.userList = res.data.data
      })
    }
  },
  // 创建一个生命周期函数,当页面挂载好了之后,执行这个函数
  mounted () {
    this.getCoursesInfo()
  }
}
</script>

三、遍历

通过v-for、{{}}将获取的数据进行遍历展示

<template>
  <div class="courses">
    <div class="courses-nav">
      <div class="courses-sec">
        <h2 class="sec-title">FITNESS金牌健身教练</h2>
        <p class="sec-describe">舒适的健身环境、多功能操房、团体私教工作室、50+专业资深教练组成的研发团队打造的爱动原创课程、国际版权课程以及完善的客户服务满足您运动前后的所有需求，每处细节彰显FITNESS爱动课程体验中心“服务至上”的理念。</p>
      </div>
      <div class="courses-content">
        <ul class="courses-list">
          <div class="list-wrapper">
            <router-link to="/instructor/instructorDetails">
              <li class="courses-item" v-for="(item, index) in this.userList" :key="index">
                <div class="item-top">
                  <img class="item-top-img" :src="item.coachPhoto" alt="">
                </div>
                <div class="item-bottom">
                  <h3 class="item-title">{{item.coachClass}}  {{item.coachName}}</h3>
                  <p class="item-describe">擅长: {{item.coachSpecialty}}</p>
                </div>
              </li>
            </router-link>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'IndexCourses',
  data () {
    return {
      userList:[]
    }
  },
  methods: {
    // 创建一个函数
    getCoursesInfo () {
      // 通过axios进行数据请求
      axios({
        method: 'post',
        url: 'http://192.168.0.110:8888/coach/findGoldCoach?currentPage=1&pageSize=4',
      }).then((res)=>{
        // console.log(res.data.data)
        this.userList = res.data.data
      })
    }
  },
  // 创建一个生命周期函数,当页面挂载好了之后,执行这个函数
  mounted () {
    this.getCoursesInfo()
  }
}
</script>

<style lang="stylus" scoped>
  .courses
    width 1920px
    height 800px
    background-color #e9eff4
    padding-top 115px
    .courses-nav
      width 1200px
      height 100%
      margin 0 352.5px
      padding 0 15px
      // background #f5
      .courses-sec
        height 136px
        padding 0 170px
        color #595959
        font-family montserrat,sans-serif
        .sec-title
          height 52px
          line-height 52px
          font-family Arial
          font-size 48px
          text-align center
        .sec-describe
          margin-top 15px
          height 52px
          line-height 22px
          font-size 16px
          font-family sans-serif
          text-align center
      .courses-content
        margin-top 35px
        height 424px
        display flex
        // background #000
        .list-wrapper
          float left
          margin 15px
          .courses-item
            float left
            overflow hidden
            box-sizing border-box
            width 270px
            height 329px
            border-radius 10px
            background-color #04d2c8
            margin-left 20px
            margin-right auto
            .item-top
              width 270px
              height 220px
              .item-top-img
                width 270px
                height 220px
                overflow hidden
            .item-bottom
              padding 30px 15px
              color #fff
              .item-title
                height 22px
                line-height 22px
                font-size 18px
                text-align center
                font-weight 500
                font-family montserrat,sans-serif
              .item-describe
                margin-top 10px
                height 22px
                line-height 22px
                font-size 14px
                font-weight 300
                text-align center           
</style>