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