一.需求分析

课程添加完成后可通过我的课程进入课程修改页面，此页面显示我的课程列表，如下图所示，可分页查询。
上边的查询要实现分页、会存在多表关联查询，所以建议使用mybatis实现我的课程查询。

二.API接口

在api工程创建course包，创建CourseControllerApi接口。
文件位置：xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\course\CourseControllerApi.java

//查询课程列表
@ApiOperation("查询我的课程列表")
public QueryResponseResult<CourseInfo> findCourseList(int page,int size,CourseListRequest courseListRequest
);

输入参数：页码、每页显示个数、查询条件

输出结果类型：QueryResponseResult<自定义类型>

三.PageHelper

1.PageHelper介绍

PageHelper是mybatis的通用分页插件，通过mybatis的拦截器实现分页功能，拦截sql查询请求，添加分页语句，最终实现分页查询功能。

我的课程具有分页功能，本项目使用Pagehelper实现Mybatis分页功能开发，由于本项目使用springboot开发，在springboot上集成pagehelper（https://github.com/pagehelper/pagehelper-spring-boot）

PageHelper的使用方法及原理如下：
在调用dao的service方法中设置分页参数：PageHelper.startPage(page, size)，分页参数会设置在ThreadLocal中PageHelper在mybatis执行sql前进行拦截，从ThreadLocal取出分页参数，修改当前执行的sql语句，添加分页sql。

最后执行添加了分页sql的sql语句，实现分页查询。

2.添加依赖

文件位置：xcEduService01\xc-service-manage-course\pom.xml

<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper‐spring‐boot‐starter</artifactId><version>1.2.4</version>
</dependency>

3.配置pageHelper

在application.yml中配置pageHelper操作的数据库类型：
文件位置：xcEduService01\xc-service-manage-course\src\main\resources\application.yml

pagehelper:helper‐dialect: mysql

四.Dao

1.mapper 接口

文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\dao\CourseMapper.java

import com.github.pagehelper.Page;
import com.xuecheng.framework.domain.course.CourseBase;
import com.xuecheng.framework.domain.course.ext.CourseInfo;
import com.xuecheng.framework.domain.course.request.CourseListRequest;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface CourseMapper {CourseBase findCourseBaseById(String id);	Page<CourseInfo> findCourseListPage(CourseListRequest courseListRequest);
}

2.mapper.xml映射文件

文件位置：xcEduService01\xc-service-manage-course\src\main\resources\com\xuecheng\manage_course\dao\CourseMapper.xml

<select id="findCourseListPage" resultType="com.xuecheng.framework.domain.course.ext.CourseInfo" parameterType="com.xuecheng.framework.domain.course.request.CourseListRequest">SELECTcourse_base.*,(SELECT pic FROM course_pic WHERE courseid = course_base.id) picFROMcourse_base
</select>

3.测试Dao

文件位置：xcEduService01\xc-service-manage-course\src\test\java\com\xuecheng\manage_course\dao\TestDao.java

//测试分页
@Test
public void testPageHelper(){PageHelper.startPage(2, 1);CourseListRequest courseListRequest = new CourseListRequest();Page<CourseInfo> courseListPage = courseMapper.findCourseListPage(courseListRequest);List<CourseInfo> result = courseListPage.getResult();System.out.println(courseListPage);
}

五.Service

定义CourseService.java类，用于课程管理的service定义：

文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\service\CourseService.java

//课程列表分页查询
public QueryResponseResult<CourseInfo> findCourseList(int page,int size,CourseListRequest courseListRequest) {if(courseListRequest == null){courseListRequest = new CourseListRequest();}if(page<=0){page = 0;} if(size<=0){size = 20;} //设置分页参数PageHelper.startPage(page, size);//分页查询Page<CourseInfo> courseListPage = courseMapper.findCourseListPage(courseListRequest);//查询列表List<CourseInfo> list = courseListPage.getResult();//总记录数long total = courseListPage.getTotal();//查询结果集QueryResult<CourseInfo> courseIncfoQueryResult = new QueryResult<CourseInfo>();courseIncfoQueryResult.setList(list);courseIncfoQueryResult.setTotal(total);return new QueryResponseResult<CourseInfo>(CommonCode.SUCCESS, courseIncfoQueryResult);
}

六.Controller

文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\controller\CourseController.java

