3.2.2.2 webstorm配置JSX 本组件用到了JSX语法,如下所示: 1、Javascript version 选择 React JSX (如果没有就选择JSX Harmony)

preferences -> Editor -> File Types 中找到上边框中HTML 在下边加一个 *.vue

如果已经在vue template 中已存在.vue 则把它改为.vue2(因为要在Html中添加.vue)

2、模型类 课程计划为树型结构,由树根(课程)和树枝(章节)组成,为了保证系统的可扩展性,在系统设计时将课程计划 设置为树型结构。

@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;  
}

3.2.3.2 自定义模型类 前端页面需要树型结构的数据来展示Tree组件,如下:


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

自定义课程计划结点类如下:


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

3.2.3.3 接口定义 根据课程id查询课程的计划接口如下,在api工程创建course包,创建CourseControllerApi接口类并定义接口方法 如下:

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