Day213(1)，2024年最新阿里P8大牛亲自教你

一、后端部分

---

1、TeacherFrontController

@RestController

@CrossOrigin

@RequestMapping(“/eduservice/teacherFront”)

public class TeacherFrontController {

@Autowired

private EduTeacherService eduTeacherService;

@Autowired

private EduCourseService eduCourseService;

//根据id查询讲师信息（讲师本身信息+讲师所讲课程信息）

@GetMapping(“/getTeacherInfo/{id}”)

public R getTeacherInfo(@PathVariable String id){

//查询讲师信息

EduTeacher teacher = eduTeacherService.getById(id);

//查询讲师所讲课程信息

QueryWrapper wrapper = new QueryWrapper<>();

wrapper.eq(“teacher_id”,id);

List courseList = eduCourseService.list(wrapper);

return R.ok().data(“teacher”,teacher).data(“courseList”,courseList);

}

}

这里不够严谨，其实想要再创service，把业务逻辑写在service中

2、swagger测试

---

二、前端部分

---

1、teacher api

guli-front\api\teacher.js

import request from ‘@/utils/request’

export default{

…

//根据ID查询讲师本身信息+课程信息

getTeacherInfoByid(id){

return request({

url: /eduservice/teacherFront/getTeacherInfo/${id},

method: get

})

},

}

2、讲师详情页中调用api

三、页面渲染

---

1、讲师基本信息模板

讲师介绍

{{teacher.name}} 

{{teacher.level ===1?‘高级讲师’:‘首席讲师’}}

{{teacher.career}}

{{teacher.intro}}

主讲课程

 

 

<span class=“c-666 fsize14 ml10 vam”

没有相关数据，小编正在努力整理 中…</span

