day12---(01)首页显示热门课程和名师（前端）

1、在api目录下定义banner.js接口

import request from '@/utils/request' export default { //首页展示8条课程信息，4位讲师 getIndexData(){ return request({ url: `/eduservice/index`, method: 'get' }) } }

2、通过js获取数据

import index from "@/api/index" export default { data () { return { bannerList:[],//banner集合 hotCourseList:[],//热门课程 teacherList:[],//名师列表 swiperOption: { //配置分页 pagination: { el: '.swiper-pagination'//分页的dom节点 }, //配置导航 navigation: { nextEl: '.swiper-button-next',//下一页dom节点 prevEl: '.swiper-button-prev'//前一页dom节点 } } } }, created () { this.getBannerList() this.getCourseTeacher(); }, methods: { //查询热门课程和名师 getCourseTeacher(){ index.getIndexData() .then(response=>{ this.hotCourseList = response.data.data.hotCourse this.teacherList = response.data.data.teacher }) },

3、改造pages/index.vue页面，渲染页面

<div id="aCoursesList"> <!-- 网校课程 开始 --> <div> <section class="container"> <header class="comm-title"> <h2 class="tac"> <span class="c-333">热门课程</span> </h2> </header> <div> <article class="comm-course-list"> <ul class="of" id="bna"> <li v-for="(course,index) in hotCourseList" :key="index"> <div class="cc-l-wrap"> <section class="course-img"> <img :src="course.cover" class="img-responsive" :alt="course.title"> <div class="cc-mask"> <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a> </div> </section> <h3 class="hLh30 txtOf mt10"> <a href="#" :title="course.title" class="course-title fsize18 c-333" >{{course.title}}</a> </h3> <section class="mt10 hLh20 of"> <span class="fr jgTag bg-green" v-if="Number(course.price)===0"> <i class="c-fff fsize12 f-fA">免费</i> </span> <span class="fr jgTag bg-green" v-else> <i class="c-fff fsize12 f-fA">￥{{course.price}}</i> </span> <span class="fl jgAttr c-ccc f-fA"> <i class="c-999 f-fA">{{course.buyCount}}人学习</i> | <i class="c-999 f-fA">{{course.viewCount}}浏览</i> </span> </section> </div> </li> </ul> <div class="clear"></div> </article> <section class="tac pt20"> <a href="#" title="全部课程" class="comm-btn c-btn-2">全部课程</a> </section> </div> </section> </div> <!-- /网校课程 结束 --> <!-- 网校名师 开始 --> <div> <section class="container"> <header class="comm-title"> <h2 class="tac"> <span class="c-333">名师大咖</span> </h2> </header> <div> <article class="i-teacher-list"> <ul class="of"> <li v-for="(teacher,index) in teacherList" :key="index"> <section class="i-teach-wrap"> <div class="i-teach-pic"> <a href="/teacher/1" :title="teacher.name"> <img :alt="teacher.name" :src="teacher.avatar"> </a> </div> <div class="mt10 hLh30 txtOf tac"> <a href="/teacher/1" :title="teacher.name" class="fsize18 c-666">{{teacher.name}}</a> </div> <div class="hLh30 txtOf tac"> <span class="fsize14 c-999">{{teacher.career}}</span> </div> <div class="mt15 i-q-txt"> <p class="c-999 f-fA" >{{teacher.intro}}</p> </div> </section> </li> </ul> <div class="clear"></div> </article> <section class="tac pt20"> <a href="#" title="全部讲师" class="comm-btn c-btn-2">全部讲师</a> </section> </div> </section> </div> <!-- /网校名师 结束 -->