一.需求分析

什么是课程计划？
课程计划定义了课程的章节内容，相当于目录，学生通过课程计划进行在线学习，前端页面展示如下图中右侧显示。课程计划包括两级，第一级是课程的大章节、第二级是大章节下属的小章节，每个小章节通常是一段视频，学生点击小章节在线学习。

课程计划查询是将某个课程的课程计划内容完整的显示出来，如下图所示，左侧显示的就是课程计划，课程计划是一个树型结构，方便扩展课程计划的级别。
教学管理人员对课程计划如何管理？功能包括：添加课程计划、删除课程计划、修改课程计划等。
添加：在上边页面中，点击“添加课程计划”即可对课程计划进行添加操作。
修改：点击修改可对某个章节内容进行修改。
删除：点击删除可删除某个章节。

二.页面原型

1.tree组件介绍

本功能使用element-ui 的tree组件来完成
组件标签：

<el‐tree:data="data"show‐checkboxnode‐key="id"default‐expand‐all:expand‐on‐click‐node="false":render‐content="renderContent">
</el‐tree>

数据对象：

export default {data() {return {data: [{id: 1,pname: '一级 1',children: [{id: 4,pname: '二级 1-1',children: [{id: 9,pname: '三级 1-1-1'}, {id: 10,pname: '三级 1-1-2'}]}]}],

2.webstorm配置jsx

本组件用到了JSX语法，如下所示：

renderContent(h, { node, data, store }) {return (<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;"><span><span>{node.label}</span></span><span><el-button style="font-size: 12px;" type="text" on-click={ () => this.choosevideo(data) }>{data.mediaFileOriginalName}&nbsp;&nbsp;&nbsp;&nbsp; 选择视频</el-button><el-button style="font-size: 12px;" type="text" on-click={ () => this.edit(data) }>修改</el-button><el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>删除</el-button></span></span>);},

JSX 是Javascript和XML结合的一种格式，它是React的核心组成部分，JSX和XML语法类似，可以定义属性以及子元
素。唯一特殊的是可以用大括号来加入JavaScript表达式。遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；
遇到代码块（以 { 开头），就用 JavaScript 规则解析。设置方法如下：
1、Javascript version 选择 React JSX （如果没有就选择JSX Harmony）
2、HTML 类型文件中增加vue
preferences -> Editor -> File Types 中找到上边框中HTML 在下边加一个 *.vue
如果已经在vue template 中已存在.vue 则把它改为.vue2(因为要在Html中添加.vue)

三.API接口

1.数据模型

1、表结构

2、模型类
课程计划为树型结构，由树根（课程）和树枝（章节）组成，为了保证系统的可扩展性，在系统设计时将课程计划设置为树型结构。
文件位置：xcEduService01\xc-framework-model\src\main\java\com\xuecheng\framework\domain\course\Teachplan.java

package com.xuecheng.framework.domain.course;import lombok.Data;
import lombok.ToString;
import org.hibernate.annotations.GenericGenerator;import javax.persistence.*;
import java.io.Serializable;@Data
@ToString
@Entity
@Table(name="teachplan")
@GenericGenerator(name = "jpa-uuid", strategy = "uuid")
public class Teachplan implements Serializable {private static final long serialVersionUID = -916357110051689485L;@Id@GeneratedValue(generator = "jpa-uuid")@Column(length = 32)private String id;private String pname;private String parentid;private String grade;private String ptype;private String description;private String courseid;private String status;private Integer orderby;private Double timelength;private String trylearn;}

2.自定义模型类

前端页面需要树型结构的数据来展示Tree组件，如下：

[{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1‐1'
}]
}]

自定义课程计划结点类如下：
文件位置：xcEduService01\xc-framework-model\src\main\java\com\xuecheng\framework\domain\course\ext\TeachplanNode.java

@Data
@ToString
public class TeachplanNode extends Teachplan {
List<TeachplanNode> children;
}

3.接口定义

根据课程id查询课程的计划接口如下，在api工程创建course包，创建CourseControllerApi接口类并定义接口方法如下：
文件位置：xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\course\CourseControllerApi.java

public interface CourseControllerApi {
@ApiOperation("课程计划查询")
public TeachplanNode findTeachplanList(String courseId);
}

四.sql语句

课程计划是树型结构，采用表的自连接方式进行查询，sql语句如下

SELECTa.id one_id,a.pname one_pname,b.id two_id,b.pname two_pname,c.id three_id,c.pname three_pname
FROMteachplan aLEFT JOIN teachplan bON a.id = b.parentidLEFT JOIN teachplan cON b.id = c.parentid
WHERE a.parentid = '0'AND a.courseid = '402885816243d2dd016243f24c030002'
ORDER BY a.orderby,b.orderby,c.orderby

五.服务器端

1.Dao

1）Mapper接口

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

package com.xuecheng.manage_course.dao;import com.xuecheng.framework.domain.course.ext.TeachplanNode;
import org.apache.ibatis.annotations.Mapper;/*** 课程计划mapper* Created by Administrator.*/
@Mapper
public interface TeachplanMapper {//课程计划查询public TeachplanNode selectList(String courseId);
}

2）Mapper映射文件

文件接口：xcEduService01\xc-service-manage-course\src\main\resources\com\xuecheng\manage_course\dao\TeachplanMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.xuecheng.manage_course.dao.TeachplanMapper"><resultMap id="teachplanMap" type="com.xuecheng.framework.domain.course.ext.TeachplanNode"><id column="one_id" property="id"></id><result column="one_pname" property="pname"></result><collection property="children" ofType="com.xuecheng.framework.domain.course.ext.TeachplanNode"><id column="two_id" property="id"></id><result column="two_pname" property="pname"></result><collection property="children" ofType="com.xuecheng.framework.domain.course.ext.TeachplanNode"><id column="three_id" property="id"></id><result column="three_pname" property="pname"></result></collection></collection></resultMap><select id="selectList" parameterType="java.lang.String"resultMap="teachplanMap">SELECTa.id one_id,a.pname one_pname,b.id two_id,b.pname two_pname,c.id three_id,c.pname three_pname
FROMteachplan aLEFT JOIN teachplan bON b.parentid = a.idLEFT JOIN teachplan cON c.parentid = b.id
WHERE a.parentid = '0'
<if test="_parameter !=null and _parameter!=''">AND a.courseid = #{courseId}
</if>ORDER BY a.orderby,b.orderby,c.orderby</select>
</mapper>

说明：针对输入参数为简单类型#{}中可以是任意类型，判断参数是否为空要用 _parameter（它属于mybatis的内置参数）

2.Service

创建CourseService类，定义查询课程计划方法。
文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\service\CourseService.java

@Service
public class CourseService {@AutowiredTeachplanMapper teachplanMapper;@AutowiredTeachplanRepository teachplanRepository;@AutowiredCourseBaseRepository courseBaseRepository;//查询课程计划public TeachplanNode findTeachplanList(String courseId){return teachplanMapper.selectList(courseId);}}

3.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("/teachplan/list/{courseId}")public TeachplanNode findTeachplanList(@PathVariable("courseId") String courseId) {return courseService.findTeachplanList(courseId);}}

4.测试

使用postman或swagger-ui测试查询接口：

Get 请求：http://localhost:31200/course/teachplan/list/402885816243d2dd016243f24c030002

六.前端

1.Api方法

定义课程计划查询的api方法：
文件位置：xc-ui-pc-teach\xc-ui-pc-teach\src\module\course\api\course.js

/*查询课程计划*/
export const findTeachplanList = courseid => {
return http.requestQuickGet(apiUrl+'/course/teachplan/list/'+courseid)
}

2.Api调用

1）定义查询课程计划的方法，赋值给数据对象teachplanList

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

findTeachplan(){this.teachplanList = []//查询课程计划courseApi.findTeachplanList(this.courseid).then(res=>{if(res && res.children){this.teachplanList = res.children;}})
}

2）在mounted钩子中查询课程计划

mounted(){//课程idthis.courseid = this.$route.params.courseid;//查询课程计划this.findTeachplan()
}

3）修改树结点的标签属性

课程计划信息中pname为结点的名称，需要修改树结点的标签属性方可正常显示课程计划名称，如下：

defaultProps:{children: 'children',label: 'pname'
},

4）测试