• <img

  :src=“course.cover”

  class=“img-responsive”

  />

  <a

  :href=“‘/course/’+course.id”

  title=“开始学习”

  target=“_blank”

  class=“comm- btn c-btn-1”

  开始学习</a

  <a

  :href=“‘/course/’+course.id”

  :title=“course.title”

  target=“_blank”

  class=“course-title fsize18 c-333”

  {{course.title}}</a

  四、测试

  ---

  

  • 有课程

  

  • 如果没课程

  

  ---

  课程列表页面

  ================================================================

  一、后端接口

  ---

  • com.achang.eduservice.entity.frontVo.CourseFrontVo

  @Data

  public class CourseFrontVo implements Serializable {

  private static final long serialVersionUID = 1L;

  @ApiModelProperty(value = “课程名称”)

  private String title;

  @ApiModelProperty(value = “讲师id”)

  private String teacherId;

  @ApiModelProperty(value = “一级类别id”)

  private String subjectParentId;

  @ApiModelProperty(value = “二级类别id”)

  private String subjectId;

  @ApiModelProperty(value = “销量排序”)

  private String buyCountSort;

  @ApiModelProperty(value = “最新时间排序”)

  private String gmtCreateSort;

  @ApiModelProperty(value = “价格排序”)

  private String priceSort;

  }

  • service

  接口

  public interface EduCourseService extends IService {

  …

  //前台多条件分页查询

  Map<String, Object> getCourseFrontInfo(Page pageCourse, CourseFrontVo courseFrontVo);

  }

  Impl

  @Service

  public class EduCourseServiceImpl extends ServiceImpl<EduCourseMapper, EduCourse> implements EduCourseService {

  //前台多条件分页查询

  @Override

  public Map<String, Object> getCourseFrontInfo(Page pageCourse, CourseFrontVo courseFrontVo) {

  String title = null;

  String subjectId = null;

  String subjectParentId = null;

  String gmtCreateSort = null;

  String buyCountSort = null;

  String priceSort = null;

  String teacherId = null;

  if (!StringUtils.isEmpty(courseFrontVo)){

  title = courseFrontVo.getTitle();

  subjectId = courseFrontVo.getSubjectId();

  subjectParentId = courseFrontVo.getSubjectParentId();

  gmtCreateSort = courseFrontVo.getGmtCreateSort();

  buyCountSort = courseFrontVo.getBuyCountSort();

  priceSort = courseFrontVo.getPriceSort();

  teacherId = courseFrontVo.getTeacherId();

  }

  QueryWrapper wrapper = new QueryWrapper<>();

  //判断条件值是否为空，不为空拼接条件

  if (!StringUtils.isEmpty(subjectParentId)){//一级分类

  wrapper.eq(“subject_parent_id”,subjectParentId);

  }

  if (!StringUtils.isEmpty(subjectId)){//二级分类

  wrapper.eq(“subject_id”,subjectId);

  }

  if (!StringUtils.isEmpty(buyCountSort)){//关注度

  wrapper.orderByDesc(“buy_count”);

  }

  if (!StringUtils.isEmpty(priceSort)){//价格

  wrapper.orderByDesc(“price”);

  }

  if (!StringUtils.isEmpty(gmtCreateSort)){//最新，创建时间

  wrapper.orderByDesc(“gmt_create”);

  }

  baseMapper.selectPage(pageCourse, wrapper);

  long total = pageCourse.getTotal();//总记录数

  List courseList = pageCourse.getRecords();//数据集合

  long size = pageCourse.getSize();//每页记录数

  long current = pageCourse.getCurrent();//当前页

  long pages = pageCourse.getPages();//总页数

  boolean hasPrevious = pageCourse.hasPrevious();//是否有上一页

  boolean hasNext = pageCourse.hasNext();//是否有下一页

  HashMap<String, Object> map = new HashMap<>();

  map.put(“total”,total);

  map.put(“list”,courseList);

  map.put(“size”,size);

  map.put(“current”,current);

  map.put(“pages”,pages);

  map.put(“hasPrevious”,hasPrevious);

  map.put(“hasNext”,hasNext);

  return map;

  }

  }

  ---

  二、前端部分

  ---

  1、定义api

  api/course.js

  import request from ‘@/utils/request’

  export default{

  //前台多条件分页查询

  getConditionPage(page,limit,searchObj){

  return request({

  url: /eduservice/courseFront/getConditionPage/${page}/${limit},

  method: ‘post’,

  data: searchObj

  })

  },

  //查询所有分类（一级分类、二级分类）的方法

  getAllSubject(){

  return request({

  url: /eduservice/edu-subject/getAllSubject,

  method: ‘get’

  })

  }

  }

  ---

  2、页面调用接口

  pages/course/index.vue

  3、页面

  全部课程

  课程类别

• 全部

  v-for=“subjectNested in subjectNestedList”

  :key=“subjectNested.id”

  <a

  :title=“subjectNested.title”

  @click=“seacherOne(subjectNested.id, index)”

  href=“#”

  {{ subjectNested.title }}</a

• <a

  :title=“subject.title”

  @click=“searchTwo(subject.id, index)”

  href=“#”

  {{ subject.title }}</a

  1/

  1

• <a

  title=“销量”

  href=“javascript:void(0);”

  @click=“searchBuyCount()”

  销量

  ↓

• <a

  title=“最新”

  href=“javascript:void(0);”

  @click=“searchGmtCreate()”

  最新

  ↓

• <a

  title=“价格”

  href=“javascript:void(0);”

  @click=“searchPrice()”

  价格 

  ↓

   

  <span class=“c-666 fsize14 ml10 vam”

  没有相关数据，小编正在努力整理 中…</span
