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、模型类
课程计划为树型结构，由树根（课程）和树枝（章节）组成，为了保证系统的可扩展性，在系统设计时将课程计划 设置为树型结构。
[AppleScript] 纯文本查看 复制代码 @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组件，如下：
[AppleScript] 纯文本查看 复制代码 [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1‐1'
}]
}]
自定义课程计划结点类如下：
[AppleScript] 纯文本查看 复制代码 @Data @ToString public class TeachplanNode extends Teachplan {
List<TeachplanNode> children; }
3.2.3.3 接口定义
根据课程id查询课程的计划接口如下，在api工程创建course包，创建CourseControllerApi接口类并定义接口方法 如下：
[AppleScript] 纯文本查看 复制代码 public interface CourseControllerApi {
@ApiOperation("课程计划查询")
public TeachplanNode findTeachplanList(String courseId);
}
| 
收藏
淘帖
踩
