微服务[学成在线] day07：课程管理开发

😎 知识点概览

为了方便后续回顾该项目时能够清晰的知道本章节讲了哪些内容，并且能够从该章节的笔记中得到一些帮助，所以在完成本章节的学习后在此对本章节所涉及到的知识点进行总结概述。

本章节为【学成在线】项目的 day07 的内容

• 对课程管理的CRUD
• 级联菜单
• 使用 mongoDB 储存数据字典

目录

内容会比较多，小伙伴们可以根据目录进行按需查阅。

一、课程查询

0x01 需求分析

课程添加完成后可通过我的课程进入课程修改页面，此页面显示我的课程列表，如下图所示，可分页查询。

上边的查询要实现分页、会存在多表关联查询，所以建议使用mybatis实现我的课程查询。

0x02 定义API接口

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

输出结果类型：QueryResponseResult<自定义类型>，在 api 工程创建 course 包，创建CourseControllerApi 接口。

@Api(value="课程管理API",description = "用于对课程的增删查改")
public interface CourseControllerApi {
   
	    @ApiOperation("分页查询课程列表1")
    public QueryResponseResult findCourseList(int page, int size, CourseListRequest courseListRequest);
}

0x03 课程管理服务

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语句，实现分页查询。

1）添加依赖

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

2）配置pageHelper

pagehelper:
  helper‐dialect: mysql

Dao

1）mapper 接口

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映射文件

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

3. 测试dao

//测试分页
@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);
}

测试前修改日志级别为debug，并跟踪运行日志，发现sql语句中已经包括分页语句。

Service

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

 /**
     * 分页查询课程信息
     */
    public QueryResponseResult findCourseList(int pageNum, int size, CourseListRequest courseListRequest){
   
        if(pageNum<=0){
   
            pageNum = 0;
        }
        if(size<=0){
   
            size = 20;
        }
        PageHelper.startPage(pageNum,size);  //设置分页参数
        Page<CourseBase> courseList = courseMapper.findCourseList(courseListRequest);
        QueryResult queryResult = new QueryResult();
        queryResult.setList(courseList.getResult());
        queryResult.setTotal(courseList.getTotal());
        return new QueryResponseResult(CommonCode.SUCCESS,queryResult);
    }

Controller

@RestController
@RequestMapping("/course")
public class CourseController implements CourseControllerApi {
   
    @Autowired
    CourseService 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);
    }
}

测试

使用 postman 或 swagger-ui 测试课程列表接口。

0x04 前端开发

页面编写

创建 ourse_list.vue

1）使用element 的card组件

页面布局代码如下：

<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: [],
        sels: [],//列表选中列
        imgUrl:sysConfig.imgUrl
      }
    },
    methods: {
    
        //分页方法
      handleCurrentChange(val) {
    
        this.page = val;
      },
      //获取课程列表
      getCourse() {
    
      
      },
      handleManage: function (id) {
    
        console.log(id)
        this.$router.push({
     path: '/course/manager/'+id})
      }
    },
    created(){
    
     },
    mounted() {
    
    }
  }
</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