谷粒学院

首页显示课程名师数据

一、后端部分

新建前端查询课程名师接口

• 在service-edu模块创建controller

（1）查询最新前4条讲师数据

（2）查询最新前8条课程数据

@RestController@CrossOrigin@RequestMapping("/eduservice/indexFront")publicclassIndexFrontController{@Autowiredprivate EduCourseService eduCourseService;@Autowiredprivate EduTeacherService eduTeacherService;//查询前8条热门课程，查询前4个名师@GetMapping("/index")public Rindex(){//查询前8条热门课程
        QueryWrapper<EduCourse> wrapper=newQueryWrapper<>();
        wrapper.orderByDesc("view_count");
        wrapper.last("limit 8");
        List<EduCourse> courseList= eduCourseService.list(wrapper);//查询前4张名师
        QueryWrapper<EduTeacher> wrapper1=newQueryWrapper<>();
        wrapper1.orderByDesc("id");
        wrapper1.last("limit 4");
        List<EduTeacher> teacherList= eduTeacherService.list(wrapper1);return R.ok().data("courseList",courseList).data("teacherList",teacherList);}}

二、前端部分

1、首页banner数据显示

• 创建api文件夹，创建banner.js文件

• banner.js

import requestfrom'@/utils/request'exportdefault{//查询前两条banner数据getListBanner(){returnrequest({
            url:'/cmsservice/bannerFront/getAll/',
            method:'get'})}}

2、在首页面引入，调用实现

import bannerfrom'@/api/banner';exportdefault{data(){return{
      swiperOption:{...
        bannerList:[],};},
  methods:{getBannerList(){
      banner.getListBanner().then(resp=>{this.bannerList= resp.data.data.list})}},created(){//获取两条banner数据this.getBannerList();},};

3、在页面遍历显示banner

<!-- 幻灯片 开始 --><divv-swiper:mySwiper="swiperOption"><divclass="swiper-wrapper"><divv-for='banner in bannerList':key='banner.id'class="swiper-slide"style="background: #040b1b"><atarget="_blank":href="banner.linkUrl"><img:src="banner.imageUrl":alt="banner.title"/></a></div></div><divclass="swiper-pagination swiper-pagination-white"></div><divclass="swiper-button-prev swiper-button-white"slot="button-prev"></div><divclass="swiper-button-next swiper-button-white"slot="button-next"></div></div><!-- 幻灯片 结束 -->

4、nginx访问配置

server{
    listen9001;
    server_name  localhost;......
    location~/cmsservice/{
        proxy_pass http://localhost:8004;}}

5、首页显示课程和名师数据

• 创建api文件夹，创建index.js文件

• index.js

import requestfrom'@/utils/request'exportdefault{//查询热门课程和名师getIndexData(){returnrequest({
            url:'/eduservice/indexFront/index/',
            method:'get'})}}

6、在首页面引入，调用实现

<script>import bannerfrom"@/api/banner";import indexfrom"@/api/index";exportdefault{data(){return{
      swiperOption:{//配置分页
        pagination:{
          el:".swiper-pagination",//分页的dom节点},//配置导航
        navigation:{
          nextEl:".swiper-button-next",//下一页dom节点
          prevEl:".swiper-button-prev",//前一页dom节点},},
      bannerList:[],
      teacherList:[],
      courseList:[],};},
  methods:{//查询幻灯片getBannerList(){
      banner.getListBanner().then((resp)=>{this.bannerList= resp.data.data.list;});},//查询热门课程和讲师getHotCourseAndTeacher(){
      index.getIndexData().then((resp)=>{this.courseList= resp.data.data.courseList;this.teacherList= resp.data.data.teacherList;});},},created(){//获取两条banner数据this.getBannerList();//获取热门课程和讲师this.getHotCourseAndTeacher();},};</script>

7、在页面遍历显示课程和名师、幻灯片遍历

<!-- 幻灯片 开始 --><divv-swiper:mySwiper="swiperOption"><divclass="swiper-wrapper"><divv-for="banner in bannerList":key="banner.id"class="swiper-slide"style="background: #040b1b"><atarget="_blank":href="banner.linkUrl"><img:src="banner.imageUrl":alt="banner.title"/></a></div></div><divclass="swiper-pagination swiper-pagination-white"></div><divclass="swiper-button-prev swiper-button-white"slot="button-prev"></div><divclass="swiper-button-next swiper-button-white"slot="button-next"></div></div><!-- 幻灯片 结束 --><!-- 幻灯片 结束 --><divid="aCoursesList"><!-- 网校课程 开始 --><div><sectionclass="container"><headerclass="comm-title"><h2class="tac"><spanclass="c-333">热门课程</span></h2></header><div><articleclass="comm-course-list"><ulclass="of"id="bna"><liv-for="course in courseList":key="course.id"><divclass="cc-l-wrap"><sectionclass="course-img"><img:src="course.cover"class="img-responsive":alt="course.title"/><divclass="cc-mask"><ahref="#"title="开始学习"class="comm-btn c-btn-1">开始 学习</a></div></section><h3class="hLh30 txtOf mt10"><ahref="#":title="course.title"class="course-title fsize18 c- 333">{{ course.title }}</a></h3><sectionclass="mt10 hLh20 of"><spanclass="fr jgTag bg-green"v-if="Number(course.price) === 0"><iclass="c-fff fsize12 f-fA">免费</i></span><spanclass="fl jgAttr c-ccc f-fA"><iclass="c-999 f-fA">9634人学习</i>
                        |<iclass="c-999 f-fA">9634评论</i></span></section></div></li></ul><divclass="clear"></div></article><sectionclass="tac pt20"><ahref="#"title="全部课程"class="comm-btn c-btn-2">全部课程</a></section></div></section></div><!-- /网校课程 结束 --><!-- 网校名师 开始 --><div><sectionclass="container"><headerclass="comm-title"><h2class="tac"><spanclass="c-333">名师大咖</span></h2></header><div><articleclass="i-teacher-list"><ulclass="of"><liv-for="teacher in teacherList":key="teacher.id"><sectionclass="i-teach-wrap"><divclass="i-teach-pic"><ahref="/teacher/1":title="teacher.name"><img:alt="teacher.name":src="teacher.avatar"/></a></div><divclass="mt10 hLh30 txtOf tac"><ahref="/teacher/1":title="teacher.name"class="fsize18 c-666">{{teacher.name}}</a></div><divclass="hLh30 txtOf tac"><spanclass="fsize14 c-999">{{teacher.career}}</span></div><divclass="mt15 i-q-txt"><pclass="c-999 f-fA">
                        {{teacher.intro}}</p></div></section></li></ul><divclass="clear"></div></article><sectionclass="tac pt20"><ahref="#"title="全部讲师"class="comm-btn c-btn-2">全部讲师</a></section></div></section></div>

首页数据添加Redis缓存

二、项目集成Redis

1、在common模块添加依赖

由于redis缓存是公共应用，所以我们把依赖与配置添加到了common模块下面，在common模块pom.xml下添加以下依赖

<!-- redis --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><!-- spring2.X集成redis所需common-pool2 --><dependency><groupId>org.apache.commons</groupId><artifactId>commons-pool2<