Java的新项目学成在线笔记-day6（十一）

3.2.4 前端页面 3.2.4.1Api方法 
定义课程计划查询的api方法：

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

3.2.4.2Api调用 
1、在mounted钩子方法 中查询 课程计划 定义查询课程计划的方法，赋值给数据对象teachplanList

findTeachplan(){    
courseApi.findTeachplanList(this.courseid).then((res) => {     
this.teachplanList = [];//清空树      
if(res.children){     
this.teachplanList = res.children;   
}      
});

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

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

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

[AppleScript] 纯文本查看 复制代码
?
1
defaultProps: { children: 'children', label: 'pname' }

3.2.4.3 测试 

3.3 添加课程计划 3.3.1 需求分析 
用户操作流程：

1、进入课程计划页面，点击“添加课程计划” 2、打开添加课程计划页面，输入课程计划信息

上级结点说明：
不选择上级结点表示当前课程计划为该课程的一级结点。
当添加该课程在课程计划中还没有节点时要自动添加课程的根结点。

3、点击提交。 
3.3.1.1 页面原型说明 
添加课程计划采用弹出窗口组件Dialog。 
1、视图部分
在course_plan.vue页面添加添加课程计划的弹出窗口代码：

                          
          
      视频
            文档   
          
          
         
        
         
         
        
      
             
       
        
            
       
         未发布        
    已发布   
              
      
     
        提交     
     重置   
            
     

2、数据模型
在数据模型中添加如下变量：

在数据对象中添加：

 teachplayFormVisible:false,   
  teachplanRules: {
       pname: [      
    {required: true, message: '请输入课程计划名称', trigger: 'blur'}  
     ],    
   status: [  
        {required: true, message: '请选择状态', trigger: 'blur'}  
     ] 
     },   
  teachplanActive:{},

3、 添加按钮

通过变量teachplayFormVisible控制弹出窗口是否显示。

添加课程计划

4、定义表单提交方法和重置方法

//提交课程计划 addTeachplan(){ 
alert() },
//重置表单 resetForm(){ 
this.teachplanActive = {} },