@RestController
@RequestMapping("/course")
public class CourseController implements CourseControllerApi {@AutowiredCourseService courseService;@Override@GetMapping("/coursebase/list/{page}/{size}")public QueryResponseResult<CourseInfo> findCourseList(@PathVariable("page") int page, @PathVariable("size") int size,CourseListRequest courseListRequest) {return courseService.findCourseList(page,size,courseListRequest);}
}

七.前端

1.创建course_list.vue

使用element 的card组件，页面布局代码如下：
文件位置：xc-ui-pc-teach\src\module\course\page\course_list.vue

<template><section><el-row ><el-col :span="8"  :offset=2 ><el-card :body-style="{ padding: '10px' }"><img src="/static/images/add.jpg" class="image" height="150px"><div style="padding: 10px;"><span>课程名称</span><div class="bottom clearfix"><time class="time"></time><router-link class="mui-tab-item" :to="{path:'/course/add/base'}"><el-button type="text" class="button" >新增课程</el-button></router-link></div></div></el-card></el-col><el-col :span="8" v-for="(course, index) in courses" :key="course.id" :offset="index > 0 ? 2 : 2"><el-card :body-style="{ padding: '10px' }"><img :src="course.pic!=null?imgUrl+course.pic:'/static/images/nonepic.jpg'" class="image" height="150px"><div style="padding: 10px;"><span>{{course.name}}</span><div class="bottom clearfix"><time class="time"></time><el-button type="text" class="button" @click="handleManage(course.id)">管理课程</el-button></div></div></el-card></el-col><!--分页--><el-col :span="24" class="toolbar"><el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="size":total="total" :current-page="page"style="float:right;"></el-pagination></el-col></el-row></section>
</template>
<script>import * as courseApi from '../api/course';import utilApi from '../../../common/utils';let sysConfig = require('@/../config/sysConfig')export default {data() {return {page:1,size:7,total: 0,courses: [{id:'4028e581617f945f01617f9dabc40000',name:'test01',pic:''},{id:'test02',name:'test02',pic:''}],sels: [],//列表选中列imgUrl:sysConfig.imgUrl}},methods: {//分页方法handleCurrentChange(val) {this.page = val;this.getCourse();},//获取课程列表getCourse() {courseApi.findCourseList(this.page,this.size,{}).then((res) => {console.log(res);if(res.success){this.total = res.queryResult.total;this.courses = res.queryResult.list;}});},handleManage: function (id) {console.log(id)this.$router.push({ path: '/course/manager/'+id})}},created(){},mounted() {//查询我的课程this.getCourse();}}
</script>
<style scoped>.el-col-8{width:20%}.el-col-offset-2{margin-left:2%}.time {font-size: 13px;color: #999;}.bottom {margin-top: 13px;line-height: 12px;}.button {padding: 0;float: right;}.image {width: 100%;display: block;}.clearfix:before,.clearfix:after {display: table;content: "";}.clearfix:after {clear: both}
</style>

2.路由

文件位置：xc-ui-pc-teach\src\module\course\router\index.js

import course_list from '@/module/course/page/course_list.vue';
import Home from '@/module/home/page/home.vue';
export default [{path: '/course',component: Home,name: '课程管理',hidden: false,iconCls: 'el-icon-document',children: [{ path: '/course/list', name: '我的课程',component: course_list,hidden: false },}

3.定义API方法

文件位置：xc-ui-pc-teach\src\module\course\api\course.js

//我的课程列表
export const findCourseList = (page,size,params) => {//对于查询条件，向服务端传入key/value串。//使用工具类将json对象转成key/valuelet queries = querystring.stringify(params)return http.requestQuickGet(apiUrl+"/course/coursebase/list/"+page+"/"+size+"?"+queries);
}

4.前端视图course_list.vue详解

文件位置：xc-ui-pc-teach\src\module\course\page\course_list.vue

1）API调用–在视图中调用findCourseList方法

//获取课程列表
getCourse() {courseApi.findCourseList(this.page,this.size,{}).then((res) => {console.log(res);if(res.success){this.total = res.queryResult.total;this.courses = res.queryResult.list;}});
},

2）在mounted钩子中调用getCourse方法

mounted() {//查询我的课程this.getCourse();
}

3）在分页方法中调用getCourse方法

//分页方法
handleCurrentChange(val) {this.page = val;this.getCourse();
}

八.测试结果

页面效果如下：
注意：由于课程图片服务器没有搭建，这里图片暂时无法显示。