• <img

  :src=“item.cover”

  class=“img-responsive”

  :alt=“item.title”

  />

  <a

  href=“/course/1”

  title=“开始学习”

  class=“comm-btn c- btn-1”

  开始学习</a

  <a

  href=“/course/1”

  :title=“item.title”

  class=“course-title fsize18 c-333”

  {{ item.title }}</a

  <span

  class=“fr jgTag bg-green”

  v-if=“Number(item.price) === 0”

  免费

  9634人学习

  |

  9634评论

  <a

  :class=“{ undisable: !data.hasPrevious }”

  href=“#”

  title=“首页”

  @click.prevent=“gotoPage(1)”

  首</a

  <a

  :class=“{ undisable: !data.hasPrevious }”

  href=“#”

  title=“前一页”

  @click.prevent=“gotoPage(data.current - 1)”

  <</a

  <a

  v-for=“page in data.pages”

  :key=“page”

  :class="{

  current: data.current == page,

  undisable: data.current == page,

  }"

  :title=“‘第’ + page + ‘页’”

  href=“#”

  @click.prevent=“gotoPage(page)”

  {{ page }}</a

  <a

  :class=“{ undisable: !data.hasNext }”

  href=“#”

  title=“后一页”

  @click.prevent=“gotoPage(data.current + 1)”

  ></a

  <a

  :class=“{ undisable: !data.hasNext }”

  href=“#”

  title=“末页”

  @click.prevent=“gotoPage(data.pages)”

  末</a

  4、测试

  

  ---

  课程详情页

  ===============================================================

  一、后端部分

  ---

  • controller

  com.achang.eduservice.controller.front.CourseFrontController

  @RestController

  @CrossOrigin

  @RequestMapping(“/eduservice/courseFront”)

  public class CourseFrontController {

  @Autowired

  private EduCourseService eduCourseService;

  @Autowired

  private EduChapterService eduChapterService;

  …

  //课程详情的方法

  @GetMapping(“/getFrontCourseInfo/{courseId}”)

  public R getFrontCourseInfo(@PathVariable String courseId){

  //根据课程id，编写sql语句查询课程信息

  CourseWebVo courseWebVo = eduCourseService.getBaseCourseInfo(courseId);

  //根据课程id，查询章节和小节信息

  List chapterVideoList = eduChapterService.getChapterVideoByCourseId(courseId);

  return R.ok().data(“courseWebVo”,courseWebVo).data(“chapterVideoList”,chapterVideoList);

  }

  }

  • service

  接口

  //前台根据课程id，查询课程基础信息

  CourseWebVo getBaseCourseInfo(String courseId);

  Impl

  //前台根据课程id，查询课程基础信息

  @Override

  public CourseWebVo getBaseCourseInfo(String courseId) {

  return baseMapper.getBaseCourseInfo(courseId);

  }

  • dao

  EduCourseMapper接口

  @Component

  public interface EduCourseMapper extends BaseMapper {

  …

  //前台根据课程id，查询课程基础信息

  CourseWebVo getBaseCourseInfo(String courseId);

  }

  Impl实现类xml文件

  SELECT

  ec.id,

  ec.title,

  ec.cover,

  ec.lesson_num AS lessonNum,

  ec.price,

  ec.cover,

  ec.buy_count as buyCount,

  ec.view_count as viewCount,

  esd.description,

  s1.title AS subjectLevelOne,

  s1.id as subjectLevelOneId,

  s2.id as subjectLevelTwoId,

  s2.title AS subjectLevelTwo,

  t.name AS teacherName,

  t.id as teacherId,

  t.avatar,

  t.intro

  FROM

  edu_course ec

  LEFT JOIN edu_teacher t ON ec.teacher_id = t.id

  LEFT JOIN edu_subject s1 ON ec.subject_parent_id = s1.id

  LEFT JOIN edu_subject s2 ON ec.id = s2.id

  left join edu_course_description esd on ec.id = esd.id

  WHERE

  ec.id = #{id}

  • 记得要指定xml配置文件配置，在properties配置文件中

  #配置mapper xml文件的路径

  mybatis-plus.mapper-locations=classpath:com/achang/eduservice/mapper/xml/*.xml

  • 测试

  

  ---

  二、前端部分

  ---

  • api

  guli-front\api\course.js

  import request from ‘@/utils/request’

  export default{

  …

  //根据课程id，查询课程详细信息

  getFrontCourseInfo(courseId){

  return request({

  url: /eduservice/courseFront/getFrontCourseInfo/${courseId},

  method: ‘get’

  })

  }

  }

  • 页面js脚本

  pages/course/_id